index.vue
2.94 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
<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">
<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">
{{ option.label }}
</button>
</view>
<h3 class="text-lg font-medium mb-4">可兑换列表</h3>
<!-- 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 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>
<button class="px-4 py-1 bg-blue-500 text-white rounded-full text-sm">
兑换
</button>
</view>
</view>
</view>
</view>
<BottomNav />
</view>
</template>
<script setup>
import { ref } from 'vue';
import AppHeader from '../../components/AppHeader.vue';
import BottomNav from '../../components/BottomNav.vue';
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分可兑' }
]);
</script>