mobileclient/index.html

366 lines
16 KiB
HTML
Raw Normal View History

2021-11-26 14:40:45 +08:00
<!DOCTYPE html>
<html>
2021-11-26 14:40:45 +08:00
<head>
<meta charset="utf-8">
2022-11-18 18:05:01 +08:00
<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>
2022-11-18 18:05:01 +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">
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/index.css">
2022-06-13 16:49:06 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
2022-11-02 15:07:29 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js"></script>
<style>
2022-10-25 17:51:29 +08:00
input {
color: var(--placeholderColor);
}
2022-10-25 17:51:29 +08:00
input::placeholder {
2022-10-25 17:51:29 +08:00
color: var(--placeholderColor);
}
</style>
2021-11-26 14:40:45 +08:00
</head>
2022-04-18 15:21:35 +08:00
2021-11-26 14:40:45 +08:00
<body>
<div id="app" :style={background:bgcolor}>
<!-- 弹出提示 -->
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText"></model-pop>
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</div>
<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-10-25 17:51:29 +08:00
<input class="key" :maxlength="16" v-if="[3,4].includes(pageType)" :style="bindInputStyle"
placeholder="请输入兑换码" v-model="key" />
2022-10-25 17:51:29 +08:00
<input class="code" :maxlength="5" v-if="[3,4].includes(pageType)" :style="bindInputStyle"
placeholder="请输入验证码" v-model="code" />
2021-12-29 11:51:28 +08:00
2022-10-25 17:51:29 +08:00
<input class="key" :maxlength="11" v-if="[1,8].includes(pageType)" :style="bindInputStyle"
placeholder="请输入手机号" v-model="key" />
2022-10-25 17:51:29 +08:00
<input class="code" :maxlength="6" v-if="[1,8].includes(pageType)" :style="bindInputStyle"
placeholder="请输入验证码" v-model="code" />
2021-12-29 11:51:28 +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>
<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>
2021-11-26 14:40:45 +08:00
</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: '',
disabledBtn: false,
typeList: {//1 白名单 3 兑换码 4优惠券 8 优惠券白名单
'1': 'access_conf',
'3': 'exchange',
'4': 'coupon',
'8': 'coupon',
},
/* 提示框状态 */
popShow: false,
popTitle: '',
popText: '',
popStatus: 1 /*1 成功 2提示 3失败 */
2022-11-18 18:05:01 +08:00
};
},
components: {
modelPop
},
created () {
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);
2022-11-18 18:05:01 +08:00
linkId = parmasResult && parmasResult.length > 0 ? parmasResult[0] : 1402; //链接携带落地页渲染id
keyCode = parmasResult && parmasResult.length > 1 ? parmasResult[1] : null; //链接携带key
}
if (linkId.length > 10) {
req.axiosGet('/plan/plan_theme/' + linkId).then(res => {
if (res.code == 200) {
2022-11-02 20:10:56 +08:00
window.location.replace(res.data);
self.loading = false;
return;
} else {
self.openErrorDialog(res.message);
}
2022-11-18 18:05:01 +08:00
}).catch(err => { });
}
req.axiosGet('/plan/plan_theme/' + linkId).then(res => {
if (res.code == 200) {
//内置页顶图
document.title = res.data.title;
2022-11-18 18:05:01 +08:00
self.plan_id = res.data.plan_id;
this.pageType = res.data.page;
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-11-03 10:21:24 +08:00
localStorage.setItem('test', window.location.href);
self.loading = false;
localStorage.setItem('linkId', linkId);
//是否携带token
if (keyCode) {
let data = {
key: keyCode,
2022-10-25 17:51:29 +08:00
theme_type: this.pageType
2022-11-18 18:05:01 +08:00
};
req.axiosPost('/key/loginFromLink', data).then(res => {
if (res.code == 200) {
localStorage.setItem('key', keyCode);
localStorage.setItem('token', res.data.token);
localStorage.setItem('haskey', keyCode);
this.openDialog('正在加载商品...');
localStorage.setItem('entryLink', window.location.href);//存储起始页链接
setTimeout(() => {
if (this.pageType === 4 || this.pageType === 8) {
2022-11-18 18:05:01 +08:00
window.location.replace('/coupon/couponCollection.html');
} else {
2022-10-19 11:01:56 +08:00
window.location.replace('/homepage.html');
}
}, 1000);
} else {
self.openErrorDialog(res.message);
}
}).catch(err => {
2022-11-18 18:05:01 +08:00
console.log(174, err);
});
} else {
2022-10-19 11:01:56 +08:00
if ([3, 4].includes(this.pageType)) {
2022-11-18 18:05:01 +08:00
captchaimg();
}
let keyName = this.typeList[this.pageType];
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;
2022-10-25 17:51:29 +08:00
if (this.pageType == 8) {
self.middleImg = res.data[keyName].land.white_image;
}
self.describe = res.data[keyName].land.describe;
2022-11-18 18:05:01 +08:00
}
}
}).catch(err => { });
},
mounted () {
this.$nextTick(() => {
2022-11-18 18:05:01 +08:00
let img = document.getElementById("center_img");
let center = document.getElementById("center");
img.onload = function (e) {
center.style.height = img.clientHeight + "px";
2022-11-18 18:05:01 +08:00
};
});
localStorage.clear();
},
2022-10-25 17:51:29 +08:00
computed: {
bindInputStyle () {
return {
2022-10-25 17:51:29 +08:00
'--placeholderColor': this.ftcolor,
2022-11-18 18:05:01 +08:00
};
},
},
methods: {
//获取白名单验证码
getcode () {
let self = this;
let data = {
'mobile': this.key,
'plan_id': this.plan_id
2022-11-18 18:05:01 +08:00
};
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('请输入兑换码');
2022-11-18 18:05:01 +08:00
return;
}
if (!this.code) {
this.openDialog('请输入验证码');
2022-11-18 18:05:01 +08:00
return;
}
if (this.disabledBtn) {
2022-11-18 18:05:01 +08:00
return;
}
this.disabledBtn = true;
if ([3, 4].includes(this.pageType)) {//兑换码、优惠卷
let data = {
"key": this.key,
"code": this.code,
"code_unique_str": sessionStorage.getItem('unique_str'),
2022-10-25 17:51:29 +08:00
"theme_type": this.pageType
2022-11-18 18:05:01 +08:00
};
req.axiosPost('/key/login', data).then(res => {
setTimeout(() => {
self.disabledBtn = false;
}, 2000);
if (res.code == 200) {
localStorage.setItem('key', self.key);
localStorage.setItem('token', res.data.token);
this.openDialog('正在加载商品...');
localStorage.setItem('entryLink', window.location.href);//存储起始页链接
setTimeout(() => {
if (this.pageType === 4 || this.pageType === 8) {
window.location.href = './coupon/couponCollection.html';
} else {
window.location.href = './homepage.html';
}
}, 1000);
} else {
self.openErrorDialog(res.message);
}
}).catch(err => { });
} else if ([1, 8].includes(this.pageType)) {//白名单
let par = {
"code": this.code,
"mobile": this.key,
"plan_id": this.plan_id,
2022-11-18 18:05:01 +08:00
};
let getTokenList = [];//多个批次下的key存放token
req.axiosPostgetKey('/key/getKeyByMobile', par).then(async res => {
setTimeout(() => {
self.disabledBtn = false;
}, 2000);
if (res.data.code == 200) {
localStorage.setItem('key', self.key);
localStorage.setItem('token', res.data.data);
localStorage.setItem('showType', 1);
localStorage.setItem('white_link', window.location.href);
let tokenArr = res.data.data;
let istoGoods = false;
for (item of tokenArr) {
2022-11-18 18:05:01 +08:00
let obj = {};
let data = {
"code_unique_str": res.headers['unique-str'],
"key": item,
2022-10-25 17:51:29 +08:00
"theme_type": this.pageType
2022-11-18 18:05:01 +08:00
};
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) {
localStorage.setItem('getTokenList', JSON.stringify(getTokenList));
this.openDialog('正在加载商品...');
localStorage.setItem('entryLink', window.location.href);//存储起始页链接
setTimeout(() => {
2022-10-25 17:51:29 +08:00
if (this.pageType === 4 || this.pageType === 8) {
window.location.href = './coupon/couponCollection.html';
} else {
window.location.href = './homepage.html';
}
}, 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;
2022-11-18 18:05:01 +08:00
this.promttip = tip;
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
2022-11-18 18:05:01 +08:00
}, 3000);
},
//错误弹出框
openErrorDialog (tip) {
2022-11-18 18:05:01 +08:00
this.popTitle = '温馨提示';
this.popText = tip;
this.popStatus = 3;
this.popShow = true;
}
},
watch: {
key (val) {
2022-10-25 17:51:29 +08:00
this.disabled = Boolean(!([1, 8].includes(this.pageType) && val.length == 11));
}
}
});
2021-11-26 14:40:45 +08:00
</script>
2021-11-26 14:40:45 +08:00
</html>