111
This commit is contained in:
parent
af31fc3a0c
commit
559ee026fb
588
components/payments/index.vue
Normal file
588
components/payments/index.vue
Normal file
|
|
@ -0,0 +1,588 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="payment" :class="pay_close ? 'on' : ''">
|
||||||
|
<view class="title acea-row row-center-wrapper">
|
||||||
|
选择付款方式<text class="iconfont icon-guanbi" @click='close'></text>
|
||||||
|
</view>
|
||||||
|
<view class="item acea-row row-between-wrapper" @click='goPay(item.number || 0 , item.value)'
|
||||||
|
v-for="(item,index) in payMode" :key="index" v-if="item.payStatus==1">
|
||||||
|
<view class="left acea-row row-between-wrapper">
|
||||||
|
<view class="iconfont" :class="item.icon"></view>
|
||||||
|
<view class="text">
|
||||||
|
<view class="name">{{item.name}}</view>
|
||||||
|
<view class="info" v-if="item.number">
|
||||||
|
{{item.title}} <span class="money">￥{{ item.number }}</span>
|
||||||
|
</view>
|
||||||
|
<view class="info" v-else>{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="iconfont icon-xiangyou"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="mask" style="background: none;" @click='close' v-if="pay_close"></view>
|
||||||
|
<view class="alipaysubmit" v-html="formContent"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
orderPays,
|
||||||
|
wechatQueryPayResult,
|
||||||
|
getPayConfig,
|
||||||
|
alipayQueryPayResult
|
||||||
|
} from '@/api/order.js';
|
||||||
|
import {
|
||||||
|
mapGetters
|
||||||
|
} from "vuex";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
pay_close: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
order_id: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
totalPrice: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formContent: '',
|
||||||
|
payChannel: '',
|
||||||
|
openId: '',
|
||||||
|
checkid: '',
|
||||||
|
intervalId: null, // 用于存储定时器的ID
|
||||||
|
//支付方式
|
||||||
|
payMode: [
|
||||||
|
// {
|
||||||
|
// "name": "微信支付",
|
||||||
|
// "icon": "icon-weixin2",
|
||||||
|
// value: 'weixin',
|
||||||
|
// title: '微信快捷支付',
|
||||||
|
// payStatus: 1,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "name": "余额支付",
|
||||||
|
// "icon": "icon-yuezhifu",
|
||||||
|
// value: 'yue',
|
||||||
|
// title: '可用余额:',
|
||||||
|
// payStatus: 1,
|
||||||
|
// number: 0
|
||||||
|
// },
|
||||||
|
// #ifndef MP
|
||||||
|
{
|
||||||
|
"name": "支付宝支付",
|
||||||
|
"icon": "icon-zhifubao",
|
||||||
|
value: 'alipay',
|
||||||
|
title: '支付宝快捷支付',
|
||||||
|
payStatus: 1,
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: mapGetters(['systemPlatform', 'userInfo', 'productType']),
|
||||||
|
created() {
|
||||||
|
// this.alipayQueryPay()
|
||||||
|
this.payConfig();
|
||||||
|
// this.payMode[1].number = this.userInfo.nowMoney;
|
||||||
|
this.importAliPayScript(); // 导入支付宝脚本
|
||||||
|
this.listenMessageFromMiniProgram(); // 监听来自小程序的消息
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 导入 my 对象所需的脚本
|
||||||
|
importAliPayScript() {
|
||||||
|
if (navigator.userAgent.indexOf('AliApp') > -1) {
|
||||||
|
const scriptElement = document.createElement('script');
|
||||||
|
scriptElement.src = 'https://appx/web-view.min.js';
|
||||||
|
document.head.appendChild(scriptElement);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 发送消息给小程序
|
||||||
|
sendMessageToMiniProgram() {
|
||||||
|
my.postMessage({
|
||||||
|
name: "测试支付"
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 监听来自小程序的消息
|
||||||
|
listenMessageFromMiniProgram() {
|
||||||
|
my.onMessage = (e) => {
|
||||||
|
if (e.type == 'authorizeResult') {
|
||||||
|
this.openId = e.data.data.alipaySystemOauthTokenResponse.openId
|
||||||
|
}
|
||||||
|
console.log(e.data.data.alipaySystemOauthTokenResponse, 'aaaa'); // 在这里处理来自小程序的消息
|
||||||
|
};
|
||||||
|
},
|
||||||
|
alipayQueryPay() {
|
||||||
|
|
||||||
|
let id = this.checkid
|
||||||
|
alipayQueryPayResult(id).then(res => {
|
||||||
|
if(res.data==true){
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/users/alipay_returns/alipay_return?id='+id
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
setTimeout(() => {
|
||||||
|
this.alipayQueryPay()
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
if(res.data==null){
|
||||||
|
setTimeout(() => {
|
||||||
|
this.alipayQueryPay()
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// startPolling() {
|
||||||
|
|
||||||
|
// // 开始轮询，设置定时器每隔一段时间执行一次alipayQueryPay方法
|
||||||
|
// this.intervalId = my.setInterval(() => {
|
||||||
|
// this.alipayQueryPay();
|
||||||
|
// console.log('进行了')
|
||||||
|
// }, 5000); // 每隔5秒钟查询一次，您可以根据需要调整时间间隔次，您可以根据需要调整时间间隔
|
||||||
|
// },
|
||||||
|
stopPolling() {
|
||||||
|
// 停止轮询，清除定时器
|
||||||
|
clearInterval(this.intervalId);
|
||||||
|
},
|
||||||
|
// 调用支付宝支付
|
||||||
|
aliPay(id) {
|
||||||
|
|
||||||
|
let that = this
|
||||||
|
console.log(that.order_id, 'idididiid');
|
||||||
|
|
||||||
|
my.tradePay({
|
||||||
|
tradeNO: that.order_id,
|
||||||
|
success: (res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.alipayQueryPay()
|
||||||
|
// my.alert({
|
||||||
|
// content: JSON.stringify(res),
|
||||||
|
// });
|
||||||
|
|
||||||
|
// setTimeout(res => {
|
||||||
|
// that.$emit('onChangeFun', {
|
||||||
|
// action: 'pay_complete'
|
||||||
|
// });
|
||||||
|
// }, 2000)
|
||||||
|
},
|
||||||
|
fail: (error) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
// that.stopPolling()
|
||||||
|
uni.showModal({
|
||||||
|
content: "支付失败",
|
||||||
|
showCancel: false,
|
||||||
|
success: function(res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
//点击确认的操作
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_fail'
|
||||||
|
});
|
||||||
|
} else if (res.cancel) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// console.error('调用 my.tradePay 失败: ', JSON.stringify(error));
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
close: function() {
|
||||||
|
this.$emit('onChangeFun', {
|
||||||
|
action: 'payClose'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
payConfig() {
|
||||||
|
getPayConfig().then(res => {
|
||||||
|
this.payMode[1].payStatus = parseInt(res.data.yuePayStatus) === 1 ? 1 : 2;
|
||||||
|
this.payMode[0].payStatus = parseInt(res.data.payWeixinOpen) === 1 ? 1 : 0;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goPay: function(number, paytype) {
|
||||||
|
let that = this;
|
||||||
|
let goPages = '/pages/order_pay_status/index?order_id=' + that.order_id;
|
||||||
|
if (!that.order_id) return that.$util.Tips({
|
||||||
|
title: '请选择要支付的订单'
|
||||||
|
});
|
||||||
|
if (paytype == 'yue' && parseFloat(number) < parseFloat(that.totalPrice)) return that.$util.Tips({
|
||||||
|
title: '余额不足！'
|
||||||
|
});
|
||||||
|
uni.showLoading({
|
||||||
|
title: '支付中'
|
||||||
|
});
|
||||||
|
// #ifdef H5
|
||||||
|
if (paytype == 'alipay') {
|
||||||
|
that.payChannel = 'alipay';
|
||||||
|
} else if (paytype == 'weixin' && this.$wechat.isWeixin()) {
|
||||||
|
that.payChannel = 'public';
|
||||||
|
} else {
|
||||||
|
that.payChannel = 'weixinh5';
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
if (paytype == 'alipay') {
|
||||||
|
that.payChannel = 'appAliPay';
|
||||||
|
} else if (paytype == 'weixin') {
|
||||||
|
that.payChannel = that.systemPlatform === 'ios' ? 'weixinAppIos' : 'weixinAppAndroid';
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
orderPays({
|
||||||
|
id: that.order_id,
|
||||||
|
openid: that.openId,
|
||||||
|
// orderNo: that.order_id,
|
||||||
|
// // #ifdef MP
|
||||||
|
// payChannel: 'routine',
|
||||||
|
// // #endif
|
||||||
|
// // #ifndef MP
|
||||||
|
// payChannel:that.payChannel,
|
||||||
|
// // #endif
|
||||||
|
// payType: paytype,
|
||||||
|
// scene: that.productType === 'normal' ? 0 : 1177 //下单时小程序的场景值
|
||||||
|
}).then(res => {
|
||||||
|
let jsConfig = res.data.jsConfig;
|
||||||
|
that.order_id = res.data.tradeNo;
|
||||||
|
that.checkid = res.data.orderNo
|
||||||
|
console.log(that.checkid,'that.checkidthat.checkid');
|
||||||
|
switch (res.data.payType) {
|
||||||
|
case 'weixin':
|
||||||
|
that.weixinPay(jsConfig);
|
||||||
|
break;
|
||||||
|
case 'yue':
|
||||||
|
uni.hideLoading();
|
||||||
|
return that.$util.Tips({
|
||||||
|
title: '余额支付成功',
|
||||||
|
icon: 'success'
|
||||||
|
}, () => {
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_complete'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'weixinh5':
|
||||||
|
uni.hideLoading();
|
||||||
|
location.replace(jsConfig.mwebUrl + '&redirect_url=' + window.location.protocol +
|
||||||
|
'//' + window.location.host + goPages + '&status=1');
|
||||||
|
return that.$util.Tips({
|
||||||
|
title: "支付中",
|
||||||
|
icon: 'success'
|
||||||
|
}, () => {
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_complete'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'alipay':
|
||||||
|
this.aliPay(that.order_id)
|
||||||
|
// uni.hideLoading();
|
||||||
|
//#ifdef H5
|
||||||
|
// if (this.$wechat.isWeixin()) {
|
||||||
|
// //微信公众号内支付
|
||||||
|
// } else {
|
||||||
|
// //h5支付
|
||||||
|
// uni.hideLoading();
|
||||||
|
// that.formContent = res.data.alipayRequest;
|
||||||
|
// uni.setStorage({
|
||||||
|
// key: 'orderNo',
|
||||||
|
// data: that.order_id
|
||||||
|
// });
|
||||||
|
// that.$nextTick(() => {
|
||||||
|
// document.forms['punchout_form'].submit();
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
//#endif
|
||||||
|
//#ifdef MP-ALIPAY
|
||||||
|
|
||||||
|
|
||||||
|
//#endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
let alipayRequest = res.data.alipayRequest;
|
||||||
|
uni.requestPayment({
|
||||||
|
provider: 'alipay',
|
||||||
|
orderInfo: alipayRequest,
|
||||||
|
success: (e) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "支付成功"
|
||||||
|
})
|
||||||
|
setTimeout(res => {
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_complete'
|
||||||
|
});
|
||||||
|
}, 2000)
|
||||||
|
},
|
||||||
|
fail: (e) => {
|
||||||
|
uni.showModal({
|
||||||
|
content: "支付失败",
|
||||||
|
showCancel: false,
|
||||||
|
success: function(res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
//点击确认的操作
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_fail'
|
||||||
|
});
|
||||||
|
} else if (res.cancel) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
uni.hideLoading();
|
||||||
|
return that.$util.Tips({
|
||||||
|
title: err
|
||||||
|
}, () => {
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_fail'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
weixinPay(jsConfig) {
|
||||||
|
let that = this;
|
||||||
|
// #ifdef MP
|
||||||
|
uni.requestOrderPayment({
|
||||||
|
timeStamp: jsConfig.timeStamp,
|
||||||
|
nonceStr: jsConfig.nonceStr,
|
||||||
|
package: jsConfig.packages,
|
||||||
|
signType: jsConfig.signType,
|
||||||
|
paySign: jsConfig.paySign,
|
||||||
|
ticket: jsConfig.ticket,
|
||||||
|
success: function(ress) {
|
||||||
|
uni.hideLoading();
|
||||||
|
wechatQueryPayResult(that.order_id).then(res => {
|
||||||
|
uni.hideLoading();
|
||||||
|
return that.$util.Tips({
|
||||||
|
title: "支付成功",
|
||||||
|
icon: 'success'
|
||||||
|
}, () => {
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_complete'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).cache(err => {
|
||||||
|
uni.hideLoading();
|
||||||
|
return that.$util.Tips({
|
||||||
|
title: err
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: function(e) {
|
||||||
|
uni.hideLoading();
|
||||||
|
return that.$util.Tips({
|
||||||
|
title: '取消支付'
|
||||||
|
}, () => {
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_fail'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
complete: function(e) {
|
||||||
|
uni.hideLoading();
|
||||||
|
if (e.errMsg == 'requestPayment:cancel') return that.$util
|
||||||
|
.Tips({
|
||||||
|
title: '取消支付'
|
||||||
|
}, () => {
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_fail'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
let datas = {
|
||||||
|
timestamp: jsConfig.timeStamp,
|
||||||
|
nonceStr: jsConfig.nonceStr,
|
||||||
|
package: jsConfig.packages,
|
||||||
|
signType: jsConfig.signType,
|
||||||
|
paySign: jsConfig.paySign
|
||||||
|
};
|
||||||
|
that.$wechat.pay(datas).then(res => {
|
||||||
|
if (res.errMsg == 'chooseWXPay:cancel') {
|
||||||
|
uni.hideLoading();
|
||||||
|
return that.$util.Tips({
|
||||||
|
title: '支付失败'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
wechatQueryPayResult(that.order_id).then(res => {
|
||||||
|
uni.hideLoading();
|
||||||
|
return that.$util.Tips({
|
||||||
|
title: "支付成功",
|
||||||
|
icon: 'success'
|
||||||
|
}, () => {
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_complete'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).cache(err => {
|
||||||
|
uni.hideLoading();
|
||||||
|
return that.$util.Tips({
|
||||||
|
title: err
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}).cache(errW => {
|
||||||
|
uni.hideLoading();
|
||||||
|
return that.$util.Tips({
|
||||||
|
title: errW
|
||||||
|
});
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
uni.requestPayment({
|
||||||
|
provider: 'wxpay',
|
||||||
|
orderInfo: {
|
||||||
|
"appid": jsConfig.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
|
||||||
|
"noncestr": jsConfig.nonceStr, // 随机字符串
|
||||||
|
"package": "Sign=WXPay", // 固定值
|
||||||
|
"partnerid": jsConfig.partnerid, // 微信支付商户号
|
||||||
|
"prepayid": jsConfig.packages, // 统一下单订单号
|
||||||
|
"timestamp": Number(jsConfig.timeStamp), // 时间戳（单位：秒）
|
||||||
|
"sign": this.systemPlatform === 'ios' ? 'MD5' : jsConfig
|
||||||
|
.paySign // 签名，这里用的 MD5 签名
|
||||||
|
}, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
|
||||||
|
success: (e) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
let url = '/pages/order_pay_status/index?order_id=' + that.order_id;
|
||||||
|
uni.showToast({
|
||||||
|
title: "支付成功"
|
||||||
|
})
|
||||||
|
setTimeout(res => {
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_complete'
|
||||||
|
});
|
||||||
|
}, 2000)
|
||||||
|
},
|
||||||
|
fail: (e) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showModal({
|
||||||
|
content: "支付失败",
|
||||||
|
showCancel: false,
|
||||||
|
success: function(res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
that.$emit('onChangeFun', {
|
||||||
|
action: 'pay_fail'
|
||||||
|
});
|
||||||
|
} else if (res.cancel) {
|
||||||
|
console.log('用户点击取消');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.payment {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
background-color: #fff;
|
||||||
|
padding-bottom: 60rpx;
|
||||||
|
z-index: 99;
|
||||||
|
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
||||||
|
transform: translate3d(0, 100%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment.on {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .title {
|
||||||
|
text-align: center;
|
||||||
|
height: 123rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #282828;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-right: 30rpx;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .title .iconfont {
|
||||||
|
position: absolute;
|
||||||
|
right: 30rpx;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 43rpx;
|
||||||
|
color: #8a8a8a;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item {
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
height: 130rpx;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
padding-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item .left {
|
||||||
|
width: 610rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item .left .text {
|
||||||
|
width: 540rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item .left .text .name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #282828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item .left .text .info {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item .left .text .info .money {
|
||||||
|
color: #ff9900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item .left .iconfont {
|
||||||
|
font-size: 45rpx;
|
||||||
|
color: #09bb07;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item .left .iconfont.icon-zhifubao {
|
||||||
|
color: #00aaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item .left .iconfont.icon-yuezhifu {
|
||||||
|
color: #ff9900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item .left .iconfont.icon-yuezhifu1 {
|
||||||
|
color: #eb6623;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment .item .iconfont {
|
||||||
|
font-size: 0.3rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
242
pages/users/alipay_returns/alipay_return.vue
Normal file
242
pages/users/alipay_returns/alipay_return.vue
Normal file
|
|
@ -0,0 +1,242 @@
|
||||||
|
<template>
|
||||||
|
<view :data-theme="theme">
|
||||||
|
<view class='payment-status'>
|
||||||
|
<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
|
||||||
|
<view class='iconfont icons icon-duihao2 bg_color'
|
||||||
|
v-if="order_pay_info.paid === 1"></view>
|
||||||
|
<view v-if="order_pay_info.paid === 2" class='iconfont icons icon-iconfontguanbi'></view>
|
||||||
|
<!-- 失败时：订单支付失败 -->
|
||||||
|
<view class='status'>{{payResult}}</view>
|
||||||
|
<view class='wrapper'>
|
||||||
|
<view class='item acea-row row-between-wrapper'>
|
||||||
|
<view>订单编号</view>
|
||||||
|
<view class='itemCom'>{{orderId}}</view>
|
||||||
|
</view>
|
||||||
|
<view class='item acea-row row-between-wrapper'>
|
||||||
|
<view>下单时间</view>
|
||||||
|
<view class='itemCom'>{{order_pay_info.createTime?order_pay_info.createTime:'-'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class='item acea-row row-between-wrapper'>
|
||||||
|
<view>支付方式</view>
|
||||||
|
<view class='itemCom'>支付宝支付</view>
|
||||||
|
</view>
|
||||||
|
<view class='item acea-row row-between-wrapper'>
|
||||||
|
<view>支付金额</view>
|
||||||
|
<view class='itemCom'>{{order_pay_info.payPrice}}</view>
|
||||||
|
</view>
|
||||||
|
<!--失败时加上这个 -->
|
||||||
|
<view class='item acea-row row-between-wrapper'
|
||||||
|
v-if="order_pay_info.paid === 2">
|
||||||
|
<view>失败原因</view>
|
||||||
|
<view class='itemCom'>{{msg}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--失败时： 重新购买 -->
|
||||||
|
<!-- <view @tap="goOrderDetails">
|
||||||
|
<button formType="submit" class='returnBnt bg_color' hover-class='none'>查看订单</button>
|
||||||
|
</view> -->
|
||||||
|
<button @click="goIndex" class='returnBnt cart-color' formType="submit" hover-class='none'>返回首页</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getOrderDetail,alipayQueryPayResult} from '@/api/order.js';
|
||||||
|
let app = getApp();
|
||||||
|
export default{
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
orderId: '',
|
||||||
|
payPrice:'',
|
||||||
|
order_pay_info: {
|
||||||
|
paid: 0,
|
||||||
|
_status: {}
|
||||||
|
},
|
||||||
|
isAuto: false, //没有授权的不会自动授权
|
||||||
|
isShowAuth: false, //是否隐藏授权
|
||||||
|
status: 0,
|
||||||
|
msg: '',
|
||||||
|
payResult: '账单支付成功',
|
||||||
|
payTime:'',
|
||||||
|
theme:app.globalData.theme,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(e){
|
||||||
|
console.log(e,'order42554170683809301198448order42554170683809301198448order42554170683809301198448');
|
||||||
|
this.orderId = e.id; //返回的订单号
|
||||||
|
this.getOrderPayInfo();
|
||||||
|
// // #ifdef H5
|
||||||
|
// var url = window.location.search;
|
||||||
|
// if(url){
|
||||||
|
// var theRequest = new Object();
|
||||||
|
// if (url.indexOf("?") != -1) {
|
||||||
|
// var str = url.substr(1);
|
||||||
|
// var strs = str.split("&");
|
||||||
|
// for (var i = 0; i < strs.length; i++) {
|
||||||
|
// theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// // this.orderId = theRequest.out_trade_no; //返回的订单号
|
||||||
|
|
||||||
|
// }else{
|
||||||
|
// let that = this;
|
||||||
|
// uni.getStorage({
|
||||||
|
// key: 'orderNo',
|
||||||
|
// success: function (res) {
|
||||||
|
// that.orderId = res.data; //如果是支付宝中途放弃支付跳转到这个页面，就从缓存读取订单号查询订单详情和支付结果
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// that.getOrderPayInfo();
|
||||||
|
// },200)
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// // #endif
|
||||||
|
|
||||||
|
// // #ifdef APP-PLUS
|
||||||
|
// console.log(e);
|
||||||
|
// this.orderId = e.out_trade_no;
|
||||||
|
// this.getOrderPayInfo();
|
||||||
|
// // #endif
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
getOrderPayInfo: function() {
|
||||||
|
let that = this;
|
||||||
|
uni.showLoading({
|
||||||
|
title: '正在加载中'
|
||||||
|
});
|
||||||
|
getOrderDetail(that.orderId).then(res => {
|
||||||
|
that.$set(that, 'order_pay_info', res.data);
|
||||||
|
if(res.data.paid === false){
|
||||||
|
that.alipayQueryPay();
|
||||||
|
}
|
||||||
|
uni.hideLoading();
|
||||||
|
}).catch(err => {
|
||||||
|
uni.hideLoading();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
alipayQueryPay() {
|
||||||
|
alipayQueryPayResult(this.orderId).then(res => {
|
||||||
|
this.payResult = '支付成功';
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: '支付成功'
|
||||||
|
});
|
||||||
|
this.order_pay_info.paid = 1;
|
||||||
|
uni.hideLoading();
|
||||||
|
}).catch(err => {
|
||||||
|
this.order_pay_info.paid = 2;
|
||||||
|
this.payResult = err;
|
||||||
|
this.msg = err;
|
||||||
|
uni.hideLoading();
|
||||||
|
return this.$util.Tips({
|
||||||
|
title: err
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goOrderDetails(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/order_details/index?order_id=' + this.orderId
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goIndex(){
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.icon-iconfontguanbi {
|
||||||
|
background-color: #999 !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
.bg_color{
|
||||||
|
@include main_bg_color(theme);
|
||||||
|
}
|
||||||
|
.cart_color{
|
||||||
|
@include main_color(theme);
|
||||||
|
@include coupons_border_color(theme);
|
||||||
|
}
|
||||||
|
.payment-status {
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 195rpx 30rpx 0 30rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 1rpx 0 28rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status .icons {
|
||||||
|
font-size: 70rpx;
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 140rpx;
|
||||||
|
text-shadow: 0px 4px 0px #df1e14;
|
||||||
|
border: 6rpx solid #f5f5f5;
|
||||||
|
margin: -76rpx auto 0 auto;
|
||||||
|
background-color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status .iconfont {
|
||||||
|
font-size: 70rpx;
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 140rpx;
|
||||||
|
text-shadow: 0px 4px 0px #df1e14;
|
||||||
|
border: 6rpx solid #f5f5f5;
|
||||||
|
margin: -76rpx auto 0 auto;
|
||||||
|
background-color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status .iconfont.fail {
|
||||||
|
text-shadow: 0px 4px 0px #7a7a7a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status .status {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin: 25rpx 0 37rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status .wrapper {
|
||||||
|
border: 1rpx solid #eee;
|
||||||
|
margin: 0 30rpx 47rpx 30rpx;
|
||||||
|
padding: 35rpx 0;
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status .wrapper .item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #282828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status .wrapper .item~.item {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status .wrapper .item .itemCom {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status .returnBnt {
|
||||||
|
width: 630rpx;
|
||||||
|
height: 86rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 86rpx;
|
||||||
|
margin: 0 auto 20rpx auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
.cart-color {
|
||||||
|
@include main_color(theme);
|
||||||
|
@include coupons_border_color(theme);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user