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

Merge branch 'main' of https://github.com/JACKYMYPERSON/toutoukan_front

Browse Source
This commit is contained in:
马懿铭
2025-09-24 22:32:15 +08:00
parent 956d1ace13 ee78ee89e6
commit f8f5fc87dd
7 changed files with 66 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
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>
<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
View File

@@ -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;
}

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

@@ -1,8 +1,55 @@
Component({
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 };
// 更新选中状态（使用对象展开语法保持响应式）
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
miniprogram/pages/index/index.ts
View File

@@ -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: {

5
miniprogram/pages/index/index.wxml
View File

@@ -2,7 +2,10 @@
<scroll-view class="scrollarea" scroll-y type="list">
<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_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-item
wx:for="{{list}}"

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"
}