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/index.html

319 lines
7.5 KiB
HTML
Raw Normal View History

提交C端
2021-11-26 14:40:45 +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>
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
</script>
提交C端
2021-11-26 14:40:45 +08:00
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_0_2.js?v=1"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage.css?v=12">
提交C端
2021-11-26 14:40:45 +08:00
</head>
<style scoped>
html {
font-size: 26.66666667vw;
}
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
提交C端
2021-11-26 14:40:45 +08:00
body {
padding: 0;
font-size: .14rem;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
* {
padding: 0;
margin: 0;
}
.top {
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
img {
width: 100%;
vertical-align: middle;
}
.center {
width: 100%;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
}
.bottom {
width: 100%;
height: auto;
}
.key {
position: absolute;
top: 0.4rem;
left: 50%;
width: 2rem;
height: 0.25rem;
z-index: 2;
解决bug
2021-11-30 06:42:52 +08:00
margin-left: -0.72rem;
调整C端样式
2021-11-29 20:24:57 +08:00
background-color: transparent;
提交C端
2021-11-26 14:40:45 +08:00
border: none;
outline: none;
font-size: 0.14rem;
}
.code {
position: absolute;
top: 0.935rem;
left: 50%;
width: 1rem;
height: 0.25rem;
z-index: 2;
margin-left: -0.72rem;
去色
2021-11-30 07:57:12 +08:00
background-color: transparent;
提交C端
2021-11-26 14:40:45 +08:00
border: none;
outline: none;
font-size: 0.14rem;
}
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
提交C端
2021-11-26 14:40:45 +08:00
.codeimg {
position: absolute;
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
top: 0.888rem;
right: 0.3rem;
width: 0.75rem;
height: 0.33rem;
/* border-radius: 0.21rem; */
z-index: 2;
background-color: #f3f5f7;
提交C端
2021-11-26 14:40:45 +08:00
}
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
提交C端
2021-11-26 14:40:45 +08:00
.submit {
position: absolute;
top: 1.5rem;
left: 50%;
width: 3rem;
height: 0.4rem;
margin-left: -1.5rem;
z-index: 2;
background-color: transparent;
}
</style>
<body>
<div id="app">
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
<!-- 单条弹出框 -->
<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>
提交C端
2021-11-26 14:40:45 +08:00
</div>
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
</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>
提交C端
2021-11-26 14:40:45 +08:00
</div>
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
提交C端
2021-11-26 14:40:45 +08:00
</div>
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
提交C端
2021-11-26 14:40:45 +08:00
</div>
</div>
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
</div>
<div v-show="!loading">
<div class="top">
<img :src="imgList[0]" id="top">
</div>
<div class="center" id="center">
<img :src="imgList[1]" style="position: absolute;z-index: 1;" id="center_img">
<input class="key" :maxlength="16" :style={color:bgcolor?bgcolor:'#333'} placeholder="请输入兑换码" v-model="key" />
<input class="code" :maxlength="5" :style={color:bgcolor?bgcolor:'#333'} placeholder="请输入验证码" v-model="code" />
<img src="#" alt="" class="codeimg" id="captcha_img" @click="changeyzmFn()" />
<div class="submit" @click="submit"></div>
</div>
<div class="bottom" id="bottom">
<img :src="imgList[2]">
</div>
</div>
提交C端
2021-11-26 14:40:45 +08:00
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
loading: true,
planData: {},
key: '',
code: '',
imgList: [],
bgcolor: '#333',
promttip: '',
promtshow: false,
popboxshow: false,
tiptext: '提示信息',
maskshow: false
解决C端样式
2021-11-27 20:49:13 +08:00
提交C端
2021-11-26 14:40:45 +08:00
}
},
created() {
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
let self = this;
提交C端
2021-11-26 14:40:45 +08:00
//获取链接携带的参数
let linkId = this.getQueryString('id');
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
req.axiosGetplan('/plan/plan_theme/' + linkId).then(res => {
if (res.code == 200) {
提交C端
2021-11-26 14:40:45 +08:00
//内置页顶图
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
let top_img = res.data.top_img;
let bcolor = res.data.button_color;
sessionStorage.setItem('top_img', top_img);
sessionStorage.setItem('bcolor', bcolor);
sessionStorage.setItem('linkId', linkId);
sessionStorage.setItem('showTyle', res.data.list);
let keyCode = this.getQueryString('key');
//是否携带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();
setTimeout(() => {
replace替换历史纪录
2021-12-21 17:06:53 +08:00
window.location.replace("./homepage.html");
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
}, 1000);
} else {
self.maskshow = true;
self.tiptext = res.message;
self.popboxshow = true;
}
}).catch(err => {
self.maskshow = true;
self.tiptext = res.message;
self.popboxshow = true;
});
} else {
captchaimg();
self.loading = false;
self.planData = res.data;
self.bgcolor = res.data.bg_color;
let imgListobj = res.data.images;
let imgarr = []
for (let i in imgListobj) {
imgarr.push(imgListobj[i]);
}
self.imgList = imgarr;
}
提交C端
2021-11-26 14:40:45 +08:00
}
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
}).catch(err => {});
提交C端
2021-11-26 14:40:45 +08:00
},
mounted() {
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
this.$nextTick(() => {
let img = document.getElementById("center_img")
let center = document.getElementById("center")
img.onload = function (e) {
center.style.height = img.clientHeight + "px";
}
})
提交C端
2021-11-26 14:40:45 +08:00
},
methods: {
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
successchangeBtn() {
this.popboxshow = false;
this.maskshow = false;
},
提交C端
2021-11-26 14:40:45 +08:00
submit() {
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
let self = this;
if (!this.key) {
提交C端
2021-11-26 14:40:45 +08:00
this.promttip = '请输入兑换码';
this.openDialog();
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
} else {
if (!this.code) {
this.promttip = '请输入验证码';
this.openDialog();
} else {
let data = {
"key": this.key,
"code": this.code,
"code_unique_str": sessionStorage.getItem('unique_str')
提交C端
2021-11-26 14:40:45 +08:00
}
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
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;
});
}
提交C端
2021-11-26 14:40:45 +08:00
}
},
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;
},
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
// 单条弹框
openDialog() {
提交C端
2021-11-26 14:40:45 +08:00
this.promtshow = true;
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000)
},
C端免验证登录，获取商品信息
2021-12-21 16:51:52 +08:00
changeyzmFn() {
更新C端
2021-11-28 19:01:51 +08:00
captchaimg()
提交C端
2021-11-26 14:40:45 +08:00
}
},
components: {
},
});
</script>
</html>