feat: add activity status filter

pagesHome/allActivity.vue

@@ -22,14 +22,14 @@
 				<text>{{time}}</text>
 				<image src="https://oss.familydaf.cn/sxsnfile/20251218/5023dfb59c414a09808d86d5771e6c2c.png"></image>
 			</view>
-			<view class="filter-pre adfac" @click="timeShow=false;allShow=false;placeShow=!placeShow">
-				<text>{{place}}</text>
-				<image src="https://oss.familydaf.cn/sxsnfile/20251218/5023dfb59c414a09808d86d5771e6c2c.png"></image>
-			</view>
-			<!-- <view class="filter-pre adfac">
-				<text>{{status}}</text>
-				<image src="hhttps://oss.familydaf.cn/sxsnfile/20251218/5023dfb59c414a09808d86d5771e6c2c.png"></image>
-			</view> -->
+			<view class="filter-pre adfac" @click="showPlace">
+				<text>{{place}}</text>
+				<image src="https://oss.familydaf.cn/sxsnfile/20251218/5023dfb59c414a09808d86d5771e6c2c.png"></image>
+			</view>
+			<view class="filter-pre adfac" @click="showStatus">
+				<text>{{status}}</text>
+				<image src="https://oss.familydaf.cn/sxsnfile/20251218/5023dfb59c414a09808d86d5771e6c2c.png"></image>
+			</view>
 		</view>
 		<view class="list" id="list" :class="{'adffcacjc':list.length===0}">
 			<template v-if="list.length">
@@ -63,14 +63,26 @@
 				<ActivityArea @confirm="areaConfirm" @reset="areaReset"></ActivityArea>
 			</view>
 		</view>
-		<view class="window nbg" :style="{'top':topAll+'px','height':'calc(100vh - '+topAll+'px)'}" v-if="allShow">
+		<view class="window nbg" :style="{'top':topAll+'px','height':'calc(100vh - '+topAll+'px)'}" v-if="allShow">
 			<view class="window-bg" @click="handleAll"></view>
 			<view class="window-all">
 				<view class="wabox">
 					<view class="pre" v-for="(t,i) in typeList2" :key="i" @click="changeType2(t,t.name,i)">{{t.name}}</view>
 				</view>
-			</view>
-		</view>
+			</view>
+		</view>
+		<view class="window nbg" :style="{'top':topAll+'px','height':'calc(100vh - '+topAll+'px)'}" v-if="statusShow">
+			<view class="window-bg" @click="statusShow=false"></view>
+			<view class="window-status">
+				<view
+					class="status-option"
+					:class="{'active': statusValue === item.value}"
+					v-for="item in statusOptions"
+					:key="item.value || 'all'"
+					@click="changeStatus(item)"
+				>{{item.name}}</view>
+			</view>
+		</view>
 		<login-register></login-register>
 	</view>
 </template>
@@ -107,7 +119,14 @@
 	const time = ref('全部时间')
 	const timeText = ref('全部时间')
 	const place = ref('全部地区')
-	const status = ref('活动状态')
+	const status = ref('活动状态')
+	const statusValue = ref('')
+	const statusOptions = [
+		{ name: '全部', value: '' },
+		{ name: '报名中', value: 1 },
+		{ name: '报名已截止', value: 2 },
+		{ name: '已结束', value: 3 }
+	]
 	const queryParams = ref({
 		page:1,
 		limit:10,
@@ -116,15 +135,17 @@
 		beginTime:'',
 		endTime:'',
 		categoryId:'',
-		districtId:''
+		districtId:'',
+		activeState:''
 	})
 	const isOver = ref(false)
 	const list = ref([])
 	const top = ref(0)
 	const topAll = ref(0)
 	const timeShow = ref(false)
-	const placeShow = ref(false)
-	const allShow = ref(false)
+	const placeShow = ref(false)
+	const allShow = ref(false)
+	const statusShow = ref(false)
 	const wtIndex = ref(0)
 	const acRef = ref(null)
 	
@@ -194,13 +215,37 @@
 		getActivityList()
 	}
 	
-	const handleAll = () => {
+	const handleAll = () => {
 		// typeIndex.value = '';
 		// scrollLeft.value = 0;
-		timeShow.value = false;
-		placeShow.value = false;
-		allShow.value = !allShow.value;
-	}
+		timeShow.value = false;
+		placeShow.value = false;
+		statusShow.value = false;
+		allShow.value = !allShow.value;
+	}
+
+	const showPlace = () => {
+		timeShow.value = false
+		allShow.value = false
+		statusShow.value = false
+		placeShow.value = !placeShow.value
+	}
+
+	const showStatus = () => {
+		timeShow.value = false
+		placeShow.value = false
+		allShow.value = false
+		statusShow.value = !statusShow.value
+	}
+
+	const changeStatus = (item) => {
+		status.value = item.name
+		statusValue.value = item.value
+		queryParams.value.activeState = item.value
+		statusShow.value = false
+		initList()
+		getActivityList()
+	}
 	
 	const changeWindowTime = (wtindex,text) => {
 		wtIndex.value = wtindex;
@@ -208,9 +253,10 @@
 		acRef.value.setStartEndDay(wtindex);
 	}
 	
-	const showTime = () => {
-		placeShow.value = false;
-		allShow.value = false;
+	const showTime = () => {
+		placeShow.value = false;
+		allShow.value = false;
+		statusShow.value = false;
 		timeShow.value = !timeShow.value;
 		setTimeout(()=>{
 			acRef.value.setStartEndDay(wtIndex.value);
@@ -462,7 +508,7 @@
 			}
 		}
 	
-		&-all{
+		&-all{
 			padding: 26rpx 30rpx 103rpx;
 			background: #FFFFFF;
 			border-radius: 0 0 24rpx 24rpx;
@@ -485,9 +531,28 @@
 				margin-left: 18rpx;
 				float: left;
 			}
-		}
-		
-		&.nbg{
+			}
+		&-status{
+			padding: 26rpx 30rpx 40rpx;
+			background: #FFFFFF;
+			border-radius: 0 0 24rpx 24rpx;
+			.status-option{
+				display: inline-block;
+				padding: 10rpx 24rpx;
+				margin: 0 18rpx 18rpx 0;
+				background: #F7F7F7;
+				border-radius: 30rpx;
+				font-family: PingFangSC, PingFang SC;
+				font-size: 24rpx;
+				color: #252525;
+				line-height: 33rpx;
+				&.active{
+					background: #B7F358;
+					font-weight: bold;
+				}
+			}
+		}
+		&.nbg{
 			background: none;
 		}
 		&-bg{

tests/all-activity-status-filter.test.js

@@ -0,0 +1,23 @@
+import assert from 'node:assert/strict'
+import fs from 'node:fs'
+import path from 'node:path'
+import test from 'node:test'
+
+const pageFile = path.resolve('pagesHome/allActivity.vue')
+
+test('全部活动提供默认全部的活动状态筛选并映射接口状态', () => {
+  const source = fs.readFileSync(pageFile, 'utf8')
+
+  assert.match(source, /活动状态/)
+  assert.match(source, /const status\s*=\s*ref\(['"]活动状态['"]\)/)
+  assert.match(source, /const statusValue\s*=\s*ref\(['"]['"]\)/)
+  assert.match(source, /statusOptions/)
+  assert.match(source, /报名中/)
+  assert.match(source, /报名已截止/)
+  assert.match(source, /已结束/)
+  assert.match(source, /activeState:\s*''/)
+  assert.match(source, /['"]报名中['"]\s*,?\s*value:\s*1/)
+  assert.match(source, /['"]报名已截止['"]\s*,?\s*value:\s*2/)
+  assert.match(source, /['"]已结束['"]\s*,?\s*value:\s*3/)
+  assert.match(source, /changeStatus/)
+})