mobileclient/coupon/settlement.html

401 lines
17 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<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">
<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>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/js/swiper.min.js"></script>
<link href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/css/swiper.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/details.css?v=55">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js?v=1"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/payPop.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/payPop.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js"></script>
2022-11-03 17:03:30 +08:00
<style>
* {
margin: 0;
}
</style>
</head>
<body>
<div id="settlement">
<!-- 时提框 -->
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText" :bottom_text="bottomText"
@backFunction="backFunctionPop"></model-pop>
<div class="content" v-if="isView">
<!-- 返回模块-->
2022-11-03 17:03:30 +08:00
<img @click="backHandler" class="back"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<div class="pay-goods">
<div class="commodity_display dflex">
2022-11-03 17:03:30 +08:00
<img alt=""
:src="goodsDetail.type==1?goodInfo.show_url:(goodInfo.channel==1?'https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/zfbreduce.png':'https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/wxreduce.png')">
<div>
<p>
<span>{{goodsDetail.type==1?goodInfo.product_name:goodInfo.batch_goods_name}}</span>
<span>¥{{goodsDetail.origin_price}}</span>
</p>
<p class="number">
<span>数量</span>
2022-11-03 17:03:30 +08:00
<span>x1</span>
</p>
</div>
</div>
<p>
<span>商品金额</span>
<span>¥{{goodsDetail.origin_price}}</span>
</p>
<p v-if="goodsDetail.origin_price-goodsDetail.coupon_price!==0">
<span>优惠券</span>
2022-11-03 17:03:30 +08:00
<span
class="coupon_price">-¥{{(goodsDetail.origin_price-goodsDetail.coupon_price).toFixed(2)}}</span>
</p>
<p>
<span>合计</span>
<span>¥{{goodsDetail.coupon_price}}</span>
</p>
</div>
<!-- 支付模块-->
<div class="exchange-btn-fr">
<div class="pay_left">
<div class="title">
<p>
<span class="sign"></span>{{goodsDetail.coupon_price}}
</p>
<p class="text" v-if="goodsDetail.origin_price-goodsDetail.coupon_price!==0">共省&nbsp;¥
{{(goodsDetail.origin_price-goodsDetail.coupon_price).toFixed(2)}}</p>
</div>
</div>
2022-11-03 17:03:30 +08:00
<button class="exchange-btn" @click="exchangeGoodsFn">立即支付</button>
</div>
</div>
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</div>
<!-- 支付弹窗 -->
<pay-pop :show.sync="show" :active="payType" @payFunction="payFunction" :money="goodsDetail.coupon_price" />
</div>
</body>
<script>
let goodsDetail = null;
new Vue({
el: '#settlement',
data () {
return {
promttip: '',
2022-11-03 17:03:30 +08:00
isView: false,
promtshow: false,
goodInfo: '',
goodsDetail: {},//商品详情
show: false, /* 控制支付弹窗 */
payType: 1, /* 支付方式 */
2022-11-03 17:03:30 +08:00
account: localStorage.getItem('account'),
/* 提示框状态 */
popShow: false,
popTitle: '',
popText: '',
popStatus: 1, /*1 成功 2提示 3失败 */
bottomText: '', /* 复制按钮 */
href: '',/* 支付地址 */
2022-11-03 17:03:30 +08:00
orderNumber: '',
isLogin: false,/* 是否跳登录页 */
};
},
components: {
modelPop,
payPop
},
created () {
//商品详情
let goodsData = JSON.parse(localStorage.getItem('goodsInfo'));
let goodsId = goodsData.id;
let code_batch_id = goodsData.coupon && goodsData.coupon.code_batch_id || goodsData.code_batch_id;
this.orderNumber = this.getQueryString('orderNumber');
const payType = Number(this.getQueryString('payType'));
2022-11-03 18:00:29 +08:00
if (isWx()) {
this.payType = 1;
2022-11-03 18:01:54 +08:00
this.getweixin();
2022-11-03 18:00:29 +08:00
} else {
this.payType = 2;
2022-11-03 18:00:29 +08:00
}
if (!this.getQueryString('orderNumber')) {
this.getDetails(goodsId, code_batch_id);
} else {
let data = {
type: goodsData.type,
entity: {
show_url: goodsData.show_url,
channel: goodsData.goods.channel,
product_name: goodsData.goods.product_name,
batch_goods_name: goodsData.goods.batch_goods_name,
},
origin_price: goodsData.official_price,
coupon_price: goodsData.pay_amount
};
this.goodsDetail = data;
this.goodInfo = data.entity;
this.isView = true;
console.log(151, this.goodsDetail);
}
},
methods: {
getQueryString (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
},
/* 请求详情 */
getDetails (goods_id, code_batch_id) {
const token = localStorage.getItem('token');
let data = { token, code_batch_id };
return new Promise((resolve, reject) => {
req.axiosPost(`/key/product_detail/${goods_id}`, data).then(({ code, data, message }) => {
if (code == 200) {
this.goodsDetail = data;
goodsDetail = data;
this.goodInfo = data.entity;
2022-11-03 17:03:30 +08:00
this.isView = true;
} else {
this.openErrorDialog(message);
if (code == 403) {
this.delayedOut(3);
this.isLogin = true;
}
}
}).catch(err => {
});
});
},
openErrorDialog (tip, bottomText) {
this.popTitle = '温馨提示';
this.popText = tip;
this.popStatus = 2;
this.popShow = true;
this.bottomText = bottomText;
},
backHandler () {
history.go(-1);
},
2022-11-03 17:03:30 +08:00
// 单条弹框
openDialog (tip) {
this.promtshow = true;
this.promttip = tip;
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000);
},
/* 弹窗回调 */
backFunctionPop (type) {
if (this.bottomText === '点击复制' && type) {
var aux = document.createElement("input");
aux.setAttribute("value", this.href);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.openDialog('复制成功');
}
if (this.isLogin) {
this.delayedOut();
}
},
/* 延时自动退出 */
delayedOut (time = 1) {
let entryLink = localStorage.getItem('entryLink');
setTimeout(() => {
window.location.replace(entryLink);
}, time * 1000);
},
//兑换商品
exchangeGoodsFn () {
2022-11-03 17:40:26 +08:00
if (this.goodsDetail.type === 1 && this.goodInfo.product_type === 1 && !this.orderNumber) { /* 兑换码 */
if (goodsDetail.available != 1) {
this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
return;
}
}
this.show = true;
},
2022-11-03 17:40:26 +08:00
/* 去支付 */
async payFunction ({ payType, isSupport }) {
this.payType = payType;
this.show = false;
if (!this.getQueryString('orderNumber')) {
2022-11-03 17:03:30 +08:00
let orderInfo = await this.createdOrder(payType);
if (orderInfo.pay_status == 2 || [1, 2].includes(orderInfo.channel)) {//pay_status 2已支付 channel 1 支付宝 2微信
let orderNumber = orderInfo.pay_status == 2 ? orderInfo.order_number : orderInfo.original_order_number;
window.location.replace('/paysuccess.html?order_number=' + orderNumber + '&token=' + localStorage.getItem('token'));
} else {
this.createdPay(orderInfo.order_number);
}
} else {
this.setOrderPayType(payType);
2022-11-03 17:03:30 +08:00
}
},
/* 设置订单支付方式 */
setOrderPayType (payType) {
/* payType 1:微信 2:支付宝 */
/* 后端 微信是5 支付宝是1 */
/* 设置支付类型 */
const payTypeCopy = payType === 2 ? 1 : 5;
2022-11-03 17:03:30 +08:00
if (this.payType !== payTypeCopy) { /* 支付类型是否变化 */
req.axiosPut(`/key/order/setPayType/${this.orderNumber}/${payTypeCopy}`).then(({ code, message }) => {
if (code === 403) {
this.openErrorDialog(message, '我知道了');
this.delayedOut(3);
return this.redirect = true;
2022-11-03 17:03:30 +08:00
}
if (code === 200) {
2022-11-03 17:40:26 +08:00
this.createdPay(this.orderNumber);
2022-11-03 17:03:30 +08:00
}
});
} else {
2022-11-03 17:40:26 +08:00
this.createdPay(this.orderNumber);
}
},
//创建优惠券订单
createdOrder (payType) {
let self = this;
let data = {
"token": localStorage.getItem('token'),
"key": localStorage.getItem('key'),
"code_batch_id": this.goodsDetail.coupon && this.goodsDetail.coupon.code_batch_id || this.goodsDetail.code_batch_id,
"goods_id": this.goodInfo.goods_id,
"account": this.account, /* 卡密时默认账号 */
"pay_type": payType == 2 ? 1 : 5,
"pay_amount": this.goodsDetail.coupon_price
};
return new Promise((resolve, reject) => {
req.axiosPost('/key/createCouponOrder', data).then(res => {
if (res.code == 200) {
resolve(res.data);
} else {
this.openErrorDialog(res.message);
if (res.code == 403) {
this.delayedOut(3);
this.isLogin = true;
}
}
}).catch(err => {
});
});
},
//优惠券订单支付
createdPay (orderNumber) {
2022-11-03 17:03:30 +08:00
console.log(582, orderNumber);
this.orderNumber = orderNumber;
let open_id = localStorage.getItem('code_weixin');
2022-11-03 17:03:30 +08:00
console.log(582, open_id);
let data = {
token: localStorage.getItem('token'),
};
2022-11-03 17:03:30 +08:00
if (open_id) {
data.open_id = encodeURIComponent(open_id);
}
req.axiosGet('/key/coupon/createPay/' + orderNumber, data).then(res => {
if (res.code == 200) {
this.payWayRun(res.data);
} else {
this.openErrorDialog(res.message);
}
}).catch(err => { });
},
//根据环境去执行
payWayRun (result) {
if (this.payType == 1) {// 1微信支付 2 支付宝支付
if (isWx()) {
2022-11-03 17:03:30 +08:00
//进行微信支付
this.gotoWeiXinPay(result);
} else {
window.location.href = result;
}
}
if (this.payType == 2) {// 1微信支付 2 支付宝支付
if (isWx()) {
this.href = result;
} else {
window.location.href = result;
}
}
},
//解决WeixinJSBridge is not defined 报错的方法
2022-11-03 17:03:30 +08:00
gotoWeiXinPay (payInfo) {
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(payInfo), false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(payInfo));
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(payInfo));
}
} else {
this.onBridgeReady(payInfo);
}
},
onBridgeReady (data) {
let self = this;
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": data.appId, //公众号名称,由商户传入
"timeStamp": data.timeStamp, //时间戳自1970年以来的秒数
"nonceStr": data.nonceStr, //随机串
"package": data.package,
"signType": data.signType, //微信签名方式:
"paySign": data.paySign //微信签名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
window.location.replace('/paysuccess.html?order_number=' + self.orderNumber + '&token=' + localStorage.getItem('token'));
2022-11-03 17:03:30 +08:00
//支付成功后跳转的页面
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
2022-11-03 17:03:30 +08:00
} else if (res.err_msg == "get_brand_wcpay_request:fail") {
WeixinJSBridge.call('closeWindow');
} //使用以上方式判断前端返回
}
);
},
getweixin () {
let code_weixin = this.getQueryString('openid');
let code_weixin_history = localStorage.getItem('code_weixin');
if (code_weixin) {
if (code_weixin != code_weixin_history) {
2022-11-03 17:03:30 +08:00
console.log(2381, code_weixin);
localStorage.setItem('code_weixin', code_weixin); //储存code
}
2022-11-03 17:03:30 +08:00
} else {
let banklink = encodeURIComponent(window.location.href);
2022-11-03 17:03:30 +08:00
let link = 'https://openapi.1688sup.com/wechat/oauth?jump=' + banklink + '&payment_subject=szsj';
window.location.href = link;
}
}
},
})
</script>
</html>