522 lines
11 KiB
Vue
522 lines
11 KiB
Vue
<template>
|
||
<view class="recharge_subgiftcard">
|
||
<view class="recharge_cardBg">
|
||
<image :src="card" class="card" mode="widthFix"> </image>
|
||
</view>
|
||
<view :class="['recharge_subgift_detail',!current?'topFooterSty':'']">
|
||
<view>
|
||
<view :class="['recharge_subgift_tit','topSty'] ">
|
||
<text>转赠方式</text>
|
||
</view>
|
||
<view class="recharge_type">
|
||
<view class="recharge_type_item" v-for="(item,index) in rechargeTypeArr" :key="index"
|
||
@click="tabChange(index)">
|
||
<text>{{item}}</text>
|
||
<image :src="selIcon" class='selIcon' v-if="current==index"></image>
|
||
<text :class="['selectIcon']" v-else></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view :class="['recharge_subgift_tit','topSty'] ">
|
||
<text>转赠种类</text>
|
||
</view>
|
||
<view class="recharge_type">
|
||
<view class="recharge_type_item">
|
||
<text>邀请码转赠</text>
|
||
<image :src="selIcon" class='selIcon'></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="vip_money_content">
|
||
<view class="vip_money">
|
||
<text class="vip_money_detail">输入邀请码</text>
|
||
<u-input :border="typeLine" v-model="codeVal" @change="change" @blur="changeBlur" :clearable="clearable"
|
||
class="vip_input" placeholder="请输入接收人邀请码" placeholderClass="placeSty">
|
||
</u-input>
|
||
<text class="code_user" v-show="code_user">用户昵称：{{code_user}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="vip_money_content" v-if="current==1">
|
||
<view class="vip_money">
|
||
<text class="vip_money_detail">转赠钻石数量(个)</text>
|
||
<u-input :border="typeLine" v-model="cardNum" :type="digit" :clearable="clearable" class="vip_input"
|
||
placeholder="请输入转赠钻石数量" placeholderClass="placeSty">
|
||
</u-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="current==1">
|
||
<view class="cardNumSty">
|
||
<text>卡内钻石数量(个)：{{ 100 }}</text>
|
||
<image :src="selIcon" class='selIcon'></image>
|
||
</view>
|
||
<view class="noticeSty">
|
||
注：一张超级vip消费补贴卡可拆分成100个钻石，拆分后请到我的钻石中查看。
|
||
</view>
|
||
</view>
|
||
<view :class="['footer_btn', 'topFooterSty']" @click="invitationShare">
|
||
确认转赠
|
||
</view>
|
||
<rechareModal @knowClick="knowClick" :showModal="showModal" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
toCkInvitation,
|
||
vipCardShare,
|
||
vipCardSplitShare
|
||
} from "@/request/recharge/index.js";
|
||
import mixin from '@/static/js/mixin/mixin.js'
|
||
|
||
|
||
export default {
|
||
mixins: [mixin],
|
||
data() {
|
||
return {
|
||
card: 'https://img.agrimedia.cn/vipCard2.png',
|
||
rightArrow: 'https://img.agrimedia.cn/right-arrow.png',
|
||
selIcon: 'https://img.agrimedia.cn/selIcon.png',
|
||
codeVal: "",
|
||
clearable: false,
|
||
typeLine: 'bottom',
|
||
number: 'number',
|
||
rechargeTypeArr: [
|
||
'整卡转赠',
|
||
'拆分转赠'
|
||
],
|
||
current: 0,
|
||
balance: "",
|
||
code_user: "",
|
||
isWechat: getApp()['globalData']['parameters']['isWechat'],
|
||
isFlag: false,
|
||
cardNum: "",
|
||
digit: 'digit',
|
||
showModal: false,
|
||
card_id: "",
|
||
|
||
};
|
||
},
|
||
|
||
onLoad(parameters) {
|
||
this.card_id = parameters.id
|
||
},
|
||
methods: {
|
||
//跳转到转赠记录
|
||
toSubgiftList() {
|
||
uni.navigateTo({
|
||
url: '/pages/pages-recharge/subgiftTotal/index'
|
||
});
|
||
},
|
||
|
||
tabChange(index) {
|
||
this.current = index
|
||
this.codeVal = ""
|
||
this.code_user = ""
|
||
this.cardNum = ''
|
||
|
||
},
|
||
|
||
//确认转赠
|
||
invitationShare() {
|
||
console.log(uni.$u.test.digits(this.cardNum), this.cardNum <= 0)
|
||
if (!this.codeVal) {
|
||
uni.showToast({
|
||
title: "请输入邀请码",
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
|
||
|
||
uni.$u.debounce(async () => {
|
||
|
||
if (!this.current) {
|
||
await this.shareSubgift()
|
||
} else {
|
||
await this.splitShare()
|
||
}
|
||
}, 1000, true)
|
||
},
|
||
|
||
//邀请码验证
|
||
ckCode() {
|
||
if(!this.codeVal){
|
||
return
|
||
}
|
||
// let codeValue = this.codeVal.split('(')[0]
|
||
toCkInvitation({
|
||
invite_code: this.codeVal
|
||
}).then((res) => {
|
||
if (res) {
|
||
const {
|
||
code,
|
||
data
|
||
} = res
|
||
if (code == 200 && data.ck == 1) {
|
||
// let codeValue1 = this.codeVal.split('(')[0]
|
||
this.code_user = data.name
|
||
// this.codeVal = `${codeValue1}(${this.code_user})`
|
||
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: "邀请码不存在",
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
|
||
}).catch((error) => {
|
||
|
||
})
|
||
},
|
||
//整卡转赠
|
||
shareSubgift() {
|
||
uni.showLoading({
|
||
title: '转赠中'
|
||
});
|
||
|
||
const params = {
|
||
invite_code: this.codeVal,
|
||
card_id: this.card_id
|
||
}
|
||
vipCardShare({
|
||
...params
|
||
}).then((res) => {
|
||
const {
|
||
code
|
||
} = res
|
||
if (code == 200) {
|
||
this.showModal = true
|
||
uni.hideLoading()
|
||
}
|
||
}).catch((error) => {
|
||
this.codeVal = ""
|
||
this.code_user = ""
|
||
uni.hideLoading();
|
||
})
|
||
|
||
},
|
||
//拆分转赠
|
||
splitShare() {
|
||
if (this.current) {
|
||
var reg = /^[1-9]\d*$/
|
||
if (!reg.test(this.cardNum)) {
|
||
uni.showToast({
|
||
title: "请输入正确的转赠钻石数量",
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
if (Number(this.cardNum)>100) {
|
||
uni.showToast({
|
||
title: "转赠钻石数量不得超过卡内钻石数量",
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
}
|
||
uni.showLoading({
|
||
title: '转赠中'
|
||
});
|
||
|
||
const params = {
|
||
invite_code: this.codeVal,
|
||
card_id: this.card_id,
|
||
num: this.cardNum
|
||
}
|
||
vipCardSplitShare({
|
||
...params
|
||
}).then((res) => {
|
||
const {
|
||
code
|
||
} = res
|
||
if (code == 200) {
|
||
uni.hideLoading();
|
||
this.showModal = true
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error, "错误")
|
||
this.codeVal = ""
|
||
this.cardNum = ""
|
||
this.code_user = ""
|
||
uni.hideLoading();
|
||
})
|
||
|
||
},
|
||
|
||
change(e) {
|
||
console.log(e)
|
||
// this.codeVal=e
|
||
this.code_user = ""
|
||
// uni.$u.debounce(async () => {
|
||
// this.ckCode()
|
||
// }, 1000, true)
|
||
},
|
||
changeBlur(){
|
||
if (!this.codeVal) {
|
||
uni.showToast({
|
||
title: "请输入邀请码",
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
this.ckCode()
|
||
},
|
||
knowClick() {
|
||
this.showModal = false
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
// if(!this.current){
|
||
|
||
// }else{
|
||
// uni.navigateTo({
|
||
// url: '/pages/pages-recharge/myDiamond/index'
|
||
// });
|
||
// }
|
||
}
|
||
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #F8F8F8;
|
||
}
|
||
|
||
.recharge_subgiftcard {
|
||
background: #F8F8F8;
|
||
|
||
.selIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.topSty {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.topFooterSty {
|
||
margin-bottom: 290rpx;
|
||
}
|
||
|
||
.selectIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 2rpx solid #DEDEDE;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.selectActive {
|
||
border: 1px solid #FF7700;
|
||
position: relative;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
|
||
&:after {
|
||
position: absolute;
|
||
content: "";
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background: #FF7700;
|
||
left: 50%;
|
||
top: 50%;
|
||
margin-left: -10rpx;
|
||
margin-top: -10rpx;
|
||
border-radius: 50%
|
||
}
|
||
|
||
}
|
||
|
||
/deep/ .u-border-bottom {
|
||
border-bottom: 2rpx solid #EDEDED;
|
||
}
|
||
|
||
/deep/ .u-input__content__field-wrapper__field {
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.recharge_cardBg {
|
||
background: #F8F8F8;
|
||
margin: 20rpx 24rpx 0 24rpx;
|
||
height: 168rpx;
|
||
position: relative;
|
||
|
||
.card {
|
||
border-radius: 0 20rpx 0 0;
|
||
height: 168rpx !important;
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.recharge_subgift_detail {
|
||
padding: 20rpx 26rpx;
|
||
box-shadow: 0 -2rpx 6rpx 0 rgba(0, 0, 0, 0.1);
|
||
background: #fff;
|
||
|
||
|
||
.recharge_subgift_tit {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
.recharge_subgift_icon {
|
||
display: flex;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999
|
||
}
|
||
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
vertical-align: middle;
|
||
margin-top: 4rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.recharge_type {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
|
||
.recharge_type_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 50%;
|
||
height: 116rpx;
|
||
line-height: 116rpx;
|
||
border-radius: 20rpx;
|
||
border: 2rpx solid #EDEDED;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
|
||
text:nth-child(1) {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #666666;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.recharge_type_item:nth-child(2) {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.vip_money_content {
|
||
.vip_money {
|
||
position: relative;
|
||
margin-top: 24rpx;
|
||
|
||
.vip_money_detail {
|
||
position: absolute;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
display: inline-block;
|
||
top: 24rpx
|
||
}
|
||
|
||
.code_user {
|
||
display: block;
|
||
text-align: right;
|
||
color: red;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.vip_input {
|
||
/deep/ .uni-input-input {
|
||
font-size: 52rpx;
|
||
font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
|
||
font-weight: 800;
|
||
color: #333333;
|
||
text-align: right;
|
||
|
||
}
|
||
}
|
||
|
||
/deep/ .placeSty {
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
}
|
||
|
||
.vip_notice {
|
||
color: red;
|
||
font-size: 28rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.cardNumSty {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
margin: 20rpx 24rpx;
|
||
padding: 24rpx 20rpx;
|
||
|
||
text:nth-child(1) {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333
|
||
}
|
||
|
||
}
|
||
|
||
.noticeSty {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #DF2D2D;
|
||
padding: 20rpx 26rpx 114rpx 26rpx;
|
||
}
|
||
|
||
.footer_btn {
|
||
margin: 0 26rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: linear-gradient(90deg, #FFAD02 0%, #FD8F3B 100%);
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
}
|
||
</style>
|