2022-09-21 17:30:39 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<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">
|
2022-09-28 14:20:27 +08:00
|
|
|
<title>权益兑换页</title>
|
2022-09-21 17:30:39 +08:00
|
|
|
<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>
|
|
|
|
|
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
|
2022-10-08 10:35:21 +08:00
|
|
|
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/index.css">
|
2022-09-21 17:30:39 +08:00
|
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script>
|
2022-10-08 10:41:37 +08:00
|
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
|
|
|
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/modelPop.js"></script>
|
2022-09-21 17:30:39 +08:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app" :style={background:bgcolor}>
|
2022-09-27 17:08:43 +08:00
|
|
|
<!-- 弹出提示 -->
|
|
|
|
|
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText"></model-pop>
|
|
|
|
|
|
2022-09-21 17:30:39 +08:00
|
|
|
<!-- 单条弹出框 -->
|
|
|
|
|
<div class="prompt" :class="promtshow?'proactive':''">
|
|
|
|
|
{{this.promttip}}
|
|
|
|
|
</div>
|
2022-09-27 17:08:43 +08:00
|
|
|
|
2022-09-21 17:30:39 +08:00
|
|
|
<div class="um-content" v-if="loading" ref="load">
|
|
|
|
|
<preload-component />
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!loading">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<img :src="topImg" id="top">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="center" id="center">
|
|
|
|
|
<img :src="middleImg" style="position: absolute;z-index: 1;" id="center_img">
|
2022-09-23 17:00:23 +08:00
|
|
|
<input class="key" :maxlength="16" v-if="[3,4].includes(pageType)" :style={color:ftcolor?ftcolor:'#333'}
|
2022-09-21 17:30:39 +08:00
|
|
|
placeholder="请输入兑换码" v-model="key" />
|
2022-09-23 17:00:23 +08:00
|
|
|
<input class="code" :maxlength="5" v-if="[3,4].includes(pageType)" :style={color:ftcolor?ftcolor:'#333'}
|
2022-09-21 17:30:39 +08:00
|
|
|
placeholder="请输入验证码" v-model="code" />
|
|
|
|
|
|
2022-09-23 17:00:23 +08:00
|
|
|
<input class="key" :maxlength="11" v-if="[1,8].includes(pageType)" :style={color:ftcolor?ftcolor:'#333'}
|
2022-09-21 17:30:39 +08:00
|
|
|
placeholder="请输入手机号" v-model="key" />
|
2022-09-23 17:00:23 +08:00
|
|
|
<input class="code" :maxlength="6" v-if="[1,8].includes(pageType)" :style={color:ftcolor?ftcolor:'#333'}
|
2022-09-21 17:30:39 +08:00
|
|
|
placeholder="请输入验证码" v-model="code" />
|
|
|
|
|
|
2022-09-26 09:45:20 +08:00
|
|
|
<img src="#" alt="" class="codeimg" v-if="[3,4].includes(pageType)" id="captcha_img"
|
|
|
|
|
@click="captchaimg()" />
|
|
|
|
|
<button class="codeimg" :class="disabled?'disabledstyle':'active'" v-if="[1,8].includes(pageType)"
|
|
|
|
|
@click="getcode()" :disabled="disabled">{{codetip}}</button>
|
2022-09-21 17:30:39 +08:00
|
|
|
<div class="submit" @click="submit"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom" id="bottom">
|
|
|
|
|
<img :src="describe.bg_image" v-show="describe.type&&describe.bg_image">
|
|
|
|
|
<div v-html="describe.content" class="tipBottomtext" v-show="describe.type==2&&describe.content"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script>
|
|
|
|
|
new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
loading: true,
|
|
|
|
|
pageType: 1,
|
|
|
|
|
key: '',
|
|
|
|
|
code: '',
|
|
|
|
|
disabled: true,
|
|
|
|
|
codetip: '获取验证码',
|
|
|
|
|
topImg: '',
|
|
|
|
|
middleImg: '',
|
|
|
|
|
describe: {},
|
|
|
|
|
ftcolor: '',
|
|
|
|
|
bgcolor: '#333',
|
|
|
|
|
promttip: '',
|
|
|
|
|
promtshow: false,
|
|
|
|
|
tiptext: '提示信息',
|
|
|
|
|
plan_id: '',
|
2022-09-23 16:54:14 +08:00
|
|
|
disabledBtn: false,
|
2022-09-26 09:45:20 +08:00
|
|
|
typeList: {//1 白名单 3 兑换码 4优惠券 8 优惠券白名单
|
|
|
|
|
'1': 'access_conf',
|
|
|
|
|
'3': 'exchange',
|
|
|
|
|
'4': 'coupon',
|
|
|
|
|
'8': 'coupon',
|
2022-09-27 17:08:43 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/* 提示框状态 */
|
|
|
|
|
popShow: false,
|
|
|
|
|
popTitle: '',
|
|
|
|
|
popText: '',
|
2022-09-28 10:48:04 +08:00
|
|
|
popStatus: 1 /*1 成功 2提示 3失败 */
|
2022-09-21 17:30:39 +08:00
|
|
|
}
|
|
|
|
|
},
|
2022-09-27 17:08:43 +08:00
|
|
|
|
|
|
|
|
components: {
|
|
|
|
|
modelPop
|
|
|
|
|
},
|
|
|
|
|
|
2022-09-21 17:30:39 +08:00
|
|
|
created () {
|
2022-09-23 17:00:23 +08:00
|
|
|
captchaimg()
|
2022-09-21 17:30:39 +08:00
|
|
|
let self = this;
|
|
|
|
|
//获取链接携带的参数
|
|
|
|
|
let linkId = this.getQueryString('id');
|
|
|
|
|
let keyCode = this.getQueryString('key');
|
|
|
|
|
if (!linkId) {//地址栏无携带id
|
|
|
|
|
let path = window.location.pathname;
|
|
|
|
|
let parmas = path.split('/');
|
|
|
|
|
let parmasResult = parmas.filter(n => n);
|
|
|
|
|
linkId = parmasResult.length > 0 ? parmasResult[0] : null; //链接携带落地页渲染id
|
|
|
|
|
keyCode = parmasResult.length > 1 ? parmasResult[1] : null; //链接携带key
|
|
|
|
|
}
|
|
|
|
|
if (linkId.length > 10) {
|
|
|
|
|
req.axiosGet('/plan/plan_theme/' + linkId).then(res => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
window.location.replace(res.data);
|
|
|
|
|
self.loading = false;
|
|
|
|
|
return;
|
|
|
|
|
} else {
|
|
|
|
|
self.openErrorDialog(res.message);
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => { })
|
|
|
|
|
}
|
|
|
|
|
req.axiosGet('/plan/plan_theme/' + linkId).then(res => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
//内置页顶图
|
|
|
|
|
document.title = res.data.title;
|
|
|
|
|
self.plan_id = res.data.plan_id
|
|
|
|
|
this.pageType = res.data.page;
|
2022-10-08 18:06:14 +08:00
|
|
|
localStorage.setItem('title', res.data.title);
|
|
|
|
|
localStorage.setItem('product_list', JSON.stringify(res.data[this.typeList[res.data.page]].product_list));
|
|
|
|
|
localStorage.setItem('product_detail', JSON.stringify(res.data[this.typeList[res.data.page]].product_detail));
|
2022-09-21 17:30:39 +08:00
|
|
|
self.loading = false;
|
2022-10-08 18:06:14 +08:00
|
|
|
localStorage.setItem('linkId', linkId);
|
2022-09-21 17:30:39 +08:00
|
|
|
//是否携带token
|
|
|
|
|
if (keyCode) {
|
|
|
|
|
let data = {
|
|
|
|
|
key: keyCode
|
|
|
|
|
}
|
|
|
|
|
req.axiosPost('/key/loginFromLink', data).then(res => {
|
|
|
|
|
if (res.code == 200) {
|
2022-10-08 18:06:14 +08:00
|
|
|
localStorage.setItem('key', keyCode);
|
|
|
|
|
localStorage.setItem('token', res.data.token);
|
2022-09-21 17:30:39 +08:00
|
|
|
sessionStorage.setItem('haskey', keyCode);
|
|
|
|
|
this.openDialog('正在加载商品...');
|
2022-10-08 18:06:14 +08:00
|
|
|
localStorage.setItem('entryLink', window.location.href);//存储起始页链接
|
2022-10-08 16:46:18 +08:00
|
|
|
setTimeout(() => {
|
|
|
|
|
if (this.pageType === 4) {
|
|
|
|
|
window.location.href = './couponCollection.html';
|
|
|
|
|
} else {
|
|
|
|
|
window.location.href = '../homepage.html';
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
2022-09-21 17:30:39 +08:00
|
|
|
} else {
|
|
|
|
|
self.openErrorDialog(res.message);
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => { });
|
|
|
|
|
} else {
|
2022-09-26 09:45:20 +08:00
|
|
|
let keyName = this.typeList[this.pageType];
|
2022-09-21 17:30:39 +08:00
|
|
|
self.bgcolor = res.data[keyName].land.bg_color;
|
|
|
|
|
self.ftcolor = res.data[keyName].land.font_color;
|
|
|
|
|
self.topImg = res.data[keyName].land.top_image;
|
|
|
|
|
self.middleImg = res.data[keyName].land.middle_image;
|
|
|
|
|
self.describe = res.data[keyName].land.describe;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => { });
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
let img = document.getElementById("center_img")
|
|
|
|
|
let center = document.getElementById("center")
|
|
|
|
|
img.onload = function (e) {
|
|
|
|
|
center.style.height = img.clientHeight + "px";
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
2022-09-27 17:08:43 +08:00
|
|
|
|
2022-09-21 17:30:39 +08:00
|
|
|
//获取白名单验证码
|
|
|
|
|
getcode () {
|
|
|
|
|
let self = this;
|
|
|
|
|
let data = {
|
|
|
|
|
'mobile': this.key,
|
|
|
|
|
'plan_id': this.plan_id
|
|
|
|
|
}
|
|
|
|
|
req.axiosPost('/sms/sendMobileExchangeCode', data).then(res => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
let timeId = 60;
|
|
|
|
|
let timer = setInterval(() => {
|
|
|
|
|
timeId--;
|
|
|
|
|
if (timeId > 0) {
|
|
|
|
|
self.codetip = timeId + 's';
|
|
|
|
|
self.disabled = true;
|
|
|
|
|
} else {
|
|
|
|
|
clearInterval(timer);
|
|
|
|
|
self.codetip = '获取验证码';
|
|
|
|
|
self.disabled = false;
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
} else {
|
|
|
|
|
self.openErrorDialog(res.message);
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => { });
|
|
|
|
|
},
|
|
|
|
|
submit () {
|
|
|
|
|
let self = this;
|
|
|
|
|
if (!this.key) {
|
|
|
|
|
this.openDialog('请输入兑换码');
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (!this.code) {
|
|
|
|
|
this.openDialog('请输入验证码');
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (this.disabledBtn) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.disabledBtn = true;
|
2022-10-08 10:35:21 +08:00
|
|
|
if ([3, 4].includes(this.pageType)) {//兑换码、优惠卷
|
2022-09-21 17:30:39 +08:00
|
|
|
let data = {
|
|
|
|
|
"key": this.key,
|
|
|
|
|
"code": this.code,
|
2022-10-08 18:06:14 +08:00
|
|
|
"code_unique_str": localStorage.getItem('unique_str')
|
2022-09-21 17:30:39 +08:00
|
|
|
}
|
|
|
|
|
req.axiosPost('/key/login', data).then(res => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
self.disabledBtn = false;
|
|
|
|
|
}, 2000);
|
|
|
|
|
|
|
|
|
|
if (res.code == 200) {
|
2022-10-08 18:06:14 +08:00
|
|
|
localStorage.setItem('key', self.key);
|
|
|
|
|
localStorage.setItem('token', res.data.token);
|
2022-09-21 17:30:39 +08:00
|
|
|
this.openDialog('正在加载商品...');
|
2022-10-08 18:06:14 +08:00
|
|
|
localStorage.setItem('entryLink', window.location.href);//存储起始页链接
|
2022-09-21 17:30:39 +08:00
|
|
|
setTimeout(() => {
|
2022-10-08 16:46:18 +08:00
|
|
|
if (this.pageType === 4) {
|
|
|
|
|
window.location.href = './couponCollection.html';
|
|
|
|
|
} else {
|
|
|
|
|
window.location.href = '../homepage.html';
|
|
|
|
|
}
|
2022-09-21 17:30:39 +08:00
|
|
|
}, 1000);
|
|
|
|
|
} else {
|
|
|
|
|
self.openErrorDialog(res.message);
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => { });
|
2022-10-08 10:35:21 +08:00
|
|
|
} else if ([1, 8].includes(this.pageType)) {//白名单
|
2022-09-21 17:30:39 +08:00
|
|
|
let par = {
|
|
|
|
|
"code": this.code,
|
|
|
|
|
"mobile": this.key,
|
|
|
|
|
"plan_id": this.plan_id
|
|
|
|
|
}
|
|
|
|
|
let getTokenList = [];//多个批次下的key存放token
|
|
|
|
|
req.axiosPostgetKey('/key/getKeyByMobile', par).then(async res => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
self.disabledBtn = false;
|
|
|
|
|
}, 2000);
|
|
|
|
|
if (res.data.code == 200) {
|
2022-10-08 18:06:14 +08:00
|
|
|
localStorage.setItem('key', self.key);
|
|
|
|
|
localStorage.setItem('token', res.data.data);
|
|
|
|
|
localStorage.setItem('showType', 1);
|
|
|
|
|
localStorage.setItem('white_link', window.location.href);
|
2022-09-21 17:30:39 +08:00
|
|
|
let tokenArr = res.data.data;
|
|
|
|
|
let istoGoods = false;
|
|
|
|
|
for (item of tokenArr) {
|
|
|
|
|
let obj = {}
|
|
|
|
|
let data = {
|
|
|
|
|
"code_unique_str": res.headers['unique-str'],
|
|
|
|
|
"key": item
|
|
|
|
|
}
|
|
|
|
|
let wait = await req.axiosPost('/key/loginFromMobileKey', data).then(res => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
getTokenList.push(res.data.token);
|
|
|
|
|
istoGoods = true;
|
|
|
|
|
} else {
|
|
|
|
|
if (res.message == '活动暂停中') {
|
|
|
|
|
self.tiptext = res.message;
|
|
|
|
|
istoGoods = false;
|
|
|
|
|
} else {
|
|
|
|
|
self.tiptext = res.message;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => { });
|
|
|
|
|
};
|
|
|
|
|
if (istoGoods) {
|
2022-10-08 18:06:14 +08:00
|
|
|
localStorage.setItem('getTokenList', JSON.stringify(getTokenList));
|
2022-09-21 17:30:39 +08:00
|
|
|
this.openDialog('正在加载商品...');
|
2022-10-08 18:06:14 +08:00
|
|
|
localStorage.setItem('entryLink', window.location.href);//存储起始页链接
|
2022-09-21 17:30:39 +08:00
|
|
|
setTimeout(() => {
|
2022-10-08 16:46:18 +08:00
|
|
|
window.location.href = '../homepage.html';
|
2022-09-21 17:30:39 +08:00
|
|
|
}, 1000);
|
|
|
|
|
} else {
|
|
|
|
|
self.openErrorDialog(self.tiptext);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
self.openErrorDialog(res.data.message);
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => { });
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
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;
|
|
|
|
|
},
|
|
|
|
|
// 单条弹框
|
|
|
|
|
openDialog (tip) {
|
|
|
|
|
this.promtshow = true;
|
|
|
|
|
this.promttip = tip
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.promtshow = false;
|
|
|
|
|
this.promttip = '';
|
|
|
|
|
}, 3000)
|
|
|
|
|
},
|
|
|
|
|
//错误弹出框
|
|
|
|
|
openErrorDialog (tip) {
|
2022-09-27 17:08:43 +08:00
|
|
|
this.popTitle = '温馨提示'
|
|
|
|
|
this.popText = tip
|
2022-09-28 10:48:04 +08:00
|
|
|
this.popStatus = 3
|
2022-09-27 17:08:43 +08:00
|
|
|
this.popShow = true
|
2022-09-21 17:30:39 +08:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
key (val) {
|
|
|
|
|
this.disabled = Boolean(!(this.pageType == 1 && val.length == 11));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
2022-09-22 14:13:46 +08:00
|
|
|
</html>
|
