496 lines
12 KiB
Vue
496 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view class="top-box d-c d-c-s">
|
||
<view class="f30 gray3 mb20">{{ $t('w_0212') }}</view>
|
||
<view class="d-b-c">
|
||
<view class="f30">{{ currencyIcon() }}</view>
|
||
<input class="recharge-input fb" type="digit" v-model="money" placeholder="0.00" />
|
||
</view>
|
||
</view>
|
||
<view class="pay-list">
|
||
<view class="pay-item d-s-c f30 gray3" style="border: none;">{{ $t('w_0215') }}</view>
|
||
<template v-if="pay_type == 20">
|
||
<view class="d-b-c pay-item" @click="changePayType(2, 2, '')">
|
||
<image class="pay-icon" src="/static/icon/pay-wallet.png" mode=""></image>
|
||
<view class="flex-1 f26">{{ $t('w_0226') }}</view>
|
||
<view class="radio-check" :class="{ checked: payType == 2 && payChannel == 2 }"></view>
|
||
<!-- <view class="domation fb f30">3</view> -->
|
||
<view class="icon iconfont icon-jiantou" @click="openWX = !openWX" :class="{ checked: openWX }"></view>
|
||
</view>
|
||
</template>
|
||
<template v-if="pay_type == 10">
|
||
<view v-if="payConfig.pay12" class="d-b-c pay-item border-b" @click="changePayType(5, 2)">
|
||
<u-icon width="48rpx" height="47rpx" name="/static/icon/wx.png"></u-icon>
|
||
<text class="m-0-20 flex-1">{{ $t('w_0229') }}</text>
|
||
<view class="radio-check" :class="{ checked: payType == 2 && payChannel == 5 }"></view>
|
||
</view>
|
||
<view v-if="payConfig.pay13" class="d-b-c pay-item border-b" @click="changePayType(6, 2)">
|
||
<u-icon width="48rpx" height="47rpx" name="/static/icon/wx.png"></u-icon>
|
||
<text class="m-0-20 flex-1">{{ $t('w_0230') }}</text>
|
||
<view class="radio-check" :class="{ checked: payType == 2 && payChannel == 6 }"></view>
|
||
</view>
|
||
<view v-if="payConfig.pay15" class="d-b-c pay-item" @click="openHF = !openHF">
|
||
<u-icon width="48rpx" height="47rpx" name="/static/icon/yhk.png"></u-icon>
|
||
<text class="m-0-20 flex-1">{{ $t('w_0231') }}</text>
|
||
<view class="icon iconfont icon-jiantou" :class="{ checked: openHF }"></view>
|
||
</view>
|
||
<view class="autoBox" :class="{ open: !openHF }">
|
||
<view class="d-b-c pay-item border-b" v-for="(item, index) in adaList" :key="index" @click="changePayType(6, 3, item.bindCode)">
|
||
<text class="m-0-20 flex-1">{{ item.bankName + '(' + item.bankNo + ')' }}</text>
|
||
<view class="radio-check" :class="{ checked: bindCode == item.bindCode }"></view>
|
||
</view>
|
||
<view class="d-s-c pay-item border-b" @click="gotoPage('/pages/user/card/otherAdd?type=0')">
|
||
<u-icon name="plus-circle" size="24rpx" color="#333"></u-icon>
|
||
<text class="m-0-20 flex-1">{{ $t('w_0179') }}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="payConfig.pay4" class="d-b-c pay-item" @click="openJD = !openJD">
|
||
<u-icon width="48rpx" height="47rpx" name="/static/icon/yhk.png"></u-icon>
|
||
<text class="m-0-20 flex-1">{{ $t('w_0234') }}</text>
|
||
<view class="icon iconfont icon-jiantou" :class="{ checked: openJD }"></view>
|
||
</view>
|
||
<view class="autoBox" :class="{ open: !openJD }">
|
||
<view class="d-b-c pay-item border-b" v-for="(item, index) in jdList" :key="index" @click="changePayType(4, 3, item.bindCode)">
|
||
<text class="m-0-20 flex-1">{{ item.bankName + '(' + item.bankNo + ')' }}</text>
|
||
<view class="radio-check" :class="{ checked: bindCode == item.bindCode }"></view>
|
||
</view>
|
||
<view class="d-s-c pay-item border-b" @click="gotoPage('/pages/user/card/otherAdd?type=1')">
|
||
<u-icon name="plus-circle" size="24rpx" color="#333"></u-icon>
|
||
<text class="m-0-20 flex-1">{{ $t('w_0179') }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<button class="normal-sub-btn" @click="payFunc">{{ $t('MN_F_T_87') }}</button>
|
||
<!-- <template v-if="showPop">
|
||
<view class="pop-bg"></view>
|
||
<view class="pop-success" v-if="showPop">
|
||
<view class="d-c d-b-c hh100">
|
||
<view class="d-e-c ww100" @click="showPop = false"><u-icon name="close" size="34rpx"
|
||
color="#999"></u-icon></view>
|
||
<view><u-icon size="77rpx" name="/static/icon/success.png"></u-icon></view>
|
||
<view class="f30 gray3 fb">{{$t('w_0334')}}</view>
|
||
<view class="f28 gray3">{{currencyIcon()}}3000</view>
|
||
<button class="pop-btn">{{$t('w_0035')}}</button>
|
||
</view>
|
||
</view>
|
||
</template> -->
|
||
<popInput :title="$t('w_0251')" :password="true" :placeholder="$t('w_0250')" :isShow="isPassword" @close="closePassword"></popInput>
|
||
<view v-if="isQrcode">
|
||
<view class="pop-bg" @click="isQrcode = false"></view>
|
||
<view class="pop-success-s">
|
||
<view class="d-c d-b-c hh100">
|
||
<view class="d-e-c ww100" @click="isQrcode = false"><u-icon name="close" size="34rpx" color="#999"></u-icon></view>
|
||
<view class="f30 gray3 fb tc mb20">{{ $t('w_0226') }}</view>
|
||
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
|
||
<button class="pop-btn mt20" @click="isQrcode = false">{{ $t('w_0035') }}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/* 引入uQRCode */
|
||
import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
|
||
import popInput from '@/components/pop-input.vue';
|
||
export default {
|
||
components: {
|
||
popInput
|
||
},
|
||
data() {
|
||
return {
|
||
isPassword: false,
|
||
money: '',
|
||
radiovalue1: 10,
|
||
showPop: false,
|
||
payConfig: {
|
||
pay4: true, //京东银行卡
|
||
pay12: true, //宝付微信
|
||
pay13: true, //汇付微信
|
||
pay15: true, //汇付银行卡
|
||
pay20: true //微信APP（true=显示，false=不显示）
|
||
},
|
||
jdList: [],
|
||
adaList: [],
|
||
payChannel: -1,
|
||
payType: '',
|
||
bindCode: '',
|
||
openJD: false,
|
||
openHF: false,
|
||
orderCode: '',
|
||
flag: '',
|
||
openZX: false,
|
||
openZH: false,
|
||
pay_type: 10,
|
||
businessType: 3,
|
||
isQrcode: false,
|
||
payTime: false
|
||
};
|
||
},
|
||
onReady() {},
|
||
onLoad() {
|
||
// #ifdef APP-PLUS
|
||
this.getPayType();
|
||
// #endif
|
||
// #ifndef APP-PLUS
|
||
this.pay_type = 10;
|
||
// #endif
|
||
},
|
||
onShow() {
|
||
this.getPayconfig();
|
||
this.getJdFast();
|
||
this.getAdaFast();
|
||
},
|
||
methods: {
|
||
getQrcode(e) {
|
||
let self = this;
|
||
self.isQrcode = true;
|
||
self.$nextTick(() => {
|
||
// 获取uQRCode实例
|
||
var qr = new UQRCode();
|
||
// 设置二维码内容
|
||
qr.data = e;
|
||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||
qr.size = 200;
|
||
// 调用制作二维码方法
|
||
console.log(11111);
|
||
qr.make();
|
||
// 获取canvas上下文
|
||
var canvasContext = uni.createCanvasContext('qrcode', self); // 如果是组件，this必须传入
|
||
console.log(canvasContext);
|
||
// 设置uQRCode实例的canvas上下文
|
||
qr.canvasContext = canvasContext;
|
||
// 调用绘制方法将二维码图案绘制到canvas上
|
||
qr.drawCanvas();
|
||
});
|
||
},
|
||
getPayType() {
|
||
let self = this;
|
||
let url = this.config.yxyapi;
|
||
uni.request({
|
||
url: url + '/yiti.php',
|
||
data: {
|
||
type: 2,
|
||
platform: self.getPlatform()
|
||
},
|
||
success: result => {
|
||
console.log(result);
|
||
var data = result.data;
|
||
self.pay_type = data.pay_type;
|
||
},
|
||
error: error => {
|
||
console.log('----------------error');
|
||
console.log(error);
|
||
}
|
||
});
|
||
},
|
||
changePayType(payChannel, payType, bindCode) {
|
||
if (payChannel == -1 && payType == -1 && bindCode == '') {
|
||
this.openZH = !this.openZH;
|
||
}
|
||
this.payChannel = payChannel;
|
||
this.payType = payType;
|
||
this.bindCode = bindCode || '';
|
||
},
|
||
/* 京东银行卡绑卡列表 */
|
||
getPayconfig() {
|
||
let self = this;
|
||
self._get('pay/config', {}, res => {
|
||
self.payConfig = res.data;
|
||
});
|
||
},
|
||
/* 京东银行卡绑卡列表 */
|
||
getJdFast() {
|
||
let self = this;
|
||
self._get('pay/jd-fast/list', {}, res => {
|
||
self.jdList = res.data;
|
||
});
|
||
},
|
||
/* 汇付银行卡绑卡列表 */
|
||
getAdaFast() {
|
||
let self = this;
|
||
self._get('pay/ada-fast/list', {}, res => {
|
||
self.adaList = res.data;
|
||
});
|
||
},
|
||
closePassword(e) {
|
||
console.log(e);
|
||
if (e) {
|
||
if (this.payChannel == 4) {
|
||
this.jdFast(e);
|
||
}
|
||
if (this.payChannel == 6) {
|
||
this.adaFast(e);
|
||
}
|
||
}
|
||
this.isPassword = false;
|
||
},
|
||
adaFast(e) {
|
||
let self = this;
|
||
let params = {
|
||
smsCode: e,
|
||
bindCode: self.bindCode,
|
||
orderCode: self.orderCode
|
||
};
|
||
self._post('pay/ada-fast/pay-confirm', params, res => {
|
||
uni.showModal({
|
||
title: self.$t('w_0034'),
|
||
content: res.msg,
|
||
success() {
|
||
self.money = '';
|
||
self.payChannel = '';
|
||
self.orderCode = '';
|
||
self.payType = '';
|
||
self.bindCode = '';
|
||
}
|
||
});
|
||
});
|
||
},
|
||
jdFast(e) {
|
||
let self = this;
|
||
let params = {
|
||
smsCode: e,
|
||
bindCode: self.bindCode,
|
||
orderCode: self.orderCode
|
||
};
|
||
self._post('pay/jd-fast/pay-confirm', params, res => {
|
||
uni.showModal({
|
||
title: self.$t('w_0034'),
|
||
content: res.msg,
|
||
success() {
|
||
self.money = '';
|
||
self.payChannel = '';
|
||
self.orderCode = '';
|
||
self.payType = '';
|
||
self.bindCode = '';
|
||
}
|
||
});
|
||
});
|
||
},
|
||
/* 点击充值 */
|
||
payFunc() {
|
||
if (!this.money || this.money <= 0) {
|
||
uni.showToast({
|
||
title: this.$t('S_C_70') + this.$t('w_0212'),
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (this.payType === '') {
|
||
uni.showToast({
|
||
title: this.$t('CK_KS_38') + this.$t('w_0215'),
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
this.preCharge();
|
||
},
|
||
|
||
/* 在线预充值 */
|
||
preCharge() {
|
||
let self = this;
|
||
self._get(
|
||
'member/api/recharge/preCharge',
|
||
{
|
||
rechargeAmount: self.money
|
||
},
|
||
res => {
|
||
if (res.flag == 1) {
|
||
self.orderCode = res.orderCode;
|
||
self.zxPay();
|
||
} else {
|
||
uni.showToast({
|
||
title: self.$t('请稍后再试！'),
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
);
|
||
},
|
||
/* 支付状态 */
|
||
zxPay() {
|
||
let self = this;
|
||
let params = {
|
||
payChannel: self.payChannel,
|
||
businessCode: self.orderCode,
|
||
businessType: self.businessType,
|
||
payType: self.payType,
|
||
bindCode: self.bindCode
|
||
};
|
||
uni.showLoading({
|
||
title: 'Loading....'
|
||
});
|
||
self._post(
|
||
'pay/unifiedorder',
|
||
params,
|
||
res => {
|
||
if (res.code == 200) {
|
||
/* 微信支付 */
|
||
if (self.payType == 2) {
|
||
self.getQrcode(res.data);
|
||
self.payTime = true;
|
||
self.payStatus();
|
||
}
|
||
if (self.payType == 3) {
|
||
self.isPassword = true;
|
||
}
|
||
}
|
||
|
||
console.log(res);
|
||
uni.hideLoading();
|
||
// pay(res, self);
|
||
},
|
||
err => {
|
||
uni.hideLoading();
|
||
}
|
||
);
|
||
},
|
||
closeCode() {
|
||
this.isQrcode = false;
|
||
this.payTime = false;
|
||
},
|
||
payStatus() {
|
||
let self = this;
|
||
let params = {
|
||
payChannel: self.payChannel,
|
||
businessCode: self.orderCode,
|
||
businessType: self.businessType,
|
||
payType: self.payType,
|
||
bindCode: self.bindCode
|
||
};
|
||
let callback = function() {
|
||
self._get('pay/status', params, res => {
|
||
if (res.data == 1) {
|
||
self.closeCode();
|
||
self.money = '';
|
||
self.payChannel = '';
|
||
self.orderCode = '';
|
||
self.payType = '';
|
||
self.bindCode = '';
|
||
uni.showModal({
|
||
title: self.$t('w_0034'),
|
||
content: self.$t('w_0335'),
|
||
showCancel: false
|
||
});
|
||
} else {
|
||
if (self.payTime) {
|
||
self.payStatus();
|
||
}
|
||
}
|
||
});
|
||
};
|
||
setTimeout(function() {
|
||
callback();
|
||
}, 5000);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.top-box {
|
||
margin-top: 7rpx;
|
||
margin-bottom: 21rpx;
|
||
height: 166rpx;
|
||
background: #ffffff;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.recharge-input {
|
||
font-size: 42rpx;
|
||
line-height: 1.5;
|
||
flex: 1;
|
||
}
|
||
|
||
.pay-list {
|
||
background-color: #ffffff;
|
||
padding: 0 30rpx;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
.pay-item {
|
||
height: 115rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.pay-item:last-child {
|
||
border: none;
|
||
}
|
||
|
||
.pay-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.radio-check {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: #ffffff;
|
||
border: 2rpx solid #dddddd;
|
||
border-radius: 50%;
|
||
margin-right: 11rpx;
|
||
margin-left: 20rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.radio-check.checked {
|
||
border: none;
|
||
background-color: #fb3024;
|
||
}
|
||
|
||
.radio-check.checked::after {
|
||
content: '';
|
||
position: absolute;
|
||
z-index: 1;
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background: #ffffff;
|
||
border-radius: 50%;
|
||
left: 8rpx;
|
||
top: 8rpx;
|
||
}
|
||
|
||
.icon.icon-jiantou {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
font-weight: bold;
|
||
margin-left: 10rpx;
|
||
transition: transform 0.4s;
|
||
}
|
||
|
||
.icon.icon-jiantou.checked {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.autoBox {
|
||
min-height: 100rpx;
|
||
padding: 20rpx 0;
|
||
transition: all 0.6s ease;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.autoBox.open {
|
||
height: 0;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
padding: 0;
|
||
}
|
||
|
||
.pop-success-s {
|
||
position: fixed;
|
||
z-index: 99;
|
||
width: 664rpx;
|
||
background: #ffffff;
|
||
border-radius: 10px;
|
||
padding: 50rpx 20rpx;
|
||
box-sizing: border-box;
|
||
left: 0;
|
||
top: 20%;
|
||
right: 0;
|
||
margin: auto;
|
||
}
|
||
</style>
|