feat: 优化页面数据初始化逻辑并统一使用useDidShow

refactor(组件): 提取初始化逻辑到独立函数 style: 清理无用导入和注释

feat: 优化页面数据初始化逻辑并统一使用useDidShow
refactor(组件): 提取初始化逻辑到独立函数 style: 清理无用导入和注释
hookehuyr
Commit eedb3922cb89b39784d87cc4fc5171b66162c8ea eedb3922 1 parent 7f62cacf
Showing 7 changed files with 146 additions and 53 deletions
src/components/PointsCollector.vue
src/components/WeRunAuth.vue
src/pages/Dashboard/index.vue
src/pages/MyFamily/index.vue
src/pages/MyRewards/index.vue
src/pages/Profile/index.vue
src/pages/Rewards/index.vue
--- a/src/components/PointsCollector.vue
View file @eedb392
+++ b/src/components/PointsCollector.vue
View file @eedb392
@@ -38,8 +38,8 @@
 </template>
 <script setup>
-import { ref, onMounted, nextTick, defineProps, defineExpose } from 'vue'
+import { ref, onMounted, defineProps, defineExpose } from 'vue'
-import Taro from '@tarojs/taro'
+import Taro, { useDidShow } from '@tarojs/taro'
 // 定义props
 const props = defineProps({
@@ -240,9 +240,22 @@ defineExpose({
   collectAll
 })
+/**
+ * 初始化数据
+ */
+const initData = () => {
+  floatingItems.value = generateMockData();
+  console.warn('初始化数据')
+}
+
 // 组件挂载时初始化数据
 onMounted(() => {
-  floatingItems.value = generateMockData();
+  initData();
+})
+
+// 每次进入组件时重新获取数据
+useDidShow(() => {
+  initData();
 })
 /**
--- a/src/components/WeRunAuth.vue
View file @eedb392
+++ b/src/components/WeRunAuth.vue
View file @eedb392
@@ -141,6 +141,12 @@ const getWeRunData = async () => {
       code: loginRes.code
     })
+    // 提示获取步数成功
+    // Taro.showToast({
+    //   title: `获取步数成功：${mockSteps}步`,
+    //   icon: 'none'
+    // })
+
     // TODO: 实际项目中需要将 encryptedData, iv, code 发送到后端解密
     // const decryptedData = await api.decryptWeRunData({
     //   encryptedData: weRunRes.encryptedData,
--- a/src/pages/Dashboard/index.vue
View file @eedb392
+++ b/src/pages/Dashboard/index.vue
View file @eedb392
@@ -2,14 +2,14 @@
   <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="https://placehold.co/800x400/e2f3ff/0369a1?text=LFX&font=roboto" alt="Family background" class="w-full h-full object-cover" />
+      <image :src="familyCover" 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">
         <view class="absolute top-4 right-4 text-white flex items-center" @click="goToProfile">
           <Setting size="24" />
           <text class="ml-2">家庭设置</text>
         </view>
-        <h1 class="text-white text-2xl font-bold">张爷爷的家庭</h1>
+        <h1 class="text-white text-2xl font-bold">{{ familyName }}</h1>
-        <p class="text-white opacity-90">每日走万步，全家一起行</p>
+        <p class="text-white opacity-90">{{ familySlogn }}</p>
       </view>
     </view>
@@ -21,6 +21,7 @@
     >
       <template #default="{ steps, isLoading }">
         <!-- Today's steps section -->
+        <!-- TODO: 今日获取的步数怎么同步到下面那个积分池里面去 -->
         <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>
@@ -32,11 +33,16 @@
               </span>
               <span class="ml-1 text-gray-500">步</span>
             </view>
+            <view class="flex gap-2">
+              <!-- <view class="bg-green-500 text-white px-4 py-2 rounded-full text-xs" @click="handleRefreshSteps">
+                更新步数
+              </view> -->
               <view class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
                 一键收取
               </view>
             </view>
           </view>
+        </view>
         <!-- Points circles -->
         <view class="flex justify-between px-5 py-6 my-4 bg-white rounded-xl shadow-md mx-4">
@@ -98,7 +104,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
-import Taro from '@tarojs/taro';
+import Taro, { useDidShow } from '@tarojs/taro';
 import { Setting, Photograph, Right } from '@nutui/icons-vue-taro';
 import BottomNav from '../../components/BottomNav.vue';
 import PointsCollector from '@/components/PointsCollector.vue'
@@ -109,6 +115,10 @@ const isWeRunAuthorized = ref(false);
 const pointsCollectorRef = ref(null)
 const weRunAuthRef = ref(null)
+const familyName = ref('')
+const familySlogn = ref('')
+const familyCover = ref('')
+
 /**
  * 触发积分收集组件的一键收取
  */
@@ -119,6 +129,15 @@ const handleCollectAll = () => {
 }
 /**
+ * 手动刷新微信步数
+ */
+const handleRefreshSteps = async () => {
+  if (weRunAuthRef.value) {
+    await weRunAuthRef.value.refreshSteps()
+  }
+}
+
+/**
  * 处理微信步数授权状态变化
  * @param {boolean} authorized - 授权状态
  */
@@ -196,12 +215,20 @@ const openCamera = () => {
   Taro.navigateTo({ url: '/pages/UploadMedia/index' });
 }
-onMounted(() => {
+const initPageData = async () => {
+  // 获取用户信息
+  familyName.value = '张爷爷的家庭'
+  familySlogn.value = '每日走万步，全家一起行'
+  familyCover.value = 'https://placehold.co/800x400/e2f3ff/0369a1?text=LFX&font=roboto'
+}
+
+useDidShow(() => {
   // TODO: 等待真实接口获取用户是否加入家庭
   // const hasJoinedFamily = false; // Change to true to simulate having a family
   // if (!hasJoinedFamily) {
   //   Taro.redirectTo({ url: '/pages/Welcome/index' });
   // }
+  initPageData();
 })
 </script>
--- a/src/pages/MyFamily/index.vue
View file @eedb392
+++ b/src/pages/MyFamily/index.vue
View file @eedb392
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-29 15:27:43
+ * @LastEditTime: 2025-08-29 20:32:52
  * @FilePath: /lls_program/src/pages/MyFamily/index.vue
  * @Description: 我的家庭页面 - 展示用户加入的家庭列表
 -->
@@ -103,7 +103,7 @@
         @tap="joinNewFamily"
         class="w-full bg-blue-500 text-white text-center py-3 rounded-lg font-medium"
       >
-        + 加入新家庭
+        加入新家庭
       </view>
     </view>
@@ -113,7 +113,7 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import Taro from '@tarojs/taro';
+import Taro, { useDidShow } from '@tarojs/taro';
 import { Home } from '@nutui/icons-vue-taro';
 import './index.less';
@@ -248,7 +248,7 @@ const joinNewFamily = () => {
 // 页面加载时初始化数据
-onMounted(() => {
+useDidShow(() => {
   initPageData();
 });
 </script>
--- a/src/pages/MyRewards/index.vue
View file @eedb392
+++ b/src/pages/MyRewards/index.vue
View file @eedb392
@@ -55,8 +55,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import Taro from '@tarojs/taro';
-
+import { useDidShow } from '@tarojs/taro';
-import AppHeader from '../../components/AppHeader.vue';
 const tabs = ref([
   { name: 'all', label: '全部' },
@@ -67,36 +66,7 @@ const tabs = ref([
 const activeTab = ref('all');
-const rewards = ref([
+const rewards = ref([]);
-  {
-    id: 1,
-    title: '杏花楼集团 85折券',
-    expiryDate: '2025-08-28',
-    status: 'unused',
-    usedDate: null,
-  },
-  {
-    id: 2,
-    title: '老凤祥银楼 20元抵用券',
-    expiryDate: '2025-08-28',
-    status: 'unused',
-    usedDate: null,
-  },
-  {
-    id: 3,
-    title: '吴良材眼镜 5折券',
-    expiryDate: '2024-05-20',
-    status: 'used',
-    usedDate: '2024-05-01',
-  },
-  {
-    id: 4,
-    title: '沈大成双酿团 免费券',
-    expiryDate: '2024-03-15',
-    status: 'expired',
-    usedDate: null,
-  },
-]);
 const filteredRewards = computed(() => {
   if (activeTab.value === 'all') {
@@ -135,4 +105,55 @@ const handleUseReward = (reward) => {
     })
   }
 };
+
+useDidShow(() => {
+  initPageData();
+});
+
+const initPageData = () => {
+  rewards.value = [
+    {
+      id: 1,
+      title: '杏花楼集团 85折券',
+      expiryDate: '2025-08-28',
+      status: 'unused',
+      usedDate: null,
+    },
+    {
+      id: 2,
+      title: '老凤祥银楼 20元抵用券',
+      expiryDate: '2025-08-28',
+      status: 'unused',
+      usedDate: null,
+    },
+    {
+      id: 3,
+      title: '吴良材眼镜 5折券',
+      expiryDate: '2024-05-20',
+      status: 'used',
+      usedDate: '2024-05-01',
+    },
+    {
+      id: 4,
+      title: '沈大成双酿团 免费券',
+      expiryDate: '2024-03-15',
+      status: 'expired',
+      usedDate: null,
+    },
+    {
+      id: 5,
+      title: '沈大成双酿团 免费券',
+      expiryDate: '2024-03-15',
+      status: 'expired',
+      usedDate: null,
+    },
+    {
+      id: 6,
+      title: '沈大成双酿团 免费券',
+      expiryDate: '2024-03-15',
+      status: 'expired',
+      usedDate: null,
+    },
+  ];
+}
 </script>
--- a/src/pages/Profile/index.vue
View file @eedb392
+++ b/src/pages/Profile/index.vue
View file @eedb392
 <!--
  * @Date: 2025-08-27 17:47:46
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-29 11:12:30
+ * @LastEditTime: 2025-08-29 20:38:36
  * @FilePath: /lls_program/src/pages/Profile/index.vue
  * @Description: 文件描述
 -->
@@ -16,7 +16,7 @@
         <view class="flex items-center">
           <image :src="defaultAvatar" alt="User avatar" class="w-16 h-16 rounded-full border-2 border-white" />
           <view class="ml-4">
-            <h1 class="text-xl font-bold text-white">张爷爷</h1>
+            <h1 class="text-xl font-bold text-white">{{ userInfo.nickName }}</h1>
           </view>
         </view>
         <view @tap="goToEditProfile" class="text-white">
@@ -45,7 +45,7 @@
 <script setup>
 import { ref, shallowRef } from 'vue';
-import Taro from '@tarojs/taro';
+import Taro, { useDidShow } from '@tarojs/taro';
 import BottomNav from '../../components/BottomNav.vue';
 import { My, Shop3, Cart, Message, Tips, Right } from '@nutui/icons-vue-taro';
 // 默认头像
@@ -96,7 +96,24 @@ const menuItems = shallowRef([
   }
 ]);
+const userInfo = ref({
+  nickName: '',
+  avatarUrl: '',
+});
+
 const goToEditProfile = () => {
   Taro.navigateTo({ url: '/pages/EditProfile/index' });
 };
+
+const initPageData = () => {
+  // 获取用户信息
+  userInfo.value = {
+    nickName: '用户10086',
+    avatarUrl: defaultAvatar,
+  }
+}
+
+useDidShow(() => {
+  initPageData();
+});
 </script>
--- a/src/pages/Rewards/index.vue
View file @eedb392
+++ b/src/pages/Rewards/index.vue
View file @eedb392
 <!--
  * @Date: 2025-08-27 17:47:26
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-28 09:37:06
+ * @LastEditTime: 2025-08-29 20:32:08
  * @FilePath: /lls_program/src/pages/Rewards/index.vue
  * @Description: 文件描述
 -->
@@ -14,7 +14,7 @@
     <view class="relative z-10 flex-1 pb-20">
       <!-- Points display -->
       <view class="pt-8 pb-8 flex flex-col items-center">
-        <h2 class="text-4xl font-bold text-white mb-1">2580分</h2>
+        <h2 class="text-4xl font-bold text-white mb-1">{{ totalPoints }}分</h2>
         <p class="text-white text-opacity-80">我的积分</p>
       </view>
       <!-- Main content -->
@@ -71,16 +71,16 @@
 </template>
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
-import Taro from '@tarojs/taro';
+import Taro, { useDidShow } from '@tarojs/taro';
 import { ScreenLittle, Search2 } from '@nutui/icons-vue-taro';
-import AppHeader from '../../components/AppHeader.vue';
-import BottomNav from '../../components/BottomNav.vue';
 const searchQuery = ref('');
 const selectedPoints = ref(null);
 const sortOrder = ref('desc'); // 'asc' or 'desc'
+const totalPoints = ref(0);
+
 const sortedRewardItems = computed(() => {
   let items = [...rewardItems.value];
@@ -154,4 +154,13 @@ const goToRewardDetail = (reward) => {
     url: `/pages/RewardDetail/index?id=${reward.id}`
   });
 };
+
+const initData = async () => {
+  totalPoints.value = '9856';
+  console.warn('初始化数据')
+}
+
+useDidShow(() => {
+  initData();
+})
 </script>