288 lines
6.8 KiB
HTML
288 lines
6.8 KiB
HTML
<!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">
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api.js?v=1"></script>
|
|
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage.css?v=12">
|
|
<!-- <script src="./api.js"></script> -->
|
|
</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;
|
|
margin-left: -0.72rem;
|
|
background-color: transparent;
|
|
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;
|
|
background-color: transparent;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 0.14rem;
|
|
}
|
|
.codeimg {
|
|
position: absolute;
|
|
top: 0.888rem;
|
|
right: 0.3rem;
|
|
width: 0.75rem;
|
|
height: 0.33rem;
|
|
/* border-radius: 0.21rem; */
|
|
z-index: 2;
|
|
background-color: #f3f5f7;
|
|
}
|
|
.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>
|
|
<!-- 弹出提示 -->
|
|
<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="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>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
loading:true,
|
|
planData:{},
|
|
key:'',
|
|
code:'',
|
|
imgList:[],
|
|
bgcolor:'#333',
|
|
promttip:'',
|
|
promtshow:false,
|
|
popboxshow:false,
|
|
tiptext:'提示信息',
|
|
maskshow:false
|
|
|
|
}
|
|
},
|
|
created() {
|
|
captchaimg();
|
|
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;
|
|
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;
|
|
//内置页顶图
|
|
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);
|
|
}
|
|
}).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;
|
|
},
|
|
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')
|
|
}
|
|
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;
|
|
});
|
|
}
|
|
}
|
|
},
|
|
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: {
|
|
|
|
},
|
|
});
|
|
</script>
|
|
|
|
</html> |