mobileclient/exchange.html

557 lines
21 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>
<style>
* {
margin: 0 auto;
padding: 0;
font-family: HYQiHei;
}
html {
font-size: 26.66666667vw;
}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
</style>
<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/homepage2_0.css?v=2">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js?v=1000"></script>
</head>
<body>
<div id="exchangePage">
<div v-if="!suspension">
<div class="about-good">
<span>
<img @click="backgoodsFn" v-if="backAble"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
</span>
<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: 99;" @click="bindAvailable">
<h4 class="title">{{goodInfo.product_name}}</h4>
<template v-if="goodInfo.product_type===1||goodInfo.product_type===2&&goodInfo.card_show==1">
<!-- 京东E卡 -->
<template v-if="goodInfo.is_e_card">
<p>
<span>账号:</span>
<input :type="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')"
:disabled="goodsDetail.available!=1 || !!goodsDetail.account"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="11" v-model="account"
placeholder="请输入手机号" @focus="(e)=>focusFn(e)">
</p>
<p>
<span>验证码:</span>
<input class="queryCode" :type="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')"
:disabled="goodsDetail.available!=1"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="6" v-model="jd_code"
placeholder="请输入验证码" @focus="(e)=>focusFn(e)">
<button :disabled="!computedAccount" class="query-code" @click="sendJDSms">
{{cunt!==60?cunt+'s':'获取验证码'}}
</button>
</p>
</template>
<!-- 非E卡 -->
<template v-else>
<p v-if="acctype=='tel'"><span>账号:</span><input :type="acctype"
onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1 || !!goodsDetail.account"
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 || !!goodsDetail.account"
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 || !!goodsDetail.account" :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 || !!goodsDetail.account" placeholder="请再次输入" @focus="(e)=>focusFn(e)"></p>
</template>
</template>
</div>
<div class="bottom" id="bottom" 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 class="e-btn-box">
<div class="order-box" v-if="!backAble">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/toOrder.png" alt=""
@click="()=>{location.href='./order.html'}">
<p>订单</p>
</div>
<button class="exchange-btn"
:style="{'background': computedExChange?bgcolor:'#D7D7D7','color':computedExChange?ftcolor:'#333'}"
@click="exchangeGoodsFn">{{buttonTextFun(goodsDetail.type,'exchange')}}</button>
</div>
</div>
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</div>
<!-- 弹出框 -->
<div class="mask" v-if="maskshow">
</div>
<!-- 悬浮提示 -->
<div v-if="suspension" class="suspensionDom">
<img @click="closeTip" 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="susTipFn" v-if="describe.type==2&&describe.content&&!suspension"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png" alt="">
<!-- 弹出框 -->
<!-- 询问 -->
<div class="popboxshow" v-if="popboxshow&&popboxtype=='兑换'" :class="popboxshow?'active':''">
<div>
<p v-if="acctype=='tel'">{{goodInfo.product_type===1?`是否为账号${this.account}兑换${this.proname}权益?`:'是否确认兑换?'}}</p>
<p v-if="acctype=='text'">是否兑换{{this.proname}}权益?</p>
<span @click="surexchangeBtn">确认兑换</span>
</div>
</div>
<!-- 弹出提示 -->
<div class="popboxshow" v-if="popboxshow&&popboxtype=='提示'" :class="popboxshow?'active':''">
<div class="tip">
<p>{{tiptext}}</p>
<span @click="successchangeBtn">知道了</span>
</div>
</div>
<!-- 成功 -->
<div class="popboxshow successbox" v-if="popboxshow&&popboxtype=='成功'" :class="popboxshow?'active':''">
<div>
<p :style="{fontSize:goodInfo.card_show===2?'0.13rem':''}">{{this.successTip}}</p>
<span @click="successchangeBtnFn">我知道啦</span>
</div>
</div>
<img v-if="popboxshow&&popboxtype!='成功'" class="closed"
src="https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/cardpwd/img/commimgs/close.png" alt=""
@click="closeBtn()">
</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,
proname: '',
placeholder: '',
maskshow: false,
popboxshow: false,
exchangeOpen: false,
suspension: false,
cunt: 60,
jd_code: '',
popboxtype: '',
describe: {},
detailUrl: '',
successTip: '',
goodInfo: '',
bgcolor: '',
ftcolor: '',
goodsDetail: {},//商品详情
backAble: true,
bindClick: false,//控制遮罩显示
order_number: 0,
goodsShow: [
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220120/9bedd7af6a8a570be8f2858564f9ec6d.png'
]
};
},
created () {
document.title = localStorage.getItem('title');
let detailsConfig = JSON.parse(localStorage.getItem('product_detail'));
goodsCount = sessionStorage.getItem('goodsCount');
this.backAble = goodsCount > 1;//多个商品才有返回
this.bgcolor = detailsConfig.button_color;
this.ftcolor = detailsConfig.font_color;
this.describe = detailsConfig.describe;
goodsDetail = JSON.parse(sessionStorage.getItem('goodsInfo'));//商品详情
this.account = goodsDetail.account;
this.reaccount = goodsDetail.account;
this.goodsDetail = goodsDetail;//商品详情
let goodsInform = goodsDetail.entity; //商品信息
this.goodInfo = goodsInform;
let goods_desc = goodsInform.describe_url;
this.goodsShow = goods_desc.length > 0 ? goods_desc : [goodsInform.show_url];
this.detailUrl = goodsInform.detail_url ? goodsInform.detail_url : '';
this.productType = goodsDetail.entity.account_type;
/* 区分卡密短信 */
if (goodsInform.product_type === 2 && goodsInform.card_show == 1) {
this.productType = 1;
} else {
this.productType = goodsInform.account_type;
}
/* 微博 */
if (goodsDetail.entity.account_type == 0 && goodsInform.product_name.indexOf('微博') !== -1) {
this.productType = 99;
}
this.$nextTick(function () {
var swiper = new Swiper('.swiper-container', {
loop: true, // 循环模式选项
autoplay: 3000, //可选选项,自动滑动
pagination: '.swiper-pagination',
});
});
},
methods: {
bindAvailable () {
if (goodsDetail.available != 1) {
if(goodsDetail.available === 23 || goodsDetail.period_tips_text) {
return this.openErrorDialog(goodsDetail.period_tips_text)
} else {
return this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
}
// this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
// return;
}
},
/* 获取京东E卡短信 */
sendJDSms () {
if (this.cunt === 60) {
req.axiosPost('/key/order/jdSendSms', { code_batch_id: this.goodsDetail.code_batch_id, mobile: this.account })
.then((res) => {
if (res.code == 200) {
this.openDialog('短信下发成功!');
const clr = setInterval(() => {
if (this.cunt <= 1) {
this.cunt = 60;
return clearInterval(clr);
}
this.cunt--;
}, 1000);
} else {
this.openErrorDialog(res.message);
}
});
}
},
openErrorDialog (tip) {
this.maskshow = true;
this.popboxtype = '提示';
this.tiptext = tip;
this.popboxshow = true;
},
backgoodsFn () {
if (goodsCount > 1) {
window.location.replace('./homepage.html');
} else {
history.go(-2);
}
},
closeTip () {
this.suspension = false;
},
susTipFn () {
this.suspension = true;
},
// 单条弹框
openDialog (tip) {
this.promtshow = true;
this.promttip = tip;
const clr = setTimeout(() => {
this.promtshow = false;
this.promttip = '';
clearTimeout(clr);
}, 3000);
},
//刷新页面
successchangeBtnFn () {
window.location.replace(document.referrer);
},
//兑换商品
exchangeGoodsFn () {
if (goodsDetail.available != 1) {
if(this.goodsDetail.available === 23 || this.goodsDetail.period_tips_text) {
return this.openErrorDialog(this.goodsDetail.period_tips_text)
} else {
return this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
}
}
/* 卡密商品直接兑换 */
if (this.goodInfo.product_type === 2 && this.goodInfo.card_show == 2) {
/* 当只有一个卡密商品、为线上查看卡密且只能兑换一次时执行 */
if (!this.backAble && this.goodsDetail.restrict == 1) {
return this.surexchangeBtn();
} else {
this.maskshow = true;
this.popboxshow = true;
this.popboxtype = '兑换';
return;
}
}
/* 京东E卡 */
if (this.goodInfo.is_e_card && this.goodInfo.product_type === 1) {
if (this.computedExChange) {
this.maskshow = true;
this.popboxshow = true;
this.popboxtype = '兑换';
}
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;
if ([0, 99].includes(this.productType)) {
/* 不做校验 */
} else if (this.productType == 1) {
regflag = phonereg;
} else if (this.productType == 2) {
regflag = emailsreg;
} else if (this.productType == 3) {
regflag = phonereg || emailsreg;
} else if (this.productType == 4) {
regflag = qqreg;
} else if (this.productType == 5) {
regflag = phonereg || qqreg;
} else if (this.productType == 6) {
regflag = emailsreg || qqreg;
} else if (this.productType == 7) {
regflag = phonereg || emailsreg || qqreg;
} else if (this.productType == 8) {
regflag = weixinreg;
} else if (this.productType == 9) {
regflag = phonereg || weixinreg;
} else if (this.productType == 10) {
regflag = emailsreg || weixinreg;
} else if (this.productType == 11) {
regflag = phonereg || emailsreg || weixinreg;
} else if (this.productType == 12) {
regflag = qqreg || weixinreg;;
} else if (this.productType == 13) {
regflag = phonereg || qqreg || weixinreg;
} else if (this.productType == 14) {
regflag = emailsreg || qqreg || weixinreg;
} else {
regflag = phonereg || emailsreg || qqreg || weixinreg;
}
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.maskshow = true;
this.popboxshow = true;
this.popboxtype = '兑换';
},
//确定兑换
surexchangeBtn () {
this.maskshow = false;
let self = this;
let data = {
"key": localStorage.getItem('key'),
"goods_id": this.goodInfo.goods_id,
"account": this.account,
"code_batch_id": this.goodInfo.code_batch_id,
"token": localStorage.getItem('token'),
'jd_code': this.jd_code
};
self.popboxshow = false;
req.axiosPost('/key/usage', data).then(res => {
if (res.code == 200) {
this.popboxtype = '成功';
sessionStorage.setItem('lastid', self.goodInfo.product_id);
sessionStorage.setItem('orderNumber', res.data.order_number);
/* product_type:2 兑换码
* card_show:2 线上查看卡密信息
* backAble是否多个商品
*/
this.openDialog("兑换成功");
const clr = setTimeout(() => {
if (this.goodInfo.product_type === 2) {
window.location.href = './orderDetails/cardOrder.html';
} else {
window.location.href = './orderDetails/chargerOrder.html';
}
clearTimeout(clr);
}, 1000);
} else {
this.openErrorDialog(res.message);
if (res.code == 403) {
if (goodsCount > 1) {
setTimeout(() => {
window.location.replace('./homepage.html');
}, 3000);
} else {
/*跳转起始页面*/
let entryLink = localStorage.getItem('entryLink');
setTimeout(() => {
window.location.replace(entryLink);
}, 3000);
}
}
}
}).catch(err => {
});
},
//关闭弹出框,仅关闭弹框
successchangeBtn () {
this.maskshow = false;
this.popboxshow = false;
this.account = goodsDetail.account ? goodsDetail.account : "";
this.reaccount = goodsDetail.account ? goodsDetail.account : "";
this.jd_code = '';
},
focusFn (a) {
let ele = document.querySelector('.ipt-acc');
setTimeout(function () {
ele.scrollIntoView(false);
document.body.scrollTop = ele.scrollHeight;
document.documentElement.scrollTop = ele.scrollHeight;
}, 400);
},
//关闭,关闭弹框
closeBtn () {
this.popboxshow = false;
this.maskshow = false;
this.account = goodsDetail.account ? goodsDetail.account : "";
this.reaccount = goodsDetail.account ? goodsDetail.account : "";
this.jd_code = "";
},
},
computed: {
/* 手机号验证 */
computedAccount () {
return /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.account);
},
/* 兑换按钮验证 */
computedExChange () {
return this.exchangeOpen || (this.goodInfo.product_type === 2 && this.goodInfo.card_show == 2) || this.goodInfo.is_e_card && this.computedAccount && this.jd_code.length === 6;
}
},
watch: {
account () {
if ((this.account == this.reaccount) && this.account) {
this.exchangeOpen = true;
} else {
this.exchangeOpen = false;
}
},
reaccount () {
if ((this.account == this.reaccount) && this.account) {
this.exchangeOpen = true;
} else {
this.exchangeOpen = false;
}
},
productType: {
immediate: true,
handler (newVal) {
this.maxlen = 50;
this.acctype = "text";
if (newVal == 0) {
this.placeholder = "请输入账号";
} else if (newVal == 1) {
this.acctype = "tel";
this.placeholder = "请输入手机号";
this.maxlen = 11;
} else if (newVal == 2) {
this.placeholder = "请输入邮箱";
} else if (newVal == 3) {
this.placeholder = "请输入手机号或邮箱";
} else if (newVal == 4) {
this.placeholder = "请输入QQ号";
this.acctype = "tel";
this.maxlen = 10;
} else if (newVal == 5) {
this.placeholder = "请输入手机号或QQ号";
this.maxlen = 11;
this.acctype = "tel";
} else if (newVal == 6) {
this.placeholder = "请输入邮箱或QQ号";
} else if (newVal == 7) {
this.placeholder = "请输入手机号/邮箱/QQ号";
} else if (newVal == 8) {
this.placeholder = "请输入微信号";
this.maxlen = 20;
} else if (newVal == 9) {
this.placeholder = "请输入手机号或微信";
this.maxlen = 20;
} else if (newVal == 10) {
this.placeholder = "请输入邮箱或微信号";
} else if (newVal == 11) {
this.placeholder = "请输入手机号/邮箱/微信号";
} else if (newVal == 12) {
this.placeholder = "请输入QQ号或微信号";
this.maxlen = 20;
} else if (newVal == 13) {
this.placeholder = "请输入手机号/QQ号/微信号";
this.maxlen = 20;
} else if (newVal == 14) {
this.placeholder = "请输入邮箱/QQ号/微信号";
} else if (newVal == 99) {
this.placeholder = "请输入昵称";
} else {
this.placeholder = "请输入手机号/邮箱/QQ号/微信号";
}
}
}
}
})
</script>
</html>