目录
(1)订单详情数据加载
在orderPay.vue中:
<p>
订单详情
<em class="icon-down up" :class="{'up': showDetail}" @click="showDetail=!showDetail"></em> <!--控制订单详情是否展示-->
</p>
<script>
export default {
data() {
return {
orderId: this.$route.query.orderNo,
addressInfo: "", //收货人地址
orderDetail: [], //订单详情,包含商品列表
showDetail: false, //是否显示订单详情
payment:0
};
},
mounted() {
this.getOrderDetail();
},
methods: {
getOrderDetail() {
this.axios.get(`/orders/${this.orderId}`).then(res => {
let item = res.shippingVo;
this.addressInfo = `${item.receiverName} ${item.receiverMobile} ${item.receiverProvince} ${item.receiverCity} ${item.recevierDistrict} ${item.receiverAddress}`;
this.orderDetail = res.orderItemVoList;
this.payment:0,//订单总金额
});
}
}
};
</script>
(2)支付宝支付对接
在orderPay页面中点击 支付宝支付 后,页面跳转到支付宝支付页面alipay。
- 在orderPay.vue中:
<!--省略了很多代码-->
<div class="pay-way">
<p>支付平台</p>
<div class="pay pay-ali" :class="{'checked' : payType == 1}" @click="paySubmit(1)"></div>
<div class="pay pay-wechat" :class="{'checked': payType == 2}" @click="paySubmit(2)"></div>
</div>
<script>
export default {
data() {
return {
payType: '', //支付类型
};
},
methods: {
paySubmit(payType) {
if (payType == 1) {
window.open("/#/order/alipay?orderId =" + this.orderId, "_blank");
}
}
}
};
</script>
- 在alipay.vue中:
<template>
<div class="ali-pay">
<div class="form" v-html="coutent"></div>
</div>
</template>
<script>
import Loading from './../components/Loading';
export default {
name: 'alipay',
data() {
return {
orderId: this.$route.query.orderNo,
content: '' //支付宝返回给前端的源码
}
},
components: {
Loading
},
mounted() {
this.paySubumit();
},
methods: {
paySubumit() {
this.axios.post('/pay', {
orderId: this.orderId,
orderName: 'Vue高仿小米商城',
amount: 0.01, //单位元
payType: 1 //1支付宝, 2微信
}).then((res) => {
this.content = res.coutent;
setTimeout(() => {
document.form[0].submit();
}, 100)
})
}
}
}
</script>
(3)微信支付对接
点击 微信支付 后,会出现微信支付图片弹窗。其中的二维码是通过qrcode插件将后端返回的字符串转换来的 。
- 在orderPay.vue中:
<scan-pay-code v-if="showPay" @click="closePayModal" :img="payImg"></scan-pay-code>
<script>
import ScanPayCode from "./../components/ScanPayCode";
import QRCode from 'qrcode';
export default {
data() {
return {
showPay: false, //是否显示微信支付弹框
payType: "" //支付类型
payImg: '' //微信支付的二维码地址
};
},
components: {
ScanPayCode
},
methods: {
// 关闭微信弹框
closePayModal() {
this.showPay = false;
},
paySubmit(payType) {
if (payType == 1) {
window.open("/#/order/alipay?orderId =" + this.orderId, "_blank");
} else {
this.axios.post('/pay', {
orderId:this.orderId,
orderName: 'Vue高仿小米商城',
amount: 0.01,
payType: 2
}).then((res) => {
QRCode.toDataURL(res.content).then(url => {
this.showPay = true;
this.payImg = url;
}).catch( () => {
this.$message.error("微信二维码生成失败")
})
})
}
}
}
};
</script>
- 在ScanPayCode.vue中:
<template>
<div class="scan">
<div class="mask"></div>
<div class="item-wrap">
<div class="img-scan"></div>
<div class="img-pay">
<div class="title">微信支付<em @click="close"></em></div>
<div class="qrcode"><img :src="img"></div>
<div class="tip">
<p>请使用<span class="theme-color">微信</span>扫一扫</p>
<p>二维码完成支付</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
name:'scan-pay-code',
props:['img'],
methods:{
close(){
this.$emit('close');
}
}
}
</script>
(4)微信支付转态轮询
在支付弹窗出现后,可能出现两种情况,一种是用户没有完成支付就关闭支付弹窗。另一种是用户支付完成,自动跳转到订单列表。
为了防止由于网络延时导致用户支付完成但未自动跳转,而用户又把支付弹窗关闭了,所以添加一个支付确认弹框,在支付弹窗关闭后会出现支付确认弹框,让用户手动选择是否完成支付,如果选择用户支付确认弹框中 “查看订单” (表示自己已经完成支付)后会查询是否真的已支付,如果已支付就跳转到订单列表。
另外为了用户体验,添加订单轮询,实时获取当前用户支付状态,在用户支付完成后跳转到订单列表,而无需手动关闭弹窗和再次确认。
- 在orderPay.vue中:
<modal
title="支付确认"
btnType="3"
:showModal="showPayModal"
sureText="查看订单"
cancelText="未支付"
@cancel="showPayModal=false"
@submit="goOrderList"
>
<template v-slot:body>
<p>您确认是否完成支付?</p>
</template>
</modal>
<script>
import Modal from './../components/Modal'
export default{
name:'order-pay',
data(){
return {
showPayModal:false,//是否显示二次支付确认弹框
payment:0,//订单总金额
T:''//定时器ID
}
},
components:{
Modal
},
methods:{
paySubmit(payType){
if(payType == 1){
window.open('/#/order/alipay?orderId='+this.orderId,'_blank');
}else{
this.axios.post('/pay',{
orderId:this.orderId,
orderName:'Vue高仿小米商城',
amount:0.01,//单位元
payType:2 //1支付宝,2微信
}).then((res)=>{
QRCode.toDataURL(res.content)
.then(url => {
this.showPay = true;
this.payImg = url;
this.loopOrderState();
})
.catch(() => {
this.$message.error('微信二维码生成失败,请稍后重试');
})
})
}
},
// 关闭微信弹框
closePayModal(){
this.showPay = false;
this.showPayModal = true;
clearInterval(this.T);
},
// 轮询当前订单支付状态
loopOrderState(){
this.T = setInterval(()=>{
this.axios.get(`/orders/${this.orderId}`).then((res)=>{
if(res.status == 20){
clearInterval(this.T);
this.goOrderList();
}
})
},1000);
},
goOrderList(){
this.$router.push('/order/list');
}
}
}
</script>