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.
488 lines
12 KiB
488 lines
12 KiB
<template>
|
|
<view class="page">
|
|
|
|
<navbar title="同城群"/>
|
|
|
|
<!-- 顶部操作栏 -->
|
|
<view class="top-actions">
|
|
<view class="search-container">
|
|
<uv-search
|
|
v-model="searchKeyword"
|
|
placeholder="搜索群组名称"
|
|
@search="onSearch"
|
|
@clear="onClear"
|
|
bgColor="#f5f5f5"
|
|
:showAction="false"
|
|
></uv-search>
|
|
</view>
|
|
<view class="create-btn" @click="createGroup">
|
|
<uv-icon name="plus" size="30rpx" color="#fff"></uv-icon>
|
|
<text>创建群组</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 城市分类标签 -->
|
|
<view class="city-tabs-container">
|
|
<uv-tabs
|
|
:list="categoryList"
|
|
:current="currentCityTabIndex"
|
|
:activeStyle="{color: '#5baaff', fontWeight: 600}"
|
|
lineColor="#5baaff"
|
|
lineHeight="6rpx"
|
|
lineWidth="40rpx"
|
|
keyName="name"
|
|
@click="onCategoryClick"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 群组列表 -->
|
|
<view class="group-list">
|
|
<groupItem
|
|
:key="index"
|
|
v-for="(item, index) in groupList"
|
|
:item="item"
|
|
@click="onGroupClick(item)"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view v-if="groupList.length === 0 && !loading" class="empty-state">
|
|
<uv-empty
|
|
mode="list"
|
|
text="暂无群组"
|
|
iconSize="120"
|
|
></uv-empty>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view v-if="loading" class="loading-state">
|
|
<uv-loading-icon size="40"></uv-loading-icon>
|
|
<text>加载中...</text>
|
|
</view>
|
|
|
|
<tabber select="2" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import groupItem from '@/components/list/group/groupItem.vue'
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
components : {
|
|
tabber,
|
|
groupItem,
|
|
},
|
|
data() {
|
|
return {
|
|
searchKeyword: '',
|
|
loading: false,
|
|
currentCityTabIndex: 0, // uv-tabs当前选中的城市索引
|
|
queryParams: {
|
|
cityId: null
|
|
},
|
|
groupList: [],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['cityList']),
|
|
|
|
// 城市分类列表（包含"全部"选项）
|
|
categoryList() {
|
|
const allTab = { name: '全部', value: null }
|
|
const cityTabs = this.cityList.map(city => ({
|
|
name: city.name || city.cityName || city.title,
|
|
value: city.id || city.cityId
|
|
}))
|
|
return [allTab, ...cityTabs]
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 获取城市列表
|
|
this.$store.commit('getCityList')
|
|
|
|
// 页面加载时初始化数据
|
|
this.loadStaticGroupData()
|
|
},
|
|
onShow() {
|
|
// 页面显示时刷新数据
|
|
if (this.groupList.length === 0) {
|
|
this.loadStaticGroupData()
|
|
}
|
|
},
|
|
methods: {
|
|
// 加载静态群组数据
|
|
loadStaticGroupData(){
|
|
console.log('开始加载静态群组数据')
|
|
this.loading = true
|
|
// 模拟加载延迟
|
|
setTimeout(() => {
|
|
this.loading = false
|
|
console.log('加载完成，开始筛选数据')
|
|
// 根据分类筛选静态数据
|
|
this.filterGroupListByCategory()
|
|
}, 500)
|
|
},
|
|
|
|
// 根据分类筛选群组列表
|
|
filterGroupListByCategory() {
|
|
const allGroups = [
|
|
{
|
|
id: 1,
|
|
name: '江华同城交流群',
|
|
description: '江华本地生活交流，分享美食、租房、工作信息',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 1280,
|
|
type: '同城群',
|
|
category: 'local',
|
|
qrCode: '/static/image/qr/group1.jpg',
|
|
lastMessage: '有人知道江华哪里有好的租房信息吗？',
|
|
lastMessageTime: '2小时前'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '江华美食分享群',
|
|
description: '发现江华本地美食，分享美食攻略',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 856,
|
|
type: '兴趣群',
|
|
category: 'interest',
|
|
qrCode: '/static/image/qr/group2.jpg',
|
|
lastMessage: '推荐一家新开的火锅店，味道不错',
|
|
lastMessageTime: '1小时前'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '江华租房信息群',
|
|
description: '江华租房信息发布与交流',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 2341,
|
|
type: '同城群',
|
|
category: 'local',
|
|
qrCode: '/static/image/qr/group3.jpg',
|
|
lastMessage: '有单间出租，位置好，价格实惠',
|
|
lastMessageTime: '30分钟前'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '江华求职招聘群',
|
|
description: '江华本地求职招聘信息发布',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 1567,
|
|
type: '工作群',
|
|
category: 'work',
|
|
qrCode: '/static/image/qr/group4.jpg',
|
|
lastMessage: '招聘销售员，待遇优厚',
|
|
lastMessageTime: '1天前'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '江华旅游攻略群',
|
|
description: '江华旅游景点推荐，攻略分享',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 623,
|
|
type: '兴趣群',
|
|
category: 'interest',
|
|
qrCode: '/static/image/qr/group5.jpg',
|
|
lastMessage: '周末去瑶族文化园玩，有一起的吗？',
|
|
lastMessageTime: '3小时前'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '江华学习交流群',
|
|
description: '江华本地学习交流，分享学习资源',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 445,
|
|
type: '学习群',
|
|
category: 'study',
|
|
qrCode: '/static/image/qr/group6.jpg',
|
|
lastMessage: '有人一起学习英语吗？',
|
|
lastMessageTime: '2天前'
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '江华二手交易群',
|
|
description: '江华本地二手物品交易',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 1890,
|
|
type: '同城群',
|
|
category: 'local',
|
|
qrCode: '/static/image/qr/group7.jpg',
|
|
lastMessage: '出售一台九成新的洗衣机',
|
|
lastMessageTime: '1小时前'
|
|
},
|
|
{
|
|
id: 8,
|
|
name: '江华宠物交流群',
|
|
description: '江华宠物爱好者交流群',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 567,
|
|
type: '兴趣群',
|
|
category: 'interest',
|
|
qrCode: '/static/image/qr/group8.jpg',
|
|
lastMessage: '有人知道江华哪里有好的宠物医院吗？',
|
|
lastMessageTime: '4小时前'
|
|
},
|
|
{
|
|
id: 9,
|
|
name: '江华汽车交流群',
|
|
description: '江华汽车爱好者交流，分享用车心得',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 892,
|
|
type: '兴趣群',
|
|
category: 'interest',
|
|
qrCode: '/static/image/qr/group9.jpg',
|
|
lastMessage: '有人知道江华哪里有好的汽车维修店吗？',
|
|
lastMessageTime: '5小时前'
|
|
},
|
|
{
|
|
id: 10,
|
|
name: '江华宝妈交流群',
|
|
description: '江华宝妈育儿经验分享',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 1234,
|
|
type: '同城群',
|
|
category: 'local',
|
|
qrCode: '/static/image/qr/group10.jpg',
|
|
lastMessage: '推荐江华最好的儿童医院',
|
|
lastMessageTime: '6小时前'
|
|
},
|
|
{
|
|
id: 11,
|
|
name: '江华IT技术交流群',
|
|
description: '江华IT从业者技术交流',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 345,
|
|
type: '工作群',
|
|
category: 'work',
|
|
qrCode: '/static/image/qr/group11.jpg',
|
|
lastMessage: '有前端开发的工作机会吗？',
|
|
lastMessageTime: '1天前'
|
|
},
|
|
{
|
|
id: 12,
|
|
name: '江华健身运动群',
|
|
description: '江华健身爱好者交流群',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 678,
|
|
type: '兴趣群',
|
|
category: 'interest',
|
|
qrCode: '/static/image/qr/group12.jpg',
|
|
lastMessage: '有人一起去健身房吗？',
|
|
lastMessageTime: '2小时前'
|
|
},
|
|
{
|
|
id: 13,
|
|
name: '江华摄影爱好者群',
|
|
description: '江华摄影爱好者交流群',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 456,
|
|
type: '兴趣群',
|
|
category: 'interest',
|
|
qrCode: '/static/image/qr/group13.jpg',
|
|
lastMessage: '分享一张江华夜景照片',
|
|
lastMessageTime: '1天前'
|
|
},
|
|
{
|
|
id: 14,
|
|
name: '江华创业交流群',
|
|
description: '江华创业者交流平台',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 789,
|
|
type: '工作群',
|
|
category: 'work',
|
|
qrCode: '/static/image/qr/group14.jpg',
|
|
lastMessage: '寻找创业合作伙伴',
|
|
lastMessageTime: '3天前'
|
|
},
|
|
{
|
|
id: 15,
|
|
name: '江华医疗健康群',
|
|
description: '江华医疗健康咨询交流',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 1123,
|
|
type: '同城群',
|
|
category: 'local',
|
|
qrCode: '/static/image/qr/group15.jpg',
|
|
lastMessage: '推荐江华最好的牙科医院',
|
|
lastMessageTime: '4小时前'
|
|
},
|
|
{
|
|
id: 16,
|
|
name: '江华读书会',
|
|
description: '江华读书爱好者交流群',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 234,
|
|
type: '学习群',
|
|
category: 'study',
|
|
qrCode: '/static/image/qr/group16.jpg',
|
|
lastMessage: '推荐一本好书《江华瑶族文化》',
|
|
lastMessageTime: '1周前'
|
|
},
|
|
{
|
|
id: 17,
|
|
name: '江华音乐爱好者群',
|
|
description: '江华音乐爱好者交流群',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 567,
|
|
type: '兴趣群',
|
|
category: 'interest',
|
|
qrCode: '/static/image/qr/group17.jpg',
|
|
lastMessage: '有人会弹吉他吗？想学',
|
|
lastMessageTime: '2天前'
|
|
},
|
|
{
|
|
id: 18,
|
|
name: '江华电商交流群',
|
|
description: '江华电商从业者交流群',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 890,
|
|
type: '工作群',
|
|
category: 'work',
|
|
qrCode: '/static/image/qr/group18.jpg',
|
|
lastMessage: '分享电商运营经验',
|
|
lastMessageTime: '1周前'
|
|
},
|
|
{
|
|
id: 19,
|
|
name: '江华园艺爱好者群',
|
|
description: '江华园艺爱好者交流群',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 345,
|
|
type: '兴趣群',
|
|
category: 'interest',
|
|
qrCode: '/static/image/qr/group19.jpg',
|
|
lastMessage: '推荐江华最好的花店',
|
|
lastMessageTime: '3天前'
|
|
},
|
|
{
|
|
id: 20,
|
|
name: '江华法律咨询群',
|
|
description: '江华法律咨询服务交流',
|
|
avatar: '/static/image/logo.jpg',
|
|
memberCount: 678,
|
|
type: '同城群',
|
|
category: 'local',
|
|
qrCode: '/static/image/qr/group20.jpg',
|
|
lastMessage: '免费法律咨询服务',
|
|
lastMessageTime: '5天前'
|
|
}
|
|
]
|
|
|
|
this.groupList = allGroups
|
|
|
|
// 强制更新视图
|
|
this.$forceUpdate()
|
|
},
|
|
|
|
// 搜索群组
|
|
onSearch(keyword) {
|
|
this.searchKeyword = keyword
|
|
this.filterGroups()
|
|
},
|
|
|
|
// 清除搜索
|
|
onClear() {
|
|
this.searchKeyword = ''
|
|
this.filterGroups()
|
|
},
|
|
|
|
// 分类点击
|
|
onCategoryClick(item) {
|
|
this.currentCityTabIndex = item.index
|
|
|
|
if (item.value) {
|
|
// 使用城市ID作为筛选条件
|
|
this.queryParams.cityId = item.value
|
|
delete this.queryParams.category // 清除原有的分类参数
|
|
} else {
|
|
// 选择"全部"时清除城市筛选
|
|
delete this.queryParams.cityId
|
|
delete this.queryParams.category
|
|
}
|
|
this.loadStaticGroupData()
|
|
},
|
|
|
|
// 群组点击
|
|
onGroupClick(item) {
|
|
// 跳转到群组详情页
|
|
this.$utils.navigateTo('/pages_order/group/groupDetail?id=' + item.id)
|
|
},
|
|
|
|
// 过滤群组
|
|
filterGroups() {
|
|
if (!this.searchKeyword) {
|
|
return
|
|
}
|
|
// 这里可以实现搜索过滤逻辑
|
|
},
|
|
|
|
// 创建群组
|
|
createGroup() {
|
|
this.$utils.navigateTo('/pages_order/group/createGroup')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page{
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
|
|
.top-actions {
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
|
|
.search-container {
|
|
flex: 1;
|
|
}
|
|
|
|
.create-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #5baaff;
|
|
color: #fff;
|
|
padding: 15rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
font-size: 26rpx;
|
|
|
|
text {
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.category-tabs {
|
|
background-color: #fff;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.group-list {
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 100rpx 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.loading-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 100rpx 0;
|
|
|
|
text {
|
|
margin-top: 20rpx;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|