feat(兑换中心): 重构兑换中心页面并优化导航结构

- 修改导航栏标题为"兑换中心"和"积分兑换"
- 将底部导航的兑换链接指向RewardCategories页面
- 移除页面头部组件，使用原生样式
- 增加积分选择高亮效果和排序功能
- 添加兑换详情页跳转功能
- 新增券详情图片资源

 <!--
 <!--
  * @Date: 2025-08-27 17:44:10
  * @Date: 2025-08-27 17:44:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-27 23:10:28
+ * @LastEditTime: 2025-08-27 23:55:50
  * @FilePath: /lls_program/src/components/BottomNav.vue
  * @FilePath: /lls_program/src/components/BottomNav.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -31,7 +31,7 @@ import meIcon from '@/assets/images/icon/me.svg';
 const navItems = shallowRef([
 const navItems = shallowRef([
   { path: '/pages/Dashboard/index', icon: homeIcon, label: '首页' },
   { path: '/pages/Dashboard/index', icon: homeIcon, label: '首页' },
   { path: '/pages/Activities/index', icon: activitiesIcon, label: '活动' },
   { path: '/pages/Activities/index', icon: activitiesIcon, label: '活动' },
-  { path: '/pages/Rewards/index', icon: rewardsIcon, label: '兑换' },
+  { path: '/pages/RewardCategories/index', icon: rewardsIcon, label: '兑换' },
   { path: '/pages/Profile/index', icon: meIcon, label: '我的' },
   { path: '/pages/Profile/index', icon: meIcon, label: '我的' },
 ]);
 ]);
 
 

+/*
+ * @Date: 2025-08-27 18:25:39
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-08-27 23:58:29
+ * @FilePath: /lls_program/src/pages/RewardCategories/index.config.js
+ * @Description: 文件描述
+ */
 export default {
 export default {
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '积分兑换'
 }
 }

 <template>
 <template>
   <view class="min-h-screen flex flex-col bg-white">
   <view class="min-h-screen flex flex-col bg-white">
-    <AppHeader title="积分兑换" :showBack="false" />
+    <!-- <AppHeader title="积分兑换" :showBack="false" /> -->
     <view class="flex-1 pb-20">
     <view class="flex-1 pb-20">
       <view class="p-4 space-y-4">
       <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 in categories" :key="category.id" class="rounded-lg overflow-hidden shadow-sm" @click="goToRewards">

 export default {
 export default {
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '兑换中心'
 }
 }

+<!--
+ * @Date: 2025-08-27 17:47:26
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-08-28 00:10:13
+ * @FilePath: /lls_program/src/pages/Rewards/index.vue
+ * @Description: 文件描述
+-->
+<!--
+ * @Date: 2025-08-27 17:47:26
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-08-27 23:57:38
+ * @FilePath: /lls_program/src/pages/Rewards/index.vue
+ * @Description: 文件描述
+-->
 <template>
 <template>
   <view class="min-h-screen flex flex-col bg-white">
   <view class="min-h-screen flex flex-col bg-white">
     <!-- Blue header background -->
     <!-- Blue header background -->
     <view class="bg-blue-500 h-48 absolute w-full top-0 left-0 z-0"></view>
     <view class="bg-blue-500 h-48 absolute w-full top-0 left-0 z-0"></view>
-    <AppHeader title="兑换中心" :showBack="false" />
+    <!-- <AppHeader title="兑换中心" :showBack="false" /> -->
     <!-- Content -->
     <!-- Content -->
     <view class="relative z-10 flex-1 pb-20">
     <view class="relative z-10 flex-1 pb-20">
       <!-- Points display -->
       <!-- Points display -->
@@ -14,14 +28,30 @@
       <view class="bg-white rounded-t-3xl px-4 pt-5">
       <view class="bg-white rounded-t-3xl px-4 pt-5">
         <!-- Quick exchange options -->
         <!-- Quick exchange options -->
         <view class="flex gap-3 mb-6">
         <view class="flex gap-3 mb-6">
-          <button v-for="option in quickExchangeOptions" :key="option.points" class="flex-1 py-3 bg-white border border-gray-200 rounded-lg text-center text-gray-700">
+          <view
+            v-for="option in quickExchangeOptions"
+            :key="option.points"
+            @click="selectedPoints = option.points"
+            :class="[
+              'flex-1 py-3 rounded-lg border text-center',
+              selectedPoints === option.points
+                ? 'border-blue-500 bg-blue-50 text-blue-500'
+                : 'border-gray-200 text-gray-700'
+            ]"
+          >
             {{ option.label }}
             {{ option.label }}
-          </button>
+          </view>
+        </view>
+        <view class="flex justify-between items-center mb-4">
+          <h3 class="text-lg font-medium">可兑换列表</h3>
+          <view class="flex items-center text-gray-500 text-sm" @click="toggleSortOrder">
+            <span class="mr-1">{{ sortOrder === 'desc' ? '从高到低排列' : '从低到高排列' }}</span>
+            <ScreenLittle />
+          </view>
         </view>
         </view>
-        <h3 class="text-lg font-medium mb-4">可兑换列表</h3>
         <!-- Rewards list -->
         <!-- Rewards list -->
         <view class="space-y-4">
         <view class="space-y-4">
-          <view v-for="reward in rewardItems" :key="reward.id" class="flex items-center border-b border-gray-100 pb-4">
+          <view v-for="reward in sortedRewardItems" :key="reward.id" class="flex items-center border-b border-gray-100 pb-4">
             <view class="w-12 h-12 mr-4 flex-shrink-0">
             <view class="w-12 h-12 mr-4 flex-shrink-0">
               <image :src="reward.logo" :alt="reward.title" class="w-full h-full object-contain" />
               <image :src="reward.logo" :alt="reward.title" class="w-full h-full object-contain" />
             </view>
             </view>
@@ -29,9 +59,9 @@
               <h4 class="font-medium">{{ reward.title }}</h4>
               <h4 class="font-medium">{{ reward.title }}</h4>
               <p class="text-gray-500 text-sm">{{ reward.points }}积分</p>
               <p class="text-gray-500 text-sm">{{ reward.points }}积分</p>
             </view>
             </view>
-            <button class="px-4 py-1 bg-blue-500 text-white rounded-full text-sm">
+            <view class="px-4 py-1 bg-blue-500 text-white rounded-full text-sm" @click="goToRewardDetail(reward)">
               兑换
               兑换
-            </button>
+            </view>
           </view>
           </view>
         </view>
         </view>
       </view>
       </view>
@@ -41,10 +71,29 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import Taro from '@tarojs/taro';
+import { ScreenLittle } from '@nutui/icons-vue-taro';
 import AppHeader from '../../components/AppHeader.vue';
 import AppHeader from '../../components/AppHeader.vue';
 import BottomNav from '../../components/BottomNav.vue';
 import BottomNav from '../../components/BottomNav.vue';
 
 
+const selectedPoints = ref(null);
+const sortOrder = ref('desc'); // 'asc' or 'desc'
+
+const sortedRewardItems = computed(() => {
+  return [...rewardItems.value].sort((a, b) => {
+    if (sortOrder.value === 'asc') {
+      return a.points - b.points;
+    } else {
+      return b.points - a.points;
+    }
+  });
+});
+
+const toggleSortOrder = () => {
+  sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
+};
+
 const rewardItems = ref([
 const rewardItems = ref([
   {
   {
     id: 1,
     id: 1,
@@ -83,4 +132,10 @@ const quickExchangeOptions = ref([
   { points: 1000, label: '1000分可兑' },
   { points: 1000, label: '1000分可兑' },
   { points: 100, label: '100分可兑' }
   { points: 100, label: '100分可兑' }
 ]);
 ]);
+
+const goToRewardDetail = (reward) => {
+  Taro.navigateTo({
+    url: `/pages/RewardDetail/index?id=${reward.id}`
+  });
+};
 </script>
 </script>