hookehuyr

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

- 将多个页面中的文本颜色和背景样式更新为白色主题
- 添加自定义图标替换原有图标,增强视觉一致性
- 注释掉图片选择失败时的错误提示,优化用户体验
- 调整家庭相册和创建家庭页面的布局和图标
......@@ -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';
......
......@@ -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-size: cover;
background-position: center bottom;
// background-image: url('https://cdn.ipadbiz.cn/lls_prog/images/dashboard_bg.png');
// background-size: cover;
// background-position: center bottom;
overflow: hidden;
}
......
......@@ -318,7 +318,7 @@ const changeAvatar = () => {
});
},
fail: () => {
Taro.showToast({ title: '选择图片失败', icon: 'none' });
// Taro.showToast({ title: '选择图片失败', icon: 'none' });
},
});
};
......
<!--
* @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;
......
......@@ -18,6 +18,6 @@
.tip-text {
font-size: 20rpx;
color: #666;
// color: #666;
line-height: 1;
}
......
......@@ -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'
......
......@@ -301,7 +301,7 @@ const chooseImage = () => {
});
},
fail: function () {
showToast('选择图片失败', 'none');
// showToast('选择图片失败', 'none');
}
});
};
......
......@@ -311,7 +311,7 @@ const changeAvatar = () => {
});
},
fail: () => {
Taro.showToast({ title: '选择图片失败', icon: 'none' });
// Taro.showToast({ title: '选择图片失败', icon: 'none' });
},
});
};
......
......@@ -167,7 +167,7 @@ const chooseImage = () => {
});
},
fail: function () {
showToast('选择图片失败', 'error');
// showToast('选择图片失败', 'error');
}
});
};
......
......@@ -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: '妻子' },
{ id: '儿子', label: '儿子' },
{ id: '女儿', label: '女儿' },
{ id: '女婿', label: '女婿' },
{ id: '儿媳', label: '儿媳' },
{ id: '孙子', label: '孙子' },
{ id: '外孙', label: '外孙' },
{ id: '孙女', label: '孙女' },
{ id: '外孙女', label: '外孙女' }
{ id: '丈夫', label: '丈夫', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E7%94%B7.png' },
{ id: '妻子', label: '妻子', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%B3.png' },
{ id: '儿子', label: '儿子', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E7%94%B7.png' },
{ id: '女儿', label: '女儿', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%B3.png' },
{ id: '女婿', label: '女婿', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E7%94%B7.png' },
{ id: '儿媳', label: '儿媳', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%B3.png' },
{ id: '孙子', label: '孙子', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E7%94%B7%E5%AD%A9.png' },
{ id: '外孙', label: '外孙', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E7%94%B7%E5%AD%A9.png' },
{ id: '孙女', label: '孙女', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%B3%E5%AD%A9.png' },
{ id: '外孙女', label: '外孙女', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%B3%E5%AD%A9.png' }
];
const isComplete = computed(() => {
......
......@@ -605,10 +605,10 @@ const chooseBackgroundImage = () => {
uploadBackgroundImage(tempFile.path)
},
fail: () => {
Taro.showToast({
title: '选择图片失败',
icon: 'none'
})
// Taro.showToast({
// title: '选择图片失败',
// icon: 'none'
// })
}
})
}
......