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

2025-9-24-21:10

Browse Source
This commit is contained in:
JACKYMYPERSON
2025-09-24 21:10:29 +08:00
parent 19085f6875
commit 940fb884c6
5 changed files with 226 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
miniprogram/pages/chat/chat.wxml
View File

@@ -1,95 +1,4 @@
<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>

57
miniprogram/pages/home/home.ts
View File

@@ -1,8 +1,55 @@
Component({
data: {
data: {
// 用对象存储多个卡片的选中状态，键为卡片ID，值为选中的选项ID
selectedOptions: {} as Record<string, string>
},
methods: {
/**
* 选择选项
* @param e 事件对象，包含卡片ID和选项ID
*/
selectOption(e: WechatMiniprogram.TouchEvent) {
const { card, id } = e.currentTarget.dataset as { card: string; id: string };
},
methods: {
// 更新选中状态（使用对象展开语法保持响应式）
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
});
}
}
});
},
})

283
miniprogram/pages/home/home.wxml
View File

@@ -1,112 +1,177 @@
<view class="search-bar">
<view class="search-input">
<icon type="search" size="16" color="#999"></icon>
<input placeholder="搜索聊天记录" placeholder-class="placeholder-style"/>
<view style="height: 80vh;">
<scroll-view
class="scroll-container"
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 class="voting-card">
<!-- 卡片内容保持不变 -->
<view class="card-header">
<view class="user-info">
<image src="https://picsum.photos/id/91/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="vote-stats">
<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 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="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 style="width: 100vw;display: flex;justify-content: center;">
<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 {{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>
<text class="option-percent">42%</text>
<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>
<!-- 选项2 -->
<view class="option-item {{selectedOption === '2' ? 'selected' : ''}}" bindtap="selectOption" data-id="2">
<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 {{selectedOption === '2' ? 'show' : ''}}">
<text class="iconfont icon-check-circle"></text>
</view>
</view>
<!-- 选项3 -->
<view class="option-item {{selectedOption === '3' ? 'selected' : ''}}" bindtap="selectOption" data-id="3">
<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 {{selectedOption === '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">
<text class="iconfont icon-thumbs-up"></text>
<text class="btn-text">投我一票</text>
</button>
</view>
</scroll-view>
</view>

28
miniprogram/pages/home/home.wxss
View File

@@ -7,28 +7,14 @@
background-color: #f5f7fa;
padding: 20rpx;
}
.scroll-container {
width: 100%;
.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;
}
}
.voting-card {
min-width: calc(100% - 30px); /* 确保在手机上卡片占满宽度 */
/* 其他原有样式保持不变 */
}
/* 投票卡片卡片样式 */
.voting-card {

4
project.private.config.json
View File

@@ -1,6 +1,6 @@
{
"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": {
"compileHotReLoad": true,
"urlCheck": false,
@@ -19,5 +19,5 @@
"checkInvalidKey": true,
"ignoreDevUnusedFiles": true
},
"libVersion": "3.9.0"
"libVersion": "3.10.1"
}