mayiming/toutoukan_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
马懿铭
2025-08-09 17:41:14 +08:00
parent a35ecb09f3
commit 7e60227aa6
24 changed files with 1103 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
miniprogram/pages/chat/chat.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

8
miniprogram/pages/chat/chat.ts Normal file
View File

@@ -0,0 +1,8 @@
Component({
data: {
},
methods: {
},
})

95
miniprogram/pages/chat/chat.wxml Normal file
View File

@@ -0,0 +1,95 @@
<view class="message-container">
<!-- 搜索栏 -->
<view class="search-bar">
<view class="search-input">
<icon type="search" size="16" color="#999"></icon>
<input placeholder="搜索聊天记录" placeholder-class="placeholder-style"/>
</view>
</view>
<!-- 消息列表 - 不按日期分组 -->
<scroll-view class="message-list" scroll-y>
<!-- 消息项1 - 个人聊天（有未读） -->
<view class="message-item" bindtap="goToChat">
<view class="avatar-container">
<image class="avatar" src="https://picsum.photos/id/64/200/200" mode="cover"></image>
<view class="unread-dot"></view>
</view>
<view class="message-content">
<view class="content-top">
<text class="username">王小明</text>
<text class="time">10:23</text>
</view>
<view class="content-bottom">
<text class="last-message">我们明天上午9点在公司楼下集合吧</text>
</view>
</view>
</view>
<!-- 消息项2 - 群聊 -->
<view class="message-item" bindtap="goToChat">
<view class="avatar-container">
<image class="avatar" src="https://picsum.photos/id/26/200/200" mode="cover"></image>
</view>
<view class="message-content">
<view class="content-top">
<text class="username">产品研发群</text>
<text class="time">昨天</text>
</view>
<view class="content-bottom">
<text class="last-message"><text class="sender">李设计</text>：新的UI稿已经上传到群文件了</text>
</view>
</view>
</view>
<!-- 消息项3 - 系统通知 -->
<view class="message-item" bindtap="goToChat">
<view class="avatar-container">
<image class="avatar" src="https://picsum.photos/id/91/200/200" mode="cover"></image>
<view class="unread-count">3</view>
</view>
<view class="message-content">
<view class="content-top">
<text class="username">系统通知</text>
<text class="time">周一</text>
</view>
<view class="content-bottom">
<text class="last-message">您有3条新的系统通知待查看</text>
</view>
</view>
</view>
<!-- 消息项4 - 个人聊天 -->
<view class="message-item" bindtap="goToChat">
<view class="avatar-container">
<image class="avatar" src="https://picsum.photos/id/65/200/200" mode="cover"></image>
</view>
<view class="message-content">
<view class="content-top">
<text class="username">张小红</text>
<text class="time">09-12</text>
</view>
<view class="content-bottom">
<text class="last-message">上次你说的那个电影资源能发我一下吗？</text>
</view>
</view>
</view>
<!-- 消息项5 - 服务号消息 -->
<view class="message-item" bindtap="goToChat">
<view class="avatar-container">
<image class="avatar" src="https://picsum.photos/id/62/200/200" mode="cover"></image>
</view>
<view class="message-content">
<view class="content-top">
<text class="username">生活服务号</text>
<text class="time">09-10</text>
</view>
<view class="content-bottom">
<text class="last-message">您订阅的服务已更新，点击查看详情</text>
</view>
</view>
</view>
</scroll-view>
</view>

149
miniprogram/pages/chat/chat.wxss Normal file
View File

@@ -0,0 +1,149 @@
/* 消息列表容器 */
.message-container {
background-color: #f5f5f7;
min-height: 100vh;
}
/* 搜索栏样式 */
.search-bar {
padding: 16rpx 24rpx;
background-color: #f5f5f7;
}
.search-input {
display: flex;
align-items: center;
background-color: #eaeaea;
border-radius: 30rpx;
padding: 14rpx 24rpx;
}
.search-input input {
margin-left: 12rpx;
font-size: 28rpx;
flex: 1;
color: #333;
height: 40rpx;
line-height: 40rpx;
}
.placeholder-style {
color: #999;
}
/* 消息列表滚动区域 */
.message-list {
height: calc(100vh - 96rpx); /* 减去搜索栏高度 */
width: 100%;
}
/* 消息项样式 - 已调整高度 */
.message-item {
display: flex;
padding: 16rpx 24rpx; /* 减少内边距 */
background-color: #fff;
border-bottom: 1rpx solid #f1f1f1;
align-items: center;
transition: background-color 0.2s;
height: 120rpx; /* 固定消息项高度 */
}
.message-item:active {
background-color: #f5f5f5;
}
/* 头像容器 */
.avatar-container {
position: relative;
margin-right: 20rpx;
}
/* 头像样式 - 缩小尺寸 */
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 16rpx;
}
/* 未读提示 */
.unread-dot {
position: absolute;
right: 0;
top: 0;
width: 24rpx;
height: 24rpx;
background-color: #ff4d4f;
border-radius: 50%;
border: 4rpx solid #fff;
}
/* 未读数量 */
.unread-count {
position: absolute;
right: 0;
top: 0;
min-width: 28rpx;
height: 28rpx;
line-height: 28rpx;
background-color: #ff4d4f;
border-radius: 14rpx;
border: 4rpx solid #fff;
color: #fff;
font-size: 20rpx;
text-align: center;
padding: 0 8rpx;
}
/* 消息内容区域 */
.message-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
/* 内容顶部（用户名和时间） */
.content-top {
display: flex;
justify-content: space-between;
margin-bottom: 6rpx; /* 减少间距 */
}
.username {
font-size: 30rpx;
color: #333;
font-weight: 500;
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
font-size: 24rpx;
color: #999;
}
/* 内容底部（最后一条消息） */
.content-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.last-message {
font-size: 26rpx; /* 缩小字体 */
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
flex: 1;
}
/* 群聊消息中的发送者 */
.sender {
color: #677fff;
margin-right: 4rpx;
}