index.vue
4.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!--
* @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" /> -->
<!-- Content -->
<view class="relative z-10 flex-1 pb-20">
<!-- Points display -->
<view class="pt-4 pb-8 flex flex-col items-center">
<h2 class="text-4xl font-bold text-white mb-1">2580分</h2>
<p class="text-white text-opacity-80">我的积分</p>
</view>
<!-- Main content -->
<view class="bg-white rounded-t-3xl px-4 pt-5">
<!-- Quick exchange options -->
<view class="flex gap-3 mb-6">
<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 }}
</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>
<!-- Rewards list -->
<view class="space-y-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>
<view class="flex-1">
<h4 class="font-medium">{{ reward.title }}</h4>
<p class="text-gray-500 text-sm">{{ reward.points }}积分</p>
</view>
<view class="px-4 py-1 bg-blue-500 text-white rounded-full text-sm" @click="goToRewardDetail(reward)">
兑换
</view>
</view>
</view>
</view>
</view>
<BottomNav />
</view>
</template>
<script setup>
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,
title: '星巴克中杯咖啡兑换券',
points: 1000,
logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1200px-Starbucks_Corporation_Logo_2011.svg.png'
},
{
id: 2,
title: '老凤祥20元抵用券',
points: 600,
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto'
},
{
id: 3,
title: '杏花楼集团8折券',
points: 500,
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=XHL&font=roboto'
},
{
id: 4,
title: '肯德基汉堡套餐券',
points: 1000,
logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/b/bf/KFC_logo.svg/1200px-KFC_logo.svg.png'
},
{
id: 5,
title: '沈大成双黄团3元抵用券',
points: 300,
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=SDC&font=roboto'
}
]);
const quickExchangeOptions = ref([
{ points: 3000, label: '3000分可兑' },
{ points: 1000, label: '1000分可兑' },
{ points: 100, label: '100分可兑' }
]);
const goToRewardDetail = (reward) => {
Taro.navigateTo({
url: `/pages/RewardDetail/index?id=${reward.id}`
});
};
</script>