Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
66bdb698 1 parent da0e1519

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

- 修改导航栏标题为"兑换中心"和"积分兑换"
- 将底部导航的兑换链接指向RewardCategories页面
- 移除页面头部组件，使用原生样式
- 增加积分选择高亮效果和排序功能
- 添加兑换详情页跳转功能
- 新增券详情图片资源
Inline Side-by-side
Showing 6 changed files with 75 additions and 13 deletions
<!--
* @Date: 2025-08-27 17:44:10
* @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
* @Description: 文件描述
-->
......@@ -31,7 +31,7 @@ import meIcon from '@/assets/images/icon/me.svg';
const navItems = shallowRef([
{ path: '/pages/Dashboard/index', icon: homeIcon, 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: '我的' },
]);
......
/*
* @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 {
navigationBarTitleText: '首页'
navigationBarTitleText: '积分兑换'
}
......
<template>
<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="p-4 space-y-4">
<view v-for="category in categories" :key="category.id" class="rounded-lg overflow-hidden shadow-sm" @click="goToRewards">
......
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>
<view class="min-h-screen flex flex-col bg-white">
<!-- Blue header background -->
<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 -->
<view class="relative z-10 flex-1 pb-20">
<!-- Points display -->
......@@ -14,14 +28,30 @@
<view class="bg-white rounded-t-3xl px-4 pt-5">
<!-- Quick exchange options -->
<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 }}
</button>
</view>
<h3 class="text-lg font-medium mb-4">可兑换列表</h3>
</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>
<!-- Rewards list -->
<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">
<image :src="reward.logo" :alt="reward.title" class="w-full h-full object-contain" />
</view>
......@@ -29,9 +59,9 @@
<h4 class="font-medium">{{ reward.title }}</h4>
<p class="text-gray-500 text-sm">{{ reward.points }}积分</p>
</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>
......@@ -41,10 +71,29 @@
</template>
<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 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([
{
id: 1,
......@@ -83,4 +132,10 @@ const quickExchangeOptions = ref([
{ points: 1000, label: '1000分可兑' },
{ points: 100, label: '100分可兑' }
]);
const goToRewardDetail = (reward) => {
Taro.navigateTo({
url: `/pages/RewardDetail/index?id=${reward.id}`
});
};
</script>
......