2025-9-24-21:10
This commit is contained in:
JACKYMYPERSON
@@ -1,95 +1,4 @@
|
|||||||
<view class="message-container">
|
<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>
|
</view>
|
||||||
|
|
||||||
@@ -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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
@@ -1,112 +1,177 @@
|
|||||||
<view class="search-bar">
|
<view style="height: 80vh;">
|
||||||
<view class="search-input">
|
<scroll-view
|
||||||
<icon type="search" size="16" color="#999"></icon>
|
class="scroll-container"
|
||||||
<input placeholder="搜索聊天记录" placeholder-class="placeholder-style"/>
|
scroll-y="true"
|
||||||
|
enable-flex="true"
|
||||||
|
show-scrollbar="true"
|
||||||
|
enhanced="true"
|
||||||
|
scroll-with-animation="true"
|
||||||
|
>
|
||||||
|
<!-- 卡片容器，使用纵向布局 -->
|
||||||
|
<view class="cards-container">
|
||||||
|
<!-- 第一个卡片 -->
|
||||||
|
<view class="voting-card">
|
||||||
|
<!-- 卡片内容保持不变 -->
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="user-info">
|
||||||
|
<image src="https://picsum.photos/id/64/200/200" mode="widthFix" class="avatar" alt="发起者头像"></image>
|
||||||
|
<view class="user-details">
|
||||||
|
<text class="username">张小萌</text>
|
||||||
|
<text class="user-status">需要你的帮助</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="vote-status">进行中</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="divider"></view>
|
||||||
|
|
||||||
|
<view class="vote-title-section">
|
||||||
|
<text class="vote-title">午餐该选哪个？好纠结啊！</text>
|
||||||
|
<text class="vote-desc">大家帮我投个票吧，选择困难症又犯了...</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选项区域 -->
|
||||||
|
<view class="options-container">
|
||||||
|
<!-- 选项1 -->
|
||||||
|
<view class="option-item {{selectedOption1 === '1' ? 'selected' : ''}}" bindtap="selectOption" data-id="1" data-card="1">
|
||||||
|
<view class="option-info">
|
||||||
|
<view class="option-icon bg-red">
|
||||||
|
<text class="iconfont icon-cutlery"></text>
|
||||||
|
</view>
|
||||||
|
<view class="option-details">
|
||||||
|
<text class="option-name">麻辣烫</text>
|
||||||
|
<text class="option-desc">鲜香麻辣，越吃越开胃</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="option-percent">42%</text>
|
||||||
|
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view class="progress-value" style="width: 42%"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="vote-indicator {{selectedOption1 === '1' ? 'show' : ''}}">
|
||||||
|
<text class="iconfont icon-check-circle"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选项2 -->
|
||||||
|
<view class="option-item {{selectedOption1 === '2' ? 'selected' : ''}}" bindtap="selectOption" data-id="2" data-card="1">
|
||||||
|
<view class="option-info">
|
||||||
|
<view class="option-icon bg-yellow">
|
||||||
|
<text class="iconfont icon-coffee"></text>
|
||||||
|
</view>
|
||||||
|
<view class="option-details">
|
||||||
|
<text class="option-name">汉堡套餐</text>
|
||||||
|
<text class="option-desc">快捷方便，配冰可乐</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="option-percent">28%</text>
|
||||||
|
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view class="progress-value" style="width: 28%"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="vote-indicator {{selectedOption1 === '2' ? 'show' : ''}}">
|
||||||
|
<text class="iconfont icon-check-circle"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选项3 -->
|
||||||
|
<view class="option-item {{selectedOption1 === '3' ? 'selected' : ''}}" bindtap="selectOption" data-id="3" data-card="1">
|
||||||
|
<view class="option-info">
|
||||||
|
<view class="option-icon bg-green">
|
||||||
|
<text class="iconfont icon-leaf"></text>
|
||||||
|
</view>
|
||||||
|
<view class="option-details">
|
||||||
|
<text class="option-name">沙拉轻食</text>
|
||||||
|
<text class="option-desc">健康低卡，适合减脂</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="option-percent">30%</text>
|
||||||
|
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view class="progress-value" style="width: 30%"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="vote-indicator {{selectedOption1 === '3' ? 'show' : ''}}">
|
||||||
|
<text class="iconfont icon-check-circle"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="vote-stats">
|
||||||
|
<text class="stats-text">已有 126 人参与投票</text>
|
||||||
|
<text class="stats-text">剩余 23 小时结束</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 投票按钮 -->
|
||||||
|
<button class="vote-btn" bindtap="submitVote" data-card="1">
|
||||||
|
<text class="iconfont icon-thumbs-up"></text>
|
||||||
|
<text class="btn-text">投我一票</text>
|
||||||
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
<view style="width: 100vw;display: flex;justify-content: center;">
|
|
||||||
|
|
||||||
<view class="voting-card">
|
<!-- 第二个卡片 -->
|
||||||
<!-- 卡片头部 -->
|
<view class="voting-card">
|
||||||
<view class="card-header">
|
<!-- 卡片内容保持不变 -->
|
||||||
<view class="user-info">
|
<view class="card-header">
|
||||||
<image src="https://picsum.photos/id/64/200/200" mode="widthFix" class="avatar" alt="发起者头像"></image>
|
<view class="user-info">
|
||||||
<view class="user-details">
|
<image src="https://picsum.photos/id/91/200/200" mode="widthFix" class="avatar" alt="发起者头像"></image>
|
||||||
<text class="username">张小萌</text>
|
<view class="user-details">
|
||||||
<text class="user-status">需要你的帮助</text>
|
<text class="username">李小强</text>
|
||||||
</view>
|
<text class="user-status">团队活动投票</text>
|
||||||
</view>
|
|
||||||
<view class="vote-status">进行中</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="divider"></view>
|
|
||||||
|
|
||||||
<view class="vote-title-section">
|
|
||||||
<text class="vote-title">午餐该选哪个？好纠结啊！</text>
|
|
||||||
<text class="vote-desc">大家帮我投个票吧，选择困难症又犯了...</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 选项区域 -->
|
|
||||||
<view class="options-container">
|
|
||||||
<!-- 选项1 -->
|
|
||||||
<view class="option-item {{selectedOption === '1' ? 'selected' : ''}}" bindtap="selectOption" data-id="1">
|
|
||||||
<view class="option-info">
|
|
||||||
<view class="option-icon bg-red">
|
|
||||||
<text class="iconfont icon-cutlery"></text>
|
|
||||||
</view>
|
|
||||||
<view class="option-details">
|
|
||||||
<text class="option-name">麻辣烫</text>
|
|
||||||
<text class="option-desc">鲜香麻辣，越吃越开胃</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<text class="option-percent">42%</text>
|
<view class="vote-status">进行中</view>
|
||||||
|
|
||||||
<view class="progress-bar">
|
|
||||||
<view class="progress-value" style="width: 42%"></view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="vote-indicator {{selectedOption === '1' ? 'show' : ''}}">
|
|
||||||
<text class="iconfont icon-check-circle"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 选项2 -->
|
<!-- 其余内容省略（与原代码一致） -->
|
||||||
<view class="option-item {{selectedOption === '2' ? 'selected' : ''}}" bindtap="selectOption" data-id="2">
|
<view class="divider"></view>
|
||||||
<view class="option-info">
|
<view class="vote-title-section">
|
||||||
<view class="option-icon bg-yellow">
|
<text class="vote-title">周末团建活动选哪个？</text>
|
||||||
<text class="iconfont icon-coffee"></text>
|
<text class="vote-desc">大家踊跃投票，少数服从多数~</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="option-details">
|
<!-- 选项区域（省略） -->
|
||||||
<text class="option-name">汉堡套餐</text>
|
<view class="vote-stats">
|
||||||
<text class="option-desc">快捷方便，配冰可乐</text>
|
<text class="stats-text">已有 38 人参与投票</text>
|
||||||
|
<text class="stats-text">剩余 45 小时结束</text>
|
||||||
|
</view>
|
||||||
|
<button class="vote-btn" bindtap="submitVote" data-card="2">
|
||||||
|
<text class="iconfont icon-thumbs-up"></text>
|
||||||
|
<text class="btn-text">投我一票</text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 第三个卡片 -->
|
||||||
|
<view class="voting-card">
|
||||||
|
<!-- 卡片内容保持不变 -->
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="user-info">
|
||||||
|
<image src="https://picsum.photos/id/26/200/200" mode="widthFix" class="avatar" alt="发起者头像"></image>
|
||||||
|
<view class="user-details">
|
||||||
|
<text class="username">王小花</text>
|
||||||
|
<text class="user-status">购物选择投票</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<text class="option-percent">28%</text>
|
<view class="vote-status">进行中</view>
|
||||||
|
|
||||||
<view class="progress-bar">
|
|
||||||
<view class="progress-value" style="width: 28%"></view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="vote-indicator {{selectedOption === '2' ? 'show' : ''}}">
|
|
||||||
<text class="iconfont icon-check-circle"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 选项3 -->
|
<!-- 其余内容省略（与原代码一致） -->
|
||||||
<view class="option-item {{selectedOption === '3' ? 'selected' : ''}}" bindtap="selectOption" data-id="3">
|
<view class="divider"></view>
|
||||||
<view class="option-info">
|
<view class="vote-title-section">
|
||||||
<view class="option-icon bg-green">
|
<text class="vote-title">买哪个牌子的笔记本电脑？</text>
|
||||||
<text class="iconfont icon-leaf"></text>
|
<text class="vote-desc">主要用于办公和轻度设计</text>
|
||||||
</view>
|
|
||||||
<view class="option-details">
|
|
||||||
<text class="option-name">沙拉轻食</text>
|
|
||||||
<text class="option-desc">健康低卡，适合减脂</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<text class="option-percent">30%</text>
|
|
||||||
|
|
||||||
<view class="progress-bar">
|
|
||||||
<view class="progress-value" style="width: 30%"></view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="vote-indicator {{selectedOption === '3' ? 'show' : ''}}">
|
|
||||||
<text class="iconfont icon-check-circle"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 选项区域（省略） -->
|
||||||
|
<view class="vote-stats">
|
||||||
|
<text class="stats-text">已有 76 人参与投票</text>
|
||||||
|
<text class="stats-text">剩余 12 小时结束</text>
|
||||||
|
</view>
|
||||||
|
<button class="vote-btn" bindtap="submitVote" data-card="3">
|
||||||
|
<text class="iconfont icon-thumbs-up"></text>
|
||||||
|
<text class="btn-text">投我一票</text>
|
||||||
|
</button>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="vote-stats">
|
|
||||||
<text class="stats-text">已有 126 人参与投票</text>
|
|
||||||
<text class="stats-text">剩余 23 小时结束</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 投票按钮 -->
|
|
||||||
<button class="vote-btn" bindtap="submitVote">
|
|
||||||
<text class="iconfont icon-thumbs-up"></text>
|
|
||||||
<text class="btn-text">投我一票</text>
|
|
||||||
</button>
|
|
||||||
</view>
|
</view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -7,28 +7,14 @@
|
|||||||
background-color: #f5f7fa;
|
background-color: #f5f7fa;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
}
|
}
|
||||||
|
.scroll-container {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.search-bar {
|
}
|
||||||
padding: 16rpx 24rpx;
|
.voting-card {
|
||||||
background-color: #f5f5f7;
|
min-width: calc(100% - 30px); /* 确保在手机上卡片占满宽度 */
|
||||||
}
|
/* 其他原有样式保持不变 */
|
||||||
|
}
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 投票卡片卡片样式 */
|
/* 投票卡片卡片样式 */
|
||||||
.voting-card {
|
.voting-card {
|
||||||
|
|||||||
@@ -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