mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-01 17:56:39 +08:00
9f7ce41eac
1.添加PC端订单支付 弹出支付二维码 2.添加确认订单的面包屑 从购物车和其他方向进去的不同显示 3.修改移动端按钮和合计样式显示问题 4.添加购物车的全选功能 5.添加支付页面面包屑功能 6.修改订单详情页 添加面包屑和分割线 7.添加购物车数量编辑的保存
470 lines
11 KiB
Vue
470 lines
11 KiB
Vue
<template>
|
||
<div class="page_modules">
|
||
<Myheader></Myheader>
|
||
<div class="rc-top"></div>
|
||
<tabs :crumbs="crumbs"></tabs>
|
||
<div class="rc_contline"></div>
|
||
<div class="cont_modules">
|
||
<el-row class="order_info">
|
||
<el-col :span="6" class="ph_hidden">
|
||
<ul class="li_inline">
|
||
<li class="sucess_img"><img src="../../assets/image/usersucess.png" alt="" /></li>
|
||
<li class="ready">
|
||
<p>订单提交成功</p>
|
||
<p>等待付款</p>
|
||
</li>
|
||
</ul>
|
||
</el-col>
|
||
<el-col :span="12" class="ph_hidden"> </el-col>
|
||
<el-col :span="6" class="ready_right">
|
||
<div class="inline_right">
|
||
<p>付款金额:</p>
|
||
<p class="price" v-if="userPayData.userprice">￥{{ userPayData.userprice }}</p>
|
||
</div>
|
||
<div class="inline_right">
|
||
<p>收货信息:</p>
|
||
<p>{{ userPayData.userinformation }}</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="rc_contline"></div>
|
||
<div class="cont_modules"><div class="pay_title color_red">请选择支付方式</div></div>
|
||
<div class="rc_contline"></div>
|
||
<div class="cont_modules">
|
||
<div class="pay_list">
|
||
<ul>
|
||
<li
|
||
class="pay_item"
|
||
v-for="(item, index) in userpaystype"
|
||
:key="index"
|
||
@click="selectGoods(item, index)"
|
||
:class="activeIndex == index ? 'active' : ''"
|
||
v-if="!disableAlipay || (disableAlipay && item.type != 'alipay')"
|
||
>
|
||
<div style="display:flex;">
|
||
<img :src="item.payimage" alt="" />
|
||
<span>{{ item.paytype }}支付</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payconfirm rc-padding-y--md" v-if="disableQrcode"><span class="ts-standard-btn ts-standard-btn--two center" @click="goPayH5">确认支付</span></div>
|
||
|
||
<div class="paycord" v-if="!disableQrcode">
|
||
<div class="qrcode"><vue-qr :text="qrtext" :size="260"></vue-qr></div>
|
||
<span>{{ paytype }}扫一扫立即支付</span>
|
||
</div>
|
||
|
||
<el-dialog :visible.sync="dialogSuccess" @close="closeDialogSuccess">
|
||
<div class="tc dl_cont">
|
||
<div class="dl_img"><img src="../../assets/image/usersucess.png" alt="" /></div>
|
||
<h3 class="title">支付成功</h3>
|
||
<p>您的商品我们正在抓紧打包，请耐心等候！</p>
|
||
<div class="rc-md-up">
|
||
<div class="line_dashed"></div>
|
||
<div class="userer">
|
||
<div class="qrcode"><img src="/images/qrcode-wxgroup.jpg" /></div>
|
||
<p>微信扫一扫，识别二维码</p>
|
||
<p class="tips">加入社群0元试用商品随单发放</p>
|
||
</div>
|
||
</div>
|
||
<div class="rc-md-down">
|
||
<p class="tips">加入社群0元试用商品随单发放</p>
|
||
<div class="ts-standard-btn center rc-margin-y--lg" @click="toMiniShop">点击加入社群</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :visible.sync="dialogFail" @close="closeDialogFail">
|
||
<div class="tc dl_cont">
|
||
<div class="dl_img"><img src="../../assets/pay/fail.png" alt="" /></div>
|
||
<h3 class="title">支付失败</h3>
|
||
<p>请返回商品结算页面重新支付</p>
|
||
</div>
|
||
</el-dialog>
|
||
<div style="display:none" ref="h5SubmitForm"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from '~/components/header.vue';
|
||
import tabs from '@/components/tabs.vue';
|
||
import vueQr from 'vue-qr';
|
||
import { mapMutations } from 'vuex';
|
||
import { mapState } from 'vuex';
|
||
import { generateOrderAlipay, updateOrderWX, monitorOrderNotify, repayOrde } from '../../ajax/getData';
|
||
import util from '@/ajax/util';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
util,
|
||
activeIndex: 0,
|
||
paymentTimer: undefined,
|
||
isSucess: false,
|
||
h5PayUrl: '',
|
||
dialogSuccess: false,
|
||
paytype: '微信',
|
||
userpaystype: [
|
||
{
|
||
paytype: '微信',
|
||
payimage: require('../../assets/pay/wx.png'),
|
||
type: 'wechat'
|
||
},
|
||
|
||
{
|
||
paytype: '支付宝',
|
||
payimage: require('../../assets/pay/zfb.png'),
|
||
type: 'alipay'
|
||
}
|
||
],
|
||
dialogFail: false,
|
||
userPayData: {},
|
||
qrtext: '',
|
||
userData: '',
|
||
disableAlipay: true,
|
||
disableQrcode: false,
|
||
crumbs: [
|
||
|
||
{
|
||
path: '/personal/settlement/'
|
||
},
|
||
{
|
||
title : '订单支付'
|
||
},
|
||
]
|
||
};
|
||
},
|
||
asyncData({app}){
|
||
const { type = 'cart', list = [{}], pathQuery = {} } = app.router.history.current.query;
|
||
let query = typeof pathQuery == 'string' ? JSON.parse(pathQuery) : pathQuery;
|
||
return {
|
||
crumbs : [
|
||
{
|
||
path: '/personal/settlement/',
|
||
query,
|
||
},
|
||
{
|
||
title : '订单支付'
|
||
},
|
||
]
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {
|
||
let isWx = this.util.isWX();
|
||
if (!isWx) {
|
||
//this.disableAlipay = false; //Disabled due to 0 deposit quota
|
||
}
|
||
let stype = this.$route.query.stype;
|
||
this.userPayData = JSON.parse(this.$route.query.userPayData);
|
||
this.defaultHandlePayment();
|
||
},
|
||
methods: {
|
||
...mapMutations(['checkIsLogin']),
|
||
detectQrcodeDisplay() {
|
||
let payType = this.util.pickPaytype();
|
||
switch (payType) {
|
||
case 1:
|
||
this.disableQrcode = false;
|
||
break;
|
||
case 2:
|
||
this.disableQrcode = true;
|
||
break;
|
||
case 3:
|
||
//TODO raise WX jsapi pay
|
||
break;
|
||
}
|
||
},
|
||
defaultHandlePayment() {
|
||
let isMobile = this.util.isMobile();
|
||
let isWx = this.util.isWX();
|
||
let payType = this.util.pickPaytype();
|
||
if (!this.userPayData.wxPay || this.userPayData.wxPay.length < 4) throw new Error('订单信息错误，请删除商品后再次购买');
|
||
this.detectQrcodeDisplay();
|
||
//Dictionary : 1: scan qrcode, 2:redirect 3: raise local app
|
||
switch (payType) {
|
||
case 1:
|
||
this.qrtext = this.userPayData.wxPay;
|
||
this.updateOrderNotification();
|
||
break;
|
||
case 2:
|
||
this.$refs['h5SubmitForm'].innerHTML = '<form action="' + this.userPayData.wxPay + '" method="post"><form>';
|
||
break;
|
||
case 3:
|
||
//TODO raise WX jsapi pay
|
||
break;
|
||
}
|
||
this.checkIsLogin();
|
||
// let user = this.$store.state.userInfo;
|
||
let memberId = '';
|
||
if (this.userInfo) {
|
||
memberId = this.userInfo.id;
|
||
}
|
||
_hmt.push([
|
||
'_trackCustomEvent',
|
||
'payment',
|
||
{
|
||
member_id: memberId,
|
||
payType: payType,
|
||
product_amount: this.userPayData.userprice
|
||
}
|
||
]);
|
||
},
|
||
goPayH5() {
|
||
if (this.userPayData.wxPay) {
|
||
//this.$refs["h5SubmitForm"].action="http://47.96.75.242:10086/royalcanin/royalcanin/redirectUrlWXH5";
|
||
//this.$refs["h5SubmitForm"].action=this.userPayData.wxPay;
|
||
this.$refs['h5SubmitForm'].children[0].submit();
|
||
//window.location.href=this.userPayData.wxPay;
|
||
//this.disableQrcode=true;
|
||
} else {
|
||
throw new Error('订单信息错误，请删除商品后再次购买');
|
||
}
|
||
},
|
||
closeDialogSuccess() {
|
||
this.qrtext = '';
|
||
this.$router.push({
|
||
path: '/myorder/usertion',
|
||
query: {
|
||
stype: 1,
|
||
orderNumber: this.userPayData.orderId
|
||
}
|
||
});
|
||
},
|
||
closeDialogFail() {
|
||
this.qrtext = '';
|
||
// this.$router.push({
|
||
// path: "/personal/useraddress",
|
||
// });
|
||
},
|
||
toMiniShop() {
|
||
_hmt.push([
|
||
'_trackCustomEvent',
|
||
'jump_to_crmMiniApp',
|
||
{
|
||
type: 'finish_payment'
|
||
}
|
||
]);
|
||
setTimeout(function() {
|
||
window.location.href = 'https://miniapp-product.royalcanin.com.cn/rcmini2020/admin/Voucher/urlRedirect.html';
|
||
}, 800);
|
||
},
|
||
async selectGoods(item, index) {
|
||
this.activeIndex = index;
|
||
this.paytype = item.paytype;
|
||
if (index == 1) {
|
||
//支付宝
|
||
let isMobile = this.util.isMobile();
|
||
isMobile = isMobile ? 2 : 1;
|
||
let res = await generateOrderAlipay(this.userPayData.orderId, isMobile);
|
||
if (res.success) {
|
||
this.disableQrcode = true;
|
||
let virtualForm = res.data;
|
||
virtualForm = virtualForm.substr(0, virtualForm.indexOf('</form>') + 7);
|
||
this.$refs['h5SubmitForm'].innerHTML = virtualForm;
|
||
}
|
||
} else {
|
||
this.userPayData = JSON.parse(this.$route.query.userPayData);
|
||
this.qrtext = this.userPayData.wxPay;
|
||
this.$refs['h5SubmitForm'].innerHTML = '<form method="get" action="' + this.userPayData.wxPay + '"></form>';
|
||
this.detectQrcodeDisplay();
|
||
}
|
||
},
|
||
//支付监听
|
||
|
||
async updateOrderNotification() {
|
||
let res = await monitorOrderNotify(this.userPayData.orderId);
|
||
if (res.success) {
|
||
this.qrtext = '成功加入群的二维码';
|
||
this.dialogSuccess = true;
|
||
// let user = this.$store.state.userInfo;
|
||
let memberId = '';
|
||
if (this.userInfo) {
|
||
memberId = this.userInfo.id;
|
||
}
|
||
// if (user) memberId = user.data.id;
|
||
_hmt.push([
|
||
'_trackCustomEvent',
|
||
'payment_finished',
|
||
{
|
||
member_id: memberId,
|
||
payType: 'native',
|
||
product_amount: this.userPayData.userprice
|
||
}
|
||
]);
|
||
} else if (res.fail) {
|
||
this.dialogFail = true;
|
||
} else {
|
||
let _self = this;
|
||
this.paymentTimer = setTimeout(function() {
|
||
_self.updateOrderNotification();
|
||
}, 5000);
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
Myheader,
|
||
tabs,
|
||
vueQr
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
userInfo: state => state.user.userInfo
|
||
})
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.rc-top {
|
||
margin-top: 65px;
|
||
}
|
||
@media screen and (max-width: 768px){
|
||
.rc-top {
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
|
||
.sucess_img {
|
||
width: 96px;
|
||
height: 96px;
|
||
margin-right: 10px;
|
||
}
|
||
.order_info {
|
||
padding: 10px 0;
|
||
}
|
||
.info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.ready {
|
||
font-size: 20px;
|
||
color: #e2001a;
|
||
}
|
||
.ready_right {
|
||
line-height: 200%;
|
||
padding-top: 8px;
|
||
}
|
||
.price {
|
||
font-size: 20px;
|
||
color: #e2001a;
|
||
}
|
||
.pay_title {
|
||
font-size: 26px;
|
||
padding: 26px 0;
|
||
border-bottom: 1px solid #d7d7d7;
|
||
}
|
||
.pay_list {
|
||
padding: 20px 0;
|
||
.pay_item {
|
||
float: left;
|
||
margin-right: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
border: 1px solid #333333;
|
||
padding: 5px 20px;
|
||
cursor: pointer;
|
||
&.active {
|
||
border: 1px solid #e2001a;
|
||
color: #e2001a;
|
||
}
|
||
img {
|
||
margin-right: 5px;
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
&::after {
|
||
content: '';
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
}
|
||
.paycord {
|
||
padding: 10px;
|
||
text-align: center;
|
||
.qrcode {
|
||
margin: 0 auto 10px;
|
||
width: 260px;
|
||
height: 260px;
|
||
}
|
||
}
|
||
.dl_width {
|
||
width: 440px;
|
||
}
|
||
.dl_cont {
|
||
color: #333;
|
||
margin-top: -10px;
|
||
.title {
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
padding-bottom: 10px;
|
||
}
|
||
.line_dashed {
|
||
border-bottom: 2px dashed #999999;
|
||
margin: 10px 0;
|
||
}
|
||
.dl_img {
|
||
img {
|
||
width: 90px;
|
||
height: 90px;
|
||
margin: 0 auto;
|
||
}
|
||
padding: 0px 0 20px;
|
||
}
|
||
.userer {
|
||
img {
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
.tips {
|
||
color: #e2001a;
|
||
margin-top: 30px;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.payconfirm {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.ph_hidden {
|
||
display: none;
|
||
}
|
||
.ready_right {
|
||
width: 100%;
|
||
padding: 10px;
|
||
}
|
||
.pay_title {
|
||
padding: 10px;
|
||
}
|
||
.pay_list {
|
||
padding: 0;
|
||
.pay_item {
|
||
float: none;
|
||
border: none;
|
||
border-bottom: 1px solid #d7d7d7;
|
||
height: 50px;
|
||
margin-right: 0;
|
||
align-items: center;
|
||
justify-content: left;
|
||
justify-content: left;
|
||
&.active {
|
||
border: none;
|
||
|
||
border-bottom: 4px solid #e2001a;
|
||
}
|
||
}
|
||
}
|
||
.paycord {
|
||
//display: none;
|
||
}
|
||
}
|
||
</style>
|