<template> 
<div class="mask"> 
<!-- 提示在瀏覽器打開彈框 --> 
<div class="pay-mask" v-show="isWeiXi"> 
</div>
 
<div class="payform"></div> 
</div>
</template>

<script type="text/ecmascript-6">
 
/*
解決在微信瀏覽器中無法調(diào)用支付寶支付：
1.拿到從支付頁傳遞過來的參數(shù)重組成自己需要的數(shù)據(jù)
2.清除舊的緩存數(shù)據(jù)（防止出現(xiàn)意外bug）
3.驗證是否是微信瀏覽器（不是就把拿到的key和token存進本地緩存中，用于其他接口調(diào)用）
4.請求數(shù)據(jù)接口拿到支付寶的支付表單裝進頁面中完成支付
*/
 
export default { 
name: 'payMask', 
data () { 
return { 
isWeiXi: true, 
theRequest: {} 
} 
},
 
methods: {
 
// 獲取當(dāng)前微信瀏覽器url地址參數(shù)
 
getUrlParams() {
 
// 清除舊的緩存數(shù)據(jù)
 
// window.localStorage.clear() 
let theRequest = new Object(); 
let url = location.href; //獲取url中"?"符后的字串 
let strs = []; 
if (url.indexOf("?") != -1) {
var str = url.substr(parseInt(url.indexOf("?")+1)); 
strs = str.split("&"); 
for (var i = 0; i < strs.length; i++) { 
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); 
} 
}
 
this.theRequest = theRequest; 
},
 
// 監(jiān)控微信瀏覽器
 
isWeiXin() { 
let ua = window.navigator.userAgent.toLowerCase(); 
if (ua.match(/MicroMessenger/i) != "micromessenger") { 
this.isWeiXi = false
 
// 重新存儲新的token（在外部瀏覽器打開支付完成后是沒有token這些數(shù)據(jù)的所以需要在瀏覽器一打開的時候就去存一次數(shù)據(jù)）
 
window.localStorage.setItem("channelId", this.theRequest.channelId); 
window.localStorage.setItem("userKey",JSON.stringify(this.theRequest.userKey)); 
window.localStorage.setItem("userToken",JSON.stringify(this.theRequest.userToken)); 
if(this.theRequest.memberTypeName){
 
// 調(diào)用支付寶支付
 
this.zfbPayBuy(this.theRequest) 
} else { 
this.zfbPayBuySocial(this.theRequest) 
}
 
} else { 
this.isWeiXi = true
 
} 
},
 
// 支付寶支付(會員)
 
zfbPayBuy(data){
 
// 請求接口拿到接口返回的支付表單（接口直接返回的，我們直接裝進頁面就可以了）
 
this.axios.payBuy(data).then(res => { 
if (res.status == 0) { 
let payHtml = document.querySelector(".payform"); 
payHtml.innerHTML = res.result;
let paySub = payHtml.getElementsByTagName("input")[1]; 
paySub.click()
 
} 
}) 
},
 
//支付寶支付（社保）
 
zfbPayBuySocial(data) { 
this.axios.buySocial(data).then(res => { 
if (res.status == 0) { 
let payHtml = document.querySelector(".payform") 
payHtml.innerHTML = res.result 
let paySub = payHtml.getElementsByTagName("input")[1] 
paySub.click() 
} 
}) 
}, 
}, 
created() {
 
// 拿去當(dāng)前地址參數(shù) 

this.getUrlParams() 
if(JSON.stringify(this.theRequest) != '{}'){ 
this.isWeiXin() 
} 
},
 
mounted(){
 
// 更新一下當(dāng)前瀏覽器地址（防止在微信里調(diào)用外部瀏覽器的時候出現(xiàn)意外bug） 

window.location.href = window.location.href 
} 
} 
</script>

<style scoped lang="less"> 

.pay-mask { 
width: 100%; 
min-height: 100%; 
position:fixed; 
z-index: 99; 
background-color: rgba(0, 0, 0,.6); 
background-image: url('../../image/icon/confirm.png'); 
background-repeat: no-repeat; 
} 

</style>

const div = document.createElement('div') // 創(chuàng)建div
div.innerHTML = res.data.aliHtml // 將返回的form 放入div
document.body.appendChild(div) // 將上面創(chuàng)建的元素加入到BODY的尾部
document.forms[0].submit() // 表示獲取當(dāng)前頁面的第一個表單