Merge branch 'main' of https://github.com/JACKYMYPERSON/toutoukan_front
This commit is contained in:
@@ -1,95 +1,4 @@
|
|||||||
<view class="message-container">
|
<view>
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<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>
|
</view>
|
||||||
|
|
||||||
@@ -1,149 +0,0 @@
|
|||||||
/* 消息列表容器 */
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,8 +1,55 @@
|
|||||||
Component({
|
Component({
|
||||||
data: {
|
data: {
|
||||||
|
// 用对象存储多个卡片的选中状态，键为卡片ID，值为选中的选项ID
|
||||||
|
selectedOptions: {} as Record<string, string>
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
/**
|
||||||
|
* 选择选项
|
||||||
|
* @param e 事件对象，包含卡片ID和选项ID
|
||||||
|
*/
|
||||||
|
selectOption(e: WechatMiniprogram.TouchEvent) {
|
||||||
|
const { card, id } = e.currentTarget.dataset as { card: string; id: string };
|
||||||
|
|
||||||
|
// 更新选中状态（使用对象展开语法保持响应式）
|
||||||
|
this.setData({
|
||||||
|
selectedOptions: {
|
||||||
|
...this.data.selectedOptions,
|
||||||
|
[card]: id
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
})
|
|
||||||
|
/**
|
||||||
|
* 提交投票
|
||||||
|
* @param e 事件对象，包含卡片ID
|
||||||
|
*/
|
||||||
|
submitVote(e: WechatMiniprogram.TouchEvent) {
|
||||||
|
const { card } = e.currentTarget.dataset as { card: string };
|
||||||
|
const selected = this.data.selectedOptions[card];
|
||||||
|
|
||||||
|
if (!selected) {
|
||||||
|
wx.showToast({
|
||||||
|
title: '请先选择一个选项',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 可以通过triggerEvent向父组件传递投票结果
|
||||||
|
this.triggerEvent('voteSuccess', {
|
||||||
|
cardId: card,
|
||||||
|
selectedOption: selected,
|
||||||
|
timestamp: Date.now()
|
||||||
|
});
|
||||||
|
|
||||||
|
wx.showToast({
|
||||||
|
title: '投票成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
@@ -6,8 +6,10 @@ Component({
|
|||||||
label_value: 'label_1',
|
label_value: 'label_1',
|
||||||
list: [
|
list: [
|
||||||
{ label_value: 'label_1', icon: 'home', ariaLabel: '首页' },
|
{ label_value: 'label_1', icon: 'home', ariaLabel: '首页' },
|
||||||
{ label_value: 'label_2', icon: 'chat', ariaLabel: '聊天' },
|
{ label_value: 'label_2', icon: 'add', ariaLabel: '聊天' },
|
||||||
{ label_value: 'label_3', icon: 'user', ariaLabel: '我的' },
|
{ label_value: 'label_3', icon: 'shop', ariaLabel: '商城' },
|
||||||
|
{ label_value: 'label_4', icon: 'user', ariaLabel: '我的' },
|
||||||
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
@@ -2,7 +2,10 @@
|
|||||||
<scroll-view class="scrollarea" scroll-y type="list">
|
<scroll-view class="scrollarea" scroll-y type="list">
|
||||||
<view hidden="{{label_value !== 'label_1'}}"><home-component></home-component></view>
|
<view hidden="{{label_value !== 'label_1'}}"><home-component></home-component></view>
|
||||||
<view hidden="{{label_value !== 'label_2'}}"><chat-component></chat-component></view>
|
<view hidden="{{label_value !== 'label_2'}}"><chat-component></chat-component></view>
|
||||||
<view hidden="{{label_value !== 'label_3'}}"><user-component id="userComp"></user-component></view>
|
<view hidden="{{label_value !== 'label_3'}}">
|
||||||
|
<a></a>
|
||||||
|
</view>
|
||||||
|
<view hidden="{{label_value !== 'label_4'}}"><user-component id="userComp"></user-component></view>
|
||||||
<t-tab-bar t-class="t-tab-bar" value="{{label_value}}" bindchange="onChange" shape="round" theme="tag" split="{{false}}">
|
<t-tab-bar t-class="t-tab-bar" value="{{label_value}}" bindchange="onChange" shape="round" theme="tag" split="{{false}}">
|
||||||
<t-tab-bar-item
|
<t-tab-bar-item
|
||||||
wx:for="{{list}}"
|
wx:for="{{list}}"
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||||
"projectname": "toutoukan",
|
"projectname": "%E6%8A%95%E6%8A%95%E7%9C%8B%E5%B0%8F%E7%A8%8B%E5%BA%8F",
|
||||||
"setting": {
|
"setting": {
|
||||||
"compileHotReLoad": true,
|
"compileHotReLoad": true,
|
||||||
"urlCheck": false,
|
"urlCheck": false,
|
||||||
@@ -19,5 +19,5 @@
|
|||||||
"checkInvalidKey": true,
|
"checkInvalidKey": true,
|
||||||
"ignoreDevUnusedFiles": true
|
"ignoreDevUnusedFiles": true
|
||||||
},
|
},
|
||||||
"libVersion": "3.9.0"
|
"libVersion": "3.10.1"
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user