416 lines
8.8 KiB
Vue
416 lines
8.8 KiB
Vue
<template>
|
|
<view class="rechargeVip_content" ref="rechargeVip_content">
|
|
<view class="rechargeVip_amount">
|
|
<view class="rechargeVip_tit">超级vip限量</view>
|
|
<view class="vip_money">
|
|
|
|
<view class="vip_money_item">
|
|
<text class="vip_money_detail">超级VIP会员</text>
|
|
<u--input :border="typeLine" v-model="value" :clearable="clearable" :type="number" :disabled="true"
|
|
:class="['vip_input2','vip_input']">
|
|
|
|
</u--input>
|
|
</view>
|
|
|
|
<view class="vip_account"> 购买账户：<text>{{ nickname }}</text></view>
|
|
<view class="vip_number_box">
|
|
<view class="vip_num">购买数量</view>
|
|
<uni-number-box :min='1' :max="1000" v-model="num"></uni-number-box>
|
|
</view>
|
|
<view class="vip_money_item_copies">
|
|
<text>剩余份数：</text>
|
|
<text>{{inventory_num}}</text>
|
|
<!-- <u--input :border="typeLine" v-model="inventory_num" :clearable="clearable" :type="number" :disabled="true"
|
|
:class="['vip_input1','vip_input']">
|
|
|
|
</u--input> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="white-box">
|
|
<view class="rich-text">
|
|
<view class="big-777"> 购买说明 </view>
|
|
<rich-text :nodes="html"></rich-text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="agreement-content">
|
|
<u-checkbox-group v-model="checked" @change="changeStatus">
|
|
<u-checkbox activeColor="#FFAD02" shape="circle">
|
|
</u-checkbox>
|
|
<text class="greement" @click.stop="read">我已阅读并知晓</text>
|
|
<text :class="['greement','greement-supplement']" @click.stop="toAgreement">《补贴卡购买协议》</text>
|
|
</u-checkbox-group>
|
|
</view>
|
|
<view :class="['mt-30']" @click="confirm">
|
|
<!-- <u-button color="linear-gradient(45deg,#FFAD02,#FD8F3B)" text="确认购买"></u-button> -->
|
|
<view class="recharge_btn">确认购买</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
toVipRecharge,
|
|
getVipInfoAPI,
|
|
} from "@/request/recharge/index.js";
|
|
import mixin from '@/static/js/mixin/mixin.js'
|
|
import vipEquity from '../vipEquity/index.vue'
|
|
export default {
|
|
mixins: [mixin],
|
|
components: {
|
|
vipEquity
|
|
},
|
|
data() {
|
|
return {
|
|
value: '1000',
|
|
clearable: false,
|
|
typeLine: 'bottom',
|
|
num: 1,
|
|
number: "number",
|
|
checked: [],
|
|
html: "",
|
|
nickname: "",
|
|
inventory_num: ""
|
|
};
|
|
},
|
|
methods: {
|
|
// k(val){
|
|
// console.log(val)
|
|
// this.nickname=val
|
|
// },
|
|
changeStatus(value) {
|
|
this.checked = value
|
|
},
|
|
read() {
|
|
|
|
},
|
|
confirm() {
|
|
if (!this.checked.length) {
|
|
uni.showToast({
|
|
title: '请先阅读补贴卡购买协议',
|
|
icon: 'none'
|
|
});
|
|
return
|
|
}
|
|
toVipRecharge({
|
|
num: this.num
|
|
}).then((res) => {
|
|
if (res) {
|
|
// const {
|
|
// code,
|
|
// data
|
|
// } = res;
|
|
const {
|
|
pay_price,
|
|
order_sn,
|
|
type,
|
|
openid
|
|
} = res['data'];
|
|
this.$Payment.H5_Payment({
|
|
pay_price,
|
|
order_sn,
|
|
type,
|
|
openid,
|
|
return_url: `/pages/pages-recharge/success/index?order_sn=${order_sn}`
|
|
});
|
|
// if (code == 200) {
|
|
// res['data']['redirect_url'] = '/pages/pages-recharge/success/index';
|
|
// this.payment(res['data']);
|
|
|
|
// }
|
|
}
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
|
|
})
|
|
},
|
|
|
|
|
|
//跳转协议
|
|
toAgreement() {
|
|
uni.navigateTo({
|
|
url: `/pages/pages-recharge/rechargeProtocol/index`
|
|
})
|
|
},
|
|
//购买说明
|
|
getRule() {
|
|
console.log("呼呼")
|
|
// console.log(,"父组件22")
|
|
getVipInfoAPI().then((res) => {
|
|
|
|
if (res) {
|
|
const {
|
|
code,
|
|
data
|
|
} = res
|
|
if (code == 200) {
|
|
this.html = res?.data?.desc
|
|
this.nickname = res["data"]?.["nickname"];
|
|
this.inventory_num = res["data"]?.["inventory_num"];
|
|
}
|
|
}
|
|
|
|
|
|
}).catch((error) => {
|
|
|
|
})
|
|
},
|
|
|
|
|
|
},
|
|
onLoad(parameters) {
|
|
this.getRule()
|
|
|
|
// console.log(this.$refs.vipEquityName.nickname,"几号回家暗示法")
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.rechargeVip_content {
|
|
padding: 20rpx 24rpx;
|
|
|
|
/deep/ .u-input--square {
|
|
background: #fff !important
|
|
}
|
|
|
|
/deep/ .u-border-bottom {
|
|
border-bottom: 2rpx solid #EDEDED;
|
|
}
|
|
|
|
.white-box {
|
|
background-color: #fff;
|
|
padding: 16rpx 0 40rpx 0;
|
|
}
|
|
|
|
.big-777 {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #666666;
|
|
}
|
|
|
|
.rechargeVip_tit {
|
|
font-size: 56rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
padding-bottom: 86rpx;
|
|
}
|
|
|
|
.vip_money {
|
|
.vip_money_item_copies {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
color: #666666;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
margin-top: 10rpx;
|
|
|
|
text:nth-child(1) {
|
|
color: #666666;
|
|
}
|
|
|
|
text:nth-child(2) {
|
|
|
|
font-weight: 600;
|
|
color: #FF7700;
|
|
}
|
|
}
|
|
|
|
.vip_money_item {
|
|
position: relative;
|
|
}
|
|
|
|
.vip_money_detail {
|
|
position: absolute;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
display: inline-block;
|
|
top: 36rpx;
|
|
color: #FF7700;
|
|
}
|
|
|
|
.vip_input2 {
|
|
// &:after {
|
|
// content: '元';
|
|
// font-size: 28rpx;
|
|
// font-family: PingFangSC-Regular, PingFang SC;
|
|
// font-weight: 400;
|
|
// color: #333333;
|
|
// padding-left: 3rpx;
|
|
// padding-top: 10rpx;
|
|
// }
|
|
}
|
|
|
|
.vip_input {
|
|
padding-top: 20rpx !important;
|
|
|
|
/deep/ .uni-input-input {
|
|
font-size: 52rpx;
|
|
font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
|
|
font-weight: 800;
|
|
color: #333333;
|
|
text-align: right;
|
|
// padding-top: 20rpx!important;
|
|
|
|
}
|
|
|
|
|
|
/deep/ .u-input__content__field-wrapper__field {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
}
|
|
|
|
.vip_input1 {
|
|
&:after {
|
|
content: '份';
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #333333;
|
|
padding-left: 3rpx;
|
|
padding-top: 10rpx;
|
|
}
|
|
|
|
/deep/ .uni-input-input {
|
|
font-size: 40rpx;
|
|
font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
|
|
color: #333333;
|
|
text-align: right;
|
|
font-weight: 400 !important;
|
|
// padding-top: 20rpx!important;
|
|
|
|
}
|
|
}
|
|
|
|
.vip_account {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
padding-top: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
text {
|
|
color: #4D9DF7
|
|
}
|
|
}
|
|
|
|
.vip_number_box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.vip_num {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.uni-numbox {
|
|
|
|
border-radius: 6rpx;
|
|
border: 2rpx solid #999999
|
|
}
|
|
|
|
/deep/ .uni-numbox__minus {
|
|
// width: 44rpx;
|
|
// height: 44rpx;
|
|
background: #fff !important;
|
|
// border-radius: 4px;
|
|
border-right: 2rpx solid #999999;
|
|
|
|
/deep/ .uni-numbox--text {
|
|
color: rgba(199, 199, 199, 1);
|
|
font-size: 40rpx !important;
|
|
font-weight: 400;
|
|
|
|
}
|
|
}
|
|
|
|
/deep/ .uni-numbox__plus {
|
|
// width: 44rpx;
|
|
// height: 44rpx;
|
|
background: #fff !important;
|
|
|
|
border-left: 2rpx solid #999999;
|
|
|
|
// border-top-right-radius: 10rpx;
|
|
/deep/ .uni-numbox--text {
|
|
color: rgba(102, 102, 102, 1);
|
|
font-size: 40rpx !important;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
/deep/ .uni-numbox__value {
|
|
background-color: transparent !important;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.vip_notice {
|
|
margin-top: 46rpx;
|
|
min-height: 200rpx;
|
|
|
|
.big-777 {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #666666;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
|
|
.agreement-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 10rpx;
|
|
margin-top: 66rpx;
|
|
|
|
.greement {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
|
|
color: #333
|
|
}
|
|
|
|
.greement-supplement {
|
|
color: #1E86FE;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.recharge_btn {
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
background: linear-gradient(90deg, #FFAD02 0%, #FD8F3B 100%);
|
|
border-radius: 20rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
</style> |