feat(region-select): 区域选择

components/region-select/index.vue

@@ -9,48 +9,29 @@
         <h3 class="popup-title">选择收益区域</h3>
       </div>
       <div class="popup-content">
-        <div class="picker-columns">
+        <picker-view
-          <div class="picker-column">
+          v-if="popupVisible"
-            <ul>
+          class="picker-view"
-              <li
+          :indicator-style="indicatorStyle"
-                v-for="p in provinces"
+          :value="pickerValue"
-                :key="p.id"
+          @change="handlePickerChange"
-                @click="selectProvince(p)"
+        >
-                :class="{
+          <picker-view-column>
-                  selected: selectedProvince && selectedProvince.id === p.id,
+            <div v-for="p in provinces" :key="p.id" class="picker-item">
-                }"
+              {{ p.name }}
-              >
+            </div>
-                {{ p.name }}
+          </picker-view-column>
-              </li>
+          <picker-view-column>
-            </ul>
+            <div v-for="c in cities" :key="c.id" class="picker-item">
-          </div>
+              {{ c.name }}
-          <div class="picker-column">
+            </div>
-            <ul>
+          </picker-view-column>
-              <li
+          <picker-view-column>
-                v-for="c in cities"
+            <div v-for="d in districts" :key="d.id" class="picker-item">
-                :key="c.id"
+              {{ d.name }}
-                @click="selectCity(c)"
+            </div>
-                :class="{ selected: selectedCity && selectedCity.id === c.id }"
+          </picker-view-column>
-              >
+        </picker-view>
-                {{ c.name }}
-              </li>
-            </ul>
-          </div>
-          <div class="picker-column">
-            <ul>
-              <li
-                v-for="d in districts"
-                :key="d.id"
-                @click="selectDistrict(d)"
-                :class="{
-                  selected: selectedDistrict && selectedDistrict.id === d.id,
-                }"
-              >
-                {{ d.name }}
-              </li>
-            </ul>
-          </div>
-        </div>
       </div>
       <div class="popup-footer">
         <button class="popup-btn popup-cancel" @click="handleClose">
@@ -76,15 +57,13 @@ export default {
       provinces: [],
       cities: [],
       districts: [],
-      selectedProvince: null,
+      pickerValue: [0, 0, 0],
-      selectedCity: null,
+      indicatorStyle: `height: 50px;`,
-      selectedDistrict: null,
     }
   },
   async created() {
     try {
       const res = await getRegionSelect()
-      // Assuming res.data exists and has regionStatus and provinceId
       if (
         res.code === 200 &&
         res.data &&
@@ -96,7 +75,6 @@ export default {
       }
     } catch (error) {
       console.error('Failed to get region select info:', error)
-      // Optionally show a user-facing error message, e.g., using a toast library
     }
   },
   methods: {
@@ -107,69 +85,59 @@ export default {
           this.areaTree = res.data
           this.provinces = this.areaTree
           if (this.provinces.length > 0) {
-            this.selectProvince(this.provinces[0])
+            this.cities = this.provinces[0].children || []
+            if (this.cities.length > 0) {
+              this.districts = this.cities[0].children || []
+            } else {
+              this.districts = []
+            }
           }
         }
       } catch (error) {
         console.error('Failed to load area tree:', error)
       }
     },
-    selectProvince(province) {
+    handlePickerChange(e) {
-      this.selectedProvince = province
+      const [pIndex, cIndex] = e.detail.value
-      this.cities = province.children || []
+      const oldPIndex = this.pickerValue[0]
-      this.selectedCity = null
+      const oldCIndex = this.pickerValue[1]
-      this.districts = []
+
-      if (this.cities.length > 0) {
+      this.pickerValue = e.detail.value
-        this.selectCity(this.cities[0])
+
-      } else {
+      if (pIndex !== oldPIndex) {
-        // Handle cases where a province might not have cities
+        this.cities = this.provinces[pIndex]?.children || []
-        this.selectedCity = null
+        this.districts = this.cities[0]?.children || []
-        this.selectedDistrict = null
+      } else if (cIndex !== oldCIndex) {
+        this.districts = this.cities[cIndex]?.children || []
       }
     },
-    selectCity(city) {
-      this.selectedCity = city
-      this.districts = city.children || []
-      this.selectedDistrict = null
-      if (this.districts.length > 0) {
-        this.selectDistrict(this.districts[0])
-      } else {
-        // Handle cases where a city might not have districts
-        this.selectedDistrict = null
-      }
-    },
-    selectDistrict(district) {
-      this.selectedDistrict = district
-    },
     handleClose() {
       this.popupVisible = false
     },
     async handleConfirm() {
-      if (
+      const [pIndex, cIndex, dIndex] = this.pickerValue
-        !this.selectedProvince ||
+      const province = this.provinces[pIndex]
-        !this.selectedCity ||
+      const city = this.cities[cIndex]
-        !this.selectedDistrict
+      const district = this.districts[dIndex]
-      ) {
+
+      if (!province || !city || !district) {
         return
       }
       try {
         const params = {
-          province: this.selectedProvince.id,
+          province: province.id,
-          city: this.selectedCity.id,
+          city: city.id,
-          county: this.selectedDistrict.id,
+          county: district.id,
         }
         const res = await setRegion(params)
         if (res.code === 200) {
           this.handleClose()
           this.$emit('success')
-          // Optionally show a success message
         } else {
-          // Use a proper UI notification for errors
           throw new Error(res.message || 'Failed to set region')
         }
       } catch (error) {
         console.error('Failed to set region:', error)
-        // Optionally show a user-facing error message
       }
     },
   },
@@ -231,57 +199,21 @@ export default {
   flex-grow: 1;
 }
 
-.picker-columns {
+.picker-view {
-  display: flex;
+  width: 100%;
   height: 500rpx;
 }
 
-.picker-column {
+.picker-item {
-  flex: 1;
+  display: flex;
-  overflow-y: auto;
+  align-items: center;
-  -webkit-overflow-scrolling: touch;
+  justify-content: center;
-}
+  height: 50px;
-
-.picker-column:not(:last-child) {
-  border-right: 1rpx solid #eaeaeb;
-}
-
-.picker-column:nth-child(2) {
-  background-color: #fcfcfc;
-}
-
-.picker-column::-webkit-scrollbar {
-  display: none;
-}
-.picker-column {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.picker-column ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  text-align: center;
-}
-
-.picker-column li {
-  padding: 24rpx 10rpx;
   font-size: 30rpx;
   color: #666;
-  cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition:
-    background-color 0.2s ease,
-    color 0.2s ease;
-}
-
-.picker-column li.selected {
-  font-weight: 600;
-  color: #007aff;
-  background-color: #f0f7ff;
 }
 
 .popup-footer {