mobileclient/v2_0_0_C/coupon/exchange.html

421 lines
19 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/exchange.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/payPop.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/payPop.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/modelPop.js"></script>
</head>
<body>
<div id="exchangePage">
<!-- 时提框 -->
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText"
@backFunction="backFunctionPop"></model-pop>
<div v-if="!suspension" class="content">
<!-- 返回模块-->
<img @click="backHandler" class="back" v-if="backAble"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<!-- 优惠券权益商品 -->
<div v-if="goodsDetail.type===1">
<div class="about-good">
<img :src="goodsShow[0]" alt="" v-if="goodsShow.length<=1">
<div class="swiper-container" v-else>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,i) in goodsShow" :key="i">
<img :src="item" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="ipt-acc" style="position: relative;z-index: 999;" @click="bindAvailable">
<div class="title">
<p>
<span class="sign"></span>{{goodsDetail.origin_price}}
</p>
<p class="text">{{goodInfo.product_name}}</p>
</div>
<p v-if="acctype=='tel'"><span>账号:</span><input :type="acctype"
onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen"
v-model="account" :placeholder="placeholder" @focus="(e)=>focusFn(e)"></p>
<p v-if="acctype=='tel'"><span>再次输入:</span> <input :type="acctype"
onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen"
v-model="reAccount" placeholder="请再次输入" @focus="(e)=>focusFn(e)"></p>
<p v-if="acctype!='tel'"><span>账号:</span> <input :type="acctype" :maxlength="maxlen"
v-model="account" :disabled="goodsDetail.available!=1" :placeholder="placeholder"
@focus="(e)=>focusFn(e)"></p>
<p v-if="acctype!='tel'"><span>再次输入:</span><input :type="acctype" :maxlength="maxlen"
v-model="reAccount" :disabled="goodsDetail.available!=1" placeholder="请再次输入"
@focus="(e)=>focusFn(e)"></p>
</div>
<div class="bottom" id="bottom" :style="{borderWidth:(describe.type||detailUrl)?'0.05rem':'0'}"
v-show="describe.type||detailUrl">
<img :src="detailUrl" v-show="detailUrl">
<img :src="describe.bg_image" v-show="describe.type==1&&describe.bg_image">
<div v-html="describe.content" class="goodsTip" v-show="describe.type==3&&describe.content"></div>
</div>
</div>
<!-- 优惠券立减金 -->
<div class="reduce" v-if="goodsDetail.type===2">
<div class="bg">
<div class="bg-left">
<p>
<span class="sign"></span>
<span class="money">{{goodInfo.reduce_amount}}</span>
</p>
<p class="moneyUse">满{{goodInfo.denomination}}可用</p>
</div>
<div class="bg-right">
<p class="money">{{goodInfo.denomination}}元微信立减金</p>
<p class="time">
有效期:{{goodInfo.time_limit.effect_time.end_time.split('-').join('.')}}至{{goodInfo.time_limit.effect_time.start_time.split('-').join('.')}}
</p>
<p class="receive">请在有效期内领取</p>
</div>
</div>
<div class="illustrate">
<p class="title">- 立减金兑换说明 -</p>
<p class="title_2">使用须知</p>
<p class="text">
1、在{{goodInfo.channel===1?'支付宝':"微信"}}APP内打开链接点击【一键领取】完成领取微信立减金<br>
2、{{goodInfo.channel===1?'支付宝':"微信"}}里立减金一旦领取不可撤销、不可转让。注意不要将兑换券泄露给他人<br>
</p>
<p class="title_2">使用规则</p>
<p class="text" v-html="goodInfo.instruction">
</p>
</div>
</div>
<!-- 支付模块-->
<div class="exchange-btn-fr">
<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}}</p>
</div>
<button class="exchange-btn" v-if="goodsDetail.type===1"
:style="{'background': exchangeOpen?bgcolor:'#D7D7D7','color':exchangeOpen?ftColor:'#333'}"
@click="exchangeGoodsFn">立即支付</button>
<button class="exchange-btn" v-else :style="{'background': bgcolor,'color':ftColor}"
@click="exchangeGoodsFn">立即支付</button>
</div>
</div>
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</div>
<!-- 悬浮提示 -->
<div v-if="suspension" class="suspensionDom">
<img @click="suspension = false"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<h4>活动规则</h4>
<div v-html="describe.content">
</div>
</div>
<img class="susTip" @click="suspension = true"
v-if="describe.type==='2'&&describe.content&&!suspension&&goodsDetail.type===1"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png" alt="">
<!-- 弹出框 -->
<!-- 支付弹窗 -->
<pay-pop :show.sync="show" :active="payType" @payFunction="payFunction" :money="goodsDetail.coupon_price" />
</div>
</body>
<script>
let goodsCount = null, goodsDetail = null;
new Vue({
el: '#exchangePage',
data () {
return {
account: '',
reAccount: '',
maxlen: 11,
acctype: 'tel',
promttip: '',
promtshow: false,
productType: 0,
placeholder: '',
exchangeOpen: false,
suspension: false,
describe: {},
detailUrl: '',
goodInfo: '',
bgcolor: '',
ftColor: '',
goodsDetail: {},//商品详情
backAble: true,
goodsShow: [
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220120/9bedd7af6a8a570be8f2858564f9ec6d.png'
],
show: false, /* 控制支付弹窗 */
payType: 1, /* 支付方式 */
/* 提示框状态 */
popShow: false,
popTitle: '',
popText: '',
popStatus: 1 /*1 成功 2提示 3失败 */
}
},
watch: {
account (va) {
va && this.watchAccount()
},
reAccount (va) {
va && this.watchAccount()
},
productType: {
immediate: true,
handler (newVal) {
this.maxlen = 50;
this.acctype = "text";
const placeholderArray = [
"请输入昵称", "请输入手机号", "请输入邮箱", "请输入手机号或邮箱", "请输入QQ号",
"请输入手机号或QQ号", "请输入邮箱或QQ号", "请输入手机号/邮箱/QQ号", "请输入微信号",
"请输入手机号或微信", "请输入邮箱或微信号", "请输入手机号/邮箱/微信号", "请输入QQ号或微信号",
"请输入手机号/QQ号/微信号", "请输入邮箱/QQ号/微信号", "请输入手机号/邮箱/QQ号/微信号"
]
this.placeholder = placeholderArray[newVal]
if ([1, 4, 5].includes(newVal)) this.acctype = "tel"
if ([8, 9, 12, 13].includes(newVal)) this.maxlen = 20
if (newVal === 4) this.maxlen = 10
if (newVal === 5) this.maxlen = 11
}
}
},
components: {
modelPop,
payPop
},
created () {
document.title = localStorage.getItem('title');
let detailsConfig = JSON.parse(localStorage.getItem('product_detail'));
goodsCount = localStorage.getItem('goodsCount');
this.backAble = goodsCount > 1;//多个商品才有返回
this.bgcolor = detailsConfig.button_color;
this.ftColor = detailsConfig.font_color;
this.describe = detailsConfig.describe;
goodsDetail = JSON.parse(localStorage.getItem('goodsInfo'));//商品详情
this.goodsDetail = goodsDetail;//商品详情
let goodsInform = goodsDetail.entity; //商品信息
this.goodInfo = goodsInform;
let goods_desc = goodsInform.describe_url;
this.goodsShow = goods_desc && goods_desc.length > 0 ? goods_desc : [goodsDetail.show_url];
this.detailUrl = goodsInform.detail_url ? goodsInform.detail_url : '';
this.productType = goodsDetail.entity.account_type;
this.$nextTick(function () {
var swiper = new Swiper('.swiper-container', {
loop: true, // 循环模式选项
autoplay: 3000, //可选选项,自动滑动
pagination: '.swiper-pagination',
})
})
},
methods: {
bindAvailable () {
if (goodsDetail.available != 1) {
this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
return
}
},
openErrorDialog (tip) {
this.popTitle = '温馨提示'
this.popText = tip
this.popStatus = 2
this.popShow = true
},
backHandler () {
if (goodsCount > 1) {
window.location.replace('./couponCollection.html');
} else {
history.go(-2);
}
},
// 单条弹框
openDialog (tip) {
this.promtshow = true;
this.promttip = tip
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000)
},
/* 弹窗回调 */
backFunctionPop () {
if (this.popStatus === 2) {
window.location.replace(document.referrer)
}
},
//兑换商品
exchangeGoodsFn () {
if (this.goodsDetail.type === 1) { /* 兑换码 */
if (goodsDetail.available != 1) {
this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
return
}
if (!this.account) {
this.openDialog('请输入兑换账号!');
return false;
} else {
let nameReg = /\w{4}/.test(this.account);
let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.account);
let qqReg = /^[1-9][0-9]{4,9}$/.test(this.account);
let emailsReg = /^[A-Za-z0-9\u4e00-\u9fa5\.]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.account);
let weiXinReg = /^[a-zA-Z][a-zA-Z\d_-]{5,19}$/.test(this.account);
let regFlag = true;
const array = [nameReg, phoneReg, emailsReg, phoneReg || emailsReg, qqReg,
phoneReg || qqReg, emailsReg || qqReg, phoneReg || emailsReg || qqReg, weiXinReg,
phoneReg || weiXinReg, emailsReg || weiXinReg, phoneReg || emailsReg || weiXinReg,
qqReg || weiXinReg, phoneReg || qqReg || weiXinReg, emailsReg || qqReg || weiXinReg,
phoneReg || emailsReg || qqReg || weiXinReg]
regFlag = array[this.productType]
if (!regFlag) {
this.openDialog("充值账号格式不正确!");
return false;
}
}
if (this.reAccount == "") {
this.openDialog("请再次输入账号!");
return false;
}
if (this.account != this.reAccount) {
this.reAccount == ""
this.openDialog("两次输入的账号必须一致!");
return false;
}
}
this.show = true
},
focusFn (a) {
let ele = document.querySelector('.ipt-acc');
setTimeout(function () {
ele.scrollIntoView(false);
document.body.scrollTop = ele.scrollHeight;
document.documentElement.scrollTop = ele.scrollHeight;
}, 400);
},
/* 去支付 */
async payFunction ({ payType, isSupport }) {
this.payType = payType
this.show = false
let orderInfo = await this.createdOrder(payType);
this.createdPay(orderInfo.order_number);
},
//创建优惠券订单
createdOrder (payType) {
let self = this;
let data = {
"token": localStorage.getItem('token'),
"key": localStorage.getItem('key'),
"code_batch_id": this.goodInfo.code_batch_id,
"goods_id": this.goodInfo.goods_id,
"account": this.account,
"pay_type": payType == 2 ? 1 : 5
}
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 == -1) {
if (goodsCount > 1) {
setTimeout(() => {
window.location.replace('./couponCollection.html');
}, 3000);
} else {
/*跳转起始页面*/
let entryLink = localStorage.getItem('entryLink');
setTimeout(() => {
window.location.replace(entryLink);
}, 3000);
}
}
}
}).catch(err => {
});
});
},
//优惠券订单支付
createdPay (orderNumber) {
req.axiosGet('/key/coupon/createPay/' + orderNumber).then(res => {
if (res.code == 200) {
//判断打开链接的环境
console.log(382, res.data);
this.payWayRun(res.data);
} else {
this.openErrorDialog(res.message);
}
}).catch(err => { });
},
//根据环境去执行
payWayRun (result) {
console.log(391, this.payType);
if (this.payType == 1) {// 1微信支付 2 支付宝支付
if (isWx()) {
} else {
}
}
if (this.payType == 2) {// 1微信支付 2 支付宝支付
if (isWx()) {
} else {
window.location.href = result;
}
}
},
/* 监听账号 */
watchAccount () {
if (this.account === this.reAccount) {
this.exchangeOpen = true;
} else {
this.exchangeOpen = false;
}
}
},
})
</script>
</html>