mobileclient/homepage.html

483 lines
19 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/homepage1_1_0.css">
<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/api1_1_0.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 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&&!suspension" class="main-body">
<!-- 轮播 -->
<div id="rotation" v-if="layout=='2'">
<!-- 顶部banner -->
<div class="topBanner">
<img class="backpresty" @click="backgoodsFn"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<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':describe.type&&describe.type!=2?'bottomBtn':''"
:style="{'background': bgcolor,'color':ftcolor}" @click="exchangeBtn()">
立即兑换
</div>
</div>
<!-- 列表 -->
<div id="list" v-if="layout=='1'">
<div class="topBanner">
<img class="backpresty" @click="backgoodsFn"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<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" @click="exchangeBtn(item)">
<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 class="backpresty" @click="backgoodsFn"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<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 class="bottom" id="bottom" :class="layout==2?'tipset':''" v-show="describe.type">
<img :src="describe.bg_image" v-show="describe.type==1&&describe.bg_image">
<div v-html="describe.content" class="goodsTip" v-show="describe.type==3&&describe.content"></div>
</div>
</div>
<!-- 悬浮提示 -->
<div v-if="suspension" class="suspensionDom">
<img @click="closeTip" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"
alt="">
<h4>活动规则</h4>
<div v-html="describe.content">
</div>
</div>
<!-- 弹出框 -->
<div class="mask" v-if="maskshow">
</div>
<img class="susTip" @click="susTipFn" v-if="describe.type==2&&describe.content&&!suspension&&!loading"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png" alt="">
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</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: 1,
maskshow: false,
promtshow: false,
promttip: '',
loading: true,
lastid: 0,
gstatus: 1,
suspension: false,
popboxshow: false,
popboxtype: '兑换',
topImg: '',
goodsShow: true,
goodsNum: false,
exchangeCommity: {}, //兑换选择的商品
bgcolor: '',
describe: {},
ftcolor: '',
allgoods: [],
showType:0,
tiptext: '还没开始哟兑换时间为2021-12-05 12:12:12至2021-01-01 12:12:12',
successTip: '兑换成功请直接登录app使用'
}
},
created() {
this.getGoods();
let productConfig = JSON.parse(sessionStorage.getItem('product_list'));
this.bgcolor = productConfig.button_color;
this.ftcolor = productConfig.font_color;
this.topImg = productConfig.top_image;
document.title = sessionStorage.getItem('title');
this.layout = productConfig.list;
this.describe = productConfig.describe;
},
methods: {
closeTip() {
this.suspension = false;
},
susTipFn() {
this.suspension = true;
},
onSelected(item) {
this.exchangeCommity = item;
this.gstatus = item.available;
},
backgoodsFn() {
window.history.back();
},
// 单条弹框
openDialog() {
this.promtshow = true;
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000)
},
//根据token获取商品信息
async getGoods() {
let self = this;
let showType = sessionStorage.getItem('showType');
this.showType=showType;
let data = {
"last_product_id": sessionStorage.getItem('lastid') | 0,
}
if (showType == 1) { //白名单
let tokenList = JSON.parse(sessionStorage.getItem('getTokenList'));
let goodsList = [];
for (item of tokenList) {
let goodsItem = [];
data.token = item;
let waitGoods = await req.axiosPostproducts('/key/products', data).then(res => {
if (res.code == 200) {
res.data.forEach(it => {
it.token = item;
});
goodsItem = res.data;
}else{
self.maskshow = true;
self.popboxtype = '提示';
self.popboxshow = true;
self.tiptext = res.message;
if (res.code == -1) {
setTimeout(() => {
window.location.href = sessionStorage.getItem('white_link');
}, 3000);
}
}
});
goodsList = goodsList.concat(goodsItem);
};
let duplicate = []; //去重
let goodsArr = []; //最终的商品集合
goodsList.forEach(item => {
if (duplicate.indexOf(item.product_id) == -1) {
duplicate.push(item.product_id);
}
});
let similar = []
duplicate.forEach(it => {
similar = goodsList.filter(iten => { //goodshow为去重后的数据
return iten.product_id == it;
});
let flag = [1, 2, 6, 8, 7, 5, 4, 3]; //显示的avarivble规则
let minIndex = 7;
similar.forEach(item => {
let flagIndex = flag.indexOf(item.available);
if (flagIndex > -1) {
if (flagIndex < minIndex)
minIndex = flagIndex;
}
})
let obj = similar.find((o) => {
return o.available == flag[minIndex]
})
goodsArr.push(obj);
});
self.swiperDataList = goodsArr;
self.goodsShow = goodsArr.length > 1;
sessionStorage.setItem('goodsNum', goodsArr.length);
if (goodsArr && goodsArr.length == 1&&goodsArr[0].available==1) {
sessionStorage.setItem('goodsInfo', JSON.stringify(goodsArr[0]));
sessionStorage.setItem('key',goodsArr[0].key);
sessionStorage.setItem('token',goodsArr[0].token);
window.location.href = "./exchange.html";
return false;
}else if(goodsArr && goodsArr.length >= 1) {
self.goodsNum = true;
self.onSelected(goodsArr[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 = goodsArr[swiper.realIndex];
self.onSelected(goodsArr[swiper.realIndex])
}
})
})
setTimeout(() => {
self.loading = false;
}, 100);
} else {
self.goodsNum = false;
}
}else {//兑换码
data.token = sessionStorage.getItem('token')
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 == 1&&res.data[0].available==1) {
sessionStorage.setItem('goodsInfo', JSON.stringify(res.data[0]));
window.location.href = "./exchange.html";
return false;
}else if(res.data && res.data.length >= 1) {
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.maskshow = true;
self.popboxtype = '提示';
self.popboxshow = true;
self.tiptext = res.message;
if (res.code == -1) {
let haskey = sessionStorage.getItem('haskey');
if (haskey) {
setTimeout(() => {
// window.location.href = "./index.html?id=" + sessionStorage.getItem('linkId')+'&';
window.history.back();
// sessionStorage.clear();
}, 3000);
} else {
setTimeout(() => {
window.location.href = "./index.html?id=" + sessionStorage.getItem('linkId');
// sessionStorage.clear();
}, 3000);
}
}
}
}).catch(err => {
});
}
},
//选择商品点击兑换
exchangeBtn(row = this.exchangeCommity) {
let gstatus = row.available;
this.gstatus = gstatus;
if (gstatus == 1) {
// 跳转商品详情页面
if(this.showType==1){//白名单
sessionStorage.setItem('token',row.token);
sessionStorage.setItem('key',row.key);
}
sessionStorage.setItem('goodsInfo', JSON.stringify(row));
window.location.href = './exchange.html';
// this.maskshow = true;
// this.proname = row.product_name;
// this.productType = row.account_type;
} else {
this.maskshow = true;
this.popboxshow = true;
this.popboxtype = '提示';
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 = '当前商品正在兑换中';
}
}
},
//关闭,关闭弹框
closeBtn() {
this.popboxshow = false;
this.maskshow = false;
if (this.gstatus == 8) {
window.history.go(0);
}
},
//关闭弹出框,仅关闭弹框
successchangeBtn() {
this.maskshow = false;
this.popboxshow = false;
if (this.gstatus == 8) {
window.history.go(0);
}
},
//刷新页面
successchangeBtnFn() {
window.history.go(0);
}
}
})
</script>
</html>