feat: 更新UI样式和图标，优化图片选择失败处理

- 将多个页面中的文本颜色和背景样式更新为白色主题 - 添加自定义图标替换原有图标，增强视觉一致性 - 注释掉图片选择失败时的错误提示，优化用户体验 - 调整家庭相册和创建家庭页面的布局和图标

feat: 更新UI样式和图标，优化图片选择失败处理
- 将多个页面中的文本颜色和背景样式更新为白色主题 - 添加自定义图标替换原有图标，增强视觉一致性 - 注释掉图片选择失败时的错误提示，优化用户体验 - 调整家庭相册和创建家庭页面的布局和图标
hookehuyr
Commit da4f77ddd16ec7f60ef9259d9085e05955b9dcff da4f77dd 1 parent 82b044ca
Showing 11 changed files with 66 additions and 50 deletions
src/components/FamilyAlbum.vue
src/components/PointsCollector.vue
src/pages/AddProfile/index.vue
src/pages/CreateFamily/index.vue
src/pages/Dashboard/index.less
src/pages/Dashboard/index.vue
src/pages/EditFamily/index.vue
src/pages/EditProfile/index.vue
src/pages/Feedback/index.vue
src/pages/JoinFamily/index.vue
src/pages/PosterCheckin/index.vue
--- a/src/components/FamilyAlbum.vue
View file @da4f77d
+++ b/src/components/FamilyAlbum.vue
View file @da4f77d
@@ -3,9 +3,13 @@
     <!-- Family album -->
     <view class="p-5 mt-4 mb-6 bg-white rounded-xl shadow-md mx-4">
       <view class="flex justify-between items-center mb-2">
-        <h2 class="font-medium text-lg">多彩瞬间</h2>
+        <!-- <h2 class="font-medium text-lg">多彩瞬间</h2> -->
+        <h2 class="font-medium text-lg flex items-center">
+          <IconFont size="20" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E7%9B%B8%E5%86%8C.png" />
+          <text class="ml-2">多彩瞬间</text>
+        </h2>
         <view class="text-blue-500 flex items-center text-xs" @click="openAlbumList">
-          进入相册
+          查看更多
         </view>
       </view>
       <p class="text-sm text-gray-500 mb-3">记录每一个家庭活动瞬间</p>
@@ -111,7 +115,7 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import Taro, { useDidShow } from '@tarojs/taro';
-import { Close, Photograph } from '@nutui/icons-vue-taro';
+import { Close, Photograph, IconFont } from '@nutui/icons-vue-taro';
 import { getPhotoListAPI } from '@/api/photo';
--- a/src/components/PointsCollector.vue
View file @da4f77d
+++ b/src/components/PointsCollector.vue
View file @da4f77d
@@ -443,6 +443,9 @@ const handleGoToRewards = () => {
   box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
   margin: 32rpx;
   overflow: hidden;
+  background-image: url('https://cdn.ipadbiz.cn/lls_prog/images/dashboard_bg.png');
+  background-size: cover;
+  background-position: center bottom;
 }
 .points-collector-header {
@@ -462,9 +465,9 @@ const handleGoToRewards = () => {
   // background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   // TODO: 等待正式背景图
   // background-image: url('https://cdn.ipadbiz.cn/lls_prog/images/bg-test-2.png');
-  background-image: url('https://cdn.ipadbiz.cn/lls_prog/images/dashboard_bg.png');
+  // background-image: url('https://cdn.ipadbiz.cn/lls_prog/images/dashboard_bg.png');
-  background-size: cover;
+  // background-size: cover;
-  background-position: center bottom;
+  // background-position: center bottom;
   overflow: hidden;
 }
--- a/src/pages/AddProfile/index.vue
View file @da4f77d
+++ b/src/pages/AddProfile/index.vue
View file @da4f77d
@@ -318,7 +318,7 @@ const changeAvatar = () => {
       });
     },
     fail: () => {
-      Taro.showToast({ title: '选择图片失败', icon: 'none' });
+      // Taro.showToast({ title: '选择图片失败', icon: 'none' });
     },
   });
 };
--- a/src/pages/CreateFamily/index.vue
View file @da4f77d
+++ b/src/pages/CreateFamily/index.vue
View file @da4f77d
 <!--
  * @Date: 2025-08-27 17:44:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-11 20:01:15
+ * @LastEditTime: 2025-09-16 11:01:23
  * @FilePath: /lls_program/src/pages/CreateFamily/index.vue
  * @Description: 文件描述
 -->
@@ -10,8 +10,9 @@
     <!-- <AppHeader title="创建家庭" /> -->
     <view class="flex-1 px-4 py-6 overflow-auto">
       <view class="mb-6">
-        <view class="text-gray-600 mb-6">
+        <view class="text-gray-600 mb-6 flex items-center">
-          请填写家庭信息，创建您的专属家庭空间
+          <IconFont size="20" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%88%9B%E5%BB%BA%E5%AE%B6%E5%BA%AD1.png" />
+          <text class="ml-1">请填写家庭信息，创建您的专属家庭空间</text>
         </view>
         <!-- Family Name -->
         <view class="mb-6">
@@ -91,8 +92,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>
@@ -104,9 +107,9 @@
             </view>
             <!-- 封面显示区域 -->
             <view class="mb-4">
-              <view class="relative">
+              <view class="relative bg-gray-100 rounded-lg">
                 <image
-                  :src="familyAvatar || defaultFamilyCover"
+                  :src="familyAvatar"
                   class="w-full h-48 rounded-lg object-cover"
                   mode="aspectFill"
                   @tap="previewAvatar"
@@ -120,9 +123,9 @@
                 </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"
+                  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" />
+                  <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>
@@ -171,7 +174,7 @@
 <script setup>
 import { ref, nextTick, computed } from 'vue';
 import Taro from '@tarojs/taro';
-import { Tips, Photograph, Right } from '@nutui/icons-vue-taro';
+import { Tips, Photograph, Right, IconFont } from '@nutui/icons-vue-taro';
 import BASE_URL from '@/utils/config';
 // 接口信息
 import { createFamilyAPI } from '@/api/family';
@@ -311,7 +314,7 @@ const chooseImage = () => {
       });
     },
     fail: function () {
-      showToast('选择图片失败', 'none');
+      // showToast('选择图片失败', 'none');
     }
   });
 };
@@ -361,7 +364,10 @@ const uploadImage = (filePath) => {
  * 预览头像
  */
 const previewAvatar = () => {
-  const imageToPreview = familyAvatar.value || defaultFamilyCover.value;
+  if (!familyAvatar.value) {
+    return;
+  }
+  const imageToPreview = familyAvatar.value;
   previewImages.value = [{ src: imageToPreview }];
   previewIndex.value = 0;
   previewVisible.value = true;
--- a/src/pages/Dashboard/index.less
View file @da4f77d
+++ b/src/pages/Dashboard/index.less
View file @da4f77d
@@ -18,6 +18,6 @@
 .tip-text {
   font-size: 20rpx;
-  color: #666;
+  // color: #666;
   line-height: 1;
 }
--- a/src/pages/Dashboard/index.vue
View file @da4f77d
+++ b/src/pages/Dashboard/index.vue
View file @da4f77d
@@ -42,22 +42,22 @@
             <!-- 头部：今日步数 -->
             <template #header>
               <view class="flex justify-between items-center mb-1 relative">
-                <span class="text-gray-500">今日</span>
+                <span class="text-white">今日</span>
                 <!-- 积分规则提示 -->
                 <view class="points-rule-tip" @tap="handleGoToPointsRule">
                   <!-- <view class="tip-icon">💡</view> -->
-                  <text class="tip-text">积分攻略</text>
+                  <text class="tip-text text-white">积分攻略</text>
                 </view>
               </view>
               <view class="flex justify-between items-center">
                 <view class="flex items-baseline">
-                  <span class="text-4xl font-bold">
+                  <span class="text-4xl font-bold text-white">
                     {{ todaySteps?.toLocaleString() }}
                   </span>
-                  <span class="ml-1 text-gray-500">步</span>
+                  <span class="ml-1 text-white">步</span>
                 </view>
                 <view class="flex gap-2">
-                  <view class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
+                  <view class="bg-white text-blue-500 opacity-80 px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
                     一键收取
                   </view>
                 </view>
@@ -84,7 +84,7 @@
             <!-- 头部：今日步数 -->
             <template #header>
               <view class="flex justify-between items-center mb-1 relative">
-                <span class="text-gray-500">今日</span>
+                <span class="text-white">今日</span>
                 <!-- 积分规则提示 -->
                 <view class="points-rule-tip" @tap="handleGoToPointsRule">
                   <!-- <view class="tip-icon">💡</view> -->
@@ -93,13 +93,13 @@
               </view>
               <view class="flex justify-between items-center">
                 <view class="flex items-baseline">
-                  <span class="text-4xl font-bold">
+                  <span class="text-4xl font-bold text-white">
                     {{ todaySteps?.toLocaleString() }}
                   </span>
-                  <span class="ml-1 text-gray-500">步</span>
+                  <span class="ml-1 text-white">步</span>
                 </view>
                 <view class="flex gap-2">
-                  <view class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
+                  <view class="bg-white text-blue-500 opacity-80 px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
                     一键收取
                   </view>
                 </view>
@@ -121,7 +121,10 @@
         <!-- Family step ranking -->
         <view class="p-5 bg-white rounded-xl shadow-md mx-4">
           <view class="flex justify-between items-center mb-4">
-            <h2 class="font-medium text-lg">今日家庭步数排行</h2>
+            <h2 class="font-medium text-lg flex items-center">
+              <IconFont size="20" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%96%E6%9D%AF.png" />
+              <text class="ml-2">今日家庭步数排行</text>
+            </h2>
             <span class="text-sm text-gray-500">
               总计 {{ getTotalSteps() }} 步
             </span>
@@ -159,7 +162,7 @@
 import "./index.less";
 import { ref, computed, onMounted } from 'vue';
 import Taro, { useDidShow, useReady, useLoad } from '@tarojs/taro';
-import { Setting, Photograph, Category } from '@nutui/icons-vue-taro';
+import { Setting, Photograph, Category, IconFont } from '@nutui/icons-vue-taro';
 import BottomNav from '../../components/BottomNav.vue';
 import TotalPointsDisplay from '@/components/TotalPointsDisplay.vue';
 import PointsCollector from '@/components/PointsCollector.vue'
--- a/src/pages/EditFamily/index.vue
View file @da4f77d
+++ b/src/pages/EditFamily/index.vue
View file @da4f77d
@@ -301,7 +301,7 @@ const chooseImage = () => {
       });
     },
     fail: function () {
-      showToast('选择图片失败', 'none');
+      // showToast('选择图片失败', 'none');
     }
   });
 };
--- a/src/pages/EditProfile/index.vue
View file @da4f77d
+++ b/src/pages/EditProfile/index.vue
View file @da4f77d
@@ -311,7 +311,7 @@ const changeAvatar = () => {
       });
     },
     fail: () => {
-      Taro.showToast({ title: '选择图片失败', icon: 'none' });
+      // Taro.showToast({ title: '选择图片失败', icon: 'none' });
     },
   });
 };
--- a/src/pages/Feedback/index.vue
View file @da4f77d
+++ b/src/pages/Feedback/index.vue
View file @da4f77d
@@ -167,7 +167,7 @@ const chooseImage = () => {
       });
     },
     fail: function () {
-      showToast('选择图片失败', 'error');
+      // showToast('选择图片失败', 'error');
     }
   });
 };
--- a/src/pages/JoinFamily/index.vue
View file @da4f77d
+++ b/src/pages/JoinFamily/index.vue
View file @da4f77d
@@ -53,7 +53,7 @@
                 : 'border-gray-200 text-gray-700'
             ]"
           >
-            <My size="20" />
+            <IconFont :name="role.type" size="20" />
             <span class="text-sm">{{ role.label }}</span>
           </view>
         </view>
@@ -165,7 +165,7 @@
 <script setup>
 import { ref, computed, nextTick, onMounted, watch } from 'vue';
 import Taro from '@tarojs/taro';
-import { My, Check } from '@nutui/icons-vue-taro';
+import { My, Check, IconFont } from '@nutui/icons-vue-taro';
 // 获取接口信息
 import { searchFamilyByPassphraseAPI, joinFamilyAPI } from '@/api/family';
 // 导入主题颜色
@@ -231,16 +231,16 @@ const handleBlur = (index) => {
 };
 const familyRoles = [
-  { id: '丈夫', label: '丈夫' },
+  { id: '丈夫', label: '丈夫', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E7%94%B7.png' },
-  { id: '妻子', label: '妻子' },
+  { id: '妻子', label: '妻子', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%B3.png' },
-  { id: '儿子', label: '儿子' },
+  { id: '儿子', label: '儿子', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E7%94%B7.png' },
-  { id: '女儿', label: '女儿' },
+  { id: '女儿', label: '女儿', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%B3.png' },
-  { id: '女婿', label: '女婿' },
+  { id: '女婿', label: '女婿', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E7%94%B7.png' },
-  { id: '儿媳', label: '儿媳' },
+  { id: '儿媳', label: '儿媳', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%B3.png' },
-  { id: '孙子', label: '孙子' },
+  { id: '孙子', label: '孙子', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E7%94%B7%E5%AD%A9.png' },
-  { id: '外孙', label: '外孙' },
+  { id: '外孙', label: '外孙', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E7%94%B7%E5%AD%A9.png' },
-  { id: '孙女', label: '孙女' },
+  { id: '孙女', label: '孙女', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%B3%E5%AD%A9.png' },
-  { id: '外孙女', label: '外孙女' }
+  { id: '外孙女', label: '外孙女', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%B3%E5%AD%A9.png' }
 ];
 const isComplete = computed(() => {
--- a/src/pages/PosterCheckin/index.vue
View file @da4f77d
+++ b/src/pages/PosterCheckin/index.vue
View file @da4f77d
@@ -605,10 +605,10 @@ const chooseBackgroundImage = () => {
       uploadBackgroundImage(tempFile.path)
     },
     fail: () => {
-      Taro.showToast({
+      // Taro.showToast({
-        title: '选择图片失败',
+      //   title: '选择图片失败',
-        icon: 'none'
+      //   icon: 'none'
-      })
+      // })
     }
   })
 }