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

287 lines
6.7 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>
<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">
解决苹果手机虚拟键盘挡住输入框
2021-12-10 16:18:42 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api.js?v=133"></script>
更新C端
2021-11-28 17:20:17 +08:00
<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;
}
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;
}
.codeimg {
position: absolute;
Update index.html
2021-11-30 10:02:48 +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
}
.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">
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</div>
解决C端样式
2021-11-27 20:49:13 +08:00
<!-- 弹出提示 -->
<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>
提交C端
2021-11-26 14:40:45 +08:00
<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>
更新C端
2021-11-28 17:20:17 +08:00
<div v-show="!loading">
提交C端
2021-11-26 14:40:45 +08:00
<div class="top">
<img :src="imgList[0]" id="top">
</div>
<div class="center" id="center">
更新C端
2021-11-28 17:20:17 +08:00
<img :src="imgList[1]" style="position: absolute;z-index: 1;" id="center_img">
解决C端适配
2021-11-30 00:16:15 +08:00
<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" />
提交C端
2021-11-26 14:40:45 +08:00
<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>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
loading:true,
planData:{},
key:'',
code:'',
imgList:[],
解决C端适配
2021-11-30 00:16:15 +08:00
bgcolor:'#333',
提交C端
2021-11-26 14:40:45 +08:00
promttip:'',
解决C端样式
2021-11-27 20:49:13 +08:00
promtshow:false,
popboxshow:false,
tiptext:'提示信息',
maskshow:false
提交C端
2021-11-26 14:40:45 +08:00
}
},
created() {
解决验证码无法获取code
2021-11-27 11:10:40 +08:00
captchaimg();
提交C端
2021-11-26 14:40:45 +08:00
let self=this;
//获取链接携带的参数
let linkId = this.getQueryString('id');
req.axiosGetplan('/plan/plan_theme/'+linkId).then(res=>{
if(res.code==200){
self.loading=false;
self.planData=res.data;
解决C端适配
2021-11-30 00:16:15 +08:00
self.bgcolor=res.data.bg_color;
提交C端
2021-11-26 14:40:45 +08:00
let imgListobj=res.data.images;
let imgarr=[]
for(let i in imgListobj){
imgarr.push(imgListobj[i]);
}
self.imgList=imgarr;
//内置页顶图
let top_img=res.data.top_img;
let bcolor=res.data.button_color;
sessionStorage.setItem('top_img',top_img);
sessionStorage.setItem('bcolor',bcolor);
更新C端
2021-11-28 19:01:51 +08:00
sessionStorage.setItem('linkId',linkId);
提交C端
2021-11-26 14:40:45 +08:00
sessionStorage.setItem('showTyle',res.data.list);
}
}).catch(err=>{
});
解决验证码无法获取code
2021-11-27 11:10:40 +08:00
提交C端
2021-11-26 14:40:45 +08:00
},
mounted() {
更新C端
2021-11-28 17:20:17 +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-11-27 20:49:13 +08:00
successchangeBtn(){
this.popboxshow=false;
this.maskshow=false;
},
提交C端
2021-11-26 14:40:45 +08:00
submit() {
let self=this;
if(!this.key){
this.promttip = '请输入兑换码';
this.openDialog();
}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-28 17:20:17 +08:00
req.axiosPostKey('/key/login',data).then(res=>{
提交C端
2021-11-26 14:40:45 +08:00
if(res.code==200){
sessionStorage.setItem('key',self.key);
更新C端
2021-11-28 17:20:17 +08:00
sessionStorage.setItem('token',res.data.token);
提交C端
2021-11-26 14:40:45 +08:00
this.promttip = '正在加载商品...';
更新C端
2021-11-28 17:20:17 +08:00
this.openDialog();
提交C端
2021-11-26 14:40:45 +08:00
setTimeout(()=>{
window.location.href='./homepage.html';
},2000);
}else{
更新C端
2021-11-28 17:20:17 +08:00
self.maskshow=true;
解决C端样式
2021-11-27 20:49:13 +08:00
self.tiptext=res.message;
更新C端
2021-11-28 17:20:17 +08:00
self.popboxshow=true;
提交C端
2021-11-26 14:40:45 +08:00
}
}).catch(err=>{
更新C端
2021-11-28 17:20:17 +08:00
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;
},
// 单条弹框
openDialog() {
this.promtshow = true;
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000)
},
changeyzmFn(){
更新C端
2021-11-28 19:01:51 +08:00
captchaimg()
提交C端
2021-11-26 14:40:45 +08:00
}
},
components: {
},
});
</script>
</html>