<template> <div> <mt-header fixed title="支付訂單"> <mt-button icon="back" slot="left" onclick="history.go(-1)"></mt-button> </mt-header> <div class="page"> <div class="icon-box"> <img src="./imgs/money.png" alt="" class="icon"> <div class="hint-tlt">等待付款</div> </div> <div class="hint-txt">訂單已提交,請在點擊確認支付。</div> <div class="money-box">訂單金額:¥ {{weixinPayMsg.orderPrice}}</div> <div class="line"></div> <div class="pay-txt">選擇支付方式</div> <div class="payType" v-if="this.payEnv != 'weixin'"> <div class="payType-l"> <img src="./imgs/icon-zhifubao.png" alt="" class="payIcon"> <div>支付寶支付</div> </div> <img src="./imgs/iconxh_gy_elect.png" alt="" v-if="payType==1" class="typeIcon"> <img src="./imgs/iconxh_gy_nomal.png" alt="" v-else class="typeIcon" @click="payChoice(1)"> </div> <div class="payType" v-if="this.payEnv != 'alipay'"> <div class="payType-l"> <img src="./imgs/icon-weixin.png" alt="" class="payIcon"> <div>微信支付</div> </div> <img src="./imgs/iconxh_gy_elect.png" alt="" v-if="payType==2" class="typeIcon"> <img src="./imgs/iconxh_gy_nomal.png" alt="" v-else class="typeIcon" @click="payChoice(2)"> </div> <div class="goPays" :class="bgColor?'': 'huisi'" @click="goPays">確認支付</div> </div> </div> </template> <script> import { Toast } from 'mint-ui'; import ajax from '@/utils/ajax'; // import doctorAjax from '@/utils/doctorAjax'; import { getQueryString } from '@/utils/index'; import wxjs from '@/utils/wxjsInterface'; export default { data: function () { return { spbill_create_ip: '', // ip bgColor: true, payType: 1, // 1:支付寶支付,2:微信支付 payEnv: 'others', // 判斷微信還是支付寶或者其他瀏覽器 wxopenid: '', // 支付訂單信息 weixinPayMsg: { orderId: '', // 訂單號 orderPrice: '', // 付款金額 Category: '', // 商品:product 處方:prescription, 脈診儀:jinmu StoreName: '', // 葯店名稱 已兼容舊版本 }, }; }, methods: { // 判斷微信還是支付寶或者其他瀏覽器 liulanqi() { if (/MicroMessenger/.test(window.navigator.userAgent)) { // 微信 this.payEnv = 'weixin'; this.payType = 2; } else if (/AlipayClient/.test(window.navigator.userAgent)) { // 支付寶 this.payEnv = 'alipay'; this.payType = 1; } else { // 其他瀏覽器 this.payEnv = 'others'; this.payType = 1; } console.log('瀏覽器this.payEnv', this.payEnv); }, // 選擇支付 payChoice(val) { this.payType = val; }, // 確認支付 goPays() { console.log('確認支付'); if (this.bgColor === false) { return false; } this.bgColor = false; if (this.payEnv === 'weixin') { // 在微信內瀏覽器打開 if (!this.wxopenid && !sessionStorage.getItem('wxopenid')) { Toast({ message: '賬戶登錄中,請重試!', position: 'middle', duration: 2000 }); this.bgColor = true; return false; } else if (sessionStorage.getItem('wxopenid')) { this.wxopenid = sessionStorage.getItem('wxopenid'); } let data = { PayType: 2, // 支付類型 OrderId: this.weixinPayMsg.orderId, // 訂單號 PayFee: this.weixinPayMsg.orderPrice, // 付款金額 OpenId: this.wxopenid, // 公眾號、小程序必傳oo8No013EgwlLLMCt_G4bGwhbXjo Category: this.weixinPayMsg.Category, // 商品:product 處方:prescription, 脈診儀:jinmu StoreName: this.weixinPayMsg.StoreName, // 葯店名稱 已兼容舊版本 }; // 在微信內置瀏覽器中直接調用微信內支付 console.log('微信內支付參數', data); ajax.post('/api/pay/wxpay', data).then(res => { console.log('微信內提交支付返回結果', res); if (res.status === 200 && res.data.code === 0) { this.weixinPay(res.data.data); } }); } else if (this.payEnv === 'alipay') { // 在支付寶內瀏覽器打開 console.log('喚起支付寶h5支付'); let data = { payType: 6, // 支付類型 OrderId: this.weixinPayMsg.orderId, // 訂單號 PayFee: this.weixinPayMsg.orderPrice, // 付款金額 Category: this.weixinPayMsg.Category, // 商品:product 處方:prescription, 脈診儀:jinmu StoreName: this.weixinPayMsg.StoreName, // 葯店名稱 已兼容舊版本 // quity_url: `${process.env.WEB_HOST}/payment/payCompleted?orderId=` + this.weixinPayMsg.orderId, // 退出跳回地址 quity_url: `${process.env.WEB_HOST}/prescription/prescription_order`, // 退出跳回地址 }; this.alipay(data); } else if (this.payEnv === 'others') { // 在其他瀏覽器打開 if (this.payType === 1) { // 普通瀏覽器進行支付寶h5支付 console.log('喚起支付寶h5支付'); let data = { payType: 6, // 支付類型 OrderId: this.weixinPayMsg.orderId, // 訂單號 PayFee: this.weixinPayMsg.orderPrice, // 付款金額 Category: this.weixinPayMsg.Category, // 商品:product 處方:prescription, 脈診儀:jinmu StoreName: this.weixinPayMsg.StoreName, // 葯店名稱 已兼容舊版本 // quity_url: `${process.env.WEB_HOST}/payment/payCompleted?orderId=` + this.weixinPayMsg.orderId, // 退出跳回地址 quity_url: `${process.env.WEB_HOST}/prescription/prescription_order`, // 退出跳回地址 }; this.alipay(data); } else if (this.payType === 2) { // 普通瀏覽器進行微信h5支付 console.log('喚起微信h5支付'); let data = { PayType: 6, // 支付類型 OrderId: this.weixinPayMsg.orderId, // 訂單號 PayFee: this.weixinPayMsg.orderPrice, // 付款金額 spbill_create_ip: this.spbill_create_ip, OpenId: '', // 公眾號、小程序必傳 Category: this.weixinPayMsg.Category, // 商品:product 處方:prescription, 脈診儀:jinmu StoreName: this.weixinPayMsg.StoreName, // 葯店名稱 已兼容舊版本 }; this.wxpay(data); } } }, // 支付寶h5支付 alipay(data) { console.log('支付寶h5支付參數', data); ajax.post('/api/pay/AliPayNew', data).then(res => { console.log('支付寶h5支付返回結果', res); this.bgColor = true; if (res.status === 200 && res.data.code === 0) { const form = res.data.data; const div = document.createElement('div'); div.id = 'alipay'; div.innerHTML = form; document.body.appendChild(div); document.querySelector('#alipay').children[0].submit(); // 執行后會喚起支付寶 } }); }, // 微信h5支付 wxpay(data) { // let that = this; console.log('微信h5支付參數', data); ajax.post('/api/pay/wxpay', data).then(res => { console.log('微信h5提交支付返回結果', res); this.bgColor = true; if (res.status === 200 && res.data.code === 0) { // location.href = res.data.data.mweb_url + '&redirect_url=' + encodeURIComponent(`${process.env.WEB_HOST}/payment/payCompleted?orderId=` + that.weixinPayMsg.orderId); location.href = res.data.data.mweb_url + '&redirect_url=' + encodeURIComponent(`${process.env.WEB_HOST}/prescription/prescription_order`); } }); }, // 微信內請求支付 weixinPay(resData) { let that = this; console.log('進行微信內支付'); function onBridgeReady() { /* eslint-disable */ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { 'appId': resData.appid, //公眾號名稱,由商戶傳入 'timeStamp': resData.timestamp, //時間戳,自1970年以來的秒數 'nonceStr': resData.nonce_str, //隨機串 'package': resData.package, //訂單詳情擴展字符串 // 'signType': resData.signType, //微信簽名方式 'signType': 'MD5', 'paySign': resData.sign, //微信簽名 }, function (res) { console.log(res); if (res.err_msg === 'get_brand_wcpay_request:ok') { that.bgColor = true; Toast('付款成功'); // sessionStorage.removeItem('weixinPayMsg'); that.$router.push('/payment/paySuccess?orderId=' + that.weixinPayMsg.orderId); } else if (res.err_msg === 'get_brand_wcpay_request:cancel') { that.bgColor = true; Toast('付款取消'); that.$router.push('/payment/payError?openId=' + that.wxopenid); } else { that.bgColor = true; Toast('付款失敗'); that.$router.push('/payment/payError?openId=' + that.wxopenid); } } ); } if (typeof WeixinJSBridge === 'undefined') { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } } else { onBridgeReady(); } }, // 查詢訂單狀態 getOrderState() { console.log('查詢訂單狀態參數', this.weixinPayMsg.orderId); ajax.get('/api/pay/GetOrderStatus/' + this.weixinPayMsg.orderId).then(res => { console.log('訂單狀態結果', res); if (res.status === 200 && res.data.code === 0) { this.orderState = res.data.data; if (res.data.data === 1) { sessionStorage.removeItem('weixinPayMsg'); Toast('訂單付款成功'); this.$router.push('/prescription/prescription_detail?order_id=' + this.weixinPayMsg.orderId); } } }); }, // 獲取ip getIP() { this.spbill_create_ip = returnCitySN.cip; console.log('獲取ip', this.spbill_create_ip); } }, created() { let _self = this; // 先判斷是否是在微信內還是微信外的普通手機瀏覽器 this.liulanqi(); // 取出提交支付的參數 if (JSON.parse(sessionStorage.getItem('weixinPayMsg'))) { this.weixinPayMsg = JSON.parse(sessionStorage.getItem('weixinPayMsg')); console.log('取出提交支付的參數', this.weixinPayMsg); } // 查詢訂單狀態 this.getOrderState(); // 微信公眾號支付 需要獲取code let code = getQueryString('code'); if(code){ wxjs.init(code).then((res) => { console.log('微信', res.wxconfig); if(res.wxconfig.openid){ sessionStorage.setItem('wxopenid', res.wxconfig.openid); } _self.wxopenid = res.wxconfig.openid;//openid console.log('_self.wxopenid', _self.wxopenid); }); }; // 獲取ip this.getIP(); // // 修改訂單地址 // if (JSON.parse(sessionStorage.getItem('orderAddress'))) { // let temData = JSON.parse(sessionStorage.getItem('orderAddress')); // doctorAjax.post('api/order/changeOrderAddress', temData).then(res => { // console.log('修改訂單收貨地址', res); // sessionStorage.removeItem('orderAddress'); // }); // } }, }; </script> <style lang="less" scoped> .page{ position: absolute; top: 44px; left: 0px; right: 0px; bottom: 0px; overflow: auto; background: #fff; } .line{ height: 10px; background-color: #f5f5f5; } .icon-box{ display: flex; justify-content: center; align-items: center; padding: 30px 0px; .icon{ width: 30px; height: 30px; margin-right: 5px; } .hint-tlt{ font-size: 26px; } } .hint-txt{ margin-bottom: 20px; text-align: center; } .money-box{ height: 40px; line-height: 40px; padding-left: 10px; border-top: 1px solid #e6e6e6; } .pay-txt{ height: 40px; line-height: 40px; padding-left: 10px; border-bottom: 1px solid #e6e6e6; } .payType{ height: 50px; padding:0 10px; border-bottom: 1px solid #e6e6e6; display: flex; align-items: center; .payIcon{ width: 30px; height: 30px; margin-right: 10px; } .payType-l{ height: 100%; display: flex; align-items: center; flex: 1; } .typeIcon{ width: 20px; height: 20px; } } .goPays{ margin: 0 10px; margin-top: 40px; height: 40px; line-height: 40px; text-align: center; color: #ffffff; background: rgb(12, 205, 211); } .goPays.huisi{ background: #ccc; } </style>