338 lines
14 KiB
HTML
338 lines
14 KiB
HTML
|
<!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_pre.js"></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="goodsInfo.img">
|
|||
|
|
<div>
|
|||
|
|
<p>
|
|||
|
|
<span>{{goodsInfo.name}}</span>
|
|||
|
|
<span>¥{{goodsInfo.price}}</span>
|
|||
|
|
</p>
|
|||
|
|
<p class="number">
|
|||
|
|
<span>数量</span>
|
|||
|
|
<span>x1</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p>
|
|||
|
|
<span>商品金额</span>
|
|||
|
|
<span>¥{{goodsInfo.price}}</span>
|
|||
|
|
</p>
|
|||
|
|
<p >
|
|||
|
|
<span>优惠券</span>
|
|||
|
|
<span
|
|||
|
|
class="coupon_price">-¥{{(goodsInfo.price-goodsInfo.coupon_price).toFixed(2)}}</span>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<span>合计</span>
|
|||
|
|
<span>¥{{goodsInfo.coupon_price}}</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<!-- 支付模块-->
|
|||
|
|
<div class="exchange-btn-fr">
|
|||
|
|
<div class="pay_left">
|
|||
|
|
<div class="title">
|
|||
|
|
<p>
|
|||
|
|
<span class="sign">￥</span>{{goodsInfo.coupon_price}}
|
|||
|
|
</p>
|
|||
|
|
<p class="text" v-if="goodsInfo.price-goodsInfo.coupon_price!==0">共省 ¥
|
|||
|
|
{{(goodsInfo.price-goodsInfo.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="goodsInfo.coupon_price" />
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
let goodsDetail = null;
|
|||
|
|
new Vue({
|
|||
|
|
el: '#settlement',
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
isView:true,
|
|||
|
|
promtshow:false,
|
|||
|
|
type:1,
|
|||
|
|
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(){
|
|||
|
|
this.goodsInfo=JSON.parse(localStorage.getItem('goodDetail'));
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
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;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
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 () {
|
|||
|
|
this.show = true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/* 去支付 */
|
|||
|
|
async payFunction ({ payType, isSupport }) {
|
|||
|
|
alert('申请H5支付');
|
|||
|
|
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.goodsInfo.coupon && this.goodsInfo.coupon.code_batch_id || this.goodsInfo.code_batch_id,
|
|||
|
|
"goods_id": this.goodInfo.goods_id,
|
|||
|
|
"account": this.account || '888888', /* 卡密时默认账号 */
|
|||
|
|
"pay_type": payType == 2 ? 1 : 5,
|
|||
|
|
"pay_amount": this.goodsInfo.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) {
|
|||
|
|
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>
|