[锶源昆仑-寺庙捐赠活动]
This commit is contained in:
342
pages/bond/index.vue
Normal file
342
pages/bond/index.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user