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>
|