feat(家庭创建/编辑): 在区域选择和封面上传处添加图标并优化交互

- 在创建和编辑家庭页面的区域选择处添加图标 - 优化封面图片上传交互，添加默认提示和图标 - 统一使用IconFont组件替换部分图标

feat(家庭创建/编辑): 在区域选择和封面上传处添加图标并优化交互
- 在创建和编辑家庭页面的区域选择处添加图标 - 优化封面图片上传交互，添加默认提示和图标 - 统一使用IconFont组件替换部分图标
hookehuyr
Commit b83339c68a239470f4447b19421c54d35c8b5854 b83339c6 1 parent 2407b78f
Showing 2 changed files with 37 additions and 21 deletions
src/pages/CreateFamily/index.vue
src/pages/EditFamily/index.vue
--- a/src/pages/CreateFamily/index.vue
View file @b83339c
+++ b/src/pages/CreateFamily/index.vue
View file @b83339c
 <!--
  * @Date: 2025-08-27 17:44:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-16 11:01:23
+ * @LastEditTime: 2025-09-16 13:32:59
  * @FilePath: /lls_program/src/pages/CreateFamily/index.vue
  * @Description: 文件描述
 -->
@@ -48,9 +48,12 @@
             <view class="block text-lg font-medium mb-4">快来挑选加入哪个区域战队</view>
             <view class="bg-white rounded-xl p-4 border border-gray-200" @click="showDistrictPicker = true">
               <view class="flex justify-between items-center">
-                <text :class="{'text-gray-400': !selectedDistrictText, 'text-gray-900': selectedDistrictText}" class="text-base">
+                <view>
-                  {{ selectedDistrictText || '请选择区域' }}
+                  <IconFont size="15" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%88%9B%E5%BB%BA%E5%AE%B6%E5%BA%AD2.png" class="mr-2" />
-                </text>
+                  <text :class="{'text-gray-400': !selectedDistrictText, 'text-gray-900': selectedDistrictText}" class="text-base">
+                    {{ selectedDistrictText || '请选择区域' }}
+                  </text>
+                </view>
                 <Right size="16" color="#888" />
               </view>
             </view>
--- a/src/pages/EditFamily/index.vue
View file @b83339c
+++ b/src/pages/EditFamily/index.vue
View file @b83339c
 <!--
  * @Date: 2025-08-27 17:44:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-11 20:03:53
+ * @LastEditTime: 2025-09-16 13:32:28
  * @FilePath: /lls_program/src/pages/EditFamily/index.vue
  * @Description: 文件描述
 -->
@@ -47,9 +47,12 @@
             <view class="block text-lg font-medium mb-4">快来挑选加入哪个区域战队</view>
             <view class="bg-white rounded-xl p-4 border border-gray-200" @click="showDistrictPicker = true">
               <view class="flex justify-between items-center">
-                <text :class="{'text-gray-400': !selectedDistrictText, 'text-gray-900': selectedDistrictText}" class="text-base">
+                <view>
-                  {{ selectedDistrictText || '请选择区域' }}
+                  <IconFont size="15" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%88%9B%E5%BB%BA%E5%AE%B6%E5%BA%AD2.png" class="mr-2" />
-                </text>
+                  <text :class="{'text-gray-400': !selectedDistrictText, 'text-gray-900': selectedDistrictText}" class="text-base">
+                    {{ selectedDistrictText || '请选择区域' }}
+                  </text>
+                </view>
                 <Right size="16" color="#888" />
               </view>
             </view>
@@ -90,8 +93,10 @@
               </view> -->
             </view>
             <view class="flex items-center text-sm text-gray-600">
-              <Tips size="16" class="text-yellow-500 mr-2" />
+              <view>
-              <view>设置有意义的家训口令，便于家人记忆和加入</view>
+                <IconFont size="15" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%88%9B%E5%BB%BA%E5%AE%B6%E5%BA%AD3.png" />
+                <text class="ml-1">设置有意义的家训口令，便于家人记忆和加入</text>
+              </view>
             </view>
           </view>
         </view>
@@ -103,26 +108,36 @@
             </view>
             <!-- 封面显示区域 -->
             <view class="mb-4">
-              <view class="relative">
+              <view class="relative bg-gray-100 rounded-lg h-48 flex items-center justify-center">
+                <!-- 有图片时显示图片 -->
                 <image
-                  :src="familyAvatar || defaultFamilyCover"
+                  v-if="familyAvatar"
-                  class="w-full h-48 rounded-lg object-cover"
+                  :src="familyAvatar"
+                  class="w-full h-full rounded-lg object-cover"
                   mode="aspectFill"
                   @tap="previewAvatar"
                 />
+                <!-- 没有图片时显示上传提示 -->
+                <view v-else class="flex flex-col items-center justify-center text-gray-400" @click="chooseImage">
+                  <IconFont size="48" class="mb-2" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%88%9B%E5%BB%BA%E5%AE%B6%E5%BA%AD4.png" />
+                  <text class="text-sm">点击上传封面图</text>
+                </view>
+                <!-- 删除按钮 -->
                 <view
                   v-if="familyAvatar"
-                  @click="deleteAvatar"
+                  @click.stop="deleteAvatar"
                   class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center"
                 >
                   <view class="text-white text-xs">×</view>
                 </view>
+                <!-- 更换按钮 -->
                 <view
-                  @click="chooseImage"
+                  v-if="familyAvatar"
-                  class="absolute bottom-3 right-2 px-3 py-1 bg-black bg-opacity-50 text-white text-sm rounded-full flex items-center"
+                  @click.stop="chooseImage"
+                  class="absolute bottom-3 right-2 px-3 py-1 bg-gray-600 bg-opacity-50 text-white text-sm rounded-full flex items-center"
                 >
                   <Photograph size="14" class="mr-1" />
-                  {{ familyAvatar ? '更换' : '上传' }}
+                  更换
                 </view>
               </view>
             </view>
@@ -142,8 +157,6 @@
       </view>
     </view>
-
-
     <!-- 图片预览 -->
     <nut-image-preview
       v-model:show="previewVisible"
@@ -169,7 +182,7 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import Taro from '@tarojs/taro';
-import { Edit, Tips, Photograph, Right } from '@nutui/icons-vue-taro';
+import { Edit, Tips, Photograph, Right, IconFont } from '@nutui/icons-vue-taro';
 // import AppHeader from '../../components/AppHeader.vue';
 import BASE_URL from '@/utils/config';
 //
@@ -200,7 +213,7 @@ const districtValue = ref([]);
 const districtColumns = ref(SHANGHAI_REGION);
 const familyAvatar = ref('');
 const focusedIndex = ref(-1);
-const defaultFamilyCover = ref(defaultFamilyCoverSvg);
+const defaultFamilyCover = ref();
 // 图片预览相关
 const previewVisible = ref(false);