在html中使用vue及axios及vant，及屏幕闪屏问题解决
2021-11-18 本文已影响0人
花影_62b4
1、闪屏：v-if上使用v-cloak，样式中加 [v-cloak]{display:none}；
2、axios的post请求要用qs包一下，否则会出现整个对象都是key的情况
3、安卓及ios的跳转方式不同，否则真机上不跳转
安卓：window.open(onlineUrl + "/my");
ios： window.location.href = onlineUrl + "/my";
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>北京金税</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css"
/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
<script
type="text/javascript"
charset="UTF-8"
src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"
></script>
<style>
.mar-t-40 {
margin-top: 40px;
}
.mar-t-15 {
margin-top: 15px;
}
.resultPage {
width: 100vw;
height: 650px;
background-color: #f5f5f5;
padding: 40px 32px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
}
.resultPage img {
width: 120px;
}
.resultPage .title {
font-size: 20px;
color: #333;
margin-top: 30px;
font-weight: bold;
}
.resultPage .desc {
font-size: 14px;
color: #888;
margin-top: 13px;
}
.failed {
height: 100vh !important ;
}
.failed img {
width: 240px;
}
.failed .title {
font-size: 40px;
color: #333;
margin-top: 60px;
font-weight: bold;
}
.failed .desc {
font-size: 28px;
color: #888;
margin-top: 26px;
}
.failed .mar-t-40 {
margin-top: 80px;
}
.failed .mar-t-15 {
margin-top: 30px;
}
[v-cloak]{display:none}
</style>
</head>
<body>
<div id="app" >
<div>
<div v-if="orderType == 1" v-cloak>
<div class="resultPage" v-if="payStatus == 'success'" >
<img src="./static/signSuccess.png" />
<span class="title">会员缴费成功</span>
<span class="desc">您可以缴费记录中查看详情</span>
<!-- <van-button class="mar-t-40" color="#2b72ff" block @click="makeOutInvoice1"
>开具发票</van-button
> -->
<van-button
color="#2b72ff"
plain
block
@click="goMyPage(1)"
class="mar-t-40"
>返回我的</van-button
>
</div>
<div class="resultPage failed" v-if="payStatus == 'fail'" >
<img src="./static/signFailed.png" />
<span class="title">会员缴费失败</span>
<span class="desc">请重新提交缴费</span>
<van-button
class="mar-t-40"
color="#2b72ff"
block
@click="submitAgain1"
style="height: 90px;font-size: 30px;border-radius: 14px;"
>重试</van-button
>
<van-button
color="#2b72ff"
plain
block
@click="goMyPage"
class="mar-t-15"
style="height: 90px;font-size: 30px;border-radius: 14px;"
>返回我的</van-button
>
</div>
</div>
<div v-if="orderType ==='0'" v-cloak>
<div
class="resultPage"
:class="money==0?'failed':''"
v-if="payStatus == 'success'"
>
<img src="./static/signSuccess.png" />
<span class="title">报名缴费成功</span>
<span class="desc">您可以在我的报名记录中查看详情</span>
<van-button
v-if="money>0"
class="mar-t-40"
color="#2b72ff"
block
@click="makeOutInvoice"
>开具发票</van-button
>
<van-button
color="#2b72ff"
plain
block
@click="viewEnrollment"
class="mar-t-15"
>查看报名</van-button
>
</div>
<div class="resultPage failed" v-if="payStatus == 'fail'">
<img src="./static/signFailed.png" />
<span class="title">报名缴费有误</span>
<span class="desc">请重新提交报名</span>
<van-button
class="mar-t-40"
color="#2b72ff"
block
@click="submitAgain"
style="height: 90px;font-size: 30px;border-radius: 14px;"
>再次提交</van-button
>
<van-button
color="#2b72ff"
plain
block
@click="goListPage"
class="mar-t-15"
style="height: 90px;font-size: 30px;border-radius: 14px;"
>返回会议首页</van-button
>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let baseUrl = "XXXXXXX",
onlineUrl = "XXXXXXXXXXX";
var qs = Qs;
var u = navigator.userAgent;
var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
new Vue({
el: "#app",
data() {
return {
orderId: "",
money: "",
countNum: "",
orderType: "-1", // 0会议 1会员
payStatus: "",
meetId: "",
infos: {},
};
},
created() {
let params = window.location.href.split("?")[1];
params = params.split("&");
let query = params.map((item) => {
let arr = item.split("=");
return { key: arr[0], value: arr[1] };
});
let orderId = query.find((item) => item.key == "orderId").value;
let money = query.find((item) => item.key == "money").value;
console.log(orderId, money);
this.orderId = orderId;
this.money = money;
// this.countNum = this.$route.query.countNum || "";
if (money > 0) {
this.getPayResult(orderId);
} else {
this.orderType = "0";
this.payStatus = "success";
}
},
mounted() {
let mchData = {
action: "onIframeReady",
displayStyle: "SHOW_CUSTOM_PAGE",
height: 900,
};
let postData = JSON.stringify(mchData);
parent.postMessage(postData, "https://payapp.weixin.qq.com");
},
methods: {
getPayResult: function(merOrderId) {
let data = { merOrderId };
data = qs.stringify(data);
let options = {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
url: baseUrl + "/unionPay/queryPayResult",
method: "post",
data,
};
axios
.request({
...options,
})
.then((aa) => {
let res = aa.data;
console.log(res);
if (res.status == "S") {
this.orderType = res.data.orderType;
this.meetId = res.data.meetId;
if (res.data.payStatus.toUpperCase() == "TRADE_SUCCESS") {
this.payStatus = "success";
} else {
this.payStatus = "fail";
if (this.orderType == 1) {
//会员
this.getMemberOrder(merOrderId);
}
}
}
});
},
//获取支付失败的会员订单的信息
getMemberOrder(orderId) {
axios
.request({
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
url: baseUrl + "/memberPayInfo/queryMemberPayInfoDetail",
method: "post",
data: qs.stringify({ orderId }),
})
.then((aa) => {
let res = aa.data;
let info = res.data;
if (res.status == "S") {
let data = {
id: info.memberType,
memberAmount: info.paymentAmount,
memberId: "1FE0GVLKII5A6700A1BB2V3UEKGVC1Q2",
memberType: info.memberType,
memberName: info.memberTypeName,
form: {
orgs: {
deptName: info.branchDeptName,
id: info.branchDept,
},
mobile: info.mobile,
company: info.company,
name: info.name,
season: info.season,
},
};
this.infos = data;
}
});
},
//会员成功
makeOutInvoice1() {
// this.$router.push(
// `/invoice?type=member&goodId=1111&orderId=${this.orderId}&money=${this.money}`
// );
let mchData = {
action: "jumpOut",
jumpOutUrl:
onlineUrl +
`/invoice?type=member&goodId=1111&orderId=${this.orderId}&money=${this.money}`,
};
let postData = JSON.stringify(mchData);
parent.postMessage(postData, "https://payapp.weixin.qq.com");
},
goMyPage(idx) {
if (idx == 1) {
let mchData = { action: "jumpOut", jumpOutUrl: onlineUrl + `/my` };
let postData = JSON.stringify(mchData);
parent.postMessage(postData, "https://payapp.weixin.qq.com");
} else {
// this.$router.push("/my");
if (isAndroid) {
//android终端
window.open(onlineUrl + "/my");
} else if (isiOS) {
//ios终端
window.location.href = onlineUrl + "/my";
}
}
},
//会员失败
submitAgain1() {
// console.log(this.infos);
// this.$router.push({ name: "memberPayFee", params: this.infos });
if (isAndroid) {
//android终端
window.open(
onlineUrl + "/memberPayFee?infos=" + JSON.stringify(this.infos)
);
} else if (isiOS) {
//ios终端
window.location.href =
onlineUrl + "/memberPayFee?infos=" + JSON.stringify(this.infos);
}
},
//报名成功
makeOutInvoice() {
let mchData = {
action: "jumpOut",
jumpOutUrl:
onlineUrl +
`/invoice?goodsId=0000&orderId=${this.orderId}&countNum=${this.countNum}&money=${this.money}&invoiceMoney=${this.money}`,
};
let postData = JSON.stringify(mchData);
parent.postMessage(postData, "https://payapp.weixin.qq.com");
},
//查看报名
viewEnrollment() {
if (this.money == 0) {
this.$router.push("/myMeetList");
return false;
}
// this.$router.push("/myMeetList");
let mchData = {
action: "jumpOut",
jumpOutUrl: onlineUrl + `/myMeetList`,
};
let postData = JSON.stringify(mchData);
parent.postMessage(postData, "https://payapp.weixin.qq.com");
},
//报名失败
submitAgain() {
if (isAndroid) {
//android终端
window.open(onlineUrl + "/meetSignUp?meetId=" + this.meetId);
} else if (isiOS) {
//ios终端
window.location.href =
onlineUrl + "/meetSignUp?meetId=" + this.meetId;
}
},
goListPage() {
if (isAndroid) {
//android终端
window.open(onlineUrl + "/meetList");
} else if (isiOS) {
//ios终端
window.location.href = onlineUrl + "/meetList";
}
},
},
});
</script>
</html>
