Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
62db6875 1 parent 8222891d

feat(创建家庭): 优化封面图上传交互体验 

添加封面图上传提示和删除按钮，改进图片显示区域的交互逻辑
Inline Side-by-side
Showing 1 changed file with 15 additions and 5 deletions
......@@ -107,26 +107,36 @@
</view>
<!-- 封面显示区域 -->
<view class="mb-4">
<view class="relative bg-gray-100 rounded-lg">
<view class="relative bg-gray-100 rounded-lg h-48 flex items-center justify-center" @click="chooseImage">
<!-- 有图片时显示图片 -->
<image
v-if="familyAvatar"
:src="familyAvatar"
class="w-full h-48 rounded-lg object-cover"
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">
<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"
@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"
>
<IconFont size="20" class="mr-1" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%88%9B%E5%BB%BA%E5%AE%B6%E5%BA%AD4.png" />
{{ familyAvatar ? '更换' : '上传' }}
更换
</view>
</view>
</view>
......