|
|
<template>
|
|
|
<view>
|
|
|
<!-- 收银台 -->
|
|
|
<view class="edgeInsetTop"></view>
|
|
|
<view class="wanl-pay">
|
|
|
<view class="money bg-white">
|
|
|
<text class="title">充值金额</text>
|
|
|
<view class="margin-top price">
|
|
|
<view class="symbol">
|
|
|
<text>￥</text>
|
|
|
</view>
|
|
|
<input type="digit" maxlength="5" focus v-model="money"/>
|
|
|
<view class="text-lg wanl-gray-light" @tap="emptyInput" v-if="money">
|
|
|
<text class="wlIcon-shibai"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="list-box">
|
|
|
<view class="item" v-for="(item, index) in payList" :key="index">
|
|
|
<text :class="'wlIcon-'+ item.type +'-pay'"></text>
|
|
|
<view class="action">
|
|
|
<text class="title wanl-pip">{{item.name}}</text>
|
|
|
<view>{{item.describe}}</view>
|
|
|
</view>
|
|
|
<view class="radio text-xxl" v-if="item.state" @tap="onSelect(index)">
|
|
|
<text v-if="item.select" class="wlIcon-xuanze-danxuan wanl-orange"></text>
|
|
|
<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
|
|
|
</view>
|
|
|
<view class="radio text-xxl" v-else>
|
|
|
<text class="wlIcon-xuanze-danxuan wanl-gray-light"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<button class="mix-btn wanl-bg-redorange" @tap="confirm()" :loading="loading"> 充值</button>
|
|
|
<view class="footer text-center">
|
|
|
<view> © 万联支付 </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
loading: false,
|
|
|
disabled: false,
|
|
|
money: null,
|
|
|
payList: []
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
// 支付列表
|
|
|
let method = 'wap';
|
|
|
// #ifdef APP-PLUS
|
|
|
method = 'app';
|
|
|
// #endif
|
|
|
// #ifdef MP-BAIDU
|
|
|
method = 'mini';
|
|
|
// #endif
|
|
|
// #ifdef MP-WEIXIN
|
|
|
method = 'miniapp';
|
|
|
// #endif
|
|
|
// #ifdef MP-ALIPAY
|
|
|
method = 'mini';
|
|
|
// #endif
|
|
|
// #ifdef MP-QQ
|
|
|
method = 'mini';
|
|
|
// #endif
|
|
|
|
|
|
// #ifdef H5
|
|
|
if(this.$jssdk.isWechat()){
|
|
|
this.payList.push({
|
|
|
name: '公众号支付',
|
|
|
describe: '推荐使用公众号支付',
|
|
|
type: 'wechat',
|
|
|
method: 'mp',
|
|
|
state: true,
|
|
|
select: this.isbalance ? false : true
|
|
|
});
|
|
|
}else{
|
|
|
this.payList.push({
|
|
|
name: '支付宝',
|
|
|
describe: '',
|
|
|
type: 'alipay',
|
|
|
method: method,
|
|
|
state: true,
|
|
|
select: false
|
|
|
}, {
|
|
|
name: '微信支付',
|
|
|
describe: '推荐使用微信支付',
|
|
|
type: 'wechat',
|
|
|
method: method,
|
|
|
state: true,
|
|
|
select: this.isbalance ? false : true
|
|
|
});
|
|
|
}
|
|
|
// #endif
|
|
|
|
|
|
// #ifndef H5
|
|
|
uni.getProvider({
|
|
|
service: "payment",
|
|
|
success: (e) => {
|
|
|
e.provider.map((value) => {
|
|
|
if (value == 'alipay') {
|
|
|
this.payList.push({name: '支付宝',describe: '',type: value,method: method,state: true,select: false});
|
|
|
}else if(value == 'wxpay'){
|
|
|
this.payList.push({name: '微信支付',describe: '推荐使用微信支付',type: 'wechat',method: method,state: true,select: false});
|
|
|
}else if(value == 'baidu'){
|
|
|
this.payList.push({name: '百度收银台',describe: '',type: value,method: method,state: true,select: false});
|
|
|
}else if(value == 'appleiap'){
|
|
|
this.payList.push({name: 'Apple支付',describe: '',type: 'apple',method: method,state: true,select: false});
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
// #endif
|
|
|
},
|
|
|
methods: {
|
|
|
//确认支付
|
|
|
confirm() {
|
|
|
let data = null;
|
|
|
if (this.disabled) {
|
|
|
return;
|
|
|
}
|
|
|
if(this.money <= 0){
|
|
|
this.$wanlshop.msg('请输入充值金额');
|
|
|
return;
|
|
|
}
|
|
|
this.payList.map((value,index,array) => {
|
|
|
if(value.select){
|
|
|
data = value;
|
|
|
}else{
|
|
|
return;
|
|
|
}
|
|
|
});
|
|
|
// 判断支付是否存在
|
|
|
if (!data) {
|
|
|
this.$wanlshop.msg('请选择支付方式');
|
|
|
return;
|
|
|
}else{
|
|
|
this.loading = true;
|
|
|
this.disabled = true;
|
|
|
// 获取小程序code
|
|
|
// #ifdef MP
|
|
|
uni.login({
|
|
|
success: (e) => {
|
|
|
this.wanlPay(data, e.code);
|
|
|
},
|
|
|
fail: (e) => {
|
|
|
uni.showModal({
|
|
|
content: "无法获取微信code,原因为: " + e.errMsg,
|
|
|
showCancel: false
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
// #endif
|
|
|
// #ifndef MP
|
|
|
this.wanlPay(data);
|
|
|
// #endif
|
|
|
}
|
|
|
},
|
|
|
async wanlPay(data, code = null){
|
|
|
this.$api.post({
|
|
|
url: '/wanlshop/pay/recharge',
|
|
|
data: {
|
|
|
type: data.type,
|
|
|
method: data.method,
|
|
|
code: code,
|
|
|
money: this.money
|
|
|
},
|
|
|
success: res => {
|
|
|
switch (data.type) {
|
|
|
case 'wechat':
|
|
|
// 微信 H5支付
|
|
|
if(data.method == 'wap'){
|
|
|
// 关闭loading
|
|
|
this.loading = false;
|
|
|
uni.showModal({
|
|
|
title: '微信支付',
|
|
|
content: '是否已完成支付',
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
this.paySuccess();
|
|
|
} else if (res.cancel) {
|
|
|
console.log('用户点击取消');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
// 异步查询是否支付成功
|
|
|
window.location.href = res;
|
|
|
// 微信 APP支付
|
|
|
}else if(data.method == 'app'){
|
|
|
uni.requestPayment({
|
|
|
provider: 'wxpay',
|
|
|
orderInfo: res,
|
|
|
success: (e) => {
|
|
|
this.paySuccess();
|
|
|
},
|
|
|
fail: (e) => {
|
|
|
uni.showModal({
|
|
|
content: "支付失败,原因为: " + e.errMsg,
|
|
|
showCancel: false
|
|
|
})
|
|
|
},
|
|
|
complete: () => {
|
|
|
this.loading = false;
|
|
|
this.disabled = false;
|
|
|
}
|
|
|
})
|
|
|
// 微信 小程序支付
|
|
|
}else if(data.method == 'miniapp'){
|
|
|
uni.requestPayment({
|
|
|
appId: res.appId,
|
|
|
nonceStr: res.nonceStr,
|
|
|
package: res.package,
|
|
|
paySign: res.paySign,
|
|
|
signType: res.signType,
|
|
|
timeStamp: res.timeStamp,
|
|
|
success: (e) => {
|
|
|
this.paySuccess();
|
|
|
},
|
|
|
fail: (e) => {
|
|
|
uni.showModal({
|
|
|
content: "支付失败,原因为: " + e.errMsg,
|
|
|
showCancel: false
|
|
|
})
|
|
|
},
|
|
|
complete: () => {
|
|
|
this.loading = false;
|
|
|
this.disabled = false;
|
|
|
}
|
|
|
})
|
|
|
// 微信 公众平台支付
|
|
|
}else if(data.method == 'mp'){
|
|
|
this.$jssdk.wxpay({
|
|
|
data: res,
|
|
|
success: e => {
|
|
|
this.paySuccess();
|
|
|
},
|
|
|
fail: err => {
|
|
|
if (err.errMsg == "chooseWXPay:ok") {
|
|
|
this.$wanlshop.msg('支付成功');
|
|
|
}else if (err.errMsg == "chooseWXPay:cancel") {
|
|
|
this.$wanlshop.msg('支付失败，取消支付');
|
|
|
}else if (err.errMsg == "chooseWXPay:fail") {
|
|
|
this.$wanlshop.msg('支付失败');
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
break;
|
|
|
case 'alipay':
|
|
|
if(data.method == 'wap'){
|
|
|
// 关闭loading
|
|
|
this.loading = false;
|
|
|
document.write(res);
|
|
|
}else if(data.method == 'app'){
|
|
|
uni.requestPayment({
|
|
|
provider: 'alipay',
|
|
|
orderInfo: res,
|
|
|
success: (e) => {
|
|
|
this.paySuccess();
|
|
|
},
|
|
|
fail: (e) => {
|
|
|
uni.showModal({
|
|
|
content: "支付失败,原因为: " + e.errMsg,
|
|
|
showCancel: false
|
|
|
})
|
|
|
},
|
|
|
complete: () => {
|
|
|
this.loading = false;
|
|
|
this.disabled = false;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
onSelect(key){
|
|
|
this.payList.map((value,index,array) => {
|
|
|
if(index == key){
|
|
|
value.select = !value.select;
|
|
|
}else{
|
|
|
value.select = false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
emptyInput(){
|
|
|
this.money = null;
|
|
|
},
|
|
|
// 支付成功
|
|
|
paySuccess(){
|
|
|
this.loading = false;
|
|
|
this.$store.commit('user/setUserInfo', {
|
|
|
money: this.$wanlshop.bcadd(this.$store.state.user.money, this.money)
|
|
|
});
|
|
|
this.$wanlshop.to('/pages/page/success?type=recharge');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
radio-group {
|
|
|
display: block;
|
|
|
}
|
|
|
.wanl-pay .money{
|
|
|
padding: 25rpx 40rpx 25rpx 60rpx;
|
|
|
}
|
|
|
|
|
|
.wanl-pay .money .symbol{
|
|
|
font-size: 60rpx;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.wanl-pay .money .price{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.wanl-pay .money .price input{
|
|
|
/* #ifdef MP */
|
|
|
height: 100rpx;
|
|
|
min-height: 100rpx;
|
|
|
/* #endif */
|
|
|
width: 100%;
|
|
|
font-size: 100rpx;
|
|
|
}
|
|
|
</style>
|
|
|
|
