mobileclient/v1_5_0_C/exchange.html

433 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="./exchange.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_4_0.js"></script>
<script src="./payPop.js"></script>
<link rel="stylesheet" href="./payPop.css">
</head>
<body>
<div id="exchangePage">
<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" 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">共省¥ {{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 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&&goodsDetail.type===1"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png" alt="">
<!-- 弹出框 -->
<!-- 支付弹窗 -->
<pay-pop :show.sync="show" :active="active" @payFunction="payFunction" />
<!-- 弹出提示 -->
<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>{{this.successTip}}</p>
<span @click="successchangeBtnFn">我知道啦</span>
</div>
</div>
</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,
popBoxType: '',
describe: {},
detailUrl: '',
successTip: '',
goodInfo: '',
bgcolor: '',
ftColor: '',
goodsDetail: {},//商品详情
backAble: true,
bindClick: false,//控制遮罩显示
goodsShow: [
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220120/9bedd7af6a8a570be8f2858564f9ec6d.png'
],
show: false,
active: 1
}
},
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: {
payPop
},
created () {
document.title = sessionStorage.getItem('title');
let detailsConfig = JSON.parse(sessionStorage.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.goodsDetail = goodsDetail;//商品详情
let goodsInform = goodsDetail.entity; //商品信息
this.goodInfo = goodsInform;
let goods_desc = goodsInform.describe_url;
this.goodsShow = 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.maskshow = true;
this.popBoxType = '提示';
this.tiptext = tip;
this.popboxshow = true;
},
backHandler () {
if (goodsCount > 1) {
window.location.replace('./couponCollection.html');
} else {
history.go(-2);
}
},
closeTip () {
this.suspension = false;
},
susTipFn () {
this.suspension = true;
},
// 单条弹框
openDialog (tip) {
this.promtshow = true;
this.promttip = tip
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000)
},
//刷新页面
successchangeBtnFn () {
console.log(window);
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
this.popboxshow = true;
this.popBoxType = '兑换';
},
//确定兑换
surexchangeBtn () {
let self = this;
let data = {
"key": sessionStorage.getItem('key'),
"goods_id": this.goodInfo.goods_id,
"account": this.account,
"code_batch_id": this.goodInfo.code_batch_id,
"token": sessionStorage.getItem('token')
}
req.axiosPost('/key/usage', data).then(res => {
// sessionStorage.setItem('lastid', self.goodInfo.product_id);
if (res.code == 200) {
sessionStorage.setItem('lastid', self.goodInfo.product_id);
// 查询订单接口
this.popBoxType = '成功';
this.popboxshow = true;
this.successTip = '兑换成功请直接登录app使用';
} else {
this.openErrorDialog(res.message);
if (res.code == -1) {
if (goodsCount > 1) {
setTimeout(() => {
window.location.replace('./homepage.html');
}, 3000);
} else {
// let backUrl = window.history.length;
// if (backUrl) {
// history.go(-backUrl + 1);
// }
/*跳转起始页面*/
let entryLink = sessionStorage.getItem('entryLink');
setTimeout(() => {
window.location.replace(entryLink);
}, 3000);
}
}
}
}).catch(err => {
});
},
//关闭弹出框,仅关闭弹框
successchangeBtn () {
this.maskshow = false;
this.popboxshow = false;
this.account = "";
this.reAccount = "";
},
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 = "";
this.reAccount = "";
},
/* 去支付 */
payFunction ({ type, isSupport }) {
this.active = type
this.show = false
alert(isSupport ? '不持支' : '支持')
},
/* 监听账号 */
watchAccount () {
if (this.account === this.reAccount) {
this.exchangeOpen = true;
} else {
this.exchangeOpen = false;
}
}
},
})
</script>
</html>