215 lines
4.2 KiB
Vue
215 lines
4.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="right-btn" @click="open">
|
|
<image src="/static/image/recharge/rightBtnImg.png" mode=""></image>
|
|
</view>
|
|
<view class="maskExchange" v-if="isMaskExchange">
|
|
<view class="box">
|
|
<view class="info" v-if="!isExchange">
|
|
<view :style="styles">
|
|
<uni-easyinput :styles="styles" v-model="code" placeholder="请输入兑换码" :inputBorder="false" placeholderStyle="text-align: center;"></uni-easyinput>
|
|
</view>
|
|
<view class="btn" :class="{'noValue':code==''}" @click="getExchange">
|
|
兑换
|
|
</view>
|
|
</view>
|
|
<view class="info" v-else>
|
|
<view class="title">
|
|
{{couponVip.exchange_name}}
|
|
</view>
|
|
<view class="title">
|
|
{{couponVip.exchange_value}}
|
|
</view>
|
|
<view class="time">
|
|
截至日期：{{couponVip.expire_time}}
|
|
</view>
|
|
<view class="btn btn2" @click="submit">
|
|
兑换
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="close" @click="close">
|
|
<image src="/static/image/recharge/closeE.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { postJson } from "@/utils/requests.js"
|
|
export default {
|
|
name: "exchange",
|
|
data() {
|
|
return {
|
|
code:"",
|
|
isMaskExchange:false,
|
|
isExchange:false,
|
|
couponVip:{
|
|
|
|
},
|
|
styles:{
|
|
backgroundColor: '#FFFCEC',
|
|
padding:'10px ',
|
|
'border-radius':'10px'
|
|
}
|
|
};
|
|
},
|
|
methods:{
|
|
open(){
|
|
this.isMaskExchange=true
|
|
this.isExchange=false
|
|
this.code=''
|
|
},
|
|
close(){
|
|
this.isMaskExchange=false
|
|
this.code=''
|
|
},
|
|
async getExchange(){
|
|
if(this.code==''){
|
|
return
|
|
}
|
|
let couponVip = await this.$requestPromise({
|
|
url: 'api/activity/exchange',
|
|
method: "GET",
|
|
data: {
|
|
code: this.code
|
|
}
|
|
})
|
|
console.log(couponVip)
|
|
if(couponVip.code!=0){
|
|
uni.showToast({
|
|
icon:"none",
|
|
title:"兑换码有误"
|
|
})
|
|
return
|
|
}
|
|
this.isExchange=true
|
|
this.couponVip=couponVip.data
|
|
},
|
|
async submit(){
|
|
let exchangeRes = await postJson('q', 'api/activity/exchange', {
|
|
code: this.code
|
|
})
|
|
if(exchangeRes.code!=0){
|
|
// uni.showToast({
|
|
// icon:"none",
|
|
// title:exchangeRes.message
|
|
// })
|
|
return
|
|
}else{
|
|
uni.showToast({
|
|
icon:"none",
|
|
title:"兑换成功"
|
|
})
|
|
//获取app用户信息
|
|
let user = await proxy.$requestPromise({
|
|
url: 'api/user',
|
|
method: "GET",
|
|
data: {}
|
|
})
|
|
if (user.code == 0) {
|
|
data.appUser = user.data
|
|
console.log("app用户信息", data.appUser);
|
|
}
|
|
this.isMaskExchange=false
|
|
this.isExchange=false
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.maskExchange {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 999;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.box {
|
|
background-image: url('/static/image/recharge/exchange.png');
|
|
background-size: 307px 120px;
|
|
background-repeat: no-repeat;
|
|
width: 307px;
|
|
padding: 120px 0 20px 0;
|
|
|
|
.info {
|
|
padding: 16px;
|
|
background-color: #fff;
|
|
border-radius: 0 0 26px 26px;
|
|
|
|
input {
|
|
background: #FFFCEC;
|
|
border-radius: 11px 11px 11px 11px;
|
|
padding: 18px 0;
|
|
text-align: center;
|
|
}
|
|
.title{
|
|
font-size: 20px;
|
|
color: #1a1a1a;
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
.time{
|
|
font-size: 16px;
|
|
color: #AAAAAA;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
color: #fff;
|
|
margin-top: 32px;
|
|
font-size: 18px;
|
|
padding: 16px 0;
|
|
color: #FFFFFF;
|
|
background: linear-gradient(360deg, #4B3F30 0%, #181713 56.43%, #504834 100%), #D8D8D8;
|
|
border-radius: 60px;
|
|
text-align: center;
|
|
}
|
|
.btn2{
|
|
margin-top: 12px;
|
|
}
|
|
.noValue{
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.close {
|
|
margin-top: 16px;
|
|
width: 34px;
|
|
height: 34px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-btn {
|
|
position: fixed;
|
|
top: 100rpx;
|
|
right: 36rpx;
|
|
z-index: 1;
|
|
width: 54px;
|
|
height: 26px;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |