mobileclient/paysuccess.html

247 lines
11 KiB
HTML
Raw Normal View History

2022-10-09 14:29:13 +08:00
<!DOCTYPE html>
<html lang="en">
2022-11-02 15:07:29 +08:00
2022-10-09 14:29:13 +08:00
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover" />
2022-10-09 14:29:13 +08:00
<title>支付成功</title>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322"></script>
2022-10-09 14:29:13 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
2022-11-02 15:07:29 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js?v=3"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
<link rel="stylesheet"
href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/paySuccess.css?v=12" />
2022-10-09 14:29:13 +08:00
</head>
<body>
<div id="app">
<div class="content" v-if="payResult">
2022-10-09 14:29:13 +08:00
<img class="img" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/paySuccess.png"
alt="" />
2022-10-09 14:29:13 +08:00
<p class="success">支付成功</p>
<!-- 直充商品 -->
<div v-if="orderInfo.type==1" class="dlexcenter operation-btn">
<p class="bottom" @click="orderPageFn">确认</p>
<p class="note">{{countdown}}s后 自动跳转【订单列表】</p>
</div>
<!-- 立减金商品 -->
<div v-if="orderInfo.type==2" class="dlexcenter operation-reduce-btn">
<p class="dlexcenter back" @click="orderPageFn">返回</p>
<p class="dlexcenter exchange" @click="receiveFn">去兑换</p>
</div>
<!-- 卡密商品 -->
<div v-if="orderInfo.type==3" class="dlexcenter operation-btn">
<p class="bottom" @click="cardPwdPageFn">确认</p>
<p class="note">{{countdown}}s后 自动跳转【卡密详情页面】</p>
</div>
2022-10-09 14:29:13 +08:00
</div>
<!-- 弹出提示 -->
2022-11-02 15:07:29 +08:00
<model-pop :show.sync="popAttr.show" :title="popAttr.title" :status="popAttr.status" :text="popAttr.text"
:bottom_text="popAttr.bottomText" @backFunction="backFunctionPop"></model-pop>
2022-10-09 14:29:13 +08:00
</div>
<script>
new Vue({
el: "#app",
2024-03-15 15:01:27 +08:00
data () {
return {
orderNumber: '',
orderInfo: { type: 3 },
countdown: 3,
2024-03-12 16:22:33 +08:00
openId: localStorage.getItem('openid'),
popAttr: {
show: false,
title: '温馨提示',
status: 3,/*1 成功 2提示 3失败 */
text: '错误信息',
2022-11-02 15:07:29 +08:00
bottomText: ''
},
2022-10-13 18:35:37 +08:00
plaflam: 1,
2024-03-12 16:22:33 +08:00
is_webview: 0,
2022-11-02 15:07:29 +08:00
payResult: false,
copyLink: '',
orderId: '',
2024-03-12 16:22:33 +08:00
code_batch_id: '',
2022-10-13 18:35:37 +08:00
redirect_url: '' //微信小程序链接
};
2022-10-09 14:29:13 +08:00
},
2022-11-02 15:07:29 +08:00
components: { modelPop },
2022-10-09 14:29:13 +08:00
2024-03-15 15:01:27 +08:00
created () {
let orderNumber = this.getQueryString(
window.location.search,
"order_number"
);
this.orderNumber = orderNumber;
this.getOrderDetail(orderNumber);
2022-11-02 15:07:29 +08:00
localStorage.setItem('token', this.getQueryString(window.location.search, "token"));
},
methods: {
2024-03-15 15:01:27 +08:00
getQueryString (path, name) {
//获取浏览器地址栏的参数
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = path.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
},
//返回订单页面
2024-03-15 15:01:27 +08:00
orderPageFn () {
window.location.replace('./coupon/myOrder.html');
},
//卡密返回卡密详情页面
2024-03-15 15:01:27 +08:00
cardPwdPageFn () {
window.location.replace('./coupon/myOrder.html');
},
/* 倒计时 */
2024-03-15 15:01:27 +08:00
countdownFn () {
let time = 3;
let stopTimer = setInterval(() => {
time--;
if (time > 0) {
this.countdown = time;
} else {
this.orderPageFn();
clearInterval(stopTimer);
2022-11-02 15:07:29 +08:00
}
2022-11-02 15:07:29 +08:00
}, 1000);
},
//获取订单详情
2024-03-15 15:01:27 +08:00
getOrderDetail (id) {
req.axiosGet("/key/order/detail/" + id).then((res) => {
if (res.code == 200) {
this.orderInfo = res.data;
2022-11-02 15:07:29 +08:00
this.payResult = true;
2022-10-13 18:35:37 +08:00
if (res.data.type == 2) { //1 商品 2立减金
//channel 1支付宝 2微信
this.plaflam = res.data.product.entity.channel;//只有立减金商品才有channel字段
this.redirect_url = res.data.wechat_redirect_url;
2022-11-02 15:07:29 +08:00
this.payStatus = res.data.pay_status;
this.orderId = res.data.alipay_order_number;
2024-03-12 16:22:33 +08:00
this.is_webview = res.data.product.entity.is_webview;
this.code_batch_id = res.data.product.code_batch_id;
2022-11-02 15:07:29 +08:00
} else {
this.countdownFn();
}
}
}).catch();
},
2022-10-13 18:35:37 +08:00
//弹出框提示
2024-03-15 15:01:27 +08:00
openTipDialog (popUpAttr) {
this.popAttr = popUpAttr;
},
2022-11-02 15:07:29 +08:00
/* 弹窗回调 */
2024-03-15 15:01:27 +08:00
backFunctionPop (type) {
if (this.popAttr.bottomText === '点击复制' && type) {
var aux = document.createElement("input");
aux.setAttribute("value", this.copyLink);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.openTipDialog({
show: true,
title: '温馨提示',
status: 1,/*1 成功 2提示 3失败 */
text: '复制成功'
});
}
if (this.isLogin) {
2022-11-14 14:38:05 +08:00
this.delayedOut();
}
},
2024-03-15 15:01:27 +08:00
toLinkAlipay () {
//支付宝H5跳转
let self = this;
let banklink = encodeURIComponent(
2022-11-02 15:07:29 +08:00
window.location.origin +
"/alipay.html?orderNumber=" + this.orderId
);
let link = "http://openapi.1688sup.com/alipay/oauth?jump=" + banklink;
let ua = navigator.userAgent.toLowerCase(); //判断用户打开链接环境
/* 判断如果是微信浏览器或者百度浏览器 则无法拉起支付宝 */
if (ua.match(/MicroMessenger/i) == "micromessenger" || ua.indexOf("baiduboxapp") > -1 || ua.indexOf("firefox") > -1) {
2022-11-02 15:07:29 +08:00
//复制链接地址,提醒去浏览器打开
this.copyLink = link;
2022-11-14 14:38:05 +08:00
this.openErrorDialog(`请复制链接,在其他浏览器打开`, '点击复制');
} else {
//唤起支付宝
window.location.replace(link);
}
},
2024-03-15 15:01:27 +08:00
openErrorDialog (tip, bottomText) {
2022-11-14 14:38:05 +08:00
this.popAttr.text = tip;
this.popAttr.show = true;
this.popAttr.bottomText = bottomText;
},
//领取立减金
2024-03-15 15:01:27 +08:00
receiveFn () {
2022-11-02 15:07:29 +08:00
if (this.payStatus != 2) {
this.openTipDialog({
show: true,
title: '温馨提示',
status: 2,/*1 成功 2提示 3失败 */
text: '支付结算中,请等待支付结果...'
});
2022-11-14 14:38:05 +08:00
return;
}
2024-03-12 16:22:33 +08:00
let ua = navigator.userAgent.toLowerCase(); //判断用户打开链接环境
if (this.plaflam == 1) {
//支付宝-微信环境中不能唤起支付宝
this.toLinkAlipay();
}
if (this.plaflam == 2) {
2024-03-12 16:22:33 +08:00
if (this.is_webview == 1) {
/* 公众号 */
this.publicCollection();
} else {
/* 小程序 */
window.location.replace(this.redirect_url);
}
}
2024-03-12 16:22:33 +08:00
},
/* 公众号领取 */
2024-03-15 15:01:27 +08:00
publicCollection () {
2024-03-12 16:22:33 +08:00
let params = {
2024-03-15 15:01:27 +08:00
order_number: this.orderId,
channel: 2,
2024-03-12 16:22:33 +08:00
channel_user_id: this.openId,
is_webview: 1
};
2024-03-15 15:01:27 +08:00
req.axiosPost("/voucher/grant", params)
2024-03-12 16:22:33 +08:00
.then((res) => {
if (res.code == 200) {
2024-03-15 15:01:27 +08:00
this.openTipDialog({
show: true,
title: '温馨提示',
status: 1,/*1 成功 2提示 3失败 */
text: '领取成功'
});
2024-03-12 16:22:33 +08:00
} else {
2024-03-15 11:23:34 +08:00
this.openTipDialog({
show: true,
title: '温馨提示',
status: 3,/*1 成功 2提示 3失败 */
text: res.message
});
2024-03-12 16:22:33 +08:00
}
})
.catch((err) => { this.loading = false; });
;
},
},
});
2022-10-09 14:29:13 +08:00
</script>
</body>
</html>