383 lines
11 KiB
Vue
383 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<view
|
||
style="width: 700upx;height: 180upx;background: #FFFFFF;margin: 30upx; padding: 20upx;border-radius: 20upx;">
|
||
<view style="display: flex;margin: 15upx 0 0 20upx;">
|
||
<image :src="image" style="width: 20%; height: 120upx;"></image>
|
||
<view style="margin-left: 20upx;width: 70%;">
|
||
<view style="font-size: 28upx;color: #05C25C;font-weight: bold;margin-top: 10upx;">¥ {{money}}
|
||
</view>
|
||
<view
|
||
style="width: 100%;margin-top: 20upx;font-size: 28upx;color: #333333;font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
|
||
{{title}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="width: 700upx;background: #FFFFFF;margin: 30upx; padding: 20upx;border-radius: 20upx;"
|
||
v-if="payList.length > 0">
|
||
<view style="display: flex;height: 100upx;margin: 0upx 0 0 30upx;align-items: center;padding-bottom: 20upx;"
|
||
v-for="(item,index) in payList" :key='index'>
|
||
<image :src="item.image" style="width: 50upx;height: 50upx;border-radius: 50upx;"></image>
|
||
<view style="font-size: 28upx;color: #333333;margin-left: 20upx;width: 70%;" v-if="item.name == '钱包零钱'">
|
||
{{item.name}}({{lingqian}})
|
||
</view>
|
||
<view style="font-size: 28upx;color: #333333;margin-left: 20upx;width: 70%;" v-else>{{item.name}}</view>
|
||
<radio-group name="openWay" style="margin-left: 40upx;" @tap='selectWay(item.id)'>
|
||
<label class="tui-radio">
|
||
<radio color="#05C25C" :checked="openWay === item.id ? true : false" />
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
|
||
<button v-if="payList.length > 0"
|
||
style="background-color: #05C25C;width: 680upx;height: 80upx;font-size: 28upx;color: #FFFFFF;text-align: center;margin: 30upx;border-radius: 50upx;padding-top: 5upx;"
|
||
@tap='goPay'>确定支付</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
openWay: 0,
|
||
money: 0,
|
||
lingqian: 0.00,
|
||
title: '',
|
||
image: '',
|
||
id: '',
|
||
providerList: [],
|
||
checkWeixin: true,
|
||
checkZhifubao: true,
|
||
payList: [{
|
||
id: 0,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/e71382c1b8404e4f96c6d6e89d305329.png',
|
||
name: '微信'
|
||
}, {
|
||
id: 1,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/56cde02b040e453ead8b5d2c0dc17e18.png',
|
||
name: '支付宝'
|
||
},
|
||
{
|
||
id: 2,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/119ca58dc0df41398e6a339cf37382e3.png',
|
||
name: '钱包零钱'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onBackPress(event) {
|
||
if (event.from == 'backbutton') {
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '订单尚未完成支付,确认退出吗?',
|
||
showCancel: true,
|
||
cancelText: '继续支付',
|
||
confirmText: '确定',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '../member/orderdetail?id=' + this.id
|
||
});
|
||
}
|
||
}
|
||
});
|
||
return true; //阻止默认返回行为
|
||
}
|
||
},
|
||
onLoad(d) {
|
||
this.getlingqian();
|
||
// #ifdef MP-WEIXIN
|
||
this.payList = [];
|
||
this.openWay = 0;
|
||
let data = [];
|
||
let data1 = [{
|
||
id: 0,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/e71382c1b8404e4f96c6d6e89d305329.png',
|
||
name: '微信'
|
||
}, {
|
||
id: 2,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/119ca58dc0df41398e6a339cf37382e3.png',
|
||
name: '钱包零钱'
|
||
}]
|
||
this.payList = data1;
|
||
// #endif
|
||
|
||
|
||
// #ifdef APP-PLUS
|
||
this.payList = [];
|
||
this.openWay = 0;
|
||
let data1 = [{
|
||
id: 0,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/e71382c1b8404e4f96c6d6e89d305329.png',
|
||
name: '微信'
|
||
}, {
|
||
id: 1,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/56cde02b040e453ead8b5d2c0dc17e18.png',
|
||
name: '支付宝'
|
||
}, {
|
||
id: 2,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/119ca58dc0df41398e6a339cf37382e3.png',
|
||
name: '钱包零钱'
|
||
}]
|
||
this.payList = data1;
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
let target = navigator.userAgent.toLowerCase();
|
||
let isWeixin = (/micromessenger/.test(target)) ? true : false;
|
||
this.payList = [];
|
||
if (isWeixin) {
|
||
this.openWay = 0;
|
||
let data1 = [{
|
||
id: 0,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/e71382c1b8404e4f96c6d6e89d305329.png',
|
||
name: '微信'
|
||
}, {
|
||
id: 2,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/119ca58dc0df41398e6a339cf37382e3.png',
|
||
name: '钱包零钱'
|
||
}]
|
||
this.payList = data1;
|
||
} else {
|
||
this.openWay = 1;
|
||
let data1 = [{
|
||
id: 1,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/56cde02b040e453ead8b5d2c0dc17e18.png',
|
||
name: '支付宝'
|
||
}, {
|
||
id: 2,
|
||
image: 'https://renwu.xiansqx.com/img/20210813/119ca58dc0df41398e6a339cf37382e3.png',
|
||
name: '钱包零钱'
|
||
}]
|
||
this.payList = data1;
|
||
}
|
||
// #endif
|
||
if (d) {
|
||
this.id = d.id;
|
||
this.getCheckPay(d.id);
|
||
this.getCommondityList(d.id);
|
||
}
|
||
uni.getProvider({
|
||
service: 'payment',
|
||
success: e => {
|
||
let providerList = [];
|
||
e.provider.map(value => {
|
||
switch (value) {
|
||
case 'alipay':
|
||
providerList.push({
|
||
name: '支付宝',
|
||
id: value,
|
||
loading: false
|
||
});
|
||
break;
|
||
case 'wxpay':
|
||
providerList.push({
|
||
name: '微信',
|
||
id: value,
|
||
loading: false
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
});
|
||
this.providerList = providerList;
|
||
},
|
||
fail: e => {
|
||
console.log('获取支付通道失败：', e);
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
getlingqian() {
|
||
let userId = this.$queue.getData('userId');
|
||
this.$Request.get("/app/artificer/selectArtificerMoney").then(res => {
|
||
if (res.code == 0) {
|
||
this.lingqian = res.data.money ? res.data.money : 0; //累计余额
|
||
}
|
||
});
|
||
},
|
||
getCheckPay(id) {
|
||
this.$Request.getT('/app/orders/wxPay?ordersId=' + id).then(res => {
|
||
if (res.status === 0) {
|
||
uni.redirectTo({
|
||
url: './myList'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
getCommondityList(id) {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
this.$Request.getT('/app/orders/find?id=' + id).then(res => {
|
||
if (res.status === 0) {
|
||
this.image = res.data.img;
|
||
this.money = res.data.payMoney;
|
||
this.title = res.data.title;
|
||
}
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
selectWay: function(id) {
|
||
this.openWay = id;
|
||
},
|
||
goPay() {
|
||
let userId = this.$queue.getData('userId');
|
||
uni.showLoading({
|
||
title: '支付中'
|
||
});
|
||
if (this.openWay === 0) { //0：微信支付
|
||
// #ifdef H5
|
||
this.$Request.postJson('/pay/wxPayWeb?ordersId=' + this.id + '&userId=' + userId).then(res => {
|
||
this.callPay(res);
|
||
});
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
this.$Request.postJson('/pay/wxPayApp?ordersId=' + this.id + '&userId=' + userId).then(res => {
|
||
this.setPayment('wxpay', JSON.stringify(res));
|
||
});
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
this.$Request.postJson('/pay/wxPayJS?ordersId=' + this.id + '&userId=' + userId).then(res => {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.timestamp,
|
||
nonceStr: res.noncestr,
|
||
package: res.package,
|
||
signType: res.signType,
|
||
paySign: res.sign,
|
||
success: function(res) {
|
||
uni.showLoading({
|
||
title: '支付成功'
|
||
});
|
||
uni.hideLoading();
|
||
setTimeout(() => {
|
||
uni.redirectTo({
|
||
url: '../my/myList'
|
||
});
|
||
}, 1000);
|
||
},
|
||
fail: function(err) {
|
||
uni.hideLoading();
|
||
this.$queue.showToast('支付失败');
|
||
}
|
||
});
|
||
});
|
||
// #endif
|
||
} else if (this.openWay === 1) { //1：支付宝支付
|
||
// #ifdef H5
|
||
this.$Request.getT('/aliPay/payH5?ordersId=' + this.id).then(res => {
|
||
const div = document.createElement('div')
|
||
div.innerHTML = res.data //此处form就是后台返回接收到的数据
|
||
document.body.appendChild(div)
|
||
document.forms[0].submit()
|
||
});
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
this.$Request.getT('/aliPay/payApp?ordersId=' + this.id).then(res => {
|
||
this.setPayment('alipay', res.data);
|
||
});
|
||
// #endif
|
||
} else if (this.openWay === 2) { //2：零钱支付
|
||
let orderIds = this.id;
|
||
this.$Request.getT('/app/orders/changePay?ordersId=' + this.id).then(res => {
|
||
if (res.status === 0) {
|
||
uni.hideLoading();
|
||
this.$queue.showToast('支付成功');
|
||
setTimeout(function() {
|
||
console.log("id:" + orderIds)
|
||
uni.hideLoading();
|
||
uni.redirectTo({
|
||
url: '/package/pages/zysc/member/orderdetail?id=' + orderIds
|
||
});
|
||
}, 1000);
|
||
} else {
|
||
uni.hideLoading();
|
||
this.$queue.showToast(res.msg);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
callPay: function(response) {
|
||
if (typeof WeixinJSBridge === "undefined") {
|
||
if (document.addEventListener) {
|
||
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
|
||
} else if (document.attachEvent) {
|
||
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
|
||
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
|
||
}
|
||
} else {
|
||
this.onBridgeReady(response);
|
||
}
|
||
},
|
||
onBridgeReady: function(response) {
|
||
let that = this;
|
||
if (!response.package) {
|
||
return;
|
||
}
|
||
WeixinJSBridge.invoke(
|
||
'getBrandWCPayRequest', {
|
||
"appId": response.appid, //公众号名称，由商户传入
|
||
"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
|
||
"nonceStr": response.noncestr, //随机串
|
||
"package": response.package,
|
||
"signType": response.signType, //微信签名方式：
|
||
"paySign": response.sign //微信签名
|
||
},
|
||
function(res) {
|
||
if (res.err_msg === "get_brand_wcpay_request:ok") {
|
||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||
uni.showLoading({
|
||
title: '支付成功'
|
||
});
|
||
setTimeout(function() {
|
||
uni.hideLoading();
|
||
uni.redirectTo({
|
||
url: '../member/orderdetail?id=' + that.id
|
||
});
|
||
}, 1000);
|
||
} else {
|
||
uni.hideLoading();
|
||
}
|
||
WeixinJSBridge.log(response.err_msg);
|
||
}
|
||
);
|
||
},
|
||
setPayment(name, order) {
|
||
let that = this;
|
||
uni.requestPayment({
|
||
provider: name,
|
||
orderInfo: order, //微信、支付宝订单数据
|
||
success: function(res) {
|
||
uni.hideLoading();
|
||
uni.showLoading({
|
||
title: '支付成功'
|
||
});
|
||
setTimeout(function() {
|
||
uni.hideLoading();
|
||
uni.redirectTo({
|
||
url: '../member/orderdetail?id=' + that.id
|
||
});
|
||
}, 1000);
|
||
},
|
||
fail: function(err) {
|
||
uni.hideLoading();
|
||
console.log(12)
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background: #F2F2F2;
|
||
}
|
||
</style>
|