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

- 在PointsCollector组件中添加兑换点击事件处理 - 修改RewardCategories页面兑换逻辑，增加线下兑换提示 - 重构Dashboard页面布局和样式，集成PointsCollector组件 - 更新按钮交互和图片资源

feat: 优化积分兑换和仪表盘界面交互
- 在PointsCollector组件中添加兑换点击事件处理 - 修改RewardCategories页面兑换逻辑，增加线下兑换提示 - 重构Dashboard页面布局和样式，集成PointsCollector组件 - 更新按钮交互和图片资源
hookehuyr
Commit 7648d2cb73fe57994d0a36b19cc00f2244824cde 7648d2cb 1 parent cc44dd40
Showing 4 changed files with 59 additions and 42 deletions
src/components/PointsCollector.vue
src/pages/Dashboard/index.vue
src/pages/PointsDetail/index.vue
src/pages/RewardCategories/index.vue
--- a/src/components/PointsCollector.vue
View file @7648d2c
+++ b/src/components/PointsCollector.vue
View file @7648d2c
@@ -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">
--- a/src/pages/Dashboard/index.vue
View file @7648d2c
+++ b/src/pages/Dashboard/index.vue
View file @7648d2c
 <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">
+        <view class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
-          一键汇总
+          一键收取
-        </button>
+        </view>
       </view>
     </view>
     <!-- Points circles -->
-    <view class="flex justify-between px-5 my-4">
+    <view class="flex justify-between px-5 py-6 my-4 bg-white rounded-xl shadow-md mx-4">
-      <view class="flex flex-col items-center">
+      <PointsCollector ref="pointsCollectorRef" height="30vh" />
-        <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>
     <!-- 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">
+      <view class="w-full bg-blue-500 text-white py-3 rounded-lg flex items-center justify-center">
-        <Camera size="20" class="mr-2" />
+        <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([
--- a/src/pages/PointsDetail/index.vue
View file @7648d2c
+++ b/src/pages/PointsDetail/index.vue
View file @7648d2c
@@ -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');
--- a/src/pages/RewardCategories/index.vue
View file @7648d2c
+++ b/src/pages/RewardCategories/index.vue
View file @7648d2c
@@ -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) => {
-  Taro.navigateTo({ url: '/pages/Rewards/index' });
+  if (idx !== 1) {
+    Taro.navigateTo({ url: '/pages/Rewards/index' });
+  } else {
+    // 弹出确认提示框, 不用进行操作, 只是文本提示用户进行线下兑换
+    Taro.showModal({
+      title: '提示',
+      content: '请联系客服进行线下兑换',
+      showCancel: false
+    }).then(res => {
+      if (res.confirm) {
+        // 点击了确认按钮
+      }
+    })
+  }
 };
 </script>