upload project
This commit is contained in:
commit
06961cae04
422 changed files with 110626 additions and 0 deletions
74
subpackages/group/caht-groups-list/caht-groups-list.js
Normal file
74
subpackages/group/caht-groups-list/caht-groups-list.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
store:[{
|
||||
avatar:'../../../images/group/testImg.jpg',
|
||||
nickname:'欢乐群',
|
||||
text:'Heyyy',
|
||||
tiem:'16:30'
|
||||
}],
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
const { store } = this.data;
|
||||
// 生成10次重复的数组（fill+flat 一行实现）
|
||||
const repeatedArr = Array(20).fill(store).flat();
|
||||
// 响应式更新：必须用 setData，页面才会渲染新数组
|
||||
this.setData({ repeatedArr });
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
4
subpackages/group/caht-groups-list/caht-groups-list.json
Normal file
4
subpackages/group/caht-groups-list/caht-groups-list.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "群聊列表"
|
||||
}
|
||||
52
subpackages/group/caht-groups-list/caht-groups-list.wxml
Normal file
52
subpackages/group/caht-groups-list/caht-groups-list.wxml
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<view class="telegram-container theme-dark">
|
||||
<!-- 顶部导航 -->
|
||||
<!-- <view class="telegram-header">
|
||||
<view class="header-content">
|
||||
<text class="header-title">聊天</text>
|
||||
<view class="header-actions">
|
||||
🔥 临时调试入口
|
||||
<view class="header-btn debug-btn" bindtap="openNIMTest">
|
||||
<text class="header-icon" style="font-size: 20px;">🧪</text>
|
||||
</view>
|
||||
<view class="header-btn" bindtap="openGlobalSearch">
|
||||
<image class="header-icon" src="/images/Search.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="header-btn" bindtap="markAllRead">
|
||||
<image class="header-icon" src="/images/Icon.png" mode="aspectFit" />
|
||||
</view>
|
||||
暂时注掉
|
||||
<view class="header-btn" bindtap="startNewChat"><text class="header-icon">➕</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="telegram-header">
|
||||
<view class="Search-header-left">
|
||||
<input class="Search-input" type="text" placeholder="Search" />
|
||||
<image class="Search-img" src="../../../images/group/Search.svg" mode="" />
|
||||
</view>
|
||||
<view class="telegram-header-right">
|
||||
<image class="Search-img-add" src="../../../images/group/add.svg" mode="" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 聊天内容 -->
|
||||
<scroll-view class="telegram-content" scroll-y="true" refresher-enabled="true" refresher-triggered="{{refreshing}}"
|
||||
bindrefresherrefresh="onRefresh">
|
||||
<view class="chat-conten">
|
||||
<view class="conten-area" wx:for="{{repeatedArr}}" wx:key="index">
|
||||
<view class="conten-area-left">
|
||||
<image class="conten-area-img" src="{{item.avatar}}" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="conten-area-center">
|
||||
<view class="center-text">
|
||||
<view class="center-titel">{{item.nickname}}</view>
|
||||
<text>{{item.text}}</text>
|
||||
</view>
|
||||
<view class="center-time">
|
||||
{{item.tiem}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
589
subpackages/group/caht-groups-list/caht-groups-list.wxss
Normal file
589
subpackages/group/caht-groups-list/caht-groups-list.wxss
Normal file
|
|
@ -0,0 +1,589 @@
|
|||
/* 🎨 现代化消息页面设计 - 深色主题 */
|
||||
|
||||
/* 🎨 CSS变量定义 - 黑色主题 */
|
||||
page {
|
||||
--primary-color: #0A84FF;
|
||||
--primary-light: #3EA8FF;
|
||||
--primary-dark: #0056CC;
|
||||
--background-color: #070709;
|
||||
--surface-color: #0F0F11;
|
||||
--text-primary: #ECECEC;
|
||||
--text-secondary: #A8A8A8;
|
||||
--text-tertiary: #7A7A7A;
|
||||
--border-color: rgba(255,255,255,0.06);
|
||||
--shadow-light: 0 1rpx 6rpx rgba(0,0,0,0.6);
|
||||
--shadow-medium: 0 6rpx 18rpx rgba(0,0,0,0.7);
|
||||
--radius-small: 8rpx;
|
||||
--radius-medium: 12rpx;
|
||||
--radius-large: 20rpx;
|
||||
--safe-area-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* 🌙 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
page {
|
||||
--primary-color: #0A84FF;
|
||||
--primary-light: #64D2FF;
|
||||
--primary-dark: #0056CC;
|
||||
--background-color: #000000;
|
||||
--surface-color: #1C1C1E;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #48484A;
|
||||
--border-color: #38383A;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.telegram-container {
|
||||
min-height: 100vh;
|
||||
/* height: calc( 100vh - 250px); */
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--safe-area-bottom);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: var(--text-primary);
|
||||
transition: background-color 280ms ease, color 280ms ease, background 280ms ease;
|
||||
/* border: 10rpx solid red; */
|
||||
font-weight: 24rpx;
|
||||
|
||||
}
|
||||
|
||||
/* 关键区域同步过渡，避免突变 */
|
||||
.search-section,
|
||||
.search-bar,
|
||||
.conversation-item,
|
||||
.empty-state,
|
||||
.telegram-header {
|
||||
transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
|
||||
}
|
||||
.telegram-header{
|
||||
/* border: 1px solid red; */
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
margin-top: 20rpx;
|
||||
|
||||
}
|
||||
.Search-header-left{
|
||||
width: 640rpx;
|
||||
height: 80rpx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 40rpx;
|
||||
|
||||
}
|
||||
.Search-input{
|
||||
width: 80%;
|
||||
/* border: 1px solid red; */
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
.Search-img{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.Search-img-add{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
vertical-align: bottom;
|
||||
margin-left: 20rpx;
|
||||
|
||||
}
|
||||
.group-chat{
|
||||
height: 120rpx;
|
||||
/* border: 1px solid red; */
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
background-color: #1A1A1A;
|
||||
|
||||
|
||||
}
|
||||
.group-chat-conten{
|
||||
/* border: 1px solid red; */
|
||||
display: flex;
|
||||
justify-content:space-around;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
width: 660rpx;
|
||||
}
|
||||
.chat-left{
|
||||
/* border: 1px solid red; */
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background-color:#212121;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
.chat-text{
|
||||
width: 500rpx;
|
||||
height: 76rpx;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.titel{
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.chat-img{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.chat-img-rigth{
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 50rpx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.chat-conten{
|
||||
height: 100%;
|
||||
/* border: 1px solid red; */
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 100rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.conten-area{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 130rpx;
|
||||
background-color:#212121;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 0;
|
||||
margin-top: 10rpx;
|
||||
width: 650rpx;
|
||||
margin-left: 50rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.conten-area-img{
|
||||
height: 100rpx;
|
||||
width:100rpx;
|
||||
border-radius: 24rpx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.conten-area-center{
|
||||
|
||||
width: 500rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.center-titel{
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.header-content {
|
||||
height: 66rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start; /* 改为起始对齐，按钮通过 margin-left:auto 靠右 */
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.4);
|
||||
}
|
||||
.center-time{
|
||||
/* border: 1px solid red; */
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-left: auto; /* 将按钮组推到最右侧 */
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
width: 50rpx; /* 与图标一致，避免可见留白 */
|
||||
height: 50rpx;
|
||||
border-radius: 8rpx; /* 小幅圆角以贴合图片边缘 */
|
||||
background: transparent; /* 透明，无底色 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s ease; /* 去掉背景过渡，仅保留轻微缩放反馈 */
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 🎨 现代化内容区域 */
|
||||
.telegram-content {
|
||||
/* flex: 1; */
|
||||
height: 90vh;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* 让内容自然流式布局，避免覆盖搜索栏与头部 */
|
||||
/* position: relative; */
|
||||
/* border: 10px solid greenyellow; */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
/* padding-bottom: 260rpx */
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.telegram-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 🎨 现代化搜索栏 */
|
||||
.search-section {
|
||||
padding: 20rpx 32rpx;
|
||||
background: var(--background-color);
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
animation: searchSlideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes searchSlideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
height: 80rpx;
|
||||
background: var(--background-color);
|
||||
border: 1rpx solid var(--border-color);
|
||||
border-radius: var(--radius-large);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 28rpx;
|
||||
gap: 16rpx;
|
||||
box-shadow: var(--shadow-light);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.search-bar:focus-within {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 6rpx rgba(10,132,255,0.06);
|
||||
}
|
||||
|
||||
.search-icon { color: var(--text-secondary); font-size:32rpx; }
|
||||
.search-input { flex:1; font-size:32rpx; color:var(--text-primary); background:transparent }
|
||||
.search-input::placeholder {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.search-cancel {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: var(--radius-small);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.search-cancel:active {
|
||||
background: rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.cancel-text {
|
||||
font-size: 32rpx;
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 🎨 现代化会话列表 */
|
||||
.conversations-section {
|
||||
background: transparent;
|
||||
border-radius: var(--radius-large) var(--radius-large) 0 0;
|
||||
margin-top: 16rpx;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
padding-bottom: 200rpx; /* 保留空间给底部操作栏，避免白条 */
|
||||
}
|
||||
|
||||
/* 更紧凑 + 国际化（略微灰背景 & 居中收窄） */
|
||||
.conversation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 22rpx 28rpx; /* 缩小整体高度与左右留白 */
|
||||
transition: all 0.22s ease;
|
||||
position: relative;
|
||||
background: rgba(255,255,255,0.05); /* 更明显的浅灰块（暗色） */
|
||||
margin: 0 auto 16rpx; /* 底部分隔形成卡片间距 */
|
||||
width: 100%;
|
||||
max-width: 1180rpx; /* 大屏时不过宽 */
|
||||
border-radius: 20rpx; /* 轻圆角 */
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
border: 1rpx solid rgba(255,255,255,0.10); /* 明确边界 */
|
||||
box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.35), 0 4rpx 14rpx -4rpx rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.conversation-item:active { background: rgba(255,255,255,0.08); transform: scale(0.992); }
|
||||
|
||||
.conversation-item:last-child { border-bottom: none; }
|
||||
|
||||
/* 🎨 现代化头像设计 */
|
||||
.conversation-avatar { position: relative; margin-right: 28rpx; }
|
||||
.avatar-image { width:108rpx; height:108rpx; border-radius:54rpx; box-shadow: var(--shadow-light); border: 2rpx solid rgba(255,255,255,0.03); }
|
||||
.avatar-placeholder { width:108rpx; height:108rpx; border-radius:54rpx; background: linear-gradient(135deg, #151516 0%, #0F0F11 100%); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-light); }
|
||||
.avatar-text { font-size:40rpx; font-weight:600; color:var(--text-primary); }
|
||||
|
||||
/* 在线状态角标（右下角小圆点） */
|
||||
.presence-indicator {
|
||||
position: absolute;
|
||||
right: 2rpx;
|
||||
bottom: 2rpx;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid var(--surface-color);
|
||||
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.35);
|
||||
z-index: 3;
|
||||
}
|
||||
.presence-indicator.online { background: #2ECC71; }
|
||||
.presence-indicator.offline { background: #9E9E9E; opacity: 0.9; }
|
||||
|
||||
/* 🎨 现代化未读徽章 */
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
top: -6rpx;
|
||||
right: -6rpx;
|
||||
min-width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 22rpx;
|
||||
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3rpx solid var(--surface-color);
|
||||
box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.6);
|
||||
z-index: 2;
|
||||
}
|
||||
.unread-count { font-size:22rpx; font-weight:700; color:white }
|
||||
|
||||
/* 🎨 现代化会话信息 */
|
||||
.conversation-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.conversation-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.conversation-name {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
font-size: 34rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
/* 允许在 flex 容器内正确触发省略号 */
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.conversation-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
/* 保留时间+静音的显示空间，避免被名称挤没 */
|
||||
flex: 0 0 auto;
|
||||
flex-shrink: 0;
|
||||
min-width: 120rpx;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.conversation-time {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
white-space: nowrap;
|
||||
/* 避免被压缩隐藏 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mute-icon {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 🎨 现代化会话预览 */
|
||||
.conversation-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.last-message {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-indicators {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
color: var(--text-secondary);
|
||||
font-size: 20rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.status-indicator.read {
|
||||
color: var(--primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 🎨 现代化空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64rpx;
|
||||
color: rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-subtitle {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 📱 响应式设计 - 适配不同屏幕尺寸 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.conversation-item {
|
||||
padding: 20rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.avatar-image, .avatar-placeholder {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
|
||||
.conversation-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.last-message {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
.conversation-item {
|
||||
padding: 24rpx 30rpx; /* 即便大屏也保持克制 */
|
||||
}
|
||||
|
||||
.avatar-image, .avatar-placeholder {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
.conversation-name {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.last-message {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 🎨 会话项增强功能 */
|
||||
.conversation-item.pinned {
|
||||
background: linear-gradient(90deg, rgba(0, 122, 255, 0.05) 0%, transparent 100%);
|
||||
border-left: 4rpx solid var(--primary-color);
|
||||
}
|
||||
|
||||
.conversation-item.muted .conversation-name {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.conversation-item.muted .last-message {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 🎨 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80rpx 32rpx;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid var(--border-color);
|
||||
border-top: 4rpx solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 🎨 搜索结果高亮 */
|
||||
.search-highlight {
|
||||
background: linear-gradient(135deg, rgba(255, 235, 59, 0.3) 0%, rgba(255, 193, 7, 0.3) 100%);
|
||||
border-radius: 4rpx;
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
89
subpackages/group/create-group-chat/create-group-chat.js
Normal file
89
subpackages/group/create-group-chat/create-group-chat.js
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
// pages/group/create-group-chat/create-group-chat.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
refreshing: true,
|
||||
chaArrs: [
|
||||
{
|
||||
chatAvater: '/images/tp.webp',
|
||||
chatAvaterText: 'Guodong Chow'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
let tempArr = [];
|
||||
for (let index = 0; index < 20; index++) {
|
||||
tempArr.push({
|
||||
chatAvater: '/images/tp.webp',
|
||||
chatAvaterText: 'Guodong Chow'
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
chaArrs: tempArr
|
||||
})
|
||||
console.log('123', this.data.chaArrs);
|
||||
},
|
||||
|
||||
|
||||
|
||||
onRefresh(){
|
||||
console.log("下拉刷新");
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "建立群聊"
|
||||
}
|
||||
31
subpackages/group/create-group-chat/create-group-chat.wxml
Normal file
31
subpackages/group/create-group-chat/create-group-chat.wxml
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<view class="chatConten">
|
||||
<view class="chatOne">
|
||||
<view class="chatInput">
|
||||
<input class="inputConten" type="text" placeholder="请输入搜索字段" />
|
||||
<image class="chatIcon" src="/images/emoji/Icon.svg" mode="" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="chatOne chatTwo">
|
||||
<view class="search">
|
||||
<view class="searchText">
|
||||
已选择
|
||||
<text class="searchNumber">10</text>
|
||||
个好友
|
||||
</view>
|
||||
<view class="searchButton">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="chatArr" scroll-y="true" >
|
||||
<view class="chatTiem" wx:for="{{chaArrs}}" wx:key="index">
|
||||
<view class="chatleft">
|
||||
<image class="chatAvater" src="{{item.chatAvater}}" mode="" />
|
||||
<text class="chatAvaterText">{{item.chatAvaterText}} {{index}}</text>
|
||||
</view>
|
||||
<view class="chaRight">
|
||||
<view class="chatSelect"></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
639
subpackages/group/create-group-chat/create-group-chat.wxss
Normal file
639
subpackages/group/create-group-chat/create-group-chat.wxss
Normal file
|
|
@ -0,0 +1,639 @@
|
|||
/* 👥 创建群聊页面样式 */
|
||||
|
||||
/* CSS变量定义 */
|
||||
page {
|
||||
--primary-color: #007AFF;
|
||||
--primary-light: #5AC8FA;
|
||||
--primary-dark: #0051D5;
|
||||
--success-color: #34C759;
|
||||
--background-color: #F2F2F7;
|
||||
--surface-color: #FFFFFF;
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #C7C7CC;
|
||||
--border-color: #E5E5EA;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
--radius-small: 8rpx;
|
||||
--radius-medium: 12rpx;
|
||||
--radius-large: 20rpx;
|
||||
}
|
||||
|
||||
/* 🌙 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
page {
|
||||
--primary-color: #0A84FF;
|
||||
--primary-light: #64D2FF;
|
||||
--primary-dark: #0056CC;
|
||||
--success-color: #30D158;
|
||||
--background-color: #000000;
|
||||
--surface-color: #1C1C1E;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #48484A;
|
||||
--border-color: #38383A;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.create-group-container {
|
||||
height: 100vh;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 🎨 自定义导航栏 */
|
||||
.custom-navbar {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
||||
box-shadow: var(--shadow-medium);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.navbar-left, .navbar-right {
|
||||
width: 120rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-medium);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.navbar-left:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.create-text {
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.create-text.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.create-text:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 🎨 页面内容 */
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
/* 🎨 群信息设置 */
|
||||
.group-info-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.group-avatar-setting {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: var(--radius-large);
|
||||
overflow: hidden;
|
||||
border: 2rpx solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.avatar-container:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
font-size: 48rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.group-name-setting,
|
||||
.group-desc-setting {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.group-desc-setting {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.label-required {
|
||||
font-size: 28rpx;
|
||||
color: #FF3B30;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.group-name-input,
|
||||
.group-desc-input {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
border-radius: var(--radius-small);
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
background: var(--background-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.group-name-input:focus,
|
||||
.group-desc-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.group-desc-input {
|
||||
min-height: 120rpx;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.input-counter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.counter-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 🎨 成员选择 */
|
||||
.member-selection-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.member-count {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--background-color);
|
||||
border: 1rpx solid var(--border-color);
|
||||
border-radius: var(--radius-small);
|
||||
padding: 0 24rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input-wrapper:focus-within {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
background: var(--text-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.clear-search:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 24rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 已选成员 */
|
||||
.selected-members {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 24rpx;
|
||||
background: var(--background-color);
|
||||
border-radius: var(--radius-small);
|
||||
border: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.selected-member-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--primary-color);
|
||||
border-radius: 32rpx;
|
||||
padding: 8rpx 16rpx 8rpx 8rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.selected-member-item:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.selected-avatar {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.selected-name {
|
||||
font-size: 26rpx;
|
||||
color: white;
|
||||
margin-right: 12rpx;
|
||||
max-width: 120rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 好友列表 */
|
||||
.friends-list {
|
||||
max-height: 600rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.friend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.friend-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.friend-item:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.friend-item.selected {
|
||||
background: rgba(0, 122, 255, 0.05);
|
||||
}
|
||||
|
||||
.friend-avatar-container {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.selection-indicator {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
right: -8rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid var(--surface-color);
|
||||
background: var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.selection-indicator.selected {
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
.indicator-icon {
|
||||
font-size: 24rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.friend-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.friend-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.friend-status {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 🎨 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80rpx 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 24rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 🎨 群设置 */
|
||||
.group-settings-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.group-settings-section .section-title {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.setting-items {
|
||||
border-radius: var(--radius-small);
|
||||
overflow: hidden;
|
||||
border: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-item:active {
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.setting-switch {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
/* 🎨 加载状态 */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid var(--border-color);
|
||||
border-top: 4rpx solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 📱 响应式设计 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.page-content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.group-info-section,
|
||||
.member-selection-section,
|
||||
.group-settings-section {
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
.selection-indicator {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
.page-content {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.group-info-section,
|
||||
.member-selection-section,
|
||||
.group-settings-section {
|
||||
padding: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
}
|
||||
365
subpackages/group/create-group/create-group.js
Normal file
365
subpackages/group/create-group/create-group.js
Normal file
|
|
@ -0,0 +1,365 @@
|
|||
// 👥 创建群聊页面逻辑
|
||||
const app = getApp();
|
||||
const groupChatManager = require('../../../utils/group-chat-manager.js');
|
||||
const apiClient = require('../../../utils/api-client.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 系统信息
|
||||
statusBarHeight: 44,
|
||||
navBarHeight: 88,
|
||||
|
||||
// 群信息
|
||||
groupName: '',
|
||||
groupDescription: '',
|
||||
groupAvatar: '',
|
||||
|
||||
// 配置限制
|
||||
maxGroupNameLength: 20,
|
||||
maxDescriptionLength: 200,
|
||||
|
||||
// 成员选择
|
||||
friendsList: [],
|
||||
filteredFriends: [],
|
||||
selectedMembers: [],
|
||||
searchKeyword: '',
|
||||
|
||||
// 群设置
|
||||
allowMemberInvite: true,
|
||||
saveToContacts: true,
|
||||
showQRCode: true,
|
||||
|
||||
// 状态
|
||||
isCreating: false,
|
||||
canCreate: false
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
|
||||
// 获取系统信息
|
||||
this.getSystemInfo();
|
||||
|
||||
// 加载好友列表
|
||||
this.loadFriendsList();
|
||||
|
||||
// 处理预选成员
|
||||
if (options.preSelectedMembers) {
|
||||
try {
|
||||
const preSelected = JSON.parse(decodeURIComponent(options.preSelectedMembers));
|
||||
this.setData({
|
||||
selectedMembers: preSelected
|
||||
});
|
||||
this.updateCanCreate();
|
||||
} catch (error) {
|
||||
console.error('❌ 解析预选成员失败:', error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
// 获取系统信息
|
||||
getSystemInfo() {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
this.setData({
|
||||
statusBarHeight: systemInfo.statusBarHeight || 44,
|
||||
navBarHeight: 88
|
||||
});
|
||||
},
|
||||
|
||||
// 加载好友列表
|
||||
async loadFriendsList() {
|
||||
try {
|
||||
wx.showLoading({
|
||||
title: '加载好友列表...'
|
||||
});
|
||||
|
||||
const response = await apiClient.request({
|
||||
url: '/api/v1/friends',
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
wx.hideLoading();
|
||||
|
||||
if (response.success) {
|
||||
const friends = response.data || [];
|
||||
|
||||
// 标记已选择的好友
|
||||
const friendsWithSelection = friends.map(friend => ({
|
||||
...friend,
|
||||
selected: this.data.selectedMembers.some(member => member.userId === friend.userId)
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
friendsList: friendsWithSelection,
|
||||
filteredFriends: friendsWithSelection
|
||||
});
|
||||
|
||||
} else {
|
||||
throw new Error(response.error || '加载好友列表失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
wx.hideLoading();
|
||||
console.error('❌ 加载好友列表失败:', error);
|
||||
wx.showToast({
|
||||
title: '加载好友列表失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 👥 ===== 群信息设置 =====
|
||||
|
||||
// 选择群头像
|
||||
selectGroupAvatar() {
|
||||
|
||||
wx.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
this.setData({
|
||||
groupAvatar: tempFilePath
|
||||
});
|
||||
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 选择群头像失败:', error);
|
||||
wx.showToast({
|
||||
title: '选择头像失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 群名称输入
|
||||
onGroupNameInput(e) {
|
||||
const value = e.detail.value;
|
||||
this.setData({
|
||||
groupName: value
|
||||
});
|
||||
this.updateCanCreate();
|
||||
},
|
||||
|
||||
// 群描述输入
|
||||
onGroupDescInput(e) {
|
||||
const value = e.detail.value;
|
||||
this.setData({
|
||||
groupDescription: value
|
||||
});
|
||||
},
|
||||
|
||||
// 👤 ===== 成员选择 =====
|
||||
|
||||
// 搜索输入
|
||||
onSearchInput(e) {
|
||||
const keyword = e.detail.value;
|
||||
this.setData({
|
||||
searchKeyword: keyword
|
||||
});
|
||||
this.filterFriends(keyword);
|
||||
},
|
||||
|
||||
// 清除搜索
|
||||
clearSearch() {
|
||||
this.setData({
|
||||
searchKeyword: ''
|
||||
});
|
||||
this.filterFriends('');
|
||||
},
|
||||
|
||||
// 过滤好友
|
||||
filterFriends(keyword) {
|
||||
let filtered = this.data.friendsList;
|
||||
|
||||
if (keyword.trim()) {
|
||||
filtered = this.data.friendsList.filter(friend => {
|
||||
const name = (friend.nickname || friend.username || '').toLowerCase();
|
||||
return name.includes(keyword.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
this.setData({
|
||||
filteredFriends: filtered
|
||||
});
|
||||
},
|
||||
|
||||
// 切换成员选择
|
||||
toggleMember(e) {
|
||||
const userId = e.currentTarget.dataset.userId;
|
||||
const friend = this.data.friendsList.find(f => f.userId === userId);
|
||||
|
||||
if (!friend) return;
|
||||
|
||||
let selectedMembers = [...this.data.selectedMembers];
|
||||
let friendsList = [...this.data.friendsList];
|
||||
let filteredFriends = [...this.data.filteredFriends];
|
||||
|
||||
const isSelected = selectedMembers.some(member => member.userId === userId);
|
||||
|
||||
if (isSelected) {
|
||||
// 移除选择
|
||||
selectedMembers = selectedMembers.filter(member => member.userId !== userId);
|
||||
} else {
|
||||
// 添加选择
|
||||
selectedMembers.push(friend);
|
||||
}
|
||||
|
||||
// 更新好友列表的选择状态
|
||||
friendsList = friendsList.map(f => ({
|
||||
...f,
|
||||
selected: selectedMembers.some(member => member.userId === f.userId)
|
||||
}));
|
||||
|
||||
filteredFriends = filteredFriends.map(f => ({
|
||||
...f,
|
||||
selected: selectedMembers.some(member => member.userId === f.userId)
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
selectedMembers: selectedMembers,
|
||||
friendsList: friendsList,
|
||||
filteredFriends: filteredFriends
|
||||
});
|
||||
|
||||
this.updateCanCreate();
|
||||
},
|
||||
|
||||
// 移除成员
|
||||
removeMember(e) {
|
||||
const userId = e.currentTarget.dataset.userId;
|
||||
|
||||
let selectedMembers = this.data.selectedMembers.filter(member => member.userId !== userId);
|
||||
let friendsList = [...this.data.friendsList];
|
||||
let filteredFriends = [...this.data.filteredFriends];
|
||||
|
||||
// 更新好友列表的选择状态
|
||||
friendsList = friendsList.map(f => ({
|
||||
...f,
|
||||
selected: selectedMembers.some(member => member.userId === f.userId)
|
||||
}));
|
||||
|
||||
filteredFriends = filteredFriends.map(f => ({
|
||||
...f,
|
||||
selected: selectedMembers.some(member => member.userId === f.userId)
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
selectedMembers: selectedMembers,
|
||||
friendsList: friendsList,
|
||||
filteredFriends: filteredFriends
|
||||
});
|
||||
|
||||
this.updateCanCreate();
|
||||
},
|
||||
|
||||
// ⚙️ ===== 群设置 =====
|
||||
|
||||
// 允许成员邀请设置变化
|
||||
onAllowInviteChange(e) {
|
||||
this.setData({
|
||||
allowMemberInvite: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 保存到通讯录设置变化
|
||||
onSaveContactsChange(e) {
|
||||
this.setData({
|
||||
saveToContacts: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 显示群二维码设置变化
|
||||
onShowQRCodeChange(e) {
|
||||
this.setData({
|
||||
showQRCode: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 🎯 ===== 群聊创建 =====
|
||||
|
||||
// 更新是否可以创建
|
||||
updateCanCreate() {
|
||||
const canCreate = this.data.groupName.trim().length > 0 && this.data.selectedMembers.length > 0;
|
||||
this.setData({
|
||||
canCreate: canCreate
|
||||
});
|
||||
},
|
||||
|
||||
// 创建群聊
|
||||
async createGroup() {
|
||||
if (!this.data.canCreate || this.data.isCreating) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.setData({
|
||||
isCreating: true
|
||||
});
|
||||
|
||||
// 构建群聊信息
|
||||
const groupInfo = {
|
||||
name: this.data.groupName.trim(),
|
||||
description: this.data.groupDescription.trim(),
|
||||
avatar: this.data.groupAvatar,
|
||||
memberIds: this.data.selectedMembers.map(member => member.userId),
|
||||
settings: {
|
||||
allowMemberInvite: this.data.allowMemberInvite,
|
||||
saveToContacts: this.data.saveToContacts,
|
||||
showQRCode: this.data.showQRCode
|
||||
}
|
||||
};
|
||||
|
||||
// 调用群聊管理器创建群聊
|
||||
const result = await groupChatManager.createGroup(groupInfo);
|
||||
|
||||
this.setData({
|
||||
isCreating: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
wx.showToast({
|
||||
title: '群聊创建成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 跳转到群聊页面
|
||||
setTimeout(() => {
|
||||
wx.redirectTo({
|
||||
url: `/pages/message/chat/chat?chatType=1&targetId=${result.data.groupId}&chatName=${encodeURIComponent(result.data.name)}`
|
||||
});
|
||||
}, 1500);
|
||||
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: result.error || '创建群聊失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
isCreating: false
|
||||
});
|
||||
|
||||
console.error('❌ 创建群聊失败:', error);
|
||||
wx.showToast({
|
||||
title: '创建群聊失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 🧭 ===== 页面导航 =====
|
||||
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
wx.navigateBack();
|
||||
}
|
||||
});
|
||||
|
||||
7
subpackages/group/create-group/create-group.json
Normal file
7
subpackages/group/create-group/create-group.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#F2F2F7",
|
||||
"backgroundTextStyle": "dark",
|
||||
"enablePullDownRefresh": false,
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
191
subpackages/group/create-group/create-group.wxml
Normal file
191
subpackages/group/create-group/create-group.wxml
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<!-- 👥 创建群聊页面 -->
|
||||
<view class="create-group-container">
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="navbar-content" style="height: {{navBarHeight}}px;">
|
||||
<view class="navbar-left" bindtap="goBack">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
|
||||
<view class="navbar-title">
|
||||
<text class="title-text">创建群聊</text>
|
||||
</view>
|
||||
|
||||
<view class="navbar-right" bindtap="createGroup">
|
||||
<text class="create-text {{canCreate ? 'active' : ''}}">创建</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<scroll-view class="page-content" scroll-y="true">
|
||||
<!-- 群信息设置 -->
|
||||
<view class="group-info-section">
|
||||
<!-- 群头像 -->
|
||||
<view class="group-avatar-setting">
|
||||
<view class="avatar-container" bindtap="selectGroupAvatar">
|
||||
<image wx:if="{{groupAvatar}}"
|
||||
class="group-avatar"
|
||||
src="{{groupAvatar}}"
|
||||
mode="aspectFill" />
|
||||
<view wx:else class="avatar-placeholder">
|
||||
<text class="avatar-icon">📷</text>
|
||||
<text class="avatar-text">设置群头像</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群名称 -->
|
||||
<view class="group-name-setting">
|
||||
<view class="setting-label">
|
||||
<text class="label-text">群名称</text>
|
||||
<text class="label-required">*</text>
|
||||
</view>
|
||||
<input class="group-name-input"
|
||||
placeholder="请输入群名称"
|
||||
value="{{groupName}}"
|
||||
bindinput="onGroupNameInput"
|
||||
maxlength="{{maxGroupNameLength}}" />
|
||||
<view class="input-counter">
|
||||
<text class="counter-text">{{groupName.length}}/{{maxGroupNameLength}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群描述 -->
|
||||
<view class="group-desc-setting">
|
||||
<view class="setting-label">
|
||||
<text class="label-text">群描述</text>
|
||||
</view>
|
||||
<textarea class="group-desc-input"
|
||||
placeholder="请输入群描述（可选）"
|
||||
value="{{groupDescription}}"
|
||||
bindinput="onGroupDescInput"
|
||||
maxlength="{{maxDescriptionLength}}"
|
||||
auto-height />
|
||||
<view class="input-counter">
|
||||
<text class="counter-text">{{groupDescription.length}}/{{maxDescriptionLength}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择成员 -->
|
||||
<view class="member-selection-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">选择成员</text>
|
||||
<text class="member-count">已选择 {{selectedMembers.length}} 人</text>
|
||||
</view>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-container">
|
||||
<view class="search-input-wrapper">
|
||||
<text class="search-icon">🔍</text>
|
||||
<input class="search-input"
|
||||
placeholder="搜索好友"
|
||||
value="{{searchKeyword}}"
|
||||
bindinput="onSearchInput" />
|
||||
<view wx:if="{{searchKeyword}}"
|
||||
class="clear-search"
|
||||
bindtap="clearSearch">
|
||||
<text class="clear-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 已选成员 -->
|
||||
<view class="selected-members" wx:if="{{selectedMembers.length > 0}}">
|
||||
<view class="selected-member-item"
|
||||
wx:for="{{selectedMembers}}"
|
||||
wx:key="userId"
|
||||
bindtap="removeMember"
|
||||
data-user-id="{{item.userId}}">
|
||||
<image class="selected-avatar"
|
||||
src="{{item.avatar || '/images/default-avatar.svg'}}"
|
||||
mode="aspectFill" />
|
||||
<text class="selected-name">{{item.nickname || item.username}}</text>
|
||||
<view class="remove-btn">
|
||||
<text class="remove-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 好友列表 -->
|
||||
<view class="friends-list">
|
||||
<view class="friend-item {{item.selected ? 'selected' : ''}}"
|
||||
wx:for="{{filteredFriends}}"
|
||||
wx:key="userId"
|
||||
bindtap="toggleMember"
|
||||
data-user-id="{{item.userId}}">
|
||||
<view class="friend-avatar-container">
|
||||
<image class="friend-avatar"
|
||||
src="{{item.avatar || '/images/default-avatar.svg'}}"
|
||||
mode="aspectFill" />
|
||||
<view class="selection-indicator {{item.selected ? 'selected' : ''}}">
|
||||
<text class="indicator-icon">{{item.selected ? '✓' : ''}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="friend-info">
|
||||
<text class="friend-name">{{item.nickname || item.username}}</text>
|
||||
<text class="friend-status">{{item.status || ''}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:if="{{filteredFriends.length === 0}}">
|
||||
<text class="empty-icon">👥</text>
|
||||
<text class="empty-text">{{searchKeyword ? '没有找到相关好友' : '暂无好友'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群设置 -->
|
||||
<view class="group-settings-section">
|
||||
<view class="section-title">
|
||||
<text class="title-text">群设置</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-items">
|
||||
<!-- 允许成员邀请 -->
|
||||
<view class="setting-item">
|
||||
<view class="item-info">
|
||||
<text class="item-title">允许成员邀请好友</text>
|
||||
<text class="item-desc">群成员可以邀请其他人加入群聊</text>
|
||||
</view>
|
||||
<switch class="setting-switch"
|
||||
checked="{{allowMemberInvite}}"
|
||||
bindchange="onAllowInviteChange" />
|
||||
</view>
|
||||
|
||||
<!-- 保存到通讯录 -->
|
||||
<view class="setting-item">
|
||||
<view class="item-info">
|
||||
<text class="item-title">保存到通讯录</text>
|
||||
<text class="item-desc">将群聊保存到通讯录中</text>
|
||||
</view>
|
||||
<switch class="setting-switch"
|
||||
checked="{{saveToContacts}}"
|
||||
bindchange="onSaveContactsChange" />
|
||||
</view>
|
||||
|
||||
<!-- 显示群二维码 -->
|
||||
<view class="setting-item">
|
||||
<view class="item-info">
|
||||
<text class="item-title">显示群二维码</text>
|
||||
<text class="item-desc">允许通过二维码加入群聊</text>
|
||||
</view>
|
||||
<switch class="setting-switch"
|
||||
checked="{{showQRCode}}"
|
||||
bindchange="onShowQRCodeChange" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view class="loading-overlay" wx:if="{{isCreating}}">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">正在创建群聊...</text>
|
||||
</view>
|
||||
</view>
|
||||
639
subpackages/group/create-group/create-group.wxss
Normal file
639
subpackages/group/create-group/create-group.wxss
Normal file
|
|
@ -0,0 +1,639 @@
|
|||
/* 👥 创建群聊页面样式 */
|
||||
|
||||
/* CSS变量定义 */
|
||||
page {
|
||||
--primary-color: #007AFF;
|
||||
--primary-light: #5AC8FA;
|
||||
--primary-dark: #0051D5;
|
||||
--success-color: #34C759;
|
||||
--background-color: #F2F2F7;
|
||||
--surface-color: #FFFFFF;
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #C7C7CC;
|
||||
--border-color: #E5E5EA;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
--radius-small: 8rpx;
|
||||
--radius-medium: 12rpx;
|
||||
--radius-large: 20rpx;
|
||||
}
|
||||
|
||||
/* 🌙 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
page {
|
||||
--primary-color: #0A84FF;
|
||||
--primary-light: #64D2FF;
|
||||
--primary-dark: #0056CC;
|
||||
--success-color: #30D158;
|
||||
--background-color: #000000;
|
||||
--surface-color: #1C1C1E;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #48484A;
|
||||
--border-color: #38383A;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.create-group-container {
|
||||
height: 100vh;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 🎨 自定义导航栏 */
|
||||
.custom-navbar {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
||||
box-shadow: var(--shadow-medium);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.navbar-left, .navbar-right {
|
||||
width: 120rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-medium);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.navbar-left:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.create-text {
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.create-text.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.create-text:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 🎨 页面内容 */
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
/* 🎨 群信息设置 */
|
||||
.group-info-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.group-avatar-setting {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: var(--radius-large);
|
||||
overflow: hidden;
|
||||
border: 2rpx solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.avatar-container:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
font-size: 48rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.group-name-setting,
|
||||
.group-desc-setting {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.group-desc-setting {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.label-required {
|
||||
font-size: 28rpx;
|
||||
color: #FF3B30;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.group-name-input,
|
||||
.group-desc-input {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
border-radius: var(--radius-small);
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
background: var(--background-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.group-name-input:focus,
|
||||
.group-desc-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.group-desc-input {
|
||||
min-height: 120rpx;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.input-counter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.counter-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 🎨 成员选择 */
|
||||
.member-selection-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.member-count {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--background-color);
|
||||
border: 1rpx solid var(--border-color);
|
||||
border-radius: var(--radius-small);
|
||||
padding: 0 24rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input-wrapper:focus-within {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
background: var(--text-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.clear-search:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 24rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 已选成员 */
|
||||
.selected-members {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 24rpx;
|
||||
background: var(--background-color);
|
||||
border-radius: var(--radius-small);
|
||||
border: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.selected-member-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--primary-color);
|
||||
border-radius: 32rpx;
|
||||
padding: 8rpx 16rpx 8rpx 8rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.selected-member-item:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.selected-avatar {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.selected-name {
|
||||
font-size: 26rpx;
|
||||
color: white;
|
||||
margin-right: 12rpx;
|
||||
max-width: 120rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 好友列表 */
|
||||
.friends-list {
|
||||
max-height: 600rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.friend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.friend-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.friend-item:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.friend-item.selected {
|
||||
background: rgba(0, 122, 255, 0.05);
|
||||
}
|
||||
|
||||
.friend-avatar-container {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.selection-indicator {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
right: -8rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid var(--surface-color);
|
||||
background: var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.selection-indicator.selected {
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
.indicator-icon {
|
||||
font-size: 24rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.friend-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.friend-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.friend-status {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 🎨 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80rpx 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 24rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 🎨 群设置 */
|
||||
.group-settings-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.group-settings-section .section-title {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.setting-items {
|
||||
border-radius: var(--radius-small);
|
||||
overflow: hidden;
|
||||
border: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-item:active {
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.setting-switch {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
/* 🎨 加载状态 */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid var(--border-color);
|
||||
border-top: 4rpx solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 📱 响应式设计 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.page-content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.group-info-section,
|
||||
.member-selection-section,
|
||||
.group-settings-section {
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
.selection-indicator {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
.page-content {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.group-info-section,
|
||||
.member-selection-section,
|
||||
.group-settings-section {
|
||||
padding: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
}
|
||||
418
subpackages/group/group-announcement/group-announcement.js
Normal file
418
subpackages/group/group-announcement/group-announcement.js
Normal file
|
|
@ -0,0 +1,418 @@
|
|||
// 📢 群公告页面逻辑
|
||||
const app = getApp();
|
||||
const groupChatManager = require('../../../utils/group-chat-manager.js');
|
||||
const apiClient = require('../../../utils/api-client.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 系统信息
|
||||
statusBarHeight: 44,
|
||||
navBarHeight: 88,
|
||||
|
||||
// 群信息
|
||||
groupId: '',
|
||||
groupInfo: {},
|
||||
|
||||
// 页面模式
|
||||
mode: 'view', // view, edit
|
||||
|
||||
// 用户权限
|
||||
currentUserId: '',
|
||||
userRole: 'member',
|
||||
canEdit: false,
|
||||
|
||||
// 公告数据
|
||||
currentAnnouncement: null,
|
||||
announcementHistory: [],
|
||||
|
||||
// 编辑状态
|
||||
editContent: '',
|
||||
maxLength: 500,
|
||||
canSave: false,
|
||||
|
||||
// 弹窗状态
|
||||
showHistoryDetail: false,
|
||||
selectedHistory: {},
|
||||
showDeleteConfirm: false,
|
||||
|
||||
// 加载状态
|
||||
loading: false,
|
||||
loadingText: '加载中...'
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
|
||||
// 获取系统信息
|
||||
this.getSystemInfo();
|
||||
|
||||
// 获取参数
|
||||
if (options.groupId) {
|
||||
this.setData({
|
||||
groupId: options.groupId,
|
||||
mode: options.mode || 'view'
|
||||
});
|
||||
|
||||
// 加载群公告
|
||||
this.loadGroupAnnouncement();
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '群聊ID不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
// 获取系统信息
|
||||
getSystemInfo() {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
this.setData({
|
||||
statusBarHeight: systemInfo.statusBarHeight || 44,
|
||||
navBarHeight: 88,
|
||||
currentUserId: wx.getStorageSync('userId')
|
||||
});
|
||||
},
|
||||
|
||||
// 加载群公告
|
||||
async loadGroupAnnouncement() {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '加载群公告中...'
|
||||
});
|
||||
|
||||
// 获取群基本信息
|
||||
const groupResponse = await apiClient.request({
|
||||
url: `/api/v1/groups/${this.data.groupId}`,
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
if (!groupResponse.success) {
|
||||
throw new Error(groupResponse.error || '获取群信息失败');
|
||||
}
|
||||
|
||||
// 获取当前用户角色
|
||||
const membersResult = await groupChatManager.getGroupMembers(this.data.groupId);
|
||||
if (membersResult.success) {
|
||||
const currentUser = membersResult.data.find(member => member.userId === this.data.currentUserId);
|
||||
const userRole = currentUser ? currentUser.role : 'member';
|
||||
const canEdit = userRole === 'owner' || userRole === 'admin';
|
||||
|
||||
this.setData({
|
||||
userRole: userRole,
|
||||
canEdit: canEdit
|
||||
});
|
||||
}
|
||||
|
||||
// 获取群公告
|
||||
const announcementResponse = await apiClient.request({
|
||||
url: `/api/v1/groups/${this.data.groupId}/announcements`,
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
if (announcementResponse.success) {
|
||||
const announcements = announcementResponse.data || [];
|
||||
const currentAnnouncement = announcements.find(a => a.isCurrent);
|
||||
const history = announcements.filter(a => !a.isCurrent);
|
||||
|
||||
// 处理时间显示
|
||||
if (currentAnnouncement) {
|
||||
currentAnnouncement.publishTimeText = this.formatDateTime(new Date(currentAnnouncement.publishTime));
|
||||
}
|
||||
|
||||
history.forEach(item => {
|
||||
item.publishTimeText = this.formatDateTime(new Date(item.publishTime));
|
||||
});
|
||||
|
||||
this.setData({
|
||||
groupInfo: groupResponse.data,
|
||||
currentAnnouncement: currentAnnouncement,
|
||||
announcementHistory: history,
|
||||
loading: false
|
||||
});
|
||||
|
||||
// 如果是编辑模式，设置编辑内容
|
||||
if (this.data.mode === 'edit' && currentAnnouncement) {
|
||||
this.setData({
|
||||
editContent: currentAnnouncement.content
|
||||
});
|
||||
this.updateCanSave();
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 加载群公告失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '加载群公告失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 📝 ===== 编辑功能 =====
|
||||
|
||||
// 创建公告
|
||||
createAnnouncement() {
|
||||
if (!this.data.canEdit) {
|
||||
wx.showToast({
|
||||
title: '没有发布权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
mode: 'edit',
|
||||
editContent: ''
|
||||
});
|
||||
this.updateCanSave();
|
||||
},
|
||||
|
||||
// 编辑公告
|
||||
editAnnouncement() {
|
||||
if (!this.data.canEdit) {
|
||||
wx.showToast({
|
||||
title: '没有编辑权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
mode: 'edit',
|
||||
editContent: this.data.currentAnnouncement ? this.data.currentAnnouncement.content : ''
|
||||
});
|
||||
this.updateCanSave();
|
||||
},
|
||||
|
||||
// 内容输入
|
||||
onContentInput(e) {
|
||||
const content = e.detail.value;
|
||||
this.setData({
|
||||
editContent: content
|
||||
});
|
||||
this.updateCanSave();
|
||||
},
|
||||
|
||||
// 更新是否可以保存
|
||||
updateCanSave() {
|
||||
const canSave = this.data.editContent.trim().length > 0;
|
||||
this.setData({
|
||||
canSave: canSave
|
||||
});
|
||||
},
|
||||
|
||||
// 取消编辑
|
||||
cancelEdit() {
|
||||
|
||||
if (this.data.editContent.trim() && this.data.editContent !== (this.data.currentAnnouncement?.content || '')) {
|
||||
wx.showModal({
|
||||
title: '取消编辑',
|
||||
content: '确定要取消编辑吗？未保存的内容将丢失。',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.setData({
|
||||
mode: 'view',
|
||||
editContent: '',
|
||||
canSave: false
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.setData({
|
||||
mode: 'view',
|
||||
editContent: '',
|
||||
canSave: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 保存公告
|
||||
async saveAnnouncement() {
|
||||
if (!this.data.canSave) {
|
||||
return;
|
||||
}
|
||||
|
||||
const content = this.data.editContent.trim();
|
||||
if (!content) {
|
||||
wx.showToast({
|
||||
title: '公告内容不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '发布公告中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.setGroupAnnouncement(this.data.groupId, content);
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
wx.showToast({
|
||||
title: '公告发布成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 切换到查看模式
|
||||
this.setData({
|
||||
mode: 'view',
|
||||
editContent: '',
|
||||
canSave: false
|
||||
});
|
||||
|
||||
// 重新加载公告
|
||||
this.loadGroupAnnouncement();
|
||||
} else {
|
||||
throw new Error(result.error || '发布公告失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 保存公告失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '发布公告失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 删除公告
|
||||
deleteAnnouncement() {
|
||||
if (!this.data.canEdit) {
|
||||
wx.showToast({
|
||||
title: '没有删除权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
showDeleteConfirm: true
|
||||
});
|
||||
},
|
||||
|
||||
// 确认删除公告
|
||||
async confirmDeleteAnnouncement() {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '删除公告中...',
|
||||
showDeleteConfirm: false
|
||||
});
|
||||
|
||||
const result = await groupChatManager.setGroupAnnouncement(this.data.groupId, '');
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
wx.showToast({
|
||||
title: '公告已删除',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 重新加载公告
|
||||
this.loadGroupAnnouncement();
|
||||
} else {
|
||||
throw new Error(result.error || '删除公告失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 删除公告失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '删除公告失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭删除确认弹窗
|
||||
closeDeleteConfirm() {
|
||||
this.setData({
|
||||
showDeleteConfirm: false
|
||||
});
|
||||
},
|
||||
|
||||
// 📜 ===== 历史公告 =====
|
||||
|
||||
// 查看历史公告
|
||||
viewHistoryAnnouncement(e) {
|
||||
const announcement = e.currentTarget.dataset.announcement;
|
||||
|
||||
this.setData({
|
||||
selectedHistory: announcement,
|
||||
showHistoryDetail: true
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭历史公告详情
|
||||
closeHistoryDetail() {
|
||||
this.setData({
|
||||
showHistoryDetail: false,
|
||||
selectedHistory: {}
|
||||
});
|
||||
},
|
||||
|
||||
// 🔧 ===== 工具方法 =====
|
||||
|
||||
// 格式化日期时间
|
||||
formatDateTime(date) {
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
if (diff < 60000) { // 1分钟内
|
||||
return '刚刚';
|
||||
} else if (diff < 3600000) { // 1小时内
|
||||
return `${Math.floor(diff / 60000)}分钟前`;
|
||||
} else if (diff < 86400000) { // 1天内
|
||||
return `${Math.floor(diff / 3600000)}小时前`;
|
||||
} else if (diff < 604800000) { // 1周内
|
||||
return `${Math.floor(diff / 86400000)}天前`;
|
||||
} else {
|
||||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
|
||||
}
|
||||
},
|
||||
|
||||
// 阻止事件冒泡
|
||||
stopPropagation() {
|
||||
// 阻止点击事件冒泡
|
||||
},
|
||||
|
||||
// 🧭 ===== 页面导航 =====
|
||||
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
if (this.data.mode === 'edit') {
|
||||
this.cancelEdit();
|
||||
} else {
|
||||
wx.navigateBack();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#F2F2F7",
|
||||
"backgroundTextStyle": "dark",
|
||||
"enablePullDownRefresh": false,
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
174
subpackages/group/group-announcement/group-announcement.wxml
Normal file
174
subpackages/group/group-announcement/group-announcement.wxml
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<!-- 📢 群公告页面 -->
|
||||
<view class="group-announcement-container">
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="navbar-content" style="height: {{navBarHeight}}px;">
|
||||
<view class="navbar-left" bindtap="goBack">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
|
||||
<view class="navbar-title">
|
||||
<text class="title-text">{{mode === 'edit' ? '编辑群公告' : '群公告'}}</text>
|
||||
</view>
|
||||
|
||||
<view class="navbar-right" wx:if="{{mode === 'edit'}}" bindtap="saveAnnouncement">
|
||||
<text class="save-text {{canSave ? 'active' : ''}}">保存</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="page-content">
|
||||
<!-- 编辑模式 -->
|
||||
<view wx:if="{{mode === 'edit'}}" class="edit-mode">
|
||||
<!-- 编辑提示 -->
|
||||
<view class="edit-tips">
|
||||
<text class="tips-icon">💡</text>
|
||||
<text class="tips-text">群公告将通知所有群成员，请谨慎编辑</text>
|
||||
</view>
|
||||
|
||||
<!-- 编辑区域 -->
|
||||
<view class="edit-container">
|
||||
<textarea class="announcement-textarea"
|
||||
placeholder="请输入群公告内容..."
|
||||
value="{{editContent}}"
|
||||
bindinput="onContentInput"
|
||||
maxlength="{{maxLength}}"
|
||||
auto-height
|
||||
focus="{{true}}" />
|
||||
|
||||
<view class="edit-footer">
|
||||
<view class="char-counter">
|
||||
<text class="counter-text">{{editContent.length}}/{{maxLength}}</text>
|
||||
</view>
|
||||
|
||||
<view class="edit-actions">
|
||||
<view class="action-btn secondary" bindtap="cancelEdit">
|
||||
<text class="btn-text">取消</text>
|
||||
</view>
|
||||
<view class="action-btn primary {{canSave ? 'active' : ''}}" bindtap="saveAnnouncement">
|
||||
<text class="btn-text">发布</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 查看模式 -->
|
||||
<view wx:else class="view-mode">
|
||||
<!-- 当前公告 -->
|
||||
<view wx:if="{{currentAnnouncement}}" class="current-announcement">
|
||||
<view class="announcement-header">
|
||||
<text class="announcement-title">当前公告</text>
|
||||
<view wx:if="{{canEdit}}" class="header-actions">
|
||||
<text class="action-btn" bindtap="editAnnouncement">编辑</text>
|
||||
<text class="action-btn danger" bindtap="deleteAnnouncement">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="announcement-content">
|
||||
<text class="content-text">{{currentAnnouncement.content}}</text>
|
||||
</view>
|
||||
|
||||
<view class="announcement-meta">
|
||||
<text class="meta-text">发布者: {{currentAnnouncement.publisherName}}</text>
|
||||
<text class="meta-text">发布时间: {{currentAnnouncement.publishTimeText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无公告状态 -->
|
||||
<view wx:else class="no-announcement">
|
||||
<text class="no-announcement-icon">📢</text>
|
||||
<text class="no-announcement-text">暂无群公告</text>
|
||||
<view wx:if="{{canEdit}}" class="no-announcement-action">
|
||||
<view class="action-btn primary" bindtap="createAnnouncement">
|
||||
<text class="btn-text">发布公告</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 历史公告 -->
|
||||
<view wx:if="{{announcementHistory.length > 0}}" class="announcement-history">
|
||||
<view class="history-header">
|
||||
<text class="history-title">历史公告</text>
|
||||
<text class="history-count">({{announcementHistory.length}}条)</text>
|
||||
</view>
|
||||
|
||||
<view class="history-list">
|
||||
<view class="history-item"
|
||||
wx:for="{{announcementHistory}}"
|
||||
wx:key="id"
|
||||
bindtap="viewHistoryAnnouncement"
|
||||
data-announcement="{{item}}">
|
||||
<view class="history-content">
|
||||
<text class="history-text">{{item.content}}</text>
|
||||
</view>
|
||||
<view class="history-meta">
|
||||
<text class="history-publisher">{{item.publisherName}}</text>
|
||||
<text class="history-time">{{item.publishTimeText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 历史公告详情弹窗 -->
|
||||
<view class="history-detail-modal" wx:if="{{showHistoryDetail}}" bindtap="closeHistoryDetail">
|
||||
<view class="modal-content" catchtap="stopPropagation">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">历史公告</text>
|
||||
<view class="close-btn" bindtap="closeHistoryDetail">
|
||||
<text class="close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-body">
|
||||
<view class="detail-content">
|
||||
<text class="detail-text">{{selectedHistory.content}}</text>
|
||||
</view>
|
||||
|
||||
<view class="detail-meta">
|
||||
<view class="meta-item">
|
||||
<text class="meta-label">发布者:</text>
|
||||
<text class="meta-value">{{selectedHistory.publisherName}}</text>
|
||||
</view>
|
||||
<view class="meta-item">
|
||||
<text class="meta-label">发布时间:</text>
|
||||
<text class="meta-value">{{selectedHistory.publishTimeText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 删除确认弹窗 -->
|
||||
<view class="delete-confirm-modal" wx:if="{{showDeleteConfirm}}" bindtap="closeDeleteConfirm">
|
||||
<view class="modal-content" catchtap="stopPropagation">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">删除公告</text>
|
||||
</view>
|
||||
|
||||
<view class="modal-body">
|
||||
<text class="confirm-text">确定要删除当前群公告吗？删除后所有群成员将收到通知。</text>
|
||||
</view>
|
||||
|
||||
<view class="modal-actions">
|
||||
<view class="modal-btn cancel" bindtap="closeDeleteConfirm">
|
||||
<text class="btn-text">取消</text>
|
||||
</view>
|
||||
<view class="modal-btn confirm" bindtap="confirmDeleteAnnouncement">
|
||||
<text class="btn-text">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view class="loading-overlay" wx:if="{{loading}}">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">{{loadingText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
663
subpackages/group/group-announcement/group-announcement.wxss
Normal file
663
subpackages/group/group-announcement/group-announcement.wxss
Normal file
|
|
@ -0,0 +1,663 @@
|
|||
/* 📢 群公告页面样式 */
|
||||
|
||||
/* CSS变量定义 */
|
||||
page {
|
||||
--primary-color: #007AFF;
|
||||
--primary-light: #5AC8FA;
|
||||
--primary-dark: #0051D5;
|
||||
--success-color: #34C759;
|
||||
--danger-color: #FF3B30;
|
||||
--warning-color: #FF9500;
|
||||
--background-color: #F2F2F7;
|
||||
--surface-color: #FFFFFF;
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #C7C7CC;
|
||||
--border-color: #E5E5EA;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
--radius-small: 8rpx;
|
||||
--radius-medium: 12rpx;
|
||||
--radius-large: 20rpx;
|
||||
}
|
||||
|
||||
/* 🌙 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
page {
|
||||
--primary-color: #0A84FF;
|
||||
--primary-light: #64D2FF;
|
||||
--primary-dark: #0056CC;
|
||||
--success-color: #30D158;
|
||||
--danger-color: #FF453A;
|
||||
--warning-color: #FF9F0A;
|
||||
--background-color: #000000;
|
||||
--surface-color: #1C1C1E;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #48484A;
|
||||
--border-color: #38383A;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.group-announcement-container {
|
||||
height: 100vh;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 🎨 自定义导航栏 */
|
||||
.custom-navbar {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
||||
box-shadow: var(--shadow-medium);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.navbar-left, .navbar-right {
|
||||
width: 120rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-medium);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.navbar-left:active, .navbar-right:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.save-text {
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.save-text.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 页面内容 */
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
/* 🎨 编辑模式 */
|
||||
.edit-mode {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.edit-tips {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 149, 0, 0.1);
|
||||
border: 1rpx solid rgba(255, 149, 0, 0.3);
|
||||
border-radius: var(--radius-small);
|
||||
padding: 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.tips-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-size: 26rpx;
|
||||
color: var(--warning-color);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.edit-container {
|
||||
flex: 1;
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.announcement-textarea {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
.edit-footer {
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.char-counter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.counter-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.edit-actions {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: var(--radius-medium);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: var(--text-tertiary);
|
||||
border-color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.action-btn.primary.active {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.action-btn.primary:active {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.action-btn.secondary {
|
||||
background: var(--surface-color);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.action-btn.secondary:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-btn.primary .btn-text {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.action-btn.primary.active .btn-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.secondary .btn-text {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 🎨 查看模式 */
|
||||
.view-mode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
/* 🎨 当前公告 */
|
||||
.current-announcement {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.announcement-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.announcement-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.header-actions .action-btn {
|
||||
font-size: 26rpx;
|
||||
color: var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.header-actions .action-btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.header-actions .action-btn.danger {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.announcement-content {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.announcement-meta {
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 🎨 无公告状态 */
|
||||
.no-announcement {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 40rpx;
|
||||
text-align: center;
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.no-announcement-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 24rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.no-announcement-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.no-announcement-action .action-btn {
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
background: var(--primary-color);
|
||||
border-radius: var(--radius-medium);
|
||||
}
|
||||
|
||||
.no-announcement-action .btn-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 历史公告 */
|
||||
.announcement-history {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.history-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.history-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.history-count {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.history-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.history-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.history-item:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.history-content {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.history-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.history-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.history-publisher, .history-time {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 🎨 弹窗样式 */
|
||||
.history-detail-modal, .delete-confirm-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 90%;
|
||||
max-width: 600rpx;
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-large);
|
||||
box-shadow: var(--shadow-medium);
|
||||
animation: scaleIn 0.3s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.close-btn:active {
|
||||
background: var(--border-color);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-right: 16rpx;
|
||||
min-width: 120rpx;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.confirm-text {
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
border-top: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-btn:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.modal-btn:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.modal-btn.cancel .btn-text {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.modal-btn.confirm .btn-text {
|
||||
color: var(--danger-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 🎨 加载状态 */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid var(--border-color);
|
||||
border-top: 4rpx solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 📱 响应式设计 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.page-content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.announcement-header,
|
||||
.announcement-content,
|
||||
.announcement-meta,
|
||||
.history-header,
|
||||
.history-item {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.no-announcement {
|
||||
padding: 80rpx 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
.page-content {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.announcement-header,
|
||||
.announcement-content,
|
||||
.announcement-meta,
|
||||
.history-header,
|
||||
.history-item {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.no-announcement {
|
||||
padding: 160rpx 40rpx;
|
||||
}
|
||||
}
|
||||
948
subpackages/group/group-info/group-info.js
Normal file
948
subpackages/group/group-info/group-info.js
Normal file
|
|
@ -0,0 +1,948 @@
|
|||
// 👥 群聊信息页面逻辑
|
||||
const app = getApp();
|
||||
const groupChatManager = require('../../../utils/group-chat-manager.js');
|
||||
const apiClient = require('../../../utils/api-client.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 系统信息
|
||||
statusBarHeight: 44,
|
||||
navBarHeight: 88,
|
||||
|
||||
// 群信息
|
||||
groupId: '',
|
||||
groupInfo: {},
|
||||
memberCount: 0,
|
||||
displayMembers: [],
|
||||
|
||||
// 用户权限
|
||||
currentUserId: '',
|
||||
userRole: 'member',
|
||||
isOwner: false,
|
||||
isOwnerOrAdmin: false,
|
||||
canInviteMembers: false,
|
||||
|
||||
// 群设置
|
||||
groupSettings: {
|
||||
muteNotifications: false,
|
||||
pinned: false,
|
||||
saveToContacts: true
|
||||
},
|
||||
|
||||
// 弹窗状态
|
||||
showQRCodeModal: false,
|
||||
showEditNameModal: false,
|
||||
showEditDescModal: false,
|
||||
|
||||
// 编辑状态
|
||||
editGroupName: '',
|
||||
editGroupDescription: '',
|
||||
|
||||
// 二维码
|
||||
qrCodeSize: 400,
|
||||
|
||||
// 加载状态
|
||||
loading: false,
|
||||
loadingText: '加载中...'
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
|
||||
// 获取系统信息
|
||||
this.getSystemInfo();
|
||||
|
||||
// 获取群ID
|
||||
if (options.groupId) {
|
||||
this.setData({
|
||||
groupId: options.groupId
|
||||
});
|
||||
|
||||
// 加载群信息
|
||||
this.loadGroupInfo();
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '群聊ID不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
|
||||
// 刷新群信息
|
||||
if (this.data.groupId) {
|
||||
this.loadGroupInfo();
|
||||
}
|
||||
},
|
||||
|
||||
// 获取系统信息
|
||||
getSystemInfo() {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
this.setData({
|
||||
statusBarHeight: systemInfo.statusBarHeight || 44,
|
||||
navBarHeight: 88,
|
||||
currentUserId: wx.getStorageSync('userId')
|
||||
});
|
||||
},
|
||||
|
||||
// 加载群信息
|
||||
async loadGroupInfo() {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '加载群信息中...'
|
||||
});
|
||||
|
||||
// 获取群基本信息
|
||||
const groupResponse = await apiClient.request({
|
||||
url: `/api/v1/groups/${this.data.groupId}`,
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
if (!groupResponse.success) {
|
||||
throw new Error(groupResponse.error || '获取群信息失败');
|
||||
}
|
||||
|
||||
const groupInfo = groupResponse.data;
|
||||
|
||||
// 获取群成员列表
|
||||
const membersResult = await groupChatManager.getGroupMembers(this.data.groupId, false);
|
||||
|
||||
if (!membersResult.success) {
|
||||
throw new Error(membersResult.error || '获取群成员失败');
|
||||
}
|
||||
|
||||
const members = membersResult.data;
|
||||
|
||||
// 获取当前用户角色
|
||||
const currentUser = members.find(member => member.userId === this.data.currentUserId);
|
||||
const userRole = currentUser ? currentUser.role : 'member';
|
||||
|
||||
// 计算权限
|
||||
const isOwner = userRole === 'owner';
|
||||
const isOwnerOrAdmin = userRole === 'owner' || userRole === 'admin';
|
||||
const canInviteMembers = isOwnerOrAdmin || groupInfo.settings?.allowMemberInvite;
|
||||
|
||||
// 处理显示的成员（最多显示8个）
|
||||
const displayMembers = members.slice(0, 8);
|
||||
|
||||
// 处理公告时间
|
||||
let announcementTimeText = '';
|
||||
if (groupInfo.announcementTime) {
|
||||
const date = new Date(groupInfo.announcementTime);
|
||||
announcementTimeText = this.formatDateTime(date);
|
||||
}
|
||||
|
||||
this.setData({
|
||||
groupInfo: groupInfo,
|
||||
memberCount: members.length,
|
||||
displayMembers: displayMembers,
|
||||
userRole: userRole,
|
||||
isOwner: isOwner,
|
||||
isOwnerOrAdmin: isOwnerOrAdmin,
|
||||
canInviteMembers: canInviteMembers,
|
||||
announcementTimeText: announcementTimeText,
|
||||
loading: false
|
||||
});
|
||||
|
||||
// 加载群设置
|
||||
this.loadGroupSettings();
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 加载群信息失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '加载群信息失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 加载群设置
|
||||
async loadGroupSettings() {
|
||||
try {
|
||||
// 从本地存储获取群设置
|
||||
const settings = wx.getStorageSync(`groupSettings_${this.data.groupId}`) || {};
|
||||
|
||||
this.setData({
|
||||
groupSettings: {
|
||||
muteNotifications: settings.muteNotifications || false,
|
||||
pinned: settings.pinned || false,
|
||||
saveToContacts: settings.saveToContacts !== false
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 加载群设置失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 👥 ===== 群信息编辑 =====
|
||||
|
||||
// 编辑群头像
|
||||
editGroupAvatar() {
|
||||
if (!this.data.isOwnerOrAdmin) {
|
||||
wx.showToast({
|
||||
title: '没有修改权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
wx.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
this.updateGroupAvatar(tempFilePath);
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 选择头像失败:', error);
|
||||
wx.showToast({
|
||||
title: '选择头像失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 更新群头像
|
||||
async updateGroupAvatar(avatarPath) {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '更新头像中...'
|
||||
});
|
||||
|
||||
// 上传头像
|
||||
const uploadResult = await this.uploadImage(avatarPath);
|
||||
|
||||
if (!uploadResult.success) {
|
||||
throw new Error('头像上传失败');
|
||||
}
|
||||
|
||||
// 更新群信息
|
||||
const result = await groupChatManager.updateGroupInfo(this.data.groupId, {
|
||||
avatar: uploadResult.url
|
||||
});
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
// 更新本地数据
|
||||
this.setData({
|
||||
'groupInfo.avatar': uploadResult.url
|
||||
});
|
||||
|
||||
wx.showToast({
|
||||
title: '头像更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
} else {
|
||||
throw new Error(result.error || '头像更新失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 更新群头像失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '头像更新失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑群名称
|
||||
editGroupName() {
|
||||
if (!this.data.isOwnerOrAdmin) {
|
||||
wx.showToast({
|
||||
title: '没有修改权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
editGroupName: this.data.groupInfo.name || '',
|
||||
showEditNameModal: true
|
||||
});
|
||||
},
|
||||
|
||||
// 群名称输入
|
||||
onEditGroupNameInput(e) {
|
||||
this.setData({
|
||||
editGroupName: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 确认修改群名称
|
||||
async confirmEditGroupName() {
|
||||
const newName = this.data.editGroupName.trim();
|
||||
|
||||
if (!newName) {
|
||||
wx.showToast({
|
||||
title: '群名称不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (newName === this.data.groupInfo.name) {
|
||||
this.closeEditNameModal();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '更新群名称中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.updateGroupInfo(this.data.groupId, {
|
||||
name: newName
|
||||
});
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
// 更新本地数据
|
||||
this.setData({
|
||||
'groupInfo.name': newName
|
||||
});
|
||||
|
||||
this.closeEditNameModal();
|
||||
|
||||
wx.showToast({
|
||||
title: '群名称更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
} else {
|
||||
throw new Error(result.error || '群名称更新失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 更新群名称失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '群名称更新失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑群名称弹窗
|
||||
closeEditNameModal() {
|
||||
this.setData({
|
||||
showEditNameModal: false,
|
||||
editGroupName: ''
|
||||
});
|
||||
},
|
||||
|
||||
// 编辑群描述
|
||||
editGroupDescription() {
|
||||
if (!this.data.isOwnerOrAdmin) {
|
||||
wx.showToast({
|
||||
title: '没有修改权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
editGroupDescription: this.data.groupInfo.description || '',
|
||||
showEditDescModal: true
|
||||
});
|
||||
},
|
||||
|
||||
// 群描述输入
|
||||
onEditGroupDescInput(e) {
|
||||
this.setData({
|
||||
editGroupDescription: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 确认修改群描述
|
||||
async confirmEditGroupDescription() {
|
||||
const newDescription = this.data.editGroupDescription.trim();
|
||||
|
||||
if (newDescription === this.data.groupInfo.description) {
|
||||
this.closeEditDescModal();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '更新群描述中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.updateGroupInfo(this.data.groupId, {
|
||||
description: newDescription
|
||||
});
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
// 更新本地数据
|
||||
this.setData({
|
||||
'groupInfo.description': newDescription
|
||||
});
|
||||
|
||||
this.closeEditDescModal();
|
||||
|
||||
wx.showToast({
|
||||
title: '群描述更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
} else {
|
||||
throw new Error(result.error || '群描述更新失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 更新群描述失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '群描述更新失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑群描述弹窗
|
||||
closeEditDescModal() {
|
||||
this.setData({
|
||||
showEditDescModal: false,
|
||||
editGroupDescription: ''
|
||||
});
|
||||
},
|
||||
|
||||
// 编辑群公告
|
||||
editGroupAnnouncement() {
|
||||
if (!this.data.isOwnerOrAdmin) {
|
||||
wx.showToast({
|
||||
title: '没有发布权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 跳转到群公告编辑页面
|
||||
wx.navigateTo({
|
||||
url: `/subpackages/group/group-announcement/group-announcement?groupId=${this.data.groupId}&mode=edit`
|
||||
});
|
||||
},
|
||||
|
||||
// 🔧 ===== 工具方法 =====
|
||||
|
||||
// 格式化日期时间
|
||||
formatDateTime(date) {
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
if (diff < 60000) { // 1分钟内
|
||||
return '刚刚';
|
||||
} else if (diff < 3600000) { // 1小时内
|
||||
return `${Math.floor(diff / 60000)}分钟前`;
|
||||
} else if (diff < 86400000) { // 1天内
|
||||
return `${Math.floor(diff / 3600000)}小时前`;
|
||||
} else if (diff < 604800000) { // 1周内
|
||||
return `${Math.floor(diff / 86400000)}天前`;
|
||||
} else {
|
||||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
|
||||
}
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
async uploadImage(filePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.uploadFile({
|
||||
url: `${app.globalData.apiBaseUrl}/api/v1/upload/image`,
|
||||
filePath: filePath,
|
||||
name: 'file',
|
||||
header: {
|
||||
'Authorization': `Bearer ${wx.getStorageSync('token')}`
|
||||
},
|
||||
success: (res) => {
|
||||
try {
|
||||
const data = JSON.parse(res.data);
|
||||
if (data.success) {
|
||||
resolve({ success: true, url: data.data.url });
|
||||
} else {
|
||||
reject(new Error(data.error || '上传失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
reject(new Error('上传响应解析失败'));
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 👤 ===== 成员管理 =====
|
||||
|
||||
// 邀请成员
|
||||
inviteMembers() {
|
||||
if (!this.data.canInviteMembers) {
|
||||
wx.showToast({
|
||||
title: '没有邀请权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 跳转到邀请成员页面
|
||||
wx.navigateTo({
|
||||
url: `/subpackages/group/create-group-chat/create-group-chat?groupId=${this.data.groupId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 查看所有成员
|
||||
viewAllMembers() {
|
||||
|
||||
// 跳转到群成员列表页面
|
||||
wx.navigateTo({
|
||||
url: `/subpackages/group/group-members/group-members?groupId=${this.data.groupId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 查看成员资料
|
||||
viewMemberProfile(e) {
|
||||
const userId = e.currentTarget.dataset.userId;
|
||||
|
||||
if (userId === this.data.currentUserId) {
|
||||
// 查看自己的资料
|
||||
wx.navigateTo({
|
||||
url: '/subpackages/profile/profile/profile'
|
||||
});
|
||||
} else {
|
||||
// 查看其他成员资料
|
||||
wx.navigateTo({
|
||||
url: `/subpackages/social/user-detail/user-detail?customId=${userId}`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 📋 ===== 群功能 =====
|
||||
|
||||
// 搜索聊天记录
|
||||
searchChatHistory() {
|
||||
wx.showToast({
|
||||
title: '搜索功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
// TODO: 集成 NIM SDK 的消息搜索功能
|
||||
// wx.navigateTo({
|
||||
// url: `/subpackages/search/global-search/global-search?conversationId=${this.data.groupId}&conversationName=${encodeURIComponent(this.data.groupInfo.name || '群聊')}`
|
||||
// });
|
||||
},
|
||||
|
||||
// 查看群文件
|
||||
viewGroupFiles() {
|
||||
|
||||
wx.showToast({
|
||||
title: '群文件功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 查看群相册
|
||||
viewGroupPhotos() {
|
||||
|
||||
wx.showToast({
|
||||
title: '群相册功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 显示群二维码
|
||||
showGroupQRCode() {
|
||||
|
||||
this.setData({
|
||||
showQRCodeModal: true
|
||||
});
|
||||
|
||||
// 生成二维码
|
||||
this.generateGroupQRCode();
|
||||
},
|
||||
|
||||
// 生成群二维码
|
||||
generateGroupQRCode() {
|
||||
try {
|
||||
// 构建二维码数据
|
||||
const qrData = JSON.stringify({
|
||||
type: 'group',
|
||||
groupId: this.data.groupId,
|
||||
groupName: this.data.groupInfo.name
|
||||
});
|
||||
|
||||
// 这里应该使用二维码生成库，暂时用canvas模拟
|
||||
const ctx = wx.createCanvasContext('groupQRCode', this);
|
||||
|
||||
// 绘制二维码背景
|
||||
ctx.setFillStyle('#FFFFFF');
|
||||
ctx.fillRect(0, 0, this.data.qrCodeSize, this.data.qrCodeSize);
|
||||
|
||||
// 绘制二维码内容（这里简化处理）
|
||||
ctx.setFillStyle('#000000');
|
||||
ctx.setTextAlign('center');
|
||||
ctx.setFontSize(16);
|
||||
ctx.fillText('群聊二维码', this.data.qrCodeSize / 2, this.data.qrCodeSize / 2);
|
||||
ctx.fillText(this.data.groupInfo.name, this.data.qrCodeSize / 2, this.data.qrCodeSize / 2 + 30);
|
||||
|
||||
ctx.draw();
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 生成二维码失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭二维码弹窗
|
||||
closeQRCodeModal() {
|
||||
this.setData({
|
||||
showQRCodeModal: false
|
||||
});
|
||||
},
|
||||
|
||||
// 保存二维码到相册
|
||||
saveQRCodeToAlbum() {
|
||||
|
||||
wx.canvasToTempFilePath({
|
||||
canvasId: 'groupQRCode',
|
||||
success: (res) => {
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
wx.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 保存失败:', error);
|
||||
wx.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 生成图片失败:', error);
|
||||
wx.showToast({
|
||||
title: '生成图片失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
|
||||
// 分享二维码
|
||||
shareQRCode() {
|
||||
|
||||
wx.canvasToTempFilePath({
|
||||
canvasId: 'groupQRCode',
|
||||
success: (res) => {
|
||||
wx.showShareImageMenu({
|
||||
path: res.tempFilePath,
|
||||
success: () => {
|
||||
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 分享失败:', error);
|
||||
wx.showToast({
|
||||
title: '分享失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('❌ 生成图片失败:', error);
|
||||
wx.showToast({
|
||||
title: '生成图片失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
|
||||
// ⚙️ ===== 群设置 =====
|
||||
|
||||
// 消息免打扰设置变化
|
||||
onMuteNotificationsChange(e) {
|
||||
const checked = e.detail.value;
|
||||
|
||||
this.setData({
|
||||
'groupSettings.muteNotifications': checked
|
||||
});
|
||||
|
||||
this.saveGroupSettings();
|
||||
},
|
||||
|
||||
// 置顶聊天设置变化
|
||||
onPinnedChange(e) {
|
||||
const checked = e.detail.value;
|
||||
|
||||
this.setData({
|
||||
'groupSettings.pinned': checked
|
||||
});
|
||||
|
||||
this.saveGroupSettings();
|
||||
},
|
||||
|
||||
// 保存到通讯录设置变化
|
||||
onSaveToContactsChange(e) {
|
||||
const checked = e.detail.value;
|
||||
|
||||
this.setData({
|
||||
'groupSettings.saveToContacts': checked
|
||||
});
|
||||
|
||||
this.saveGroupSettings();
|
||||
},
|
||||
|
||||
// 保存群设置
|
||||
saveGroupSettings() {
|
||||
try {
|
||||
wx.setStorageSync(`groupSettings_${this.data.groupId}`, this.data.groupSettings);
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 保存群设置失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 打开群设置
|
||||
openGroupSettings() {
|
||||
|
||||
// 跳转到群设置页面
|
||||
wx.navigateTo({
|
||||
url: `/subpackages/group/group-info/group-info?groupId=${this.data.groupId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 📱 ===== 操作功能 =====
|
||||
|
||||
// 发消息
|
||||
sendMessage() {
|
||||
|
||||
// 跳转到群聊页面
|
||||
wx.navigateTo({
|
||||
url: `/pages/message/chat/chat?chatType=1&targetId=${this.data.groupId}&chatName=${encodeURIComponent(this.data.groupInfo.name || '群聊')}`
|
||||
});
|
||||
},
|
||||
|
||||
// 显示退出群聊选项
|
||||
showLeaveGroupOptions() {
|
||||
|
||||
if (this.data.isOwner) {
|
||||
// 群主显示解散群聊选项
|
||||
wx.showModal({
|
||||
title: '解散群聊',
|
||||
content: '解散后，所有成员将被移出群聊，且聊天记录将被清空。确定要解散群聊吗？',
|
||||
confirmText: '解散',
|
||||
confirmColor: '#FF3B30',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.dissolveGroup();
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 普通成员显示退出群聊选项
|
||||
wx.showModal({
|
||||
title: '退出群聊',
|
||||
content: '退出后，将不再接收此群聊消息。确定要退出群聊吗？',
|
||||
confirmText: '退出',
|
||||
confirmColor: '#FF3B30',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.leaveGroup();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 解散群聊
|
||||
async dissolveGroup() {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '解散群聊中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.dissolveGroup(this.data.groupId);
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
wx.showToast({
|
||||
title: '群聊已解散',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 返回消息列表
|
||||
setTimeout(() => {
|
||||
wx.navigateBack({
|
||||
delta: 2
|
||||
});
|
||||
}, 1500);
|
||||
} else {
|
||||
throw new Error(result.error || '解散群聊失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 解散群聊失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '解散群聊失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 退出群聊
|
||||
async leaveGroup() {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '退出群聊中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.leaveGroup(this.data.groupId);
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
wx.showToast({
|
||||
title: '已退出群聊',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 返回消息列表
|
||||
setTimeout(() => {
|
||||
wx.navigateBack({
|
||||
delta: 2
|
||||
});
|
||||
}, 1500);
|
||||
} else {
|
||||
throw new Error(result.error || '退出群聊失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 退出群聊失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '退出群聊失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 显示更多菜单
|
||||
showMoreMenu() {
|
||||
|
||||
const itemList = [];
|
||||
|
||||
if (this.data.isOwnerOrAdmin) {
|
||||
itemList.push('群管理');
|
||||
}
|
||||
|
||||
itemList.push('举报群聊');
|
||||
|
||||
wx.showActionSheet({
|
||||
itemList: itemList,
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
if (this.data.isOwnerOrAdmin) {
|
||||
this.openGroupManagement();
|
||||
} else {
|
||||
this.reportGroup();
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
this.reportGroup();
|
||||
break;
|
||||
default:
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 打开群管理
|
||||
openGroupManagement() {
|
||||
|
||||
// 跳转到群管理页面
|
||||
wx.navigateTo({
|
||||
url: `/subpackages/group/group-info/group-info?groupId=${this.data.groupId}&tab=management`
|
||||
});
|
||||
},
|
||||
|
||||
// 举报群聊
|
||||
reportGroup() {
|
||||
|
||||
wx.showToast({
|
||||
title: '举报功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 阻止事件冒泡
|
||||
stopPropagation() {
|
||||
// 阻止点击事件冒泡
|
||||
},
|
||||
|
||||
// 🧭 ===== 页面导航 =====
|
||||
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
// 设置tabBar选中状态
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({
|
||||
selected: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
7
subpackages/group/group-info/group-info.json
Normal file
7
subpackages/group/group-info/group-info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#F2F2F7",
|
||||
"backgroundTextStyle": "dark",
|
||||
"enablePullDownRefresh": false,
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
317
subpackages/group/group-info/group-info.wxml
Normal file
317
subpackages/group/group-info/group-info.wxml
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
<!-- 👥 群聊信息页面 -->
|
||||
<view class="group-info-container">
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="navbar-content" style="height: {{navBarHeight}}px;">
|
||||
<view class="navbar-left" bindtap="goBack">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
|
||||
<view class="navbar-title">
|
||||
<text class="title-text">群聊信息</text>
|
||||
</view>
|
||||
|
||||
<view class="navbar-right" bindtap="showMoreMenu">
|
||||
<text class="more-icon">⋯</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<scroll-view class="page-content" scroll-y="true">
|
||||
<!-- 群基本信息 -->
|
||||
<view class="group-basic-info">
|
||||
<!-- 群头像和名称 -->
|
||||
<view class="group-header">
|
||||
<view class="group-avatar-container">
|
||||
<image class="group-avatar"
|
||||
src="{{groupInfo.avatar || '/images/default-group-avatar.png'}}"
|
||||
mode="aspectFill" />
|
||||
<view wx:if="{{isOwnerOrAdmin}}"
|
||||
class="edit-avatar-btn"
|
||||
bindtap="editGroupAvatar">
|
||||
<text class="edit-icon">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="group-name-section">
|
||||
<view class="group-name-container" bindtap="editGroupName">
|
||||
<text class="group-name">{{groupInfo.name}}</text>
|
||||
<text wx:if="{{isOwnerOrAdmin}}" class="edit-name-icon">✏️</text>
|
||||
</view>
|
||||
<text class="group-id">群聊ID: {{groupInfo.groupId}}</text>
|
||||
<text class="member-count">{{memberCount}} 人</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群描述 -->
|
||||
<view class="group-description" wx:if="{{groupInfo.description || isOwnerOrAdmin}}">
|
||||
<view class="desc-header">
|
||||
<text class="desc-title">群描述</text>
|
||||
<text wx:if="{{isOwnerOrAdmin}}"
|
||||
class="edit-desc-btn"
|
||||
bindtap="editGroupDescription">编辑</text>
|
||||
</view>
|
||||
<text class="desc-content">{{groupInfo.description || '暂无群描述'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 群公告 -->
|
||||
<view class="group-announcement" wx:if="{{groupInfo.announcement || isOwnerOrAdmin}}">
|
||||
<view class="announcement-header">
|
||||
<text class="announcement-title">群公告</text>
|
||||
<text wx:if="{{isOwnerOrAdmin}}"
|
||||
class="edit-announcement-btn"
|
||||
bindtap="editGroupAnnouncement">{{groupInfo.announcement ? '编辑' : '发布'}}</text>
|
||||
</view>
|
||||
<text class="announcement-content">{{groupInfo.announcement || '暂无群公告'}}</text>
|
||||
<text wx:if="{{groupInfo.announcementTime}}"
|
||||
class="announcement-time">{{announcementTimeText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群成员 -->
|
||||
<view class="group-members-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">群成员 ({{memberCount}})</text>
|
||||
<view class="header-actions">
|
||||
<text wx:if="{{canInviteMembers}}"
|
||||
class="action-btn"
|
||||
bindtap="inviteMembers">邀请</text>
|
||||
<text class="action-btn" bindtap="viewAllMembers">查看全部</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 成员网格 -->
|
||||
<view class="members-grid">
|
||||
<!-- 邀请按钮 -->
|
||||
<view wx:if="{{canInviteMembers}}"
|
||||
class="member-item invite-item"
|
||||
bindtap="inviteMembers">
|
||||
<view class="member-avatar invite-avatar">
|
||||
<text class="invite-icon">+</text>
|
||||
</view>
|
||||
<text class="member-name">邀请</text>
|
||||
</view>
|
||||
|
||||
<!-- 成员列表 -->
|
||||
<view class="member-item"
|
||||
wx:for="{{displayMembers}}"
|
||||
wx:key="userId"
|
||||
bindtap="viewMemberProfile"
|
||||
data-user-id="{{item.userId}}">
|
||||
<view class="member-avatar-container">
|
||||
<image class="member-avatar"
|
||||
src="{{item.avatar || '/images/default-avatar.svg'}}"
|
||||
mode="aspectFill" />
|
||||
<view wx:if="{{item.role === 'owner'}}" class="role-badge owner">
|
||||
<text class="role-text">群主</text>
|
||||
</view>
|
||||
<view wx:elif="{{item.role === 'admin'}}" class="role-badge admin">
|
||||
<text class="role-text">管理员</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="member-name">{{item.nickname || item.username}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群功能 -->
|
||||
<view class="group-functions-section">
|
||||
<view class="function-items">
|
||||
<!-- 查找聊天记录 -->
|
||||
<view class="function-item" bindtap="searchChatHistory">
|
||||
<view class="function-icon">🔍</view>
|
||||
<text class="function-title">查找聊天记录</text>
|
||||
<text class="function-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<!-- 群聊文件 -->
|
||||
<view class="function-item" bindtap="viewGroupFiles">
|
||||
<view class="function-icon">📁</view>
|
||||
<text class="function-title">群聊文件</text>
|
||||
<text class="function-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<!-- 群聊相册 -->
|
||||
<view class="function-item" bindtap="viewGroupPhotos">
|
||||
<view class="function-icon">🖼️</view>
|
||||
<text class="function-title">群聊相册</text>
|
||||
<text class="function-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<!-- 群二维码 -->
|
||||
<view class="function-item" bindtap="showGroupQRCode">
|
||||
<view class="function-icon">📱</view>
|
||||
<text class="function-title">群二维码</text>
|
||||
<text class="function-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 群设置 -->
|
||||
<view class="group-settings-section">
|
||||
<view class="setting-items">
|
||||
<!-- 消息免打扰 -->
|
||||
<view class="setting-item">
|
||||
<view class="item-info">
|
||||
<text class="item-title">消息免打扰</text>
|
||||
</view>
|
||||
<switch class="setting-switch"
|
||||
checked="{{groupSettings.muteNotifications}}"
|
||||
bindchange="onMuteNotificationsChange" />
|
||||
</view>
|
||||
|
||||
<!-- 置顶聊天 -->
|
||||
<view class="setting-item">
|
||||
<view class="item-info">
|
||||
<text class="item-title">置顶聊天</text>
|
||||
</view>
|
||||
<switch class="setting-switch"
|
||||
checked="{{groupSettings.pinned}}"
|
||||
bindchange="onPinnedChange" />
|
||||
</view>
|
||||
|
||||
<!-- 保存到通讯录 -->
|
||||
<view class="setting-item">
|
||||
<view class="item-info">
|
||||
<text class="item-title">保存到通讯录</text>
|
||||
</view>
|
||||
<switch class="setting-switch"
|
||||
checked="{{groupSettings.saveToContacts}}"
|
||||
bindchange="onSaveToContactsChange" />
|
||||
</view>
|
||||
|
||||
<!-- 群聊设置 -->
|
||||
<view wx:if="{{isOwnerOrAdmin}}"
|
||||
class="setting-item"
|
||||
bindtap="openGroupSettings">
|
||||
<view class="item-info">
|
||||
<text class="item-title">群聊设置</text>
|
||||
</view>
|
||||
<text class="item-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<!-- 发消息按钮 -->
|
||||
<view class="action-btn primary" bindtap="sendMessage">
|
||||
<text class="btn-text">发消息</text>
|
||||
</view>
|
||||
|
||||
<!-- 退出/解散群聊 -->
|
||||
<view class="action-btn danger" bindtap="showLeaveGroupOptions">
|
||||
<text class="btn-text">{{isOwner ? '解散群聊' : '退出群聊'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 群二维码弹窗 -->
|
||||
<view class="qr-code-modal" wx:if="{{showQRCodeModal}}" bindtap="closeQRCodeModal">
|
||||
<view class="modal-content" catchtap="stopPropagation">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">群二维码</text>
|
||||
<view class="close-btn" bindtap="closeQRCodeModal">
|
||||
<text class="close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="qr-code-container">
|
||||
<canvas class="qr-code-canvas"
|
||||
canvas-id="groupQRCode"
|
||||
style="width: {{qrCodeSize}}px; height: {{qrCodeSize}}px;"></canvas>
|
||||
</view>
|
||||
|
||||
<view class="qr-code-info">
|
||||
<text class="qr-info-text">扫描二维码，加入群聊</text>
|
||||
<text class="qr-group-name">{{groupInfo.name}}</text>
|
||||
</view>
|
||||
|
||||
<view class="qr-code-actions">
|
||||
<view class="qr-action-btn" bindtap="saveQRCodeToAlbum">
|
||||
<text class="action-text">保存到相册</text>
|
||||
</view>
|
||||
<view class="qr-action-btn" bindtap="shareQRCode">
|
||||
<text class="action-text">分享二维码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 编辑群名称弹窗 -->
|
||||
<view class="edit-modal" wx:if="{{showEditNameModal}}" bindtap="closeEditNameModal">
|
||||
<view class="modal-content" catchtap="stopPropagation">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">修改群名称</text>
|
||||
<view class="close-btn" bindtap="closeEditNameModal">
|
||||
<text class="close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-body">
|
||||
<input class="edit-input"
|
||||
placeholder="请输入群名称"
|
||||
value="{{editGroupName}}"
|
||||
bindinput="onEditGroupNameInput"
|
||||
maxlength="20"
|
||||
focus="{{showEditNameModal}}" />
|
||||
<view class="input-counter">
|
||||
<text class="counter-text">{{editGroupName.length}}/20</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-actions">
|
||||
<view class="modal-btn cancel" bindtap="closeEditNameModal">
|
||||
<text class="btn-text">取消</text>
|
||||
</view>
|
||||
<view class="modal-btn confirm {{editGroupName.trim() ? 'active' : ''}}"
|
||||
bindtap="confirmEditGroupName">
|
||||
<text class="btn-text">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 编辑群描述弹窗 -->
|
||||
<view class="edit-modal" wx:if="{{showEditDescModal}}" bindtap="closeEditDescModal">
|
||||
<view class="modal-content" catchtap="stopPropagation">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">修改群描述</text>
|
||||
<view class="close-btn" bindtap="closeEditDescModal">
|
||||
<text class="close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-body">
|
||||
<textarea class="edit-textarea"
|
||||
placeholder="请输入群描述"
|
||||
value="{{editGroupDescription}}"
|
||||
bindinput="onEditGroupDescInput"
|
||||
maxlength="200"
|
||||
auto-height
|
||||
focus="{{showEditDescModal}}" />
|
||||
<view class="input-counter">
|
||||
<text class="counter-text">{{editGroupDescription.length}}/200</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-actions">
|
||||
<view class="modal-btn cancel" bindtap="closeEditDescModal">
|
||||
<text class="btn-text">取消</text>
|
||||
</view>
|
||||
<view class="modal-btn confirm" bindtap="confirmEditGroupDescription">
|
||||
<text class="btn-text">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view class="loading-overlay" wx:if="{{loading}}">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">{{loadingText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
831
subpackages/group/group-info/group-info.wxss
Normal file
831
subpackages/group/group-info/group-info.wxss
Normal file
|
|
@ -0,0 +1,831 @@
|
|||
/* 👥 群聊信息页面样式 */
|
||||
|
||||
/* CSS变量定义 */
|
||||
page {
|
||||
--primary-color: #007AFF;
|
||||
--primary-light: #5AC8FA;
|
||||
--primary-dark: #0051D5;
|
||||
--success-color: #34C759;
|
||||
--danger-color: #FF3B30;
|
||||
--warning-color: #FF9500;
|
||||
--background-color: #F2F2F7;
|
||||
--surface-color: #FFFFFF;
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #C7C7CC;
|
||||
--border-color: #E5E5EA;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
--radius-small: 8rpx;
|
||||
--radius-medium: 12rpx;
|
||||
--radius-large: 20rpx;
|
||||
}
|
||||
|
||||
/* 🌙 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
page {
|
||||
--primary-color: #0A84FF;
|
||||
--primary-light: #64D2FF;
|
||||
--primary-dark: #0056CC;
|
||||
--success-color: #30D158;
|
||||
--danger-color: #FF453A;
|
||||
--warning-color: #FF9F0A;
|
||||
--background-color: #000000;
|
||||
--surface-color: #1C1C1E;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #48484A;
|
||||
--border-color: #38383A;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.group-info-container {
|
||||
min-height: 100vh;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 🎨 自定义导航栏 */
|
||||
.custom-navbar {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
||||
box-shadow: var(--shadow-medium);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.navbar-left, .navbar-right {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-medium);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-left:active, .navbar-right:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.back-icon, .more-icon {
|
||||
font-size: 48rpx;
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 页面内容 */
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
/* 🎨 群基本信息 */
|
||||
.group-basic-info {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.group-avatar-container {
|
||||
position: relative;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: var(--radius-large);
|
||||
border: 2rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.edit-avatar-btn {
|
||||
position: absolute;
|
||||
bottom: -8rpx;
|
||||
right: -8rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 28rpx;
|
||||
background: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid var(--surface-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.edit-avatar-btn:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
font-size: 28rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.group-name-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.group-name-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.group-name-container:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-right: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.edit-name-icon {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.group-id, .member-count {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.group-description, .group-announcement {
|
||||
margin-top: 24rpx;
|
||||
padding-top: 24rpx;
|
||||
border-top: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.desc-header, .announcement-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.desc-title, .announcement-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.edit-desc-btn, .edit-announcement-btn {
|
||||
font-size: 26rpx;
|
||||
color: var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.edit-desc-btn:active, .edit-announcement-btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.desc-content, .announcement-content {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.announcement-time {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 🎨 群成员 */
|
||||
.group-members-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 26rpx;
|
||||
color: var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.members-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 120rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.member-item:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.invite-item {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.member-avatar-container {
|
||||
position: relative;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.member-avatar, .invite-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.invite-avatar {
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invite-icon {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
right: -6rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid var(--surface-color);
|
||||
}
|
||||
|
||||
.role-badge.owner {
|
||||
background: var(--warning-color);
|
||||
}
|
||||
|
||||
.role-badge.admin {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.role-text {
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 🎨 群功能 */
|
||||
.group-functions-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.function-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.function-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.function-item:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.function-title {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.function-arrow {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 🎨 群设置 */
|
||||
.group-settings-section {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
margin-bottom: 32rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-item:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.setting-switch {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 🎨 操作按钮 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
height: 96rpx;
|
||||
border-radius: var(--radius-medium);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: var(--primary-color);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.action-btn.primary:active {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.action-btn.danger {
|
||||
background: var(--danger-color);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.action-btn.danger:active {
|
||||
background: #E6342A;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 二维码弹窗 */
|
||||
.qr-code-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 90%;
|
||||
max-width: 600rpx;
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-large);
|
||||
box-shadow: var(--shadow-medium);
|
||||
animation: scaleIn 0.3s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.close-btn:active {
|
||||
background: var(--border-color);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.qr-code-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.qr-code-canvas {
|
||||
border: 1rpx solid var(--border-color);
|
||||
border-radius: var(--radius-small);
|
||||
}
|
||||
|
||||
.qr-code-info {
|
||||
text-align: center;
|
||||
padding: 0 32rpx 32rpx;
|
||||
}
|
||||
|
||||
.qr-info-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.qr-group-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.qr-code-actions {
|
||||
display: flex;
|
||||
border-top: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.qr-action-btn {
|
||||
flex: 1;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.qr-action-btn:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.qr-action-btn:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 30rpx;
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 🎨 编辑弹窗 */
|
||||
.edit-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.edit-input, .edit-textarea {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
border-radius: var(--radius-small);
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
background: var(--background-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.edit-input:focus, .edit-textarea:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.edit-textarea {
|
||||
min-height: 120rpx;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.input-counter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.counter-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
border-top: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-btn:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.modal-btn:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.modal-btn.cancel .btn-text {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.modal-btn.confirm .btn-text {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.modal-btn.confirm.active .btn-text {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 🎨 加载状态 */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid var(--border-color);
|
||||
border-top: 4rpx solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 📱 响应式设计 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.page-content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.group-basic-info,
|
||||
.group-members-section,
|
||||
.group-functions-section,
|
||||
.group-settings-section {
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.member-avatar, .invite-avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
width: 96rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
.page-content {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.group-basic-info,
|
||||
.group-members-section,
|
||||
.group-functions-section,
|
||||
.group-settings-section {
|
||||
padding: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.member-avatar, .invite-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
width: 140rpx;
|
||||
}
|
||||
}
|
||||
434
subpackages/group/group-members/group-members.js
Normal file
434
subpackages/group/group-members/group-members.js
Normal file
|
|
@ -0,0 +1,434 @@
|
|||
// 👥 群成员管理页面逻辑
|
||||
const app = getApp();
|
||||
const groupChatManager = require('../../../utils/group-chat-manager.js');
|
||||
const apiClient = require('../../../utils/api-client.js');
|
||||
const screen =require('../../../utils/screen-adapter')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
stros:[{
|
||||
nickname:'Guodong Chow',
|
||||
avatar:'../../../images/group/testImg.jpg'
|
||||
}],
|
||||
// 系统信息
|
||||
statusBarHeight: 44,
|
||||
navBarHeight: 88,
|
||||
|
||||
// 群信息
|
||||
groupId: '',
|
||||
groupInfo: {},
|
||||
|
||||
// 成员数据
|
||||
allMembers: [],
|
||||
groupOwner: null,
|
||||
admins: [],
|
||||
members: [],
|
||||
|
||||
// 筛选后的数据
|
||||
filteredAdmins: [],
|
||||
filteredMembers: [],
|
||||
|
||||
// 统计数据
|
||||
memberCount: 0,
|
||||
adminCount: 0,
|
||||
normalMemberCount: 0,
|
||||
|
||||
// 用户权限
|
||||
currentUserId: '',
|
||||
userRole: 'member',
|
||||
isOwner: false,
|
||||
isOwnerOrAdmin: false,
|
||||
canInviteMembers: false,
|
||||
|
||||
// 搜索和筛选
|
||||
searchKeyword: '',
|
||||
currentFilter: 'all', // all, admin, member
|
||||
|
||||
// 成员操作
|
||||
showMemberActionModal: false,
|
||||
selectedMember: {},
|
||||
canRemoveMember: false,
|
||||
|
||||
// 加载状态
|
||||
loading: false,
|
||||
loadingText: '加载中...'
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
const {stros} = this.data
|
||||
let testArrs= Array(20).fill(stros).flat();
|
||||
console.log('testArrs------',testArrs);
|
||||
this.setData({
|
||||
testArrs
|
||||
})
|
||||
|
||||
screen.init(this)
|
||||
console.log('123---------123',this.data);
|
||||
// 获取系统信息
|
||||
this.getSystemInfo();
|
||||
|
||||
// 获取群ID
|
||||
if (options.groupId) {
|
||||
this.setData({
|
||||
groupId: options.groupId
|
||||
});
|
||||
|
||||
// 加载群成员
|
||||
this.loadGroupMembers();
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '群聊ID不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
|
||||
// 刷新成员列表
|
||||
if (this.data.groupId) {
|
||||
this.loadGroupMembers();
|
||||
}
|
||||
},
|
||||
|
||||
// 获取系统信息
|
||||
getSystemInfo() {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
console.log('systemInfo-------systemInfo',systemInfo);
|
||||
this.setData({
|
||||
statusBarHeight: systemInfo.statusBarHeight || 44,
|
||||
navBarHeight: 88,
|
||||
currentUserId: wx.getStorageSync('userId')
|
||||
});
|
||||
},
|
||||
|
||||
// 加载群成员
|
||||
async loadGroupMembers() {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '加载成员列表中...'
|
||||
});
|
||||
|
||||
// 获取群基本信息
|
||||
const groupResponse = await apiClient.request({
|
||||
url: `/api/v1/groups/${this.data.groupId}`,
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
if (!groupResponse.success) {
|
||||
throw new Error(groupResponse.error || '获取群信息失败');
|
||||
}
|
||||
|
||||
// 获取群成员列表
|
||||
const membersResult = await groupChatManager.getGroupMembers(this.data.groupId, false);
|
||||
|
||||
if (!membersResult.success) {
|
||||
throw new Error(membersResult.error || '获取群成员失败');
|
||||
}
|
||||
|
||||
const allMembers = membersResult.data;
|
||||
|
||||
// 分类成员
|
||||
const groupOwner = allMembers.find(member => member.role === 'owner');
|
||||
const admins = allMembers.filter(member => member.role === 'admin');
|
||||
const members = allMembers.filter(member => member.role === 'member');
|
||||
|
||||
// 获取当前用户角色
|
||||
const currentUser = allMembers.find(member => member.userId === this.data.currentUserId);
|
||||
const userRole = currentUser ? currentUser.role : 'member';
|
||||
|
||||
// 计算权限
|
||||
const isOwner = userRole === 'owner';
|
||||
const isOwnerOrAdmin = userRole === 'owner' || userRole === 'admin';
|
||||
const canInviteMembers = isOwnerOrAdmin || groupResponse.data.settings?.allowMemberInvite;
|
||||
|
||||
this.setData({
|
||||
groupInfo: groupResponse.data,
|
||||
allMembers: allMembers,
|
||||
groupOwner: groupOwner,
|
||||
admins: admins,
|
||||
members: members,
|
||||
memberCount: allMembers.length,
|
||||
adminCount: admins.length + (groupOwner ? 1 : 0),
|
||||
normalMemberCount: members.length,
|
||||
userRole: userRole,
|
||||
isOwner: isOwner,
|
||||
isOwnerOrAdmin: isOwnerOrAdmin,
|
||||
canInviteMembers: canInviteMembers,
|
||||
loading: false
|
||||
});
|
||||
|
||||
// 应用当前筛选
|
||||
this.applyFilter();
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 加载群成员失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '加载群成员失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 🔍 ===== 搜索和筛选 =====
|
||||
|
||||
// 搜索输入
|
||||
onSearchInput(e) {
|
||||
const keyword = e.detail.value;
|
||||
this.setData({
|
||||
searchKeyword: keyword
|
||||
});
|
||||
this.applyFilter();
|
||||
},
|
||||
|
||||
// 清除搜索
|
||||
clearSearch() {
|
||||
this.setData({
|
||||
searchKeyword: ''
|
||||
});
|
||||
this.applyFilter();
|
||||
},
|
||||
|
||||
// 切换筛选
|
||||
switchFilter(e) {
|
||||
const filter = e.currentTarget.dataset.filter;
|
||||
|
||||
this.setData({
|
||||
currentFilter: filter
|
||||
});
|
||||
this.applyFilter();
|
||||
},
|
||||
|
||||
// 应用筛选
|
||||
applyFilter() {
|
||||
const keyword = this.data.searchKeyword.toLowerCase();
|
||||
|
||||
// 筛选管理员
|
||||
let filteredAdmins = this.data.admins;
|
||||
if (keyword) {
|
||||
filteredAdmins = this.data.admins.filter(member => {
|
||||
const name = (member.nickname || member.username || '').toLowerCase();
|
||||
return name.includes(keyword);
|
||||
});
|
||||
}
|
||||
|
||||
// 筛选普通成员
|
||||
let filteredMembers = this.data.members;
|
||||
if (keyword) {
|
||||
filteredMembers = this.data.members.filter(member => {
|
||||
const name = (member.nickname || member.username || '').toLowerCase();
|
||||
return name.includes(keyword);
|
||||
});
|
||||
}
|
||||
|
||||
this.setData({
|
||||
filteredAdmins: filteredAdmins,
|
||||
filteredMembers: filteredMembers
|
||||
});
|
||||
},
|
||||
|
||||
// 👤 ===== 成员操作 =====
|
||||
|
||||
// 邀请成员
|
||||
inviteMembers() {
|
||||
if (!this.data.canInviteMembers) {
|
||||
wx.showToast({
|
||||
title: '没有邀请权限',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 跳转到邀请成员页面
|
||||
wx.navigateTo({
|
||||
url: `/subpackages/group/create-group-chat/create-group-chat?groupId=${this.data.groupId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 查看成员资料
|
||||
viewMemberProfile(e) {
|
||||
const userId = e.currentTarget.dataset.userId;
|
||||
|
||||
// 关闭操作弹窗
|
||||
this.closeMemberActionModal();
|
||||
|
||||
if (userId === this.data.currentUserId) {
|
||||
// 查看自己的资料
|
||||
wx.navigateTo({
|
||||
url: '/subpackages/profile/profile/profile'
|
||||
});
|
||||
} else {
|
||||
// 查看其他成员资料
|
||||
wx.navigateTo({
|
||||
url: `/subpackages/social/user-detail/user-detail?customId=${userId}`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 显示成员操作菜单
|
||||
showMemberActions(e) {
|
||||
const member = e.currentTarget.dataset.member;
|
||||
|
||||
if (!member || member.userId === this.data.currentUserId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 计算是否可以移除成员
|
||||
const canRemoveMember = this.data.isOwnerOrAdmin &&
|
||||
member.role !== 'owner' &&
|
||||
(this.data.isOwner || member.role !== 'admin');
|
||||
|
||||
this.setData({
|
||||
selectedMember: member,
|
||||
canRemoveMember: canRemoveMember,
|
||||
showMemberActionModal: true
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭成员操作弹窗
|
||||
closeMemberActionModal() {
|
||||
this.setData({
|
||||
showMemberActionModal: false,
|
||||
selectedMember: {},
|
||||
canRemoveMember: false
|
||||
});
|
||||
},
|
||||
|
||||
// 发送消息给成员
|
||||
sendMessageToMember() {
|
||||
const member = this.data.selectedMember;
|
||||
|
||||
// 关闭弹窗
|
||||
this.closeMemberActionModal();
|
||||
|
||||
// 跳转到私聊页面
|
||||
wx.navigateTo({
|
||||
url: `/pages/message/chat/chat?chatType=0&targetId=${member.userId}&chatName=${encodeURIComponent(member.nickname || member.username)}`
|
||||
});
|
||||
},
|
||||
|
||||
// 切换成员管理员状态
|
||||
async toggleMemberAdmin() {
|
||||
const member = this.data.selectedMember;
|
||||
const isAdmin = member.role === 'admin';
|
||||
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: isAdmin ? '取消管理员中...' : '设置管理员中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.setAdmin(this.data.groupId, member.userId, !isAdmin);
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
wx.showToast({
|
||||
title: isAdmin ? '已取消管理员' : '已设为管理员',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 关闭弹窗
|
||||
this.closeMemberActionModal();
|
||||
|
||||
// 刷新成员列表
|
||||
this.loadGroupMembers();
|
||||
} else {
|
||||
throw new Error(result.error || '操作失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 切换管理员状态失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '操作失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 移出群聊
|
||||
removeMemberFromGroup() {
|
||||
const member = this.data.selectedMember;
|
||||
|
||||
wx.showModal({
|
||||
title: '移出群聊',
|
||||
content: `确定要将"${member.nickname || member.username}"移出群聊吗？`,
|
||||
confirmText: '移出',
|
||||
confirmColor: '#FF3B30',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.performRemoveMember(member);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 执行移出成员
|
||||
async performRemoveMember(member) {
|
||||
try {
|
||||
this.setData({
|
||||
loading: true,
|
||||
loadingText: '移出成员中...'
|
||||
});
|
||||
|
||||
const result = await groupChatManager.removeMember(this.data.groupId, member.userId);
|
||||
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
wx.showToast({
|
||||
title: '成员已移出',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 关闭弹窗
|
||||
this.closeMemberActionModal();
|
||||
|
||||
// 刷新成员列表
|
||||
this.loadGroupMembers();
|
||||
} else {
|
||||
throw new Error(result.error || '移出成员失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
console.error('❌ 移出成员失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '移出成员失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 阻止事件冒泡
|
||||
stopPropagation() {
|
||||
// 阻止点击事件冒泡
|
||||
},
|
||||
|
||||
// 🧭 ===== 页面导航 =====
|
||||
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
wx.navigateBack();
|
||||
}
|
||||
});
|
||||
|
||||
7
subpackages/group/group-members/group-members.json
Normal file
7
subpackages/group/group-members/group-members.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#000000",
|
||||
"backgroundTextStyle": "dark",
|
||||
"enablePullDownRefresh": false,
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
302
subpackages/group/group-members/group-members.wxml
Normal file
302
subpackages/group/group-members/group-members.wxml
Normal file
|
|
@ -0,0 +1,302 @@
|
|||
<!-- 👥 群成员管理页面 -->
|
||||
<view class="group-members-container">
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar" style="padding-top: {{menuButtonInfo.top}}px;">
|
||||
<view class="navbar-content" style="height: {{menuButtonHeight}}px;">
|
||||
<view class="navbar-aran">
|
||||
<view class="navbar-left" bindtap="goBack">
|
||||
<!-- <text class="back-icon">‹</text> -->
|
||||
<image class="back-icon" src="../../../images/back_arrow.svg" mode="" />
|
||||
</view>
|
||||
<view class="navbar-title">
|
||||
<!-- <text class="title-text">群成员 ({{memberCount}})</text> -->
|
||||
<view class="title-text">群成员管理</view>
|
||||
</view>
|
||||
<view class="menu-rigth">
|
||||
<image class="menu-icon" src="../../../images/group/menu.svg" mode="" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="navbar-right" wx:if="{{canInviteMembers}}" bindtap="inviteMembers">
|
||||
<text class="invite-text">邀请</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="members-conten">
|
||||
<view class="conten-aran">
|
||||
<view class="members-aran-img">
|
||||
<image class="aran-img" src="../../../images/group/testImg.jpg" mode="" />
|
||||
<view>
|
||||
欢乐谷
|
||||
<image class="aran-edit" src="../../../images/group/edit.svg" mode="" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-text-conten">
|
||||
<view class="text-conten"> 已选择
|
||||
<view class="member-count">10</view>
|
||||
/20个成员
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-action">
|
||||
<view class="member-btn">移出群聊</view>
|
||||
<view class="member-btn">添加成员</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="member-out">
|
||||
<scroll-view scroll-y="true" class="scroll-container">
|
||||
<view class="member-arrs">
|
||||
<view class="arrs-aran" wx:for="{{testArrs}}" wx:key="index">
|
||||
<view class="arrs-aran-img">
|
||||
<image class="aran-img-avatar" src="{{item.avatar}}" mode=""/>
|
||||
</view>
|
||||
<view class="arrs-aran-title">{{item.nickname}}</view>
|
||||
<view class="arrs-aran-selected">
|
||||
<view class="aran-selected"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<!-- <view class="page-content"> -->
|
||||
<!-- 搜索栏 -->
|
||||
<!-- <view class="search-container">
|
||||
<view class="search-input-wrapper">
|
||||
<text class="search-icon">🔍</text>
|
||||
<input class="search-input"
|
||||
placeholder="搜索群成员"
|
||||
value="{{searchKeyword}}"
|
||||
bindinput="onSearchInput" />
|
||||
<view wx:if="{{searchKeyword}}"
|
||||
class="clear-search"
|
||||
bindtap="clearSearch">
|
||||
<text class="clear-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 成员筛选 -->
|
||||
<!-- <view class="filter-container">
|
||||
<view class="filter-tabs">
|
||||
<view class="filter-tab {{currentFilter === 'all' ? 'active' : ''}}"
|
||||
bindtap="switchFilter"
|
||||
data-filter="all">
|
||||
<text class="tab-text">全部 ({{memberCount}})</text>
|
||||
</view>
|
||||
<view class="filter-tab {{currentFilter === 'admin' ? 'active' : ''}}"
|
||||
bindtap="switchFilter"
|
||||
data-filter="admin">
|
||||
<text class="tab-text">管理员 ({{adminCount}})</text>
|
||||
</view>
|
||||
<view class="filter-tab {{currentFilter === 'member' ? 'active' : ''}}"
|
||||
bindtap="switchFilter"
|
||||
data-filter="member">
|
||||
<text class="tab-text">成员 ({{normalMemberCount}})</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 成员列表 -->
|
||||
<!-- <scroll-view class="members-list" scroll-y="true"> -->
|
||||
<!-- 群主 -->
|
||||
<!-- <view wx:if="{{groupOwner && (currentFilter === 'all' || currentFilter === 'admin')}}"
|
||||
class="member-section">
|
||||
<view class="section-title">
|
||||
<text class="title-text">群主</text>
|
||||
</view>
|
||||
|
||||
<view class="member-item owner"
|
||||
bindtap="viewMemberProfile"
|
||||
data-user-id="{{groupOwner.userId}}">
|
||||
<view class="member-avatar-container">
|
||||
<image class="member-avatar"
|
||||
src="{{groupOwner.avatar || '/images/default-avatar.svg'}}"
|
||||
mode="aspectFill" />
|
||||
<view class="role-badge owner">
|
||||
<text class="role-text">群主</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="member-info">
|
||||
<text class="member-name">{{groupOwner.nickname || groupOwner.username}}</text>
|
||||
<text class="member-status">{{groupOwner.status || ''}}</text>
|
||||
</view>
|
||||
|
||||
<view class="member-actions">
|
||||
<text class="action-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 管理员 -->
|
||||
<!-- <view wx:if="{{filteredAdmins.length > 0 && (currentFilter === 'all' || currentFilter === 'admin')}}"
|
||||
class="member-section">
|
||||
<view class="section-title">
|
||||
<text class="title-text">管理员</text>
|
||||
</view>
|
||||
|
||||
<view class="member-item admin"
|
||||
wx:for="{{filteredAdmins}}"
|
||||
wx:key="userId"
|
||||
bindtap="viewMemberProfile"
|
||||
data-user-id="{{item.userId}}"
|
||||
bindlongpress="showMemberActions"
|
||||
data-member="{{item}}">
|
||||
<view class="member-avatar-container">
|
||||
<image class="member-avatar"
|
||||
src="{{item.avatar || '/images/default-avatar.svg'}}"
|
||||
mode="aspectFill" />
|
||||
<view class="role-badge admin">
|
||||
<text class="role-text">管理员</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="member-info">
|
||||
<text class="member-name">{{item.nickname || item.username}}</text>
|
||||
<text class="member-status">{{item.status || ''}}</text>
|
||||
</view>
|
||||
|
||||
<view class="member-actions">
|
||||
<view wx:if="{{isOwner && item.userId !== currentUserId}}"
|
||||
class="action-btn"
|
||||
bindtap="showMemberActions"
|
||||
data-member="{{item}}"
|
||||
catchtap="stopPropagation">
|
||||
<text class="action-icon">⋯</text>
|
||||
</view>
|
||||
<text class="action-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 普通成员 -->
|
||||
<!-- <view wx:if="{{filteredMembers.length > 0 && (currentFilter === 'all' || currentFilter === 'member')}}"
|
||||
class="member-section">
|
||||
<view class="section-title">
|
||||
<text class="title-text">成员</text>
|
||||
</view>
|
||||
|
||||
<view class="member-item member"
|
||||
wx:for="{{filteredMembers}}"
|
||||
wx:key="userId"
|
||||
bindtap="viewMemberProfile"
|
||||
data-user-id="{{item.userId}}"
|
||||
bindlongpress="showMemberActions"
|
||||
data-member="{{item}}">
|
||||
<view class="member-avatar-container">
|
||||
<image class="member-avatar"
|
||||
src="{{item.avatar || '/images/default-avatar.svg'}}"
|
||||
mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<view class="member-info">
|
||||
<text class="member-name">{{item.nickname || item.username}}</text>
|
||||
<text class="member-status">{{item.status || ''}}</text>
|
||||
</view>
|
||||
|
||||
<view class="member-actions">
|
||||
<view wx:if="{{isOwnerOrAdmin && item.userId !== currentUserId}}"
|
||||
class="action-btn"
|
||||
bindtap="showMemberActions"
|
||||
data-member="{{item}}"
|
||||
catchtap="stopPropagation">
|
||||
<text class="action-icon">⋯</text>
|
||||
</view>
|
||||
<text class="action-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
-->
|
||||
<!-- 空状态 -->
|
||||
<!-- <view class="empty-state" wx:if="{{filteredMembers.length === 0 && filteredAdmins.length === 0 && !groupOwner}}">
|
||||
<text class="empty-icon">👥</text>
|
||||
<text class="empty-text">{{searchKeyword ? '没有找到相关成员' : '暂无成员'}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 成员操作菜单 -->
|
||||
<!-- <view class="member-action-modal" wx:if="{{showMemberActionModal}}" bindtap="closeMemberActionModal">
|
||||
<view class="modal-content" catchtap="stopPropagation">
|
||||
<view class="modal-header">
|
||||
<view class="member-info-header">
|
||||
<image class="member-avatar-large"
|
||||
src="{{selectedMember.avatar || '/images/default-avatar.svg'}}"
|
||||
mode="aspectFill" />
|
||||
<view class="member-details">
|
||||
<text class="member-name-large">{{selectedMember.nickname || selectedMember.username}}</text>
|
||||
<text class="member-role-text">{{selectedMember.role === 'admin' ? '管理员' : '成员'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="close-btn" bindtap="closeMemberActionModal">
|
||||
<text class="close-icon">✕</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="action-list">
|
||||
查看资料
|
||||
<view class="action-item" bindtap="viewMemberProfile" data-user-id="{{selectedMember.userId}}">
|
||||
<view class="action-icon-wrapper">
|
||||
<text class="action-icon">👤</text>
|
||||
</view>
|
||||
<text class="action-title">查看资料</text>
|
||||
</view>
|
||||
|
||||
发送消息
|
||||
<view class="action-item" bindtap="sendMessageToMember">
|
||||
<view class="action-icon-wrapper">
|
||||
<text class="action-icon">💬</text>
|
||||
</view>
|
||||
<text class="action-title">发送消息</text>
|
||||
</view>
|
||||
|
||||
设置/取消管理员
|
||||
<view wx:if="{{isOwner && selectedMember.role !== 'owner'}}"
|
||||
class="action-item"
|
||||
bindtap="toggleMemberAdmin">
|
||||
<view class="action-icon-wrapper">
|
||||
<text class="action-icon">{{selectedMember.role === 'admin' ? '👤' : '👑'}}</text>
|
||||
</view>
|
||||
<text class="action-title">{{selectedMember.role === 'admin' ? '取消管理员' : '设为管理员'}}</text>
|
||||
</view>
|
||||
|
||||
移出群聊
|
||||
<view wx:if="{{canRemoveMember}}"
|
||||
class="action-item danger"
|
||||
bindtap="removeMemberFromGroup">
|
||||
<view class="action-icon-wrapper">
|
||||
<text class="action-icon">🚫</text>
|
||||
</view>
|
||||
<text class="action-title">移出群聊</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<!-- <view class="loading-overlay" wx:if="{{loading}}">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">{{loadingText}}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
785
subpackages/group/group-members/group-members.wxss
Normal file
785
subpackages/group/group-members/group-members.wxss
Normal file
|
|
@ -0,0 +1,785 @@
|
|||
/* 👥 群成员管理页面样式 */
|
||||
|
||||
/* CSS变量定义 */
|
||||
page {
|
||||
--primary-color: #007AFF;
|
||||
--primary-light: #5AC8FA;
|
||||
--primary-dark: #0051D5;
|
||||
--success-color: #34C759;
|
||||
--danger-color: #FF3B30;
|
||||
--warning-color: #FF9500;
|
||||
--background-color: #F2F2F7;
|
||||
--surface-color: #FFFFFF;
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #C7C7CC;
|
||||
--border-color: #E5E5EA;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
--radius-small: 8rpx;
|
||||
--radius-medium: 12rpx;
|
||||
--radius-large: 20rpx;
|
||||
}
|
||||
|
||||
/* 🌙 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
page {
|
||||
--primary-color: #0A84FF;
|
||||
--primary-light: #64D2FF;
|
||||
--primary-dark: #0056CC;
|
||||
--success-color: #30D158;
|
||||
--danger-color: #FF453A;
|
||||
--warning-color: #FF9F0A;
|
||||
--background-color: #000000;
|
||||
--surface-color: #1C1C1E;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #8E8E93;
|
||||
--text-tertiary: #48484A;
|
||||
--border-color: #38383A;
|
||||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.group-members-container {
|
||||
height: 100vh;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 🎨 自定义导航栏 */
|
||||
.custom-navbar {
|
||||
/* background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); */
|
||||
/* box-shadow: var(--shadow-medium); */
|
||||
z-index: 1000;
|
||||
box-sizing: border-box;
|
||||
background-color: black;
|
||||
/* border: 10px solid red; */
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
/* border: 2px solid rgb(6, 235, 101); */
|
||||
width: 80%;
|
||||
}
|
||||
.navbar-aran{
|
||||
width: 96%;
|
||||
/* border: 1px solid black; */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-left, .navbar-right {
|
||||
margin-left: 10rpx;
|
||||
border-radius: var(--radius-medium);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* .navbar-left {
|
||||
justify-content: flex-start;
|
||||
} */
|
||||
|
||||
/* .navbar-right {
|
||||
justify-content: flex-end;
|
||||
} */
|
||||
|
||||
/* .navbar-left:active, .navbar-right:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(0.95);
|
||||
} */
|
||||
|
||||
.back-icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
.menu-icon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
/* width: 400rpx; */
|
||||
padding-left: 180rpx;
|
||||
|
||||
/* border: 1px solid red; */
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.title-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
|
||||
/* padding-left: 40rpx; */
|
||||
}
|
||||
|
||||
.members-conten{
|
||||
background-color: black;
|
||||
height: 100vh;
|
||||
/* border: 1px solid red; */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.conten-aran{
|
||||
/* border: 1px solid white; */
|
||||
}
|
||||
|
||||
.members-aran-img{
|
||||
/* border: 1px solid red; */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.aran-img{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
.aran-edit{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
.member-text-conten{
|
||||
/* border: 1px solid rgb(9, 240, 97); */
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
margin: 10rpx auto;
|
||||
|
||||
|
||||
}
|
||||
.member-count{
|
||||
background: linear-gradient(to bottom, #FF6460, #EC42C8 14.28%, #435CFF 64%, #00D5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.text-conten{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
|
||||
}
|
||||
.member-action{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 60rpx;
|
||||
/* border: 1px solid rgb(9, 240, 97); */
|
||||
width: 90%;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
.member-btn{
|
||||
width: 320rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(87.7deg, rgba(104, 249, 254, 0.9) 2.48%, rgba(170, 147, 237, 0.9) 98.18%);
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
font-size: 32rpx;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.member-out{
|
||||
height: 100vh;
|
||||
/* border: 10px solid darkcyan; */
|
||||
background: #111D25;
|
||||
}
|
||||
.scroll-container{
|
||||
height: 80vh;
|
||||
width: 100%;
|
||||
|
||||
/* border: 1px solid red; */
|
||||
|
||||
}
|
||||
.member-arrs{
|
||||
box-sizing: border-box;
|
||||
width: 700rpx;
|
||||
margin-left: 25rpx;
|
||||
margin-top: 20rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
.arrs-aran{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
margin: 10rpx auto;
|
||||
background: #FFFFFF1A;
|
||||
border-radius: 24rpx;
|
||||
padding: 16rpx;
|
||||
}
|
||||
.aran-img-avatar{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 24rpx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.arrs-aran-title{
|
||||
width: 380rpx;
|
||||
height: 36rpx;
|
||||
font-weight: 700;
|
||||
font-family: 'SF Pro';
|
||||
font-size: 32rpx;
|
||||
color: #F4F6FA;
|
||||
}
|
||||
|
||||
.arrs-aran-selected{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
opacity: 1;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
border: 4rpx solid #F4F0EB;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
.aran-selected{
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
opacity: 1;
|
||||
border-radius: 4rpx;
|
||||
background: #4DD1A1;
|
||||
}
|
||||
|
||||
.invite-text {
|
||||
font-size: 32rpx;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* 🎨 页面内容 */
|
||||
.page-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* 🎨 搜索栏 */
|
||||
.search-container {
|
||||
padding: 24rpx 32rpx;
|
||||
background: var(--surface-color);
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--background-color);
|
||||
border: 1rpx solid var(--border-color);
|
||||
border-radius: var(--radius-small);
|
||||
padding: 0 24rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input-wrapper:focus-within {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
background: var(--text-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.clear-search:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 24rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🎨 筛选标签 */
|
||||
.filter-container {
|
||||
background: var(--surface-color);
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 4rpx solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-tab:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
border-bottom-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-tab.active .tab-text {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 🎨 成员列表 */
|
||||
.members-list {
|
||||
flex: 1;
|
||||
background: var(--surface-color);
|
||||
}
|
||||
|
||||
.member-section {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background: var(--background-color);
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.section-title .title-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.member-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.member-item:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.member-item.owner {
|
||||
background: rgba(255, 149, 0, 0.05);
|
||||
}
|
||||
|
||||
.member-item.admin {
|
||||
background: rgba(0, 122, 255, 0.05);
|
||||
}
|
||||
|
||||
.member-avatar-container {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
border: 2rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
right: -6rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx solid var(--surface-color);
|
||||
}
|
||||
|
||||
.role-badge.owner {
|
||||
background: var(--warning-color);
|
||||
}
|
||||
|
||||
.role-badge.admin {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.role-text {
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.member-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.member-status {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.member-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
background: var(--border-color);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.action-arrow {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 🎨 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 24rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 🎨 成员操作弹窗 */
|
||||
.member-action-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-large) var(--radius-large) 0 0;
|
||||
box-shadow: var(--shadow-medium);
|
||||
animation: slideUp 0.3s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.member-info-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.member-avatar-large {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
border: 2rpx solid var(--border-color);
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.member-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.member-name-large {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.member-role-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.close-btn:active {
|
||||
background: var(--border-color);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.action-list {
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.action-item:active {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.action-item.danger {
|
||||
background: rgba(255, 59, 48, 0.05);
|
||||
}
|
||||
|
||||
.action-item.danger:active {
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
}
|
||||
|
||||
.action-icon-wrapper {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.action-item.danger .action-icon-wrapper {
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
}
|
||||
|
||||
.action-item .action-icon {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.action-item.danger .action-icon {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.action-title {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.action-item.danger .action-title {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* 🎨 加载状态 */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid var(--border-color);
|
||||
border-top: 4rpx solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 📱 响应式设计 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.search-container,
|
||||
.member-item {
|
||||
padding-left: 24rpx;
|
||||
padding-right: 24rpx;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.member-avatar-large {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
.search-container,
|
||||
.member-item {
|
||||
padding-left: 40rpx;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 56rpx;
|
||||
}
|
||||
|
||||
.member-avatar-large {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 70rpx;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue