feat(创建家庭): 添加区域战队选择功能并更新背景色

将家庭规模选择替换为区域战队选择功能，增加区域选择器组件更新页面背景色为浅灰色(#F9FAFB)

feat(创建家庭): 添加区域战队选择功能并更新背景色
将家庭规模选择替换为区域战队选择功能，增加区域选择器组件更新页面背景色为浅灰色(#F9FAFB)
hookehuyr
Commit b1c9db1b7726efabc900a64b297ba9cb703a9fb5 b1c9db1b 1 parent a09eb70d
Showing 1 changed file with 58 additions and 21 deletions
src/pages/CreateFamily/index.vue
--- a/src/pages/CreateFamily/index.vue
View file @b1c9db1
+++ b/src/pages/CreateFamily/index.vue
View file @b1c9db1
 <!--
  * @Date: 2025-08-27 17:44:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-29 10:37:54
+ * @LastEditTime: 2025-08-29 13:58:07
  * @FilePath: /lls_program/src/pages/CreateFamily/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>
@@ -124,7 +117,7 @@
             <!-- 上传区域 -->
             <view
               v-if="!familyAvatar"
-              class="border border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center"
+              class="border border-dashed border-gray-200 rounded-lg p-6 flex flex-col items-center justify-center"
               @click="chooseImage"
             >
               <view class="text-gray-400 mb-2">
@@ -159,22 +152,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, nextTick, computed } 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);
 const inputRefs = ref([]);
@@ -183,10 +209,21 @@ const isFormValid = computed(() => {
   return (
     familyName.value.trim() !== '' &&
     familyIntro.value.trim() !== '' &&
+    selectedDistrict.value !== null &&
     familyMotto.value.every(char => char.trim() !== '')
   );
 });
+/**
+ * @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 previewVisible = ref(false);
 const previewImages = ref([]);