index.vue
4.38 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
<template>
<view class="min-h-screen bg-white pb-24">
<!-- <AppHeader title="优惠券详情" :showBack="true" /> -->
<!-- Top Image -->
<view class="w-full h-48">
<image :src="reward.image" class="w-full h-full object-cover" />
</view>
<!-- Main Content -->
<view class="p-6">
<!-- Points and Title -->
<view class="text-center mb-8">
<view class="text-4xl font-bold text-blue-500 mb-2">
<text class="text-2xl">{{ reward.points }} 积分</text>
</view>
<h1 class="text-xl font-bold">{{ reward.title }}</h1>
</view>
<!-- Details Sections -->
<view class="space-y-6">
<!-- Applicable Stores -->
<view>
<h2 class="text-lg font-medium mb-3">可用门店</h2>
<view class="space-y-2 text-gray-600">
<view v-for="store in reward.stores" :key="store" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ store }}</p>
</view>
</view>
</view>
<!-- Redemption Rules -->
<view>
<h2 class="text-lg font-medium mb-3">兑换规则</h2>
<view class="space-y-2 text-gray-600">
<view v-for="rule in reward.redemption_rules" :key="rule" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ rule }}</p>
</view>
</view>
</view>
<!-- Usage Rules -->
<view>
<h2 class="text-lg font-medium mb-3">使用规则</h2>
<view class="space-y-2 text-gray-600">
<view v-for="rule in reward.usage_rules" :key="rule" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ rule }}</p>
</view>
</view>
</view>
</view>
</view>
<!-- Bottom Button -->
<view class="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
<nut-button type="primary" size="large" block color="#3B82F6" @click="handleRedeem">
立即兑换
</nut-button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import AppHeader from '../../components/AppHeader.vue';
// Mock reward data based on the image
const reward = ref({
id: 1,
title: '吴良材眼镜店85折券',
points: 10,
image: 'https://placehold.co/800x400/e2f3ff/0369a1?text=LFX&font=roboto', // Placeholder image
stores: [
'吴良材眼镜店 (南京东路店)',
'吴良材眼镜店 (淮海中路店)',
'吴良材眼镜店 (徐家汇店)'
],
redemption_rules: [
'每人每月限兑换1次',
'兑换后30天内有效',
'兑换成功后不可退回积分'
],
usage_rules: [
'仅限店内正价商品使用',
'不可与其他优惠同时使用',
'特价商品不可使用',
'最终解释权归商家所有'
]
});
/**
* @description Handles the redemption of the coupon.
*/
const handleRedeem = () => {
// Show a confirmation modal
Taro.showModal({
title: '确认兑换',
content: `将消耗 ${reward.value.points} 积分兑换此优惠券，是否确认？`,
success: (res) => {
if (res.confirm) {
// Simulate API call for redemption
Taro.showLoading({ title: '兑换中...' });
setTimeout(() => {
Taro.hideLoading();
Taro.showToast({
title: '兑换成功',
icon: 'success',
duration: 2000
});
// After successful redemption, you might want to navigate the user to their coupons page
// For now, we'll just navigate back.
setTimeout(() => {
Taro.navigateBack();
}, 2000);
}, 1500);
}
}
});
};
</script>