feat: 优化用户界面和头像上传功能
- 在Dashboard页面添加"家庭设置"文字标签 - 使用默认头像替换Profile页面的占位图 - 优化EditFamily页面的输入框间距和删除按钮大小 - 实现EditProfile页面的真实头像上传功能,添加大小限制和错误处理
Showing
5 changed files
with
41 additions
and
15 deletions
| ... | @@ -4,8 +4,9 @@ | ... | @@ -4,8 +4,9 @@ |
| 4 | <view class="relative h-48"> | 4 | <view class="relative h-48"> |
| 5 | <image src="https://placehold.co/800x400/e2f3ff/0369a1?text=LFX&font=roboto" alt="Family background" class="w-full h-full object-cover" /> | 5 | <image src="https://placehold.co/800x400/e2f3ff/0369a1?text=LFX&font=roboto" alt="Family background" class="w-full h-full object-cover" /> |
| 6 | <view class="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-5"> | 6 | <view class="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-5"> |
| 7 | - <view class="absolute top-4 right-4 text-white" @click="goToProfile"> | 7 | + <view class="absolute top-4 right-4 text-white flex items-center" @click="goToProfile"> |
| 8 | <Setting size="24" /> | 8 | <Setting size="24" /> |
| 9 | + <text class="ml-2">家庭设置</text> | ||
| 9 | </view> | 10 | </view> |
| 10 | <h1 class="text-white text-2xl font-bold">张爷爷的家庭</h1> | 11 | <h1 class="text-white text-2xl font-bold">张爷爷的家庭</h1> |
| 11 | <p class="text-white opacity-90">每日走万步,全家一起行</p> | 12 | <p class="text-white opacity-90">每日走万步,全家一起行</p> | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-08-27 17:44:53 | 2 | * @Date: 2025-08-27 17:44:53 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-08-28 12:55:02 | 4 | + * @LastEditTime: 2025-08-28 21:18:07 |
| 5 | * @FilePath: /lls_program/src/pages/EditFamily/index.vue | 5 | * @FilePath: /lls_program/src/pages/EditFamily/index.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -10,9 +10,9 @@ | ... | @@ -10,9 +10,9 @@ |
| 10 | <!-- <AppHeader title="编辑家庭" /> --> | 10 | <!-- <AppHeader title="编辑家庭" /> --> |
| 11 | <view class="flex-1 px-4 py-6 overflow-auto"> | 11 | <view class="flex-1 px-4 py-6 overflow-auto"> |
| 12 | <view class="mb-6"> | 12 | <view class="mb-6"> |
| 13 | - <view class="text-gray-600 mb-6"> | 13 | + <!-- <view class="text-gray-600 mb-6"> |
| 14 | 请填写家庭信息,创建您的专属家庭空间 | 14 | 请填写家庭信息,创建您的专属家庭空间 |
| 15 | - </view> | 15 | + </view> --> |
| 16 | <!-- Family Name --> | 16 | <!-- Family Name --> |
| 17 | <view class="mb-6"> | 17 | <view class="mb-6"> |
| 18 | <view class="bg-white rounded-lg border border-gray-200 p-4"> | 18 | <view class="bg-white rounded-lg border border-gray-200 p-4"> |
| ... | @@ -82,6 +82,7 @@ | ... | @@ -82,6 +82,7 @@ |
| 82 | @blur="handleBlur(index)" | 82 | @blur="handleBlur(index)" |
| 83 | class="w-full h-full bg-transparent text-center" | 83 | class="w-full h-full bg-transparent text-center" |
| 84 | style="font-size: 38rpx;" | 84 | style="font-size: 38rpx;" |
| 85 | + :cursorSpacing="100" | ||
| 85 | /> | 86 | /> |
| 86 | </view> | 87 | </view> |
| 87 | </view> | 88 | </view> |
| ... | @@ -114,7 +115,7 @@ | ... | @@ -114,7 +115,7 @@ |
| 114 | /> | 115 | /> |
| 115 | <view | 116 | <view |
| 116 | @click="deleteAvatar" | 117 | @click="deleteAvatar" |
| 117 | - class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center" | 118 | + class="absolute -top-2 -right-2 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center" |
| 118 | > | 119 | > |
| 119 | <view class="text-white text-xs">×</view> | 120 | <view class="text-white text-xs">×</view> |
| 120 | </view> | 121 | </view> | ... | ... |
| ... | @@ -86,6 +86,7 @@ | ... | @@ -86,6 +86,7 @@ |
| 86 | import { ref, reactive, onMounted } from 'vue'; | 86 | import { ref, reactive, onMounted } from 'vue'; |
| 87 | import Taro from '@tarojs/taro'; | 87 | import Taro from '@tarojs/taro'; |
| 88 | import { My, Date as DateIcon, Right } from '@nutui/icons-vue-taro'; | 88 | import { My, Date as DateIcon, Right } from '@nutui/icons-vue-taro'; |
| 89 | +import BASE_URL from '@/utils/config'; | ||
| 89 | 90 | ||
| 90 | /** | 91 | /** |
| 91 | * @description 表单数据 | 92 | * @description 表单数据 |
| ... | @@ -171,20 +172,40 @@ const changeAvatar = () => { | ... | @@ -171,20 +172,40 @@ const changeAvatar = () => { |
| 171 | sizeType: ['compressed'], | 172 | sizeType: ['compressed'], |
| 172 | sourceType: ['album', 'camera'], | 173 | sourceType: ['album', 'camera'], |
| 173 | success: (res) => { | 174 | success: (res) => { |
| 174 | - const tempFilePath = res.tempFilePaths[0]; | 175 | + const tempFile = res.tempFiles[0]; |
| 175 | - // In a real app, you would upload this file to your server | 176 | + if (tempFile.size > 10 * 1024 * 1024) { |
| 176 | - // and get back a URL. For this demo, we'll just use the local path. | 177 | + Taro.showToast({ |
| 178 | + title: '图片大小不能超过10MB', | ||
| 179 | + icon: 'none', | ||
| 180 | + }); | ||
| 181 | + return; | ||
| 182 | + } | ||
| 183 | + | ||
| 177 | Taro.showLoading({ title: '上传中...' }); | 184 | Taro.showLoading({ title: '上传中...' }); |
| 178 | - // Mock upload process | 185 | + |
| 179 | - setTimeout(() => { | 186 | + Taro.uploadFile({ |
| 180 | - formData.avatar_url = tempFilePath; | 187 | + url: BASE_URL + '/admin/?m=srv&a=upload', |
| 188 | + filePath: tempFile.path, | ||
| 189 | + name: 'file', | ||
| 190 | + success: (uploadRes) => { | ||
| 181 | Taro.hideLoading(); | 191 | Taro.hideLoading(); |
| 192 | + const data = JSON.parse(uploadRes.data); | ||
| 193 | + if (data.code === 0) { | ||
| 194 | + formData.avatar_url = data.data.url; | ||
| 182 | Taro.showToast({ title: '上传成功', icon: 'success' }); | 195 | Taro.showToast({ title: '上传成功', icon: 'success' }); |
| 183 | - }, 1000); | 196 | + } else { |
| 197 | + Taro.showToast({ title: data.msg || '上传失败', icon: 'none' }); | ||
| 198 | + } | ||
| 199 | + }, | ||
| 200 | + fail: () => { | ||
| 201 | + Taro.hideLoading(); | ||
| 202 | + Taro.showToast({ title: '上传失败,请稍后重试', icon: 'none' }); | ||
| 203 | + }, | ||
| 204 | + }); | ||
| 184 | }, | 205 | }, |
| 185 | fail: () => { | 206 | fail: () => { |
| 186 | Taro.showToast({ title: '选择图片失败', icon: 'none' }); | 207 | Taro.showToast({ title: '选择图片失败', icon: 'none' }); |
| 187 | - } | 208 | + }, |
| 188 | }); | 209 | }); |
| 189 | }; | 210 | }; |
| 190 | 211 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-08-27 17:47:46 | 2 | * @Date: 2025-08-27 17:47:46 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-08-28 11:16:24 | 4 | + * @LastEditTime: 2025-08-28 21:12:23 |
| 5 | * @FilePath: /lls_program/src/pages/Profile/index.vue | 5 | * @FilePath: /lls_program/src/pages/Profile/index.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -14,7 +14,7 @@ | ... | @@ -14,7 +14,7 @@ |
| 14 | <!-- User profile section --> | 14 | <!-- User profile section --> |
| 15 | <view class="px-4 pt-8 pb-6 flex items-center justify-between"> | 15 | <view class="px-4 pt-8 pb-6 flex items-center justify-between"> |
| 16 | <view class="flex items-center"> | 16 | <view class="flex items-center"> |
| 17 | - <image src="https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto" alt="User avatar" class="w-16 h-16 rounded-full border-2 border-white" /> | 17 | + <image :src="defaultAvatar" alt="User avatar" class="w-16 h-16 rounded-full border-2 border-white" /> |
| 18 | <view class="ml-4"> | 18 | <view class="ml-4"> |
| 19 | <h1 class="text-xl font-bold text-white">张爷爷</h1> | 19 | <h1 class="text-xl font-bold text-white">张爷爷</h1> |
| 20 | </view> | 20 | </view> |
| ... | @@ -48,6 +48,8 @@ import { ref, shallowRef } from 'vue'; | ... | @@ -48,6 +48,8 @@ import { ref, shallowRef } from 'vue'; |
| 48 | import Taro from '@tarojs/taro'; | 48 | import Taro from '@tarojs/taro'; |
| 49 | import BottomNav from '../../components/BottomNav.vue'; | 49 | import BottomNav from '../../components/BottomNav.vue'; |
| 50 | import { Shop3, Cart, Message, Tips, Right } from '@nutui/icons-vue-taro'; | 50 | import { Shop3, Cart, Message, Tips, Right } from '@nutui/icons-vue-taro'; |
| 51 | +// 默认头像 | ||
| 52 | +const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg' | ||
| 51 | 53 | ||
| 52 | const menuItems = shallowRef([ | 54 | const menuItems = shallowRef([ |
| 53 | { | 55 | { | ... | ... |
| ... | @@ -391,6 +391,7 @@ const saveMedia = async () => { | ... | @@ -391,6 +391,7 @@ const saveMedia = async () => { |
| 391 | Taro.reLaunch({ | 391 | Taro.reLaunch({ |
| 392 | url: '/pages/Dashboard/index' | 392 | url: '/pages/Dashboard/index' |
| 393 | }); | 393 | }); |
| 394 | + // Taro.navigateBack(); | ||
| 394 | }, 2000); | 395 | }, 2000); |
| 395 | } catch (error) { | 396 | } catch (error) { |
| 396 | console.error('上传失败:', error); | 397 | console.error('上传失败:', error); | ... | ... |
-
Please register or login to post a comment