Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7648d2cb 1 parent cc44dd40

feat: 优化积分兑换和仪表盘界面交互 

- 在PointsCollector组件中添加兑换点击事件处理
- 修改RewardCategories页面兑换逻辑，增加线下兑换提示
- 重构Dashboard页面布局和样式，集成PointsCollector组件
- 更新按钮交互和图片资源
Inline Side-by-side
Showing 4 changed files with 58 additions and 41 deletions
......@@ -4,7 +4,7 @@
<view class="center-circle">
<view class="total-points">
<text class="points-number">{{ animatedTotalPoints }}分</text>
<text class="points-label">去兑换</text>
<text class="points-label" @tap="handleGoToRewards">去兑换</text>
</view>
</view>
......@@ -244,6 +244,16 @@ defineExpose({
onMounted(() => {
floatingItems.value = generateMockData();
})
/**
* 处理去兑换点击事件
*/
const handleGoToRewards = () => {
Taro.navigateTo({
url: '/pages/RewardCategories/index',
})
}
</script>
<style lang="less">
......
<template>
<view class="min-h-screen flex flex-col bg-white pb-16">
<view class="min-h-screen flex flex-col bg-white pb-16" style="background-color: #F9FAFB;">
<!-- Hero section with family name and background image -->
<view class="relative h-48">
<image src="/static/images/home/dashboard-bg.png" alt="Family background" class="w-full h-full object-cover" />
<image src="https://placehold.co/800x400/e2f3ff/0369a1?text=LFX&font=roboto" alt="Family background" class="w-full h-full object-cover" />
<view class="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-5">
<button class="absolute top-4 right-4 text-white" @click="goToProfile">
<view class="absolute top-4 right-4 text-white" @click="goToProfile">
<Setting size="24" />
</button>
</view>
<h1 class="text-white text-2xl font-bold">张爷爷的家庭</h1>
<p class="text-white opacity-90">每日走万步，全家一起行</p>
</view>
</view>
<!-- Today's steps section -->
<view class="p-5">
<view class="px-5 py-6 bg-white rounded-xl shadow-md mx-4 mt-4">
<view class="flex justify-between items-center mb-1">
<span class="text-gray-500">今日</span>
</view>
......@@ -24,36 +24,19 @@
</span>
<span class="ml-1 text-gray-500">步</span>
</view>
<button class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm" @click="handleSyncSteps">
一键汇总
</button>
<view class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
一键收取
</view>
</view>
</view>
<!-- Points circles -->
<view class="flex justify-between px-5 my-4">
<view class="flex flex-col items-center">
<view class="w-16 h-16 bg-blue-500 rounded-full flex flex-col items-center justify-center text-white">
<span class="text-sm">热血</span>
<span class="text-sm font-bold">100分</span>
</view>
</view>
<view class="flex flex-col items-center">
<view class="w-20 h-20 bg-blue-500 rounded-full flex flex-col items-center justify-center text-white">
<span class="text-sm">恒心</span>
<span class="text-sm font-bold">900分</span>
</view>
</view>
<view class="flex flex-col items-center">
<view class="w-24 h-24 bg-blue-600 rounded-full flex flex-col items-center justify-center text-white cursor-pointer" @click="goToRewards">
<span class="text-lg font-bold">8,760分</span>
<span class="text-xs">去兑换 &gt;</span>
</view>
</view>
<view class="flex justify-between px-5 py-6 my-4 bg-white rounded-xl shadow-md mx-4">
<PointsCollector ref="pointsCollectorRef" height="30vh" />
</view>
<!-- Family step ranking -->
<view class="px-5 mt-6">
<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>
<span class="text-sm text-gray-500">
......@@ -72,27 +55,27 @@
<!-- Photo button -->
<view class="px-5 mt-6">
<button class="w-full bg-blue-500 text-white py-3 rounded-lg flex items-center justify-center" @click="goToActivities">
<Camera size="20" class="mr-2" />
<view class="w-full bg-blue-500 text-white py-3 rounded-lg flex items-center justify-center">
<Photograph size="20" class="mr-2" />
拍照留念，奖励积分
</button>
</view>
</view>
<!-- Family album -->
<view class="px-5 mt-6">
<view class="p-5 mt-6 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>
<button class="text-blue-500 flex items-center" @click="goToActivities">
<view class="text-blue-500 flex items-center" @click="goToActivities">
打开相册 <Right size="16" />
</button>
</view>
</view>
<p class="text-sm text-gray-500 mb-3">记录每一个家庭活动瞬间</p>
<view class="grid grid-cols-2 gap-3">
<view class="rounded-lg overflow-hidden">
<image src="/static/images/home/album-1.png" alt="家庭活动照片" class="w-full h-32 object-cover" />
<image src="https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto" alt="家庭活动照片" class="w-full h-32 object-cover" />
</view>
<view class="rounded-lg overflow-hidden">
<image src="/static/images/home/album-2.png" alt="家庭活动照片" class="w-full h-32 object-cover" />
<image src="https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto" alt="家庭活动照片" class="w-full h-32 object-cover" />
</view>
</view>
</view>
......@@ -104,10 +87,21 @@
<script setup>
import { ref, computed } from 'vue';
import Taro from '@tarojs/taro';
import { Setting, Camera, Right } from '@nutui/icons-vue-taro';
import { Setting, Photograph, Right } from '@nutui/icons-vue-taro';
import BottomNav from '../../components/BottomNav.vue';
import PointsCollector from '@/components/PointsCollector.vue'
const todaySteps = ref(2000);
const pointsCollectorRef = ref(null)
/**
* 触发积分收集组件的一键收取
*/
const handleCollectAll = () => {
if (pointsCollectorRef.value) {
pointsCollectorRef.value.collectAll()
}
}
// Mock data for family members
const familyMembers = ref([
......
......@@ -92,7 +92,7 @@
import { ref, computed } from 'vue';
import AppHeader from '../../components/AppHeader.vue';
import BottomNav from '../../components/BottomNav.vue';
import { Right, My, Trophy, People } from '@nutui/icons-vue-taro';
import { Right, My } from '@nutui/icons-vue-taro';
const activeTab = ref('all');
......
......@@ -3,7 +3,7 @@
<!-- <AppHeader title="积分兑换" :showBack="false" /> -->
<view class="flex-1 pb-20">
<view class="p-4 space-y-4">
<view v-for="category in categories" :key="category.id" class="rounded-lg overflow-hidden shadow-sm" @click="goToRewards">
<view v-for="(category, index) in categories" :key="category.id" class="rounded-lg overflow-hidden shadow-sm" @click="goToRewards(index)">
<template v-if="category.id !== 'merchants'">
<view class="relative h-40">
<view class="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-4 text-white" :style="{ background: category.bgColor || 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6))' }">
......@@ -91,7 +91,20 @@ const categories = ref([
}
]);
const goToRewards = () => {
const goToRewards = (idx) => {
if (idx !== 1) {
Taro.navigateTo({ url: '/pages/Rewards/index' });
} else {
// 弹出确认提示框, 不用进行操作, 只是文本提示用户进行线下兑换
Taro.showModal({
title: '提示',
content: '请联系客服进行线下兑换',
showCancel: false
}).then(res => {
if (res.confirm) {
// 点击了确认按钮
}
})
}
};
</script>
......