120 lines
2.6 KiB
Plaintext
120 lines
2.6 KiB
Plaintext
<template>
|
|
<cl-page>
|
|
<cl-topbar title="兑换礼品卡" />
|
|
|
|
<view class="gift-card-page">
|
|
<view class="card-input-section">
|
|
<text class="section-title">礼品卡码</text>
|
|
<input class="card-input" v-model="cardCode" type="text" placeholder="请输入礼品卡码" maxlength="20" />
|
|
<cl-button type="primary" size="large" round :loading="loading" @click="redeemCard">
|
|
立即兑换
|
|
</cl-button>
|
|
</view>
|
|
|
|
<view class="tips-section">
|
|
<text class="section-title">使用说明</text>
|
|
<view class="tip-list">
|
|
<view class="tip-item">
|
|
<cl-icon name="check-fill" :size="32" color="#52c41a" />
|
|
<text class="tip-text">每张礼品卡只能兑换一次</text>
|
|
</view>
|
|
<view class="tip-item">
|
|
<cl-icon name="check-fill" :size="32" color="#52c41a" />
|
|
<text class="tip-text">兑换成功后自动激活认养权益</text>
|
|
</view>
|
|
<view class="tip-item">
|
|
<cl-icon name="check-fill" :size="32" color="#52c41a" />
|
|
<text class="tip-text">如有问题请联系客服</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</cl-page>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue';
|
|
import { router, useCool } from '@/cool';
|
|
|
|
const { service } = useCool();
|
|
|
|
const cardCode = ref('');
|
|
const loading = ref(false);
|
|
|
|
async function redeemCard() {
|
|
if (cardCode.value.length == 0) {
|
|
uni.showToast({ title: '请输入礼品卡码', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
loading.value = true;
|
|
try {
|
|
const res = await service.nongchuang.adoption.redeemGiftCard({ cardCode: cardCode.value });
|
|
uni.showToast({ title: '兑换成功', icon: 'success' });
|
|
setTimeout(() => {
|
|
router.push({ path: '/pages/adoption/my' });
|
|
}, 1500);
|
|
} catch (e: any) {
|
|
uni.showToast({ title: e.message || '兑换失败', icon: 'none' });
|
|
}
|
|
loading.value = false;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.gift-card-page {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.card-input-section {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.card-input {
|
|
width: 100%;
|
|
padding: 24rpx;
|
|
background: #f5f5f5;
|
|
border-radius: 12rpx;
|
|
font-size: 32rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
|
|
.tips-section {
|
|
margin-top: 30rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.tip-list {
|
|
.tip-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 16rpx 0;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
|
|
.tip-text {
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|