Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b83339c6 1 parent 2407b78f

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

- 在创建和编辑家庭页面的区域选择处添加图标
- 优化封面图片上传交互，添加默认提示和图标
- 统一使用IconFont组件替换部分图标
Inline Side-by-side
Showing 2 changed files with 37 additions and 21 deletions
<!--
* @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">
{{ selectedDistrictText || '请选择区域' }}
</text>
<view>
<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 :class="{'text-gray-400': !selectedDistrictText, 'text-gray-900': selectedDistrictText}" class="text-base">
{{ selectedDistrictText || '请选择区域' }}
</text>
</view>
<Right size="16" color="#888" />
</view>
</view>
......
<!--
* @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">
{{ selectedDistrictText || '请选择区域' }}
</text>
<view>
<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 :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"
class="w-full h-48 rounded-lg object-cover"
v-if="familyAvatar"
: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"
class="absolute bottom-3 right-2 px-3 py-1 bg-black bg-opacity-50 text-white text-sm rounded-full flex items-center"
v-if="familyAvatar"
@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);
......