You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
247 lines
5.3 KiB
247 lines
5.3 KiB
<template>
|
|
<view class="group-item" @click="goToDetail">
|
|
<view class="group-header">
|
|
<view class="group-avatar">
|
|
<image :src="item.image || '/static/image/logo.jpg'" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<view class="group-info">
|
|
<view class="group-name">{{ item.title || '群组名称' }}</view>
|
|
<view class="group-desc">{{ item.titleText || '群组描述' }}</view>
|
|
<view class="group-stats">
|
|
<text class="member-count">{{ item.num || 0 }}人</text>
|
|
<text v-if="item.classId_dictText" class="separator">·</text>
|
|
<text v-if="item.classId_dictText" class="location">{{ item.classId_dictText }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="group-status">
|
|
<!-- 如果是自己发布的群组，显示编辑和删除按钮 -->
|
|
<view v-if="isOwner" class="admin-actions" @click.stop="">
|
|
<view class="action-btn edit-btn" @click="editGroup">
|
|
<uv-icon name="edit-pen" size="40rpx" color="#5baaff"></uv-icon>
|
|
</view>
|
|
<view class="action-btn delete-btn" @click="deleteGroup">
|
|
<uv-icon name="trash" size="40rpx" color="#ff4757"></uv-icon>
|
|
</view>
|
|
</view>
|
|
<!-- 否则显示进入按钮 -->
|
|
<view v-else class="join-btn">
|
|
<uv-icon name="arrow-right" size="24rpx" color="#5baaff"></uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
edit : {
|
|
default : false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['userInfo']),
|
|
|
|
// 判断是否为群主
|
|
isOwner() {
|
|
return this.userInfo && this.item && this.userInfo.id === this.item.userId && this.edit
|
|
}
|
|
},
|
|
methods: {
|
|
// 跳转到群组详情
|
|
goToDetail() {
|
|
this.$utils.navigateTo(`/pages_order/group/groupDetail?id=${this.item.id}`)
|
|
},
|
|
|
|
// 编辑群组
|
|
editGroup() {
|
|
this.$utils.navigateTo(`/pages_order/group/createGroup?id=${this.item.id}`)
|
|
},
|
|
|
|
// 删除群组
|
|
deleteGroup() {
|
|
uni.showModal({
|
|
title: '确认删除',
|
|
content: '确定要删除这个群组吗？删除后无法恢复！',
|
|
confirmText: '删除',
|
|
confirmColor: '#ff4757',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.confirmDeleteGroup()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 确认删除群组
|
|
confirmDeleteGroup() {
|
|
uni.showLoading({
|
|
title: '删除中...'
|
|
})
|
|
|
|
this.$api('deleteGroup', { id: this.item.id }, res => {
|
|
uni.hideLoading()
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'success'
|
|
})
|
|
// 通知父组件刷新列表
|
|
this.$emit('refresh')
|
|
} else {
|
|
uni.showToast({
|
|
title: res.message || '删除失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.group-item {
|
|
margin: 20rpx;
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.group-avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-right: 20rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.group-info {
|
|
flex: 1;
|
|
min-width: 0; // 防止文本溢出
|
|
|
|
.group-name {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.group-desc {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
margin-bottom: 8rpx;
|
|
line-height: 1.4;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.group-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
|
|
.member-count {
|
|
background: #f0f8ff;
|
|
color: #5baaff;
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.separator {
|
|
margin: 0 8rpx;
|
|
color: #ddd;
|
|
}
|
|
|
|
.location {
|
|
color: #999;
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.group-status {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.admin-actions {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
|
|
.action-btn {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
|
|
&.edit-btn {
|
|
background-color: rgba(91, 170, 255, 0.1);
|
|
|
|
&:active {
|
|
background-color: rgba(91, 170, 255, 0.2);
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
&.delete-btn {
|
|
background-color: rgba(255, 71, 87, 0.1);
|
|
|
|
&:active {
|
|
background-color: rgba(255, 71, 87, 0.2);
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.join-btn {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background-color: #f8f9fa;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background-color: #e9ecef;
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|