294 lines
7.0 KiB
Vue
294 lines
7.0 KiB
Vue
<template>
|
|
<view class="min-body mescroll-safearea">
|
|
<u-gap height="30rpx"></u-gap>
|
|
<view class="white-box">
|
|
<view :class="rechargetype == 0 ? 'nyy' : 'nyy2'">
|
|
<view class="rechargeVip_amount" v-if="rechargetype == 0">
|
|
<view class="subsidy">
|
|
<view class="subsidy_item">
|
|
<text class="subsidy_detail">消费补贴卡面额</text>
|
|
<text class="subsidy-denomination">50/张</text>
|
|
</view>
|
|
<view class="subsidy_number_box">
|
|
<view class="subsidy_num">购买数量</view>
|
|
<uni-number-box :min='1' :max="999" v-model="num"></uni-number-box>
|
|
</view>
|
|
</view>
|
|
<view class="big-999">
|
|
金额：<text style="color: #FF7700">￥{{ num }}</text>
|
|
</view>
|
|
</view>
|
|
<u-input v-model="value" v-else type="text" :customStyle="cts"
|
|
placeholder="请输入卡密"></u-input>
|
|
</view>
|
|
<view class="big-999">
|
|
购买账户：<text style="color: #4e9ef8">{{ nickname }}</text>
|
|
</view>
|
|
<view class="vip_content" v-if="rechargetype== 0">
|
|
<view class="recharge-title"> 套餐购买 </view>
|
|
<image :src="vip" class="vipImg" @click="toRecharge"></image>
|
|
</view>
|
|
|
|
</view>
|
|
<u-gap height="30rpx"></u-gap>
|
|
<view v-if="rechargetype == 0" class="white-box">
|
|
<view class="big-777"> 购买说明 </view>
|
|
<view class="rich-text">
|
|
<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="">我已阅读并知晓</text>
|
|
<text :class="['greement','greement-supplement']" @click.stop="toAgreement">《补贴卡购买协议》</text>
|
|
</u-checkbox-group>
|
|
</view>
|
|
<view :class="['mt-30']" @click.stop="addNew">
|
|
<!-- <u-button color="linear-gradient(45deg,#FFAD02,#FD8F3B)" text="确认购买"></u-button> -->
|
|
<view class="recharge_btn">确认{{rechargetype == 0?'购买':'激活'}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
userAndRuleAPI,
|
|
quotaRechargeAPI,
|
|
onlineRechargeAPI,
|
|
} from "@/request/recharge/index.js";
|
|
import mixin from '@/static/js/mixin/mixin.js'
|
|
export default {
|
|
mixins: [mixin],
|
|
data() {
|
|
return {
|
|
rechargetype: 0,
|
|
cts: {
|
|
border: "none",
|
|
},
|
|
html: "",
|
|
value: "",
|
|
nickname: "",
|
|
vip: 'https://img.agrimedia.cn/vip.png',
|
|
checked: [],
|
|
// 补贴卡购买数量
|
|
// 价格
|
|
price:1,
|
|
num:1
|
|
};
|
|
},
|
|
methods: {
|
|
//跳转协议
|
|
toAgreement(){
|
|
uni.navigateTo({
|
|
url:`/pages/pages-recharge/rechargeProtocol/index`
|
|
})
|
|
},
|
|
toRecharge() {
|
|
uni.navigateTo({
|
|
url: '/pages/pages-recharge/rechargeVip/index'
|
|
});
|
|
},
|
|
changeStatus() {
|
|
console.log(this.checked, "hhah")
|
|
this.checked = !this.checked
|
|
},
|
|
addNew() {
|
|
console.log(this["rechargetype"]);
|
|
if(!this.checked.length){
|
|
uni.showToast({
|
|
title:'请先阅读补贴卡协议',
|
|
icon:'none'
|
|
});
|
|
return
|
|
}
|
|
let param;
|
|
if (this["rechargetype"] == 0) {
|
|
param = {amount: this['price'] * this['num']};
|
|
// 二次保险限制最大数量
|
|
if (this['num'] >= 1000) return;
|
|
}else{
|
|
param = {sn: this['value']};
|
|
}
|
|
let fun =
|
|
this["rechargetype"] == 1 ?
|
|
quotaRechargeAPI(param) :
|
|
onlineRechargeAPI(param);
|
|
|
|
let _this = this;
|
|
// quotaRechargeAPI 卡密充值
|
|
// onlineRechargeAPI 付费充值
|
|
fun.then((res) => {
|
|
if (this.rechargetype == 0) {
|
|
_this.$Payment.H5_Payment({
|
|
pay_price:res['data']['pay_price'],
|
|
order_sn:res['data']['order_sn'],
|
|
type:res['data']['type'],
|
|
openid:res['data']['openid'],
|
|
return_url:`/pages/pages-recharge/success/index?order_sn=${res['data']['order_sn']}`,
|
|
});
|
|
}
|
|
if (this.rechargetype == 1) {
|
|
uni.showToast({
|
|
title: res['msg']
|
|
});
|
|
setTimeout(() => {
|
|
this.leftClick('/pages/pages-recharge/index/index')
|
|
}, 1500)
|
|
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* @初始化
|
|
*
|
|
*/
|
|
init(parameters) {
|
|
// 设置
|
|
// this["rechargetype"] = parameters["rechargetype"] || 0;
|
|
this["rechargetype"] = parameters["rechargetype"] || getApp()['globalData']['parameters']['rechargetype'];
|
|
uni.setNavigationBarTitle({
|
|
title: this["rechargetype"] == 0 ? "购买消费补贴卡" : "卡密激活",
|
|
});
|
|
/**
|
|
* @获取用户昵称和购买规则
|
|
*/
|
|
userAndRuleAPI().then((res) => {
|
|
this["html"] = res["data"]["rule"];
|
|
this[["nickname"]] = res["data"]["nickname"];
|
|
console.log(this["html"]);
|
|
});
|
|
},
|
|
},
|
|
onLoad(parameters) {
|
|
this.init(parameters);
|
|
},
|
|
// onBackPress(e) {
|
|
// console.log(e,'eeeee')
|
|
// // closePage();
|
|
// if (e.from === 'backbutton') {
|
|
|
|
// //return true
|
|
// //返回值为true 时,表示不执行默认的返回（默认返回上一页），执行自定义的返回
|
|
// //如果要限制必须写成true
|
|
// return true;
|
|
// }
|
|
|
|
// },
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.white-box {
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.nyy {
|
|
// box-shadow: #ffcc9d 0px 0px 10px inset;
|
|
border-radius: 20rpx;
|
|
padding: 10rpx 0;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.nyy2 {
|
|
box-shadow: #ddd 0px 0px 10px inset;
|
|
border-radius: 20rpx;
|
|
padding: 10rpx 0;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.rich-text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
padding-top: 30rpx;
|
|
}
|
|
|
|
.vipImg {
|
|
height: 142rpx;
|
|
}
|
|
|
|
.big-999 {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.recharge-title {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.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
|
|
}
|
|
|
|
.big-777 {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #666666;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.rechargeVip_amount{
|
|
.subsidy_item{
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.subsidy_detail{
|
|
font-size: 29rpx;
|
|
font-weight: 600;
|
|
color: #FF7700;
|
|
}
|
|
.subsidy-denomination{
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.subsidy_number_box{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 100rpx;
|
|
.subsidy_num{
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
</style>
|