sadjv2/anmo-user/package/pages/zysc/my/payment.vue

383 lines
11 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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