mobileclient/homepage.html

546 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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?v=12">
<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>
</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 v-show="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 id="rotation" v-if="layout=='2'">
<!-- 顶部banner -->
<div class="topBanner">
<img :src="topImg" alt="">
</div>
<!-- //轮播 -->
<div class="saleNull" v-if="!goodsNum">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/saleNull.png" alt="">
</div>
<div class="commodity" v-if="goodsNum">
<div class="swiper-container" :class="swiperDataList.length>1?'':'oneItem'">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in swiperDataList" :key="index">
<div class="imgitemMask" v-if="item.available!=1">
<span>
<img v-if="item.available==4"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/yet.png" alt="">
<img v-if="item.available==2"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/future.png" alt="">
<img v-if="item.available==3"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/overdue.png" alt="">
<img v-if="item.available==6"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/empty.png" alt="">
</span>
</div>
<div class="imgbox">
<img class="le-img" :src="item.show_url" :class="item.stock&&item.stock<0||item.available!=1&&item.available!=2?'changegray':''"></img>
</div>
<div class="item-name" v-html="item.product_name" :class="item.stock&&item.stock<0||item.available!=1&&item.available!=2?'changegray':''">
</div>
</div>
</div>
</div>
</div>
<!-- 立即兑换 -->
<div class="exchangeBtn" :class="gstatus!=1?'noexchangeBtn':''" :style="{'background': bgcolor,'color':'#fff'}"
@click="exchangeBtn()">
立即兑换
</div>
</div>
<!-- 列表 -->
<div id="list" v-if="layout=='1'">
<div class="topBanner">
<img :src="topImg" alt="">
</div>
<div class="saleNull" v-if="!goodsNum">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/saleNull.png" alt="">
</div>
<ul class="listcommity" v-if="goodsNum">
<li v-for="(item,i) in swiperDataList" :key="i">
<div>
<img :src="item.show_url" alt="" :class="item.stock&&item.stock<0||item.available!=1&&item.available!=2?'changegray':''">
<font :class="item.stock&&item.stock<0||item.available!=1&&item.available!=2?'changegray':''">{{item.product_name}}</font>
</div>
<span v-if="item.available==1" :style="{'background':bgcolor?bgcolor:'#F98F5B'}"
@click="exchangeBtn(item)" >兑换</span>
<span v-if="item.available!=1" class="bindexchange" :class="item.available==2?'begin':''"
@click="exchangeBtn(item)">{{item.available==2?'即将开始':item.available==3?'已过期':item.available==4?'已兑换':'已兑完'}}</span>
</li>
</ul>
</div>
<!-- 矩阵 -->
<div id="matrix" v-if="layout=='3'">
<div class="topBanner">
<img :src="topImg" alt="">
</div>
<div class="saleNull" v-if="!goodsNum">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/saleNull.png" alt="">
</div>
<ul class="listcommity" v-if="goodsNum">
<li :class="item.stock&&item.stock<0||item.available!=1&&item.available!=2?'changegray':''" v-for="(item,i) in swiperDataList" :key="i"
@click="exchangeBtn(item)">
<div>
<span class="goodsIcon">
<img v-if="item.available==4"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/yet.png" alt="">
<img v-if="item.available==2"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/future.png" alt="">
<img v-if="item.available==3"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/overdue.png" alt="">
<img v-if="item.available==6"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/empty.png" alt="">
</span>
<img :src="item.show_url" alt="">
</div>
<font>{{item.product_name}}</font>
</li>
</ul>
</div>
</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="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')" v-if="acctype=='tel'"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen" v-model="account"
:placeholder="placeholder">
<input :type="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')" v-if="acctype=='tel'"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen" v-model="reaccount"
placeholder="请再次确认账号">
<input :type="acctype" :maxlength="maxlen" v-model="account" v-if="acctype!='tel'"
:placeholder="placeholder">
<input :type="acctype" :maxlength="maxlen" v-model="reaccount" v-if="acctype!='tel'"
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 v-if="acctype=='tel'">是否为账号{{this.account}}兑换{{this.proname}}会员?</p>
<p v-if="acctype=='text'">是否为输入账号兑换{{this.proname}}会员?</p>
<span @click="surexchangeBtn">确认兑换</span>
</div>
</div>
<!-- 弹出提示 -->
<div class="popboxshow" v-if="popboxshow&&popboxtype=='提示'" :class="popboxshow?'active':''">
<div class="tip">
<p :class="gstatus==4||gstatus==6?'yettip':''">{{tiptext}}</p>
<span @click="successchangeBtn" :class="gstatus==4||gstatus==6?'yetexchange':''">知道了</span>
</div>
</div>
<!-- 成功 -->
<div class="popboxshow successbox" v-if="popboxshow&&popboxtype=='成功'" :class="popboxshow?'active':''">
<div>
<p>{{this.successTip}}</p>
<span @click="successchangeBtnFn">我知道啦</span>
</div>
</div>
<img v-if="popboxshow&&popboxtype!='成功'" class="closed"
src="http://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/cardpwd/img/commimgs/close.png" alt=""
@click="closeBtn()">
</div>
</body>
<script>
new Vue({
el: '#homepage',
data() {
return {
swiperDataList: [], //轮播
layout: 2,
maskshow: false,
proname: '黄金爱奇艺',
promtshow: false,
promttip: '',
codebid: '',
account: '',
reaccount: '',
product_id: '',
productType: 1,
placeholder: '请输入手机号',
maxlen:11,
iptshow: false,
orderNo: '',
loading: true,
lastid:0,
acctype:'text',
gstatus: 1,
popboxshow: false,
popboxtype: '兑换',
topImg: '',
goodsShow:true,
goodsNum: false,
exchangeCommity: {}, //兑换选择的商品
bgcolor: '',
tiptext: '还没开始哟兑换时间为2021-12-05 12:12:12至2021-01-01 12:12:12',
successTip: '兑换成功请直接登录app使用'
}
},
created() {
this.getGoods();
this.bgcolor = sessionStorage.getItem('bcolor');
this.topImg = sessionStorage.getItem('top_img');
this.layout = sessionStorage.getItem('showTyle');
},
methods: {
onSelected(item) {
this.proname = item.product_name;
this.product_id = item.product_id;
this.exchangeCommity = item;
this.gstatus = item.available;
},
// 单条弹框
openDialog() {
this.promtshow = true;
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000)
},
//根据token获取商品信息
getGoods() {
let self = this;
let data = {
"token": sessionStorage.getItem('token'),
"last_product_id":sessionStorage.getItem('lastid')|0,
}
req.axiosPostproducts('/key/products', data).then(res => {
if (res.code == 200) {
self.swiperDataList = res.data;
self.goodsShow= res.data.length>1;
if ( res.data&& res.data.length>0) {
self.goodsNum = true;
self.onSelected( res.data[0])
self.$nextTick(function () {
var swiper = new Swiper('.swiper-container', {
slidesPerView: "auto",
loopAdditionalSlides: 1000,
centeredSlides: true,
observer: true,
observeParents: true,
loop: self.goodsShow,
onSlideChangeEnd: function (swiper) {
let row = res.data[swiper.realIndex];
self.onSelected( res.data[swiper.realIndex])
}
})
})
setTimeout(() => {
self.loading = false;
}, 100);
} else {
self.goodsNum = false;
}
} else {
self.maskshow = true;
self.popboxtype = '提示';
self.popboxshow = true;
self.tiptext = res.message;
if (res.code == -1) {
setTimeout(() => {
window.location.href = "./index.html?id=" + sessionStorage.getItem('linkId');
sessionStorage.clear();
}, 3000);
}
}
}).catch(err => {
});
},
//选择商品点击兑换
exchangeBtn(row = this.exchangeCommity) {
this.codebid = row.code_batch_id;
let gstatus = row.available;
this.gstatus = gstatus;
if (gstatus == 1) {
this.maskshow = true;
this.iptshow = true;
this.proname = row.product_name;
this.product_id = row.product_id;
this.productType = row.account_type;
} else {
this.maskshow = true;
this.popboxshow = true;
this.popboxtype = '提示';
this.iptshow = false;
if (gstatus == 2) { //未开始
this.tiptext = '还没开始哟,兑换时间为' + row.begin_time + '至' + row.end_time;
} else if (gstatus == 3) { //已结束
this.tiptext = '兑换已过期,兑换时间为' + row.begin_time + '至' + row.end_time;
} else if (gstatus == 4) { //仅兑换一次
this.tiptext = '亲,仅可兑换一次哦!';
}else if (gstatus == 5) { //累计次数达到上限
this.tiptext = '当前商品兑换次数达到上限';
}else if (gstatus == 6) { //无库存
this.tiptext = '暂无库存,看看其他商品吧~';
}else if (gstatus == 7) { //其他商品处于兑换中
this.tiptext = '当前商品不可兑换';
}else if (gstatus == 8) { //已兑换次数
this.tiptext = '当前商品正在兑换中';
}
}
},
//取消,点击叉叉
cancelBtn() {
this.maskshow = false;
this.account = "";
this.reaccount = "";
},
//确定,点击兑换按钮
defineBtn() {
if (!this.account) {
this.promttip = '请输入兑换账号!'
this.openDialog();
return false;
} else {
let namereg=/\w{4}/.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 emailsreg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.account);
let weixinreg=/^[a-zA-Z][a-zA-Z\d_-]{5,19}$/.test(this.account);
let regflag = true;
if (this.productType == 0) {
this.placeholder = "请输入昵称";
regflag = namereg;
}else if (this.productType == 1) {
regflag = phonereg;
}else if (this.productType == 2) {
regflag = emailsreg;
}else if (this.productType == 3) {
regflag = phonereg||emailsreg;
}else if (this.productType == 4) {
regflag =qqreg;
}else if (this.productType == 5) {
regflag = phonereg||qqreg;
}else if (this.productType ==6) {
regflag = emailsreg||qqreg;
}else if (this.productType == 7) {
regflag = phonereg||emailsreg||qqreg;
}else if (this.productType == 8) {
regflag = weixinreg;
}else if (this.productType == 9) {
regflag = phonereg||weixinreg;
}else if (this.productType == 10) {
regflag = emailsreg||weixinreg;
}else if (this.productType == 11) {
regflag = phonereg||emailsreg||weixinreg;
}else if (this.productType == 12) {
regflag = qqreg||weixinreg;;
}else if (this.productType == 13) {
regflag = phonereg||qqreg||weixinreg;
}else if (this.productType == 14) {
this.placeholder = "请输入邮箱/QQ号/微信号";
regflag =emailsreg||qqreg||weixinreg;
}else {
this.placeholder = "请输入手机号/邮箱/QQ号/微信号";
regflag = phonereg||emailsreg||qqreg||weixinreg;
}
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.popboxtype = '兑换';
this.iptshow = false;
},
//关闭,关闭弹框
closeBtn() {
this.popboxshow = false;
this.maskshow = false;
this.account = "";
this.reaccount = "";
if(this.gstatus==8){
window.history.go(0);
}
},
//确定兑换
surexchangeBtn() {
let self = this;
let data = {
"key": sessionStorage.getItem('key'),
"product_id": this.product_id,
"account": this.account,
"code_batch_id": this.codebid,
"token":sessionStorage.getItem('token')
}
req.axiosPostusage('/key/usage', data).then(res => {
sessionStorage.setItem('lastid',self.product_id);
if (res.code == 200) {
// 查询订单接口
this.popboxtype = '成功';
this.popboxshow = true;
this.successTip = '兑换成功请直接登录app使用';
} else {
this.popboxtype = '提示';
this.popboxshow = true;
this.tiptext = res.message;
if (res.code == -1) {
setTimeout(() => {
window.location.href = "./index.html?id=" + sessionStorage.getItem('linkId');
sessionStorage.clear();
}, 2000);
}
}
}).catch(err => {
});
},
//关闭弹出框,仅关闭弹框
successchangeBtn() {
this.maskshow = false;
this.popboxshow = false;
this.account = "";
this.reaccount = "";
if(this.gstatus==8){
window.history.go(0);
}
},
//刷新页面
successchangeBtnFn() {
window.history.go(0);
}
},
watch: {
productType:{
immediate: true,
handler(newVal){
this.maxlen=50;
this.acctype="text";
if (newVal == 0) {
this.placeholder = "请输入昵称";
}else if (newVal == 1) {
this.acctype="tel";
this.placeholder = "请输入手机号";
this.maxlen=11;
}else if (newVal == 2) {
this.placeholder = "请输入邮箱";
}else if (newVal == 3) {
this.placeholder = "请输入手机号或邮箱";
}else if (newVal == 4) {
this.placeholder = "请输入QQ号";
this.acctype="tel";
this.maxlen=10;
}else if (newVal == 5) {
this.placeholder = "请输入手机号或QQ号";
this.maxlen=11;
this.acctype="tel";
}else if (newVal==6) {
this.placeholder = "请输入邮箱或QQ号";
}else if (newVal == 7) {
this.placeholder = "请输入手机号/邮箱/QQ号";
}else if (newVal == 8) {
this.placeholder = "请输入微信号";
this.maxlen=20;
}else if (newVal== 9) {
this.placeholder = "请输入手机号或微信";
this.maxlen=20;
}else if (newVal == 10) {
this.placeholder = "请输入邮箱或微信号";
}else if (newVal == 11) {
this.placeholder = "请输入手机号/邮箱/微信号";
}else if (newVal == 12) {
this.placeholder = "请输入QQ号或微信号";
this.maxlen=20;
}else if (newVal == 13) {
this.placeholder = "请输入手机号/QQ号/微信号";
this.maxlen=20;
}else if (newVal== 14) {
this.placeholder = "请输入邮箱/QQ号/微信号";
}else {
this.placeholder = "请输入手机号/邮箱/QQ号/微信号";
}
}
}
}
})
</script>
</html>