mobileclient/coupon/settlement.html

403 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/api_test1.js?v=1000?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>
<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">
<!-- 返回模块-->
<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">
<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>
<span>x{{goodsDetail.entity.send_num||1}}</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>
<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>
<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: '',
isView: false,
promtshow: false,
goodInfo: '',
goodsDetail: {},//商品详情
show: false, /* 控制支付弹窗 */
payType: 1, /* 支付方式 */
account: localStorage.getItem('account'),
/* 提示框状态 */
popShow: false,
popTitle: '',
popText: '',
popStatus: 1, /*1 成功 2提示 3失败 */
bottomText: '', /* 复制按钮 */
href: '',/* 支付地址 */
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'));
if (isWx()) {
this.payType = 1;
this.getweixin();
} else {
this.payType = 2;
}
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,
send_num: goodsData.goods.send_num
},
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;
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);
},
// 单条弹框
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() {
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;
},
/* 去支付 */
async payFunction({ payType, isSupport }) {
this.payType = payType;
this.show = false;
if (!this.getQueryString('orderNumber')) {
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);
}
},
/* 设置订单支付方式 */
setOrderPayType(payType) {
/* payType 1:微信 2:支付宝 */
/* 后端 微信是5 支付宝是1 */
/* 设置支付类型 */
const payTypeCopy = payType === 2 ? 1 : 5;
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;
}
if (code === 200) {
this.createdPay(this.orderNumber);
}
});
} else {
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,
'jd_code': this.goodInfo.is_e_card ? localStorage.getItem('jd_code') : ''
};
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) {
console.log(582, orderNumber);
this.orderNumber = orderNumber;
let open_id = localStorage.getItem('code_weixin');
console.log(582, open_id);
let data = {
token: localStorage.getItem('token'),
};
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()) {
//进行微信支付
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 报错的方法
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'));
//支付成功后跳转的页面
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
} 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) {
console.log(2381, code_weixin);
localStorage.setItem('code_weixin', code_weixin); //储存code
}
} else {
let banklink = encodeURIComponent(window.location.href);
let link = 'https://openapi.1688sup.com/wechat/oauth?jump=' + banklink + '&payment_subject=szsj';
window.location.href = link;
}
}
},
})
</script>
</html>