feat(EditFamily): 添加区域战队选择功能并替换家庭规模选择

将家庭规模选择替换为区域战队选择功能，添加区域选择器和相关逻辑

feat(EditFamily): 添加区域战队选择功能并替换家庭规模选择
将家庭规模选择替换为区域战队选择功能，添加区域选择器和相关逻辑
hookehuyr
Commit a8a5dd51b7992df0c83f63351e67b4ed4d0f9bc8 a8a5dd51 1 parent b1c9db1b
Showing 1 changed file with 62 additions and 23 deletions
src/pages/EditFamily/index.vue
--- a/src/pages/EditFamily/index.vue
View file @a8a5dd5
+++ b/src/pages/EditFamily/index.vue
View file @a8a5dd5
 <!--
  * @Date: 2025-08-27 17:44:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-28 21:18:07
+ * @LastEditTime: 2025-08-29 14:18:23
  * @FilePath: /lls_program/src/pages/EditFamily/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <view class="min-h-screen flex flex-col bg-white">
+  <view class="min-h-screen flex flex-col bg-[#F9FAFB]">
     <!-- <AppHeader title="编辑家庭" /> -->
     <view class="flex-1 px-4 py-6 overflow-auto">
       <view class="mb-6">
@@ -37,23 +37,16 @@
             />
           </view>
         </view>
-        <!-- Family Size -->
+        <!-- District Selection -->
         <view class="mb-6">
           <view class="bg-white rounded-lg border border-gray-200 p-4">
-            <view class="block text-lg font-medium mb-4">家庭规模</view>
+            <view class="block text-lg font-medium mb-4">快来挑选加入哪个区域战队</view>
-            <view class="flex gap-2">
+            <view class="bg-white rounded-xl p-4 border border-gray-200" @click="showDistrictPicker = true">
-              <view
+              <view class="flex justify-between items-center">
-                v-for="size in familySizes"
+                <text :class="{'text-gray-400': !selectedDistrictText, 'text-gray-900': selectedDistrictText}" class="text-base">
-                :key="size"
+                  {{ selectedDistrictText || '请选择区域' }}
-                @click="familySize = size"
+                </text>
-                :class="[
+                <Right size="16" color="#888" />
-                  'flex-1 py-3 rounded-lg border text-center',
-                  familySize === size
-                    ? 'border-blue-500 bg-blue-50 text-blue-500'
-                    : 'border-gray-200 text-gray-700'
-                ]"
-              >
-                {{ size }}
               </view>
             </view>
           </view>
@@ -156,22 +149,55 @@
       :init-no="previewIndex"
       @close="closePreview"
     />
+
+    <!-- 区域选择器 -->
+    <nut-popup v-model:visible="showDistrictPicker" position="bottom">
+      <nut-picker
+        v-model="districtValue"
+        :columns="districtColumns"
+        @confirm="onDistrictConfirm"
+        @cancel="showDistrictPicker = false"
+        title="选择区域战队"
+      ></nut-picker>
+    </nut-popup>
   </view>
 </template>
 <script setup>
 import { ref, onMounted } from 'vue';
 import Taro from '@tarojs/taro';
-import { Edit, Tips, Photograph } from '@nutui/icons-vue-taro';
+import { Edit, Tips, Photograph, Right } from '@nutui/icons-vue-taro';
 // import AppHeader from '../../components/AppHeader.vue';
 import BASE_URL from '@/utils/config';
 const familyName = ref('');
 const familyIntro = ref('');
-const familySize = ref('3-5人');
+const selectedDistrict = ref(null);
+const selectedDistrictText = ref('');
 const familyMotto = ref(['', '', '', '']);
 const familyMottoPlaceholder = ref(['孝', '敬', '和', '睦']);
-const familySizes = ['2人', '3-5人', '6人+'];
+
+// 区域选择器相关
+const showDistrictPicker = ref(false);
+const districtValue = ref([]);
+const districtColumns = ref([
+  { text: '黄浦区', value: 310101 },
+  { text: '徐汇区', value: 310104 },
+  { text: '长宁区', value: 310105 },
+  { text: '静安区', value: 310106 },
+  { text: '普陀区', value: 310107 },
+  { text: '虹口区', value: 310109 },
+  { text: '杨浦区', value: 310110 },
+  { text: '闵行区', value: 310112 },
+  { text: '宝山区', value: 310113 },
+  { text: '嘉定区', value: 310114 },
+  { text: '浦东新区', value: 310115 },
+  { text: '金山区', value: 310116 },
+  { text: '松江区', value: 310117 },
+  { text: '青浦区', value: 310118 },
+  { text: '奉贤区', value: 310120 },
+  { text: '崇明区', value: 310151 }
+]);
 const familyAvatar = ref('');
 const focusedIndex = ref(-1);
@@ -185,12 +211,25 @@ onMounted(() => {
   // Mock data for current family information
   familyName.value = '幸福一家';
   familyIntro.value = '我们是相亲相爱的一家人';
-  familySize.value = '3-5人';
+  districtValue.value = [310104]; // 模拟勾选项已选择徐汇区
+  // 需要提交的数据集
+  selectedDistrict.value = 310104; // 模拟已选择徐汇区
+  selectedDistrictText.value = districtColumns.value.find(item => item.value === selectedDistrict.value).text;
   familyMotto.value = ['家', '和', '万', '事'];
   familyAvatar.value = 'https://img.yzcdn.cn/vant/cat.jpeg';
 });
 /**
+ * @description 确认选择区域
+ * @param {object} param0 - 包含 selectedValue 和 selectedOptions 的对象
+ */
+const onDistrictConfirm = ({ selectedValue, selectedOptions }) => {
+  selectedDistrict.value = selectedValue[0];
+  selectedDistrictText.value = selectedOptions.map((option) => option.text).join('');
+  showDistrictPicker.value = false;
+};
+
+/**
  * 处理输入变化
  */
 const handleInputChange = (index, value) => {
@@ -337,8 +376,8 @@ const validateForm = () => {
     return false;
   }
-  if (!familySize.value) {
+  if (!selectedDistrict.value) {
-    showToast('请选择家庭规模', 'error');
+    showToast('请选择区域战队', 'error');
     return false;
   }