mobileclient/homepage.html

622 lines
24 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/homepage2_0.css?v=3">
<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/loading.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/tabs.js"></script>
</head>
<style scoped>
* {
margin: 0 auto;
padding: 0;
font-family: HYQiHei;
}
html {
font-size: 26.66666667vw;
height: 100%;
}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
</style>
<body>
<div id="homepage">
<div v-show="loading">
<preload-component />
</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" v-if="goodsShow&&!iskey"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<img :src="topImg" alt="" @click="bannerTo">
</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="[4,9].includes(item.available)"
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==11"
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">
<!-- type :1 兑换码 2:立减金,channel:1支付宝2微信 -->
<img class="le-img" :src="distinguishLogo(item)" :class="statusFun(item)?'':'changegray'"></img>
</div>
<div class="item-name" :class="statusFun(item)?'':'changegray'">
{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}
<span v-if="item.entity.send_num>1&&item.type===2" class="send_num"> x{{item.entity.send_num}}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 立即兑换 -->
<div class="exchangeBtn"
:class="(gstatus===1||(exchangeCommity.type===3&&gstatus===8))?'':'bottomBtn noexchangeBtn'"
:style="{'background': bgcolor,'color':ftcolor}" @click="exchangeBtn()">
立即兑换
</div>
</div>
<!-- 列表 -->
<div id="list" v-if="layout=='1'">
<div class="topBanner">
<img class="backpresty" @click="backgoodsFn" v-if="goodsShow&&!iskey"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<img :src="topImg" alt="" @click="bannerTo">
</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="distinguishLogo(item)" alt="" :class="statusFun(item)?'':'changegray'">
<font :class="statusFun(item)?'':'changegray'">
{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}
<span v-if="item.entity.send_num>1&&item.type===2" class="send_num"> x{{item.entity.send_num}}</span>
</font>
</div>
<span class="goodsStatus">
<img v-if="[4,9].includes(item.available)"
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==11"
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>
</li>
</ul>
</div>
<!-- 矩阵 -->
<div id="matrix" v-if="layout=='3'">
<div class="topBanner">
<img class="backpresty" @click="backgoodsFn" v-if="goodsShow&&!iskey"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<img :src="topImg" alt="" @click="bannerTo">
</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="statusFun(item)?'':'changegray'" v-for="(item,i) in swiperDataList" :key="i"
@click="exchangeBtn(item)">
<div>
<span class="goodsIcon">
<img v-if="[4,9].includes(item.available)"
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==11"
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="distinguishLogo(item)" alt="" />
</div>
<font>
{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}
<span v-if="item.entity.send_num>1&&item.type===2" class="send_num"> x{{item.entity.send_num}}</span>
</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>
<tab-static-component :current="1" v-if="!isToLook"></tab-static-component>
<!-- 悬浮提示 -->
<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="https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/cardpwd/img/commimgs/close.png" alt=""
@click="closeBtn()">
</div>
</body>
<script>
/***************************** type 1:直冲 2:立减金 3:红包 *****************************/
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: '',
iskey: true,
allgoods: [],
showType: 0,
isToLook: false,
tiptext: '还没开始哟兑换时间为2021-12-05 12:12:12至2021-01-01 12:12:12',
successTip: '兑换成功到账信息请关注官方APP',
};
},
components: {
tabStaticComponent
},
created () {
this.getGoods();
let productConfig = JSON.parse(localStorage.getItem('product_list'));
this.bgcolor = productConfig.button_color;
this.ftcolor = productConfig.font_color;
this.topImg = productConfig.top_image;
document.title = localStorage.getItem('title');
this.layout = productConfig.list;
this.iskey = localStorage.getItem('haskey');
this.describe = productConfig.describe;
this.bannerUrl = productConfig.bannerUrl;
},
methods: {
closeTip () {
this.suspension = false;
},
susTipFn () {
this.suspension = true;
},
onSelected (item) {
this.exchangeCommity = item;
this.gstatus = item.available;
},
backgoodsFn () {
let backUrl = window.history.length;
if (window.history.length) {
history.go(-backUrl + 1);
}
},
// 单条弹框
openDialog () {
this.promtshow = true;
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000);
},
//根据token获取商品信息
async getGoods () {
sessionStorage.setItem('backShow', '');
let self = this;
let showType = localStorage.getItem('showType');
this.showType = showType;
let data = {
"last_product_id": localStorage.getItem('lastid') | 0,
};
if (showType == 1) { //白名单
let tokenList = JSON.parse(localStorage.getItem('getTokenList'));
let goodsList = [];
for (item of tokenList) {
let goodsItem = [];
data.token = item;
let waitGoods = await req.axiosPost('/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 == 403) {
setTimeout(() => {
window.location.href = localStorage.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, 9, 4, 11, 3, 10, 20, 21]; //显示的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);
});
/*商品自定义排序0-100降序排列100第一个展示0最后一个展示*/
var objectArraySort = (keyName) => {
return (objectN, objectM) => {
var valueN = objectN[keyName];
var valueM = objectM[keyName];
if (valueN < valueM) return 1;
else if (valueN > valueM) return -1;
else return 0;
};
};
goodsArr.sort(objectArraySort('weight'));
self.swiperDataList = this.convertData(goodsArr);
self.goodsShow = goodsArr.length > 1;
sessionStorage.setItem('goodsCount', goodsArr.length);
if (goodsArr && goodsArr.length == 1 && goodsArr[0].available == 1) {
sessionStorage.setItem('goodsInfo', JSON.stringify(goodsArr[0]));
localStorage.setItem('key', goodsArr[0].key);
localStorage.setItem('token', goodsArr[0].token);
this.toPage(goodsArr[0]);
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;
setTimeout(() => {
self.maskshow = true;
self.popboxtype = '提示';
self.popboxshow = true;
self.tiptext = '暂无可兑换码商品';
}, 1000);
}
} else { //兑换码
data.token = localStorage.getItem('token');
req.axiosPost('/key/products', data).then(res => {
if (res.code == 200) {
self.swiperDataList = this.convertData(res.data);
sessionStorage.setItem('goodsCount', res.data.length);
self.goodsShow = res.data.length > 1;
let ua = window.navigator.userAgent.toLowerCase();/* 判断是否web-view打开 */
if ((res.data && res.data.length == 1) || /miniProgram/i.test(ua)) {//单个商品直接进入详情页面
const product = res.data[0];
/* 满足3个条件进入此判断 仅兑换一次 在线查看卡密商品 则卡密页面不能返回 */
if (product.restrict == 1 && product.type == 1 && product.entity.card_show == 2 && product.entity.product_type == 2) {
sessionStorage.setItem('backShow', 1);
}
/* 满足3个条件进入此判断 仅兑换一次 已兑换 在线查看卡密商品 */
this.isToLook = product.exchange == 1 && product.restrict == 1 && product.type == 1 && product.entity.card_show == 2 && product.entity.product_type == 2;
if (this.isToLook) {
return req
.axiosGet(`/key/order/queryList`, {
token: data.token,
page: 1,
limit: 10
})
.then(({ data, code, }) => {
if (code === 200) {
sessionStorage.setItem('orderNumber', data[0].order_number);
window.location.replace('/orderDetails/cardOrder.html');
}
});
} else {
sessionStorage.setItem('goodsInfo', JSON.stringify(product));
this.toPage(product);
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 {
setTimeout(() => {
self.maskshow = true;
self.popboxtype = '提示';
self.popboxshow = true;
self.tiptext = '暂无可兑换码商品';
}, 1000);
}
} else {
self.maskshow = true;
self.popboxtype = '提示';
self.popboxshow = true;
self.tiptext = res.message;
if (res.code == 403) {
let haskey = localStorage.getItem('haskey');
if (haskey) {
setTimeout(() => {
window.history.back();
}, 3000);
} else {
setTimeout(() => {
window.location.href = "./index.html?id=" + localStorage.getItem('linkId');
}, 3000);
}
}
}
}).catch(err => {
});
}
},
/* 转换数据 */
convertData (goods) {
goods.map(item => {
/* 组装组合商品数据 */
if (item.recharge_type === 2) {
item.entity.code_batch_id = item.code_batch_id;
item.entity.batch_goods_name = item.entity.title;
item.entity.channel = Number(item.entity.channel);
item.type = 2;
}
});
return goods;
},
//选择商品点击兑换
exchangeBtn (row = this.exchangeCommity) {
let gstatus = row.available;
this.gstatus = gstatus;
/* 直冲、立减金商品状态为 1 时可兑换。
* 红包商品状态为 1 8 时也可兑换
*/
if (gstatus == 1 || (row.type === 3 && [1, 8].includes(row.available))) {
// 跳转商品详情页面
if (this.showType == 1) { //白名单
localStorage.setItem('token', row.token);
localStorage.setItem('key', row.key);
}
sessionStorage.setItem('goodsInfo', JSON.stringify(row));
this.toPage(row);
} else {
this.maskshow = true;
this.popboxshow = true;
this.popboxtype = '提示';
this.tiptext = product_status(gstatus, row);
}
},
//关闭,关闭弹框
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);
}
if (this.tiptext === '暂无可兑换码商品') {
setTimeout(() => {
window.location.href = "../index.html?id=" + localStorage.getItem('linkId');
}, 1000);
}
},
//刷新页面
successchangeBtnFn () {
window.history.go(0);
},
/* 区分红包商品logo 路径 */
distinguishLogo ({ type, entity }) {
const { channel } = entity;
/* NOTE: type 1 兑换码 2 立减金 3 红包 */
/* NOTE: channel 1 支付宝 2 微信 */
if (type == 1) {
return entity.show_url;
}
if (type == 2) {
if (channel === 1) {
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/zfbreduce.png';
} else if (channel === 2) {
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/wxreduce.png';
} else if (channel === 3) {
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logo_ysf.png';
}
}
if (type == 3) {
if (channel === 1) {
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/alipay_icon.png';
} else if (channel === 2) {
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/wechat_icon.png';
} else if (channel === 3) {
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logo_ysf.png';
}
}
},
/* 区分状态 */
statusFun (item) {
if (item.available === 1) {
return true;
} else if (item.available === 8) {
if (item.type === 3) {
return true;
} else {
return false;
}
} else {
return false;
}
},
/* 集中跳转 */
toPage ({ type, entity, recharge_type }) {
/*
* type: 1 兑换码 2 立减金 3 红包
* receive_mode: 1 支付宝 2 H5
* recharge_type 2 组合立减金 1立减金
*/
if (recharge_type == 2 && type == 2) {
return window.location.replace("./combining.html");
}
if (type == 1) {
window.location.replace("./exchange.html");
}
if (type == 2) {
if (entity.channel === 3) {
window.location.replace("./ysf-reduce.html");
} else if (entity.channel === 1 && entity.receive_mode === 2) {
window.location.replace("./zfb-reduce.html");
} else {
window.location.replace("./reduce.html");
}
}
if (type == 3) {
if (entity.channel === 3) {
window.location.replace("./ysf.html");
} else if (entity.channel === 1 && entity.receive_mode === 2) {
window.location.replace("./zfb-redPackets.html");
} else {
window.location.replace("./redPackets.html");
}
}
},
/* banner外链跳转 */
bannerTo () {
if (this.bannerUrl) {
location.href = this.bannerUrl;
}
}
}
})
</script>
</html>