Переглянути джерело

feat: add activity area reset button

Developer 5 днів тому
батько
коміт
151b429c5f

+ 22 - 5
components/pages/activityArea/index.vue

@@ -65,7 +65,8 @@
       </view>
 
       <!-- 确认按钮 -->
-      <view class="footer">
+      <view class="footer adfacjb">
+        <button class="reset-btn" @click="handleReset">重置</button>
         <button class="confirm-btn" @click="handleConfirm">确定</button>
       </view>
     </view>
@@ -75,7 +76,7 @@
 <script setup>
 import { ref, watch, computed, onMounted, getCurrentInstance } from 'vue';
 const { proxy } = getCurrentInstance()
-const emit = defineEmits(['update:show', 'confirm']);
+const emit = defineEmits(['update:show', 'confirm', 'reset']);
 
 const hotCities = ['武汉','南京','郑州','杭州','上海','苏州','厦门','深圳','北京','广州','长沙','成都'];
 const cityData = ref([])
@@ -100,6 +101,14 @@ const handleConfirm = () => {
   emit('confirm', result);
 };
 
+// 重置区域选择并清除外层页面的区域筛选
+const handleReset = () => {
+  pickerValue.value = [0, 0, 0];
+  cities.value = provinces.value[0]?.children || [];
+  areas.value = cities.value[0]?.children || [];
+  emit('reset');
+};
+
 // picker-view 滚动时触发
 const handlePickerChange = (e) => {
   const newPickerValue = e.detail.value;
@@ -313,9 +322,9 @@ onMounted(()=>{
 }
 
 .footer {
-  padding: 64rpx 147rpx 40rpx;
+  padding: 64rpx 24rpx 40rpx;
+  .reset-btn,
   .confirm-btn {
-    width: 100%;
     height: 80rpx;
     line-height: 88rpx;
     background: #B7F358;
@@ -331,5 +340,13 @@ onMounted(()=>{
       border: none;
     }
   }
+  .reset-btn {
+    width: 222rpx;
+    background: #FFFFFF;
+    border: 1rpx solid #252525;
+  }
+  .confirm-btn {
+    width: calc(100% - 252rpx);
+  }
 }
-</style>
+</style>

+ 17 - 9
pagesHome/allActivity.vue

@@ -60,7 +60,7 @@
 		</view>
 		<view class="window" :style="{'top':top+'px','height':'calc(100vh - '+top+'px)'}" v-if="placeShow">
 			<view class="window-place">
-				<ActivityArea @confirm="areaConfirm"></ActivityArea>
+				<ActivityArea @confirm="areaConfirm" @reset="areaReset"></ActivityArea>
 			</view>
 		</view>
 		<view class="window nbg" :style="{'top':topAll+'px','height':'calc(100vh - '+topAll+'px)'}" v-if="allShow">
@@ -225,13 +225,21 @@
 		getActivityList()
 	}
 	
-	const areaConfirm = (data) => {
-		initList()
-		place.value = data.city+'-'+data.area;
-		queryParams.value.districtId = data.areaId;
-		placeShow.value = false;
-		getActivityList()
-	}
+	const areaConfirm = (data) => {
+		initList()
+		place.value = data.city+'-'+data.area;
+		queryParams.value.districtId = data.areaId;
+		placeShow.value = false;
+		getActivityList()
+	}
+
+	const areaReset = () => {
+		initList()
+		place.value = '全部地区'
+		queryParams.value.districtId = ''
+		placeShow.value = false
+		getActivityList()
+	}
 	
 	const scrolltolower = () => {
 		if(isOver.value) return
@@ -490,4 +498,4 @@
 			z-index: -1;
 		}
 	}
-</style>
+</style>

+ 17 - 0
tests/activity-area-reset.test.js

@@ -0,0 +1,17 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import fs from 'node:fs'
+import path from 'node:path'
+
+const areaFile = path.resolve('components/pages/activityArea/index.vue')
+const allActivityFile = path.resolve('pagesHome/allActivity.vue')
+
+test('区域弹窗提供重置入口并清空活动区域筛选', () => {
+  const areaSource = fs.readFileSync(areaFile, 'utf8')
+  const pageSource = fs.readFileSync(allActivityFile, 'utf8')
+
+  assert.match(areaSource, /class="reset-btn"[^>]*@click="handleReset"[^>]*>重置/)
+  assert.match(areaSource, /const handleReset = \(\) => \{[\s\S]*?emit\('reset'\)/)
+  assert.match(pageSource, /<ActivityArea @confirm="areaConfirm" @reset="areaReset"><\/ActivityArea>/)
+  assert.match(pageSource, /const areaReset = \(\) => \{[\s\S]*?districtId = ''[\s\S]*?placeShow\.value = false/)
+})