171 lines
3.9 KiB
Vue
171 lines
3.9 KiB
Vue
<template>
|
||
<view class="">
|
||
<up-navbar
|
||
bg-color="transparent"
|
||
title="兑换中心"
|
||
@leftClick="back"
|
||
></up-navbar>
|
||
|
||
<view class="top"> </view>
|
||
<view class="box">
|
||
<view class="info">
|
||
<view class="titile">兑换您的专属福利 </view>
|
||
<view class="u-flex justify-center">
|
||
<view class="input-box u-flex">
|
||
<image class="icon" src="/user/static/duihuan.png"></image>
|
||
<view class="u-flex-1">
|
||
<input placeholder="请输入兑换码" v-model="code" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-flex justify-center u-m-t-24">
|
||
<button class="duihuan" @click="confirmExchange">确认兑换</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="desc">
|
||
<view>兑换说明:</view>
|
||
<view>
|
||
1、请直接输入您获得的兑换码，点击立即兑换即可
|
||
<br />
|
||
2、兑换码为一次性，兑换完成之后即失效
|
||
<br />
|
||
3、兑换获得的奖励，将直接发送至您的账号，可直接前往余额或优惠券查看
|
||
<br />
|
||
4、兑换码为赠品，不可转赠、不退不换
|
||
<br />
|
||
5、兑换码需在有效期内完成兑换，过期即作废
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<confirmModal v-model="modal.confirm.show" :data="modal.confirm.data" @confirm="exchange"></confirmModal>
|
||
<resultModal
|
||
v-model="modal.result.show"
|
||
:title="modal.result.title"
|
||
></resultModal>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import confirmModal from "./components/confirm.vue";
|
||
import resultModal from "./components/result.vue";
|
||
import * as exchangeApi from "@/common/api/market/exchange.js";
|
||
import { reactive, ref } from "vue";
|
||
const modal = reactive({
|
||
confirm: {
|
||
show: false,
|
||
},
|
||
result: {
|
||
show: false,
|
||
title: "该兑换码无效，请输入有效兑换码",
|
||
},
|
||
});
|
||
|
||
const code = ref("");
|
||
function confirmExchange() {
|
||
if (code.value == "") {
|
||
uni.showToast({
|
||
title: "请输入兑换码",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
exchangeApi.redemption({
|
||
code: code.value,
|
||
}).then((res) => {
|
||
if (res) {
|
||
modal.confirm.show = true;
|
||
modal.confirm.data = res;
|
||
}
|
||
})
|
||
}
|
||
|
||
function exchange() {
|
||
exchangeApi
|
||
.exchange({
|
||
code: code.value,
|
||
})
|
||
.then((res) => {
|
||
if (res) {
|
||
modal.result.title = "兑换成功！奖励已发放至您的账户";
|
||
modal.result.show = true;
|
||
code.value = "";
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log("err,", err);
|
||
modal.result.title = err.message || "该兑换码无效，请输入有效兑换码";
|
||
modal.result.show = true;
|
||
});
|
||
}
|
||
|
||
function back() {
|
||
uni.navigateBack();
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.top {
|
||
width: 962rpx;
|
||
height: 648rpx;
|
||
flex-shrink: 0;
|
||
border-radius: 962rpx;
|
||
background: linear-gradient(357deg, #faf7ee 3.12%, #d8b285 71.51%);
|
||
position: relative;
|
||
transform: translateX(-104rpx) translateY(-136rpx);
|
||
}
|
||
.box {
|
||
position: relative;
|
||
transform: translateY(-340rpx);
|
||
.info {
|
||
padding: 0 74rpx;
|
||
}
|
||
}
|
||
.input-box {
|
||
display: flex;
|
||
width: 604rpx;
|
||
height: 106rpx;
|
||
padding: 30rpx 40rpx;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
flex-shrink: 0;
|
||
border-radius: 70rpx;
|
||
border: 2rpx solid #c58e4d;
|
||
background: #fff;
|
||
margin-top: 60rpx;
|
||
.icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
.titile {
|
||
color: #5c2602;
|
||
font-family: "Source Han Sans CN";
|
||
font-size: 48rpx;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
line-height: normal;
|
||
letter-spacing: 0.01rpx;
|
||
text-align: center;
|
||
}
|
||
.duihuan {
|
||
padding: 22rpx 236rpx;
|
||
border-radius: 110rpx;
|
||
background: #e8ad7b;
|
||
line-height: 48rpx;
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
font-weight: 700;
|
||
}
|
||
.desc {
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
letter-spacing: 0.01rpx;
|
||
padding: 0 44rpx;
|
||
margin-top: 160rpx;
|
||
}
|
||
</style> |