343 lines
11 KiB
Vue
343 lines
11 KiB
Vue
<template>
|
|
<view class="content">
|
|
<image class="temporary" src="http://api.siyuankunlun.com/storage/materials/2022/09/21/bzj.jpg" mode="widthFix"></image>
|
|
<view class="member-btn">
|
|
<!-- <view class="btnGo" @click="payment">
|
|
保证金支付
|
|
</view> -->
|
|
<view class="btnGo" @click="payShow" :disabled="disabled">
|
|
保证金支付
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付弹出 -->
|
|
<view class="payPop" v-if="payState"></view>
|
|
<view class="payCont" v-if="payState">
|
|
<view class="payCont-close">
|
|
<image src="@/static/icons/uricacidClose.png" mode="" @click="payState = false"></image>
|
|
</view>
|
|
<radio-group @change="payChange">
|
|
<label class="uni-list-cell uni-list-cell-pd payCont-radio" v-for="(item, index) in items" :key="item.value">
|
|
<view class="payCont-name"><image :src="item.cover" mode=""></image>{{item.name}}</view>
|
|
<view>
|
|
<radio :value="item.value" checked="current" color="#e8c198" :checked="index === current" />
|
|
</view>
|
|
</label>
|
|
</radio-group>
|
|
<view class="payCont-btn" @click="payment">
|
|
立即支付
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 填写表单 -->
|
|
<view class="writePop" v-if="writeState"></view>
|
|
<view class="writeCont" v-if="writeState">
|
|
<form @submit="writePayment">
|
|
<view class="writeCont-close">
|
|
<image src="@/static/icons/uricacidClose.png" mode="" @click="writeState = false"></image>
|
|
</view>
|
|
<view class="writePop-input">
|
|
<input type="text" name="code" placeholder="请输入激活码" />
|
|
</view>
|
|
<button class="writeCont-btn" form-type="submit" :disabled="disabled">
|
|
立即兑换
|
|
</button>
|
|
</form>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const jweixin = require('jweixin-module');
|
|
import { partnerSee, getJssdk } from '@/apis/interfaces/member'
|
|
import { identitySee, identityPay, codePay } from '@/apis/interfaces/gout'
|
|
import { authFollow } from '@/apis/interfaces/authUrl'
|
|
export default {
|
|
data() {
|
|
return {
|
|
status : '',
|
|
orderId : '',
|
|
openids : '', // openid
|
|
items : [{
|
|
value : 'wechat',
|
|
name : '微信支付',
|
|
cover : '/static/icons/payIcon_00.png',
|
|
checked: 'true'
|
|
},
|
|
{
|
|
value : 'code',
|
|
name : '激活码支付',
|
|
cover : '/static/icons/payIcon_01.png'
|
|
}
|
|
],
|
|
current : 0,
|
|
payState : false, //支付选择弹出
|
|
writeState : false, //激活码弹出
|
|
disabled : false, //按钮状态
|
|
payType : 'wechat' //支付类型 wechat微信 code激活码
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.openids = options.openid
|
|
},
|
|
onShow() {
|
|
partnerSee().then(res => {
|
|
this.status = res.status
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
|
|
// 获取身份信息
|
|
this.identityInfo();
|
|
},
|
|
methods: {
|
|
// 身份信息
|
|
identityInfo() {
|
|
identitySee(this.$Route.query.identityid).then(res => {
|
|
this.orderId = res.order_id
|
|
if(res.openids.official) {
|
|
this.openids = res.openids.official
|
|
}
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 选择支付
|
|
payChange(e) {
|
|
this.payType = e.detail.value
|
|
},
|
|
|
|
// 显示支付选择弹出
|
|
payShow() {
|
|
this.payState = !this.payState
|
|
},
|
|
|
|
// 微信支付
|
|
payment() {
|
|
// 隐藏支付选择弹出
|
|
this.payState = false
|
|
if(this.payType == 'code') {
|
|
// 弹出激活码填写表单
|
|
this.writeState = !this.writeState
|
|
return
|
|
}
|
|
// 微信支付
|
|
identityPay(this.orderId, {
|
|
openid: this.openids
|
|
}).then(res => {
|
|
let wxConfig = JSON.parse(res.wechat)
|
|
jweixin.config({
|
|
appId: wxConfig.appId,
|
|
debug: false,
|
|
jsApiList: ['chooseWXPay'],
|
|
signature: wxConfig.signature,
|
|
nonceStr: wxConfig.nonceStr,
|
|
timestamp: wxConfig.timestamp,
|
|
})
|
|
jweixin.ready(() => {
|
|
jweixin.chooseWXPay({
|
|
timestamp: wxConfig.timeStamp,
|
|
nonceStr: wxConfig.nonceStr,
|
|
package: wxConfig.package,
|
|
signType: wxConfig.signType,
|
|
paySign: wxConfig.paySign,
|
|
success: payRes => {
|
|
this.$Router.replace({ name: 'bondTips' });
|
|
},
|
|
fail: payfail => {
|
|
uni.showToast({
|
|
title: '取消支付',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
});
|
|
});
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 激活码支付
|
|
writePayment(e) {
|
|
let newCode = e.detail.value.code
|
|
codePay(this.orderId, {
|
|
code: newCode
|
|
}).then(res => {
|
|
this.disabled = true
|
|
|
|
// 返回上一页
|
|
uni.navigateBack();
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.temporary {
|
|
width: 100%;
|
|
}
|
|
.member-btn {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
z-index: 9;
|
|
}
|
|
.btnGo {
|
|
padding: 0 $padding;
|
|
line-height: 90rpx;
|
|
font-size: $title-size + 4;
|
|
box-sizing: border-box;
|
|
background-image: linear-gradient(to right, #fce9cf, #dfac80);
|
|
box-shadow: 0 4rpx 4rpx 3rpx rgba(175,136,88,1);
|
|
border-radius: $radius-m * 5;
|
|
color: #633a25;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
&.active {
|
|
background-image: linear-gradient(to right, #d4d4d4, #e0e0e0);
|
|
box-shadow: 0 2px 2px 1px #b7b7b7;
|
|
color: #656565
|
|
}
|
|
}
|
|
|
|
// 支付弹出
|
|
.payPop {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: rgba($color: #000000, $alpha: .4);
|
|
z-index: 999;
|
|
}
|
|
|
|
.payCont {
|
|
position: fixed;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #ffffff;
|
|
z-index: 1000;
|
|
border-radius: $radius * 3 $radius * 3 0 0;
|
|
padding: $padding $padding + 10;
|
|
.payCont-close {
|
|
text-align: right;
|
|
margin-bottom: 40rpx;
|
|
padding-right: 10rpx;
|
|
box-sizing: border-box;
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
.payCont-radio {
|
|
display: flex;
|
|
line-height: 100rpx;
|
|
.payCont-name {
|
|
flex: 1;
|
|
font-weight: 600;
|
|
display: flex;
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 20rpx;
|
|
margin-top: 26rpx;
|
|
}
|
|
}
|
|
radio {
|
|
transform:scale(.9);
|
|
}
|
|
}
|
|
.payCont-btn {
|
|
margin: 60rpx 0 20rpx;
|
|
width: 100%;
|
|
background-color: #e8c198;
|
|
line-height: 90rpx;
|
|
color: #442b11;
|
|
text-align: center;
|
|
border-radius: $radius-m;
|
|
}
|
|
}
|
|
|
|
// 填写激活码弹出
|
|
.writePop {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: rgba($color: #000000, $alpha: .4);
|
|
z-index: 999;
|
|
}
|
|
|
|
.writeCont {
|
|
position: fixed;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #ffffff;
|
|
z-index: 1000;
|
|
border-radius: $radius * 3 $radius * 3 0 0;
|
|
padding: $padding $padding + 10;
|
|
.writeCont-close {
|
|
text-align: right;
|
|
margin-bottom: 40rpx;
|
|
padding-right: 10rpx;
|
|
box-sizing: border-box;
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
.writePop-input {
|
|
background-color: #f5f5f5;
|
|
height: 90rpx;
|
|
border-radius: $radius-m;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
input {
|
|
background-color: transparent;
|
|
border: none;
|
|
height: 100%;
|
|
line-height: 90rpx;
|
|
}
|
|
}
|
|
.writeCont-btn {
|
|
margin: 60rpx 0 20rpx;
|
|
width: 100%;
|
|
background-color: #e8c198 !important;
|
|
line-height: 90rpx;
|
|
color: #442b11 !important;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
border-radius: $radius-m;
|
|
border: none;
|
|
box-shadow: none;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|