311 lines
9.8 KiB
HTML
311 lines
9.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>
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/js/swiper.min.js"></script>
|
|
<link href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/css/swiper.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage.css">
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api.js"></script>
|
|
</head>
|
|
<style scoped>
|
|
* {
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
font-family: HYQiHei;
|
|
}
|
|
|
|
html {
|
|
font-size: 26.66666667vw;
|
|
}
|
|
|
|
body {
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div id="homepage">
|
|
<!-- 轮播 -->
|
|
<div id="rotation" v-if="layout=='2'">
|
|
<!-- 顶部banner -->
|
|
<div class="topBanner">
|
|
<img :src="topImg" alt="">
|
|
<h2>权益兑换</h2>
|
|
</div>
|
|
<!-- //轮播 -->
|
|
|
|
<div class="commodity">
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" v-for="(item,index) in swiperDataList" :key="index">
|
|
<div class="imgbox">
|
|
<img class="le-img" :src="item.show_url" :class="item.stock&&item.stock<0?'changegray':''"></img>
|
|
</div>
|
|
<div class="item-name" v-html="item.product_name" :class="item.stock&&item.stock<0?'changegray':''"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 立即兑换 -->
|
|
<div class="exchangeBtn" :style="{'background': bgcolor,'color':'#fff'}" @click="exchangeBtn(this.proname)">
|
|
立即兑换
|
|
</div>
|
|
</div>
|
|
<!-- 列表 -->
|
|
<div id="list" v-if="layout=='1'">
|
|
<div class="topBanner">
|
|
<img :src="topImg" alt="">
|
|
<h2>权益兑换</h2>
|
|
</div>
|
|
<ul class="listcommity">
|
|
<li v-for="(item,i) in swiperDataList" :key="i">
|
|
<div>
|
|
<img :src="item.show_url" alt="" :class="item.stock&&item.stock<0?'changegray':''">
|
|
<font :class="item.stock&&item.stock<0?'changegray':''">{{item.product_name}}</font>
|
|
</div>
|
|
<span :style="{'background':bgcolor}" @click="exchangeBtn(item)">兑换</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 矩阵 -->
|
|
<div id="matrix" v-if="layout=='3'">
|
|
<div class="topBanner">
|
|
<img :src="topImg" alt="">
|
|
<h2>权益兑换</h2>
|
|
</div>
|
|
<ul class="listcommity">
|
|
<li :class="item.stock&&item.stock<0?'changegray':''" v-for="(item,i) in swiperDataList" :key="i" @click="exchangeBtn(item)">
|
|
<div>
|
|
<img :src="item.show_url" alt="">
|
|
</div>
|
|
<font>{{item.product_name}}</font>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 弹出框 -->
|
|
<div class="mask" v-if="maskshow">
|
|
</div>
|
|
<div class="ipt_frame" :class="maskshow?'active':' '" v-if="iptshow">
|
|
<h3>{{this.proname}}</h3>
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/cance.png" alt="" @click="cancelBtn()">
|
|
<div>
|
|
<input type="text" type="tel" onkeyup="this.value=this.value.replace(/\D/g,'')" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" maxlength="11" v-model="account" :placeholder="placeholder">
|
|
<input type="text" type="tel" onkeyup="this.value=this.value.replace(/\D/g,'')" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" maxlength="11" v-model="reaccount" :placeholder="placeholder">
|
|
</div>
|
|
<span class="sureBtn" @click="defineBtn()" :style="{'background':bgcolor}">确认</span>
|
|
</div>
|
|
|
|
<!-- 单条弹出框 -->
|
|
<div class="prompt" :class="promtshow?'proactive':''">
|
|
{{this.promttip}}
|
|
</div>
|
|
|
|
<!-- 弹出框 -->
|
|
<!-- 询问 -->
|
|
<div class="popboxshow" v-if="popboxshow&&popboxtype=='兑换'" :class="popboxshow?'active':''">
|
|
<div >
|
|
<p>是否为账号{{this.account}}兑换{{this.proname}}会员?</p>
|
|
<span @click="surexchangeBtn">确认兑换</span>
|
|
</div>
|
|
</div>
|
|
<!-- 失败 -->
|
|
<div class="popboxshow" v-if="popboxshow&&popboxtype=='失败'" :class="popboxshow?'active':''">
|
|
<div >
|
|
<p>抱歉，兑换失败！</p>
|
|
<span @click="rechangeBtn">再次兑换</span>
|
|
</div>
|
|
</div>
|
|
<!-- 成功 -->
|
|
<div class="popboxshow successbox" v-if="popboxshow&&popboxtype=='成功'" :class="popboxshow?'active':''">
|
|
<div >
|
|
<p>恭喜您，兑换成功!</p>
|
|
<span @click="successchangeBtn">我知道啦</span>
|
|
</div>
|
|
</div>
|
|
<img v-if="popboxshow" class="closed" src="http://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/cardpwd/img/commimgs/close.png" alt="" @click="closeBtn()">
|
|
|
|
</body>
|
|
<script>
|
|
new Vue({
|
|
el: '#homepage',
|
|
data() {
|
|
return {
|
|
swiperDataList: [], //轮播
|
|
baseimgurl: 'https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/category_icon/'
|
|
,
|
|
layout:1,
|
|
maskshow:false,
|
|
proname:'黄金爱奇艺',
|
|
promtshow:false,
|
|
promttip:'',
|
|
account:'',
|
|
reaccount:'',
|
|
product_id:'',
|
|
productType:1,
|
|
placeholder:'请输入手机号',
|
|
iptshow:false,
|
|
popboxshow:false,
|
|
popboxtype:'兑换',
|
|
topImg:'',
|
|
bgcolor:''
|
|
}
|
|
},
|
|
created() {
|
|
this.bgcolor=sessionStorage.getItem('bcolor');
|
|
this.topImg=sessionStorage.getItem('top_img');
|
|
// this.layout=sessionStorage.getItem('showTyle');
|
|
this.swiperDataList=JSON.parse(sessionStorage.getItem('goodsList'));
|
|
|
|
},
|
|
mounted() {
|
|
let self = this;
|
|
self.onSelected(self.swiperDataList[0])
|
|
self.$nextTick(function () {
|
|
var swiper = new Swiper('.swiper-container', {
|
|
slidesPerView: "auto",
|
|
loopAdditionalSlides: 1000,
|
|
centeredSlides: true,
|
|
observer: true,
|
|
observeParents: true,
|
|
loop: true,
|
|
onSlideChangeEnd: function (swiper) {
|
|
let row = self.swiperDataList[swiper.realIndex];
|
|
self.onSelected(self.swiperDataList[swiper.realIndex])
|
|
}
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
onSelected(item) {
|
|
this.proname=item.product_name;
|
|
this.product_id=item.product_id;
|
|
},
|
|
// 单条弹框
|
|
openDialog() {
|
|
this.promtshow = true;
|
|
setTimeout(() => {
|
|
this.promtshow = false;
|
|
this.promttip = '';
|
|
}, 3000)
|
|
},
|
|
//兑换
|
|
exchangeBtn(row){
|
|
this.maskshow=true;
|
|
this.iptshow=true;
|
|
this.proname=row.product_name;
|
|
this.product_id=row.product_id;
|
|
this.productType=row.product_type;
|
|
},
|
|
//取消
|
|
cancelBtn(){
|
|
this.maskshow=false;
|
|
},
|
|
//确定
|
|
defineBtn(){
|
|
if(!this.account){
|
|
this.promttip='请输入兑换账号！'
|
|
this.openDialog();
|
|
return false;
|
|
} else {
|
|
let reg= /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.account) || /^[1-9][0-9]{4,9}$/.test(this.account);
|
|
let phonereg= /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.account);
|
|
let qqreg= /^[1-9][0-9]{4,9}$/.test(this.account);
|
|
let regflag=true;
|
|
if(this.productType==1){
|
|
regflag=phonereg;
|
|
}else if(this.productType==2){
|
|
regflag=qqreg;
|
|
}else if(this.productType==4){
|
|
regflag=reg;
|
|
}
|
|
if (!regflag) {
|
|
this.promttip = "充值账号格式不正确！"
|
|
this.openDialog();
|
|
return false;
|
|
}
|
|
}
|
|
if (this.reaccount == "") {
|
|
this.promttip = "请再次确认账号！";
|
|
this.openDialog();
|
|
return false;
|
|
}
|
|
if (this.account != this.reaccount) {
|
|
this.promttip = "两次输入的账号必须一致！";
|
|
this.reaccount == ""
|
|
this.openDialog();
|
|
return false;
|
|
}
|
|
//验证码
|
|
this.maskshow=true;
|
|
this.popboxshow=true;
|
|
this.iptshow=false;
|
|
},
|
|
//关闭
|
|
closeBtn(){
|
|
this.popboxshow=false;
|
|
this.maskshow=false;
|
|
this.account="";
|
|
this.reaccount="";
|
|
},
|
|
//确认兑换
|
|
surexchangeBtn(){
|
|
let data={
|
|
"key":sessionStorage.getItem('key'),
|
|
"product_id":this.product_id,
|
|
"account":this.account,
|
|
}
|
|
req.axiosPostusage('/key/usage',data).then(res=>{
|
|
if(res.code!=200){
|
|
this.popboxtype='失败';
|
|
}
|
|
}).catch(err=>{
|
|
|
|
});
|
|
},
|
|
//再次兑换
|
|
rechangeBtn(){
|
|
let data={
|
|
"key":sessionStorage.getItem('key'),
|
|
"product_id":this.product_id,
|
|
"account":this.account,
|
|
}
|
|
req.axiosPostusage('/key/usage',data).then(res=>{
|
|
if(res.code!=200){
|
|
this.popboxtype='失败';
|
|
}else{
|
|
this.popboxtype='成功';
|
|
}
|
|
}).catch(err=>{
|
|
|
|
});
|
|
},
|
|
//成功
|
|
successchangeBtn(){
|
|
this.popboxtype='兑换';
|
|
this.popboxshow=false;
|
|
}
|
|
},
|
|
watch:{
|
|
productType(){
|
|
if (this.productType == 1) {
|
|
this.placeholder = "请输入手机号";
|
|
} else if (this.productType == 2) {
|
|
this.placeholder = "请输入QQ号";
|
|
} else {
|
|
this.placeholder = "请输入手机号或QQ号";
|
|
}
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
</html> |