HandOver-liuwu
/
mobileclient
mirror of https://codeup.aliyun.com/lsxd/marketing/mobileclient.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
mobileclient/V1_2_0/index.html

377 lines
11 KiB
HTML
Raw Normal View History

版本管理梳理
2022-03-10 15:17:20 +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">
<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>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
1） 修改请求版本号
2022-04-20 09:53:10 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_2_0.js"></script>
版本管理梳理
2022-03-10 15:17:20 +08:00
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage1_1_0.css">
</head>
<style scoped>
html {
font-size: 26.66666667vw;
height: 100%;
}
body {
padding: 0;
font-size: .14rem;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
* {
padding: 0;
margin: 0;
}
</style>
<body>
<div id="app" :style={background:bgcolor}>
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</div>
<!-- 弹出提示 -->
<div class="mask" v-if="maskshow"></div>
<div class="popboxshow" v-if="popboxshow" :class="popboxshow?'active':''">
<div class="tip">
<p class="yettip">{{tiptext}}</p>
<span @click="successchangeBtn" class="yetexchange">知道了</span>
</div>
</div>
<div class="um-content" v-if="loading">
<div class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</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">
<input class="key" :maxlength="16" v-if="pageType==3" :style={color:ftcolor?ftcolor:'#333'} placeholder="请输入兑换码"
v-model="key" />
<input class="code" :maxlength="5" v-if="pageType==3" :style={color:ftcolor?ftcolor:'#333'} placeholder="请输入验证码"
v-model="code" />
<input class="key" :maxlength="11" v-if="pageType==1" :style={color:ftcolor?ftcolor:'#333'} placeholder="请输入手机号"
v-model="key" />
<input class="code" :maxlength="6" v-if="pageType==1" :style={color:ftcolor?ftcolor:'#333'} placeholder="请输入验证码"
v-model="code" />
<img src="#" alt="" class="codeimg" v-if="pageType==3" id="captcha_img" @click="changeyzmFn()" />
<button class="codeimg" :class="disabled?'disabledstyle':'active'" v-if="pageType==1" @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>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
loading: false,
pageType: 1,
key: '',
code: '',
disabled: true,
codetip: '获取验证码',
topImg: '',
middleImg: '',
describe: {},
ftcolor: '',
bgcolor: '#333',
promttip: '',
promtshow: false,
popboxshow: false,
tiptext: '提示信息',
plan_id: '',
maskshow: false
}
},
created() {
let self = this;
//获取链接携带的参数
let linkId = this.getQueryString('id');
let keyCode = this.getQueryString('key');
if (!linkId) {
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.axiosGetplan('/plan/plan_theme/' + linkId).then(res => {
if(res.code==200){
// window.location.href=res.data;
window.location.replace(res.data);
return;
}
})
}
req.axiosGetplan('/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;
sessionStorage.setItem('title', res.data.title);
if (res.data.page == 3) {
sessionStorage.setItem('product_list', JSON.stringify(res.data['exchange'].product_list));
sessionStorage.setItem('product_detail', JSON.stringify(res.data['exchange'].product_detail));
} else if (res.data.page == 1) {
sessionStorage.setItem('product_list', JSON.stringify(res.data['access_conf'].product_list));
sessionStorage.setItem('product_detail', JSON.stringify(res.data['access_conf'].product_detail));
}
sessionStorage.setItem('linkId', linkId);
//是否携带token
if (keyCode) {
let data = {
key: keyCode
}
req.axiosPostTogppds('/key/loginFromLink', data).then(res => {
if (res.code == 200) {
sessionStorage.setItem('key', keyCode);
sessionStorage.setItem('token', res.data.token);
sessionStorage.setItem('haskey', keyCode);
this.promttip = '正在加载商品...';
this.openDialog();
window.location.replace("/homepage.html");
} else {
self.maskshow = true;
self.tiptext = res.message;
self.popboxshow = true;
}
}).catch(err => {
self.maskshow = true;
self.tiptext = res.message;
self.popboxshow = true;
});
} else {
let keyName;
if (this.pageType == 3) {
captchaimg();
keyName = 'exchange';
} else if (this.pageType == 1) {
keyName = 'access_conf';
}
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;
self.loading = false;
}
}
}).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: {
successchangeBtn() {
this.popboxshow = false;
this.maskshow = false;
},
getcode() {
let self = this;
let data = {
'mobile': this.key,
'plan_id': this.plan_id
}
req.axiosPostsendMobile('/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.maskshow = true;
self.tiptext = res.message;
self.popboxshow = true;
}
}).catch(err => {});
},
submit() {
let self = this;
if (!this.key) {
this.promttip = '请输入兑换码';
this.openDialog();
} else {
if (!this.code) {
this.promttip = '请输入验证码';
this.openDialog();
} else {
if (this.pageType == 3) { //兑换码
let data = {
"key": this.key,
"code": this.code,
"code_unique_str": sessionStorage.getItem('unique_str')
}
req.axiosPostKey('/key/login', data).then(res => {
if (res.code == 200) {
sessionStorage.setItem('key', self.key);
sessionStorage.setItem('token', res.data.token);
this.promttip = '正在加载商品...';
this.openDialog();
setTimeout(() => {
window.location.href = './homepage.html';
}, 2000);
} else {
self.maskshow = true;
self.tiptext = res.message;
self.popboxshow = true;
}
}).catch(err => {
self.maskshow = true;
self.tiptext = res.message;
self.popboxshow = true;
});
} else if (this.pageType == 1) { //白名单
let par = {
"code": this.code,
"mobile": this.key,
"plan_id": this.plan_id
}
let getTokenList = [];
req.axiosPostgetKey('/key/getKeyByMobile', par).then(async res => {
if (res.data.code == 200) {
sessionStorage.setItem('key', self.key);
sessionStorage.setItem('token', res.data.data);
sessionStorage.setItem('showType', 1);
sessionStorage.setItem('white_link', window.location.href);
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.axiosPostKey('/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 => {
self.maskshow = true;
self.tiptext = res.message;
self.popboxshow = true;
});
};
if (istoGoods) {
sessionStorage.setItem('getTokenList', JSON.stringify(getTokenList));
this.promttip = '正在加载商品...';
this.openDialog();
setTimeout(() => {
window.location.href = './homepage.html';
}, 2000);
}else{
self.maskshow = true;
self.tiptext = self.tiptext;
self.popboxshow = true;
}
} else {
self.maskshow = true;
self.tiptext = res.data.message;
self.popboxshow = true;
}
}).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() {
this.promtshow = true;
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000)
},
changeyzmFn() {
captchaimg()
}
},
components: {
},
watch: {
key(val) {
if (this.pageType == 1) {
if (val.length == 11) {
this.disabled = false;
} else {
this.disabled = true;
}
}
}
}
});
</script>
</html>