450 lines
9.3 KiB
Vue
450 lines
9.3 KiB
Vue
<template>
|
||
<view class="recharge_subgiftcard_content">
|
||
<view class="recharge_cardBg">
|
||
<image :src="card" class="card" mode="widthFix"> </image>
|
||
</view>
|
||
<view class="recharge_subgift_detail">
|
||
<view>
|
||
<view :class="['recharge_subgift_tit','topSty'] ">
|
||
<text>转赠方式</text>
|
||
<text @click="toSubgiftList">转赠记录</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="toBlur" :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">
|
||
<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>
|
||
<view class="cardNumSty">
|
||
<text>卡内钻石数量(个)：{{ diamondNum }}</text>
|
||
<image :src="selIcon" class='selIcon'></image>
|
||
</view>
|
||
<view class="noticeSty">
|
||
注：100个钻石可以合成一张超级vip消费补贴卡，合成后请到我的权益卡中查看。
|
||
</view>
|
||
</view>
|
||
<view :class="['footer_btn', 'topFooterSty']" @click="invitationShare">
|
||
确认转赠
|
||
</view>
|
||
<rechareModal @knowClick="knowClick" :showModal="showModal" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
toCkInvitation,
|
||
fenCardShare,
|
||
} from "@/request/recharge/index.js";
|
||
import mixin from '@/static/js/mixin/mixin.js'
|
||
|
||
|
||
export default {
|
||
mixins: [mixin],
|
||
data() {
|
||
return {
|
||
card: 'https://img.agrimedia.cn/zsCard.png',
|
||
rightArrow: 'https://img.agrimedia.cn/right-arrow.png',
|
||
selIcon: 'https://img.agrimedia.cn/selIcon.png',
|
||
codeVal: "",
|
||
clearable: false,
|
||
typeLine: 'bottom',
|
||
number: 'number',
|
||
code_user: "",
|
||
isWechat: getApp()['globalData']['parameters']['isWechat'],
|
||
cardNum: "",
|
||
digit: 'digit',
|
||
showModal: false,
|
||
diamondNum: ""
|
||
};
|
||
},
|
||
onLoad(props) {
|
||
this.diamondNum = props.diamondNum
|
||
},
|
||
methods: {
|
||
//跳转到转赠记录
|
||
toSubgiftList() {
|
||
uni.navigateTo({
|
||
url: '/pages/pages-recharge/diamondSubgiftList/index'
|
||
});
|
||
},
|
||
|
||
//确认转赠
|
||
invitationShare() {
|
||
|
||
if (!this.codeVal) {
|
||
uni.showToast({
|
||
title: "请输入邀请码",
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
|
||
|
||
|
||
uni.$u.debounce(async () => {
|
||
await this.shareSubgift()
|
||
}, 1000, true)
|
||
},
|
||
|
||
//邀请码验证
|
||
ckCode() {
|
||
console.log(13313)
|
||
|
||
toCkInvitation({
|
||
invite_code: this.codeVal
|
||
}).then((res) => {
|
||
if (res) {
|
||
const {
|
||
code,
|
||
data
|
||
} = res
|
||
if (code == 200 && data.ck == 1) {
|
||
|
||
this.code_user = data.name
|
||
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: "邀请码不存在",
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
|
||
}).catch((error) => {
|
||
|
||
})
|
||
},
|
||
shareSubgift() {
|
||
var reg = /^[1-9]\d*$/
|
||
if (!reg.test(this.cardNum)) {
|
||
uni.showToast({
|
||
title: "请输入正确的转赠钻石数量",
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
// console.log(this.cardNum,this.diamondNum,this.cardNum>this.diamondNum)
|
||
if (Number(this.cardNum)>Number(this.diamondNum)) {
|
||
uni.showToast({
|
||
title: "转赠钻石数量不得超过卡内钻石数量",
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '转赠中'
|
||
});
|
||
|
||
const params = {
|
||
invite_code:this.codeVal,
|
||
num: this.cardNum
|
||
}
|
||
fenCardShare({
|
||
...params
|
||
}).then((res) => {
|
||
const {
|
||
code
|
||
} = res
|
||
if (code == 200) {
|
||
this.showModal = true
|
||
uni.showToast({
|
||
title: "转赠成功",
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
uni.hideLoading();
|
||
|
||
|
||
}
|
||
}).catch((error) => {
|
||
this.codeVal = ""
|
||
this.cardNum = ""
|
||
this.code_user = ""
|
||
uni.hideLoading();
|
||
})
|
||
|
||
},
|
||
change() {
|
||
this.code_user = ""
|
||
},
|
||
toBlur(){
|
||
if (!this.codeVal) {
|
||
uni.showToast({
|
||
title: "请输入邀请码",
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
this.ckCode()
|
||
},
|
||
knowClick() {
|
||
this.showModal = false
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
|
||
}
|
||
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #F8F8F8;
|
||
}
|
||
|
||
.recharge_subgiftcard_content {
|
||
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;
|
||
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;
|
||
}
|
||
|
||
text:nth-child(2) {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #47A2F2
|
||
}
|
||
|
||
.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>
|