diff --git a/miniprogram/pages/chat/chat.wxml b/miniprogram/pages/chat/chat.wxml index 027dff1..4f54d87 100644 --- a/miniprogram/pages/chat/chat.wxml +++ b/miniprogram/pages/chat/chat.wxml @@ -1,95 +1,4 @@ - - - - - - - - + - - - - - - - - - - - 王小明 - 10:23 - - - 我们明天上午9点在公司楼下集合吧 - - - - - - - - - - - - 产品研发群 - 昨天 - - - 李设计:新的UI稿已经上传到群文件了 - - - - - - - - - 3 - - - - 系统通知 - 周一 - - - 您有3条新的系统通知待查看 - - - - - - - - - - - - 张小红 - 09-12 - - - 上次你说的那个电影资源能发我一下吗? - - - - - - - - - - - - 生活服务号 - 09-10 - - - 您订阅的服务已更新,点击查看详情 - - - - \ No newline at end of file diff --git a/miniprogram/pages/chat/chat.wxss b/miniprogram/pages/chat/chat.wxss index 623ec5c..e69de29 100644 --- a/miniprogram/pages/chat/chat.wxss +++ b/miniprogram/pages/chat/chat.wxss @@ -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; -} diff --git a/miniprogram/pages/home/home.ts b/miniprogram/pages/home/home.ts index 56987ac..78d0c68 100644 --- a/miniprogram/pages/home/home.ts +++ b/miniprogram/pages/home/home.ts @@ -1,8 +1,55 @@ Component({ - data: { - - }, - methods: { - - }, -}) + data: { + // 用对象存储多个卡片的选中状态,键为卡片ID,值为选中的选项ID + selectedOptions: {} as Record + }, + 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 + }); + } + } + }); + \ No newline at end of file diff --git a/miniprogram/pages/home/home.wxml b/miniprogram/pages/home/home.wxml index 7575d02..1474234 100644 --- a/miniprogram/pages/home/home.wxml +++ b/miniprogram/pages/home/home.wxml @@ -174,4 +174,4 @@ - \ No newline at end of file + diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index f42008c..f31c546 100644 --- a/miniprogram/pages/index/index.ts +++ b/miniprogram/pages/index/index.ts @@ -6,8 +6,10 @@ Component({ label_value: 'label_1', list: [ { label_value: 'label_1', icon: 'home', ariaLabel: '首页' }, - { label_value: 'label_2', icon: 'chat', ariaLabel: '聊天' }, - { label_value: 'label_3', icon: 'user', ariaLabel: '我的' }, + { label_value: 'label_2', icon: 'add', ariaLabel: '聊天' }, + { label_value: 'label_3', icon: 'shop', ariaLabel: '商城' }, + { label_value: 'label_4', icon: 'user', ariaLabel: '我的' }, + ], }, methods: { diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index 5ef006b..8217fd9 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -2,7 +2,10 @@ - + +