hookehuyr

feat: 优化用户界面和头像上传功能

- 在Dashboard页面添加"家庭设置"文字标签
- 使用默认头像替换Profile页面的占位图
- 优化EditFamily页面的输入框间距和删除按钮大小
- 实现EditProfile页面的真实头像上传功能,添加大小限制和错误处理
...@@ -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);
......