upload project
This commit is contained in:
commit
06961cae04
422 changed files with 110626 additions and 0 deletions
214
subpackages/social/tag-friends/tag-friends.js
Normal file
214
subpackages/social/tag-friends/tag-friends.js
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
|
||||
// 标签好友页面
|
||||
const app = getApp();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 标签列表
|
||||
tags: [],
|
||||
// 选中的标签（单选，所以只有一个）
|
||||
selectedTag: null,
|
||||
// 搜索关键词
|
||||
searchKeyword: '',
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 模式：partial_visible 或 exclude_friends
|
||||
mode: 'partial_visible'
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
// 获取传递的参数
|
||||
let selectedTagsStr = options.selectedTags || '[]';
|
||||
const mode = options.mode || 'partial_visible';
|
||||
|
||||
// 如果参数被编码了，需要解码
|
||||
try {
|
||||
selectedTagsStr = decodeURIComponent(selectedTagsStr);
|
||||
} catch (e) {
|
||||
// 如果解码失败，使用原始值
|
||||
console.log('参数未编码，使用原始值');
|
||||
}
|
||||
|
||||
try {
|
||||
const selectedTags = JSON.parse(selectedTagsStr);
|
||||
// 单选，只取第一个
|
||||
this.setData({
|
||||
selectedTag: selectedTags && selectedTags.length > 0 ? selectedTags[0] : null,
|
||||
mode: mode
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('解析选中的标签失败:', e);
|
||||
this.setData({
|
||||
selectedTag: null,
|
||||
mode: mode
|
||||
});
|
||||
}
|
||||
|
||||
// 加载标签列表
|
||||
this.loadTags();
|
||||
},
|
||||
|
||||
// 加载标签列表
|
||||
loadTags() {
|
||||
// TODO: 调用API加载标签列表
|
||||
this.setData({ loading: true });
|
||||
|
||||
// 示例数据
|
||||
const tags = [
|
||||
{
|
||||
id: 1,
|
||||
name: '家人',
|
||||
friends: [
|
||||
{ id: 1, nickname: '爸爸', avatar: '' },
|
||||
{ id: 2, nickname: '妈妈', avatar: '' },
|
||||
{ id: 3, nickname: '哥哥', avatar: '' },
|
||||
{ id: 4, nickname: '姐姐', avatar: '' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '挚友',
|
||||
friends: [
|
||||
{ id: 5, nickname: '张三', avatar: '' },
|
||||
{ id: 6, nickname: '李四', avatar: '' },
|
||||
{ id: 7, nickname: '王五', avatar: '' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '同事',
|
||||
friends: [
|
||||
{ id: 8, nickname: '张海', avatar: '' },
|
||||
{ id: 9, nickname: '李三', avatar: '' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '骑手',
|
||||
friends: [
|
||||
{ id: 10, nickname: '骑手1', avatar: '' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '游戏',
|
||||
friends: [
|
||||
{ id: 11, nickname: '游戏好友1', avatar: '' },
|
||||
{ id: 12, nickname: '游戏好友2', avatar: '' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '同学',
|
||||
friends: [
|
||||
{ id: 13, nickname: '同学1', avatar: '' },
|
||||
{ id: 14, nickname: '同学2', avatar: '' },
|
||||
{ id: 15, nickname: '同学3', avatar: '' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// 立即设置数据，不使用 setTimeout
|
||||
this.setData({
|
||||
tags: tags,
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.log('标签列表已加载:', tags);
|
||||
},
|
||||
|
||||
// 选择标签（单选）
|
||||
selectTag(e) {
|
||||
const tagId = e.currentTarget.dataset.tagId;
|
||||
const tag = this.data.tags.find(t => t.id === tagId);
|
||||
|
||||
if (!tag) return;
|
||||
|
||||
// 单选：如果已选中则取消，否则选中
|
||||
if (this.data.selectedTag && this.data.selectedTag.id === tagId) {
|
||||
this.setData({
|
||||
selectedTag: null
|
||||
});
|
||||
} else {
|
||||
this.setData({
|
||||
selectedTag: tag
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 搜索输入
|
||||
onSearchInput(e) {
|
||||
this.setData({
|
||||
searchKeyword: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 确认选择
|
||||
confirmSelection() {
|
||||
const { selectedTag, mode } = this.data;
|
||||
|
||||
// 检查是否选择了标签
|
||||
if (!selectedTag) {
|
||||
wx.showToast({
|
||||
title: '请选择标签',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 计算好友总数
|
||||
const friendsCount = selectedTag.friends ? selectedTag.friends.length : 0;
|
||||
const selectedTags = [selectedTag]; // 转换为数组格式
|
||||
|
||||
// 生成显示文本：标签名称 + 好友名字列表
|
||||
let displayText = '';
|
||||
if (selectedTag.friends && selectedTag.friends.length > 0) {
|
||||
const friendNames = selectedTag.friends.map(friend => friend.nickname).join('，');
|
||||
displayText = `${selectedTag.name}：${friendNames}`;
|
||||
} else {
|
||||
displayText = `${selectedTag.name}`;
|
||||
}
|
||||
|
||||
// 返回上一页并传递选中的标签
|
||||
const pages = getCurrentPages();
|
||||
const prevPage = pages[pages.length - 2];
|
||||
|
||||
if (prevPage) {
|
||||
if (mode === 'exclude_friends') {
|
||||
// 排除模式
|
||||
if (typeof prevPage.updateExcludeTags === 'function') {
|
||||
prevPage.updateExcludeTags(selectedTags, friendsCount, displayText);
|
||||
}
|
||||
} else {
|
||||
// 部分可见模式
|
||||
if (typeof prevPage.updateSelectedTags === 'function') {
|
||||
prevPage.updateSelectedTags(selectedTags, friendsCount, displayText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
// 获取过滤后的标签列表
|
||||
getFilteredTags() {
|
||||
const { tags, searchKeyword } = this.data;
|
||||
if (!searchKeyword) {
|
||||
return tags;
|
||||
}
|
||||
return tags.filter(tag => {
|
||||
return tag.name.toLowerCase().includes(searchKeyword.toLowerCase()) ||
|
||||
(tag.friends && tag.friends.some(friend =>
|
||||
friend.nickname.toLowerCase().includes(searchKeyword.toLowerCase())
|
||||
));
|
||||
});
|
||||
},
|
||||
|
||||
// 返回
|
||||
navigateBack() {
|
||||
wx.navigateBack();
|
||||
}
|
||||
});
|
||||
|
||||
8
subpackages/social/tag-friends/tag-friends.json
Normal file
8
subpackages/social/tag-friends/tag-friends.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"navigationBarTitleText": "选择标签",
|
||||
"navigationBarBackgroundColor": "#000000",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#000000",
|
||||
"disableScroll": false
|
||||
}
|
||||
|
||||
60
subpackages/social/tag-friends/tag-friends.wxml
Normal file
60
subpackages/social/tag-friends/tag-friends.wxml
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<view class="tag-friends-container">
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-container">
|
||||
<view class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
type="text"
|
||||
placeholder="search"
|
||||
value="{{searchKeyword}}"
|
||||
bindinput="onSearchInput"
|
||||
/>
|
||||
<image class="search-icon" src="/images/Search.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标签列表 -->
|
||||
<scroll-view class="content-scroll" scroll-y enable-back-to-top="{{true}}">
|
||||
<view class="tags-list">
|
||||
<view wx:if="{{tags.length > 0}}">
|
||||
<block wx:for="{{tags}}" wx:key="id" wx:for-item="tag">
|
||||
<view
|
||||
class="tag-item {{selectedTag && selectedTag.id === tag.id ? 'selected' : ''}}"
|
||||
bindtap="selectTag"
|
||||
data-tag-id="{{tag.id}}"
|
||||
>
|
||||
<view class="tag-row">
|
||||
<view class="tag-checkbox">
|
||||
<view class="checkbox {{selectedTag && selectedTag.id === tag.id ? 'checked' : ''}}">
|
||||
<image wx:if="{{selectedTag && selectedTag.id === tag.id}}" src="/images/Selected.svg" mode="aspectFit" class="check-image"></image>
|
||||
<image wx:else src="/images/fram.svg" mode="aspectFit" class="uncheck-image"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tag-main">
|
||||
<text class="tag-name">{{tag.name}}</text>
|
||||
<text wx:if="{{tag.friends}}" class="tag-count">（{{tag.friends.length}}人）</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 好友名字列表 -->
|
||||
<view wx:if="{{tag.friends && tag.friends.length > 0}}" class="friends-names">
|
||||
<text class="friends-names-text">
|
||||
<text wx:for="{{tag.friends}}" wx:key="id" wx:for-item="friend" wx:for-index="index">
|
||||
<text>{{friend.nickname}}</text><text wx:if="{{index < tag.friends.length - 1}}">，</text>
|
||||
</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view wx:else class="empty-tags">
|
||||
<text class="empty-text">暂无标签</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部完成按钮 -->
|
||||
<view class="bottom-action">
|
||||
<button class="confirm-btn" bindtap="confirmSelection">完成</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
179
subpackages/social/tag-friends/tag-friends.wxss
Normal file
179
subpackages/social/tag-friends/tag-friends.wxss
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
/* 页面根容器 */
|
||||
page {
|
||||
background: linear-gradient(180deg, #0a0910 0%, #06151d 50%, #022027 100%);
|
||||
color: #ffffff;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.tag-friends-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #0a0910 0%, #06151d 50%, #022027 100%);
|
||||
}
|
||||
|
||||
/* 搜索框容器 */
|
||||
.search-container {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #202529;
|
||||
border-radius: 50rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 内容滚动区域 */
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
/* 标签列表 */
|
||||
.tags-list {
|
||||
padding: 20rpx 0;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-tags {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 100rpx 0;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
/* 标签项 */
|
||||
.tag-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10rpx;
|
||||
background-color: #20252910;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
|
||||
/* 标签行（checkbox 和 tag-main 在一行） */
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 标签复选框 */
|
||||
.tag-checkbox {
|
||||
margin-right: 30rpx;
|
||||
margin-left: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 选中图标样式 */
|
||||
.check-image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.uncheck-image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 标签主要内容 */
|
||||
.tag-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tag-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tag-count {
|
||||
font-size: 24rpx;
|
||||
color: #888888;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 好友名字列表 */
|
||||
.friends-names {
|
||||
margin-top: 15rpx;
|
||||
padding-left: 30rpx; /* 与 checkbox 对齐 */
|
||||
}
|
||||
|
||||
.friends-names-text {
|
||||
font-size: 24rpx;
|
||||
color: #888888;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 底部操作按钮 */
|
||||
.bottom-action {
|
||||
position: fixed;
|
||||
bottom: 80rpx;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
padding: 10rpx;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background-image: linear-gradient(90deg, #ff6460, #ec42c8, #435cff, #00d3ff);
|
||||
color: #ffffff;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue