mobileclient/v1_5_0_C/couponCollection.html

504 lines
25 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/loading.css">
<link rel="stylesheet" href="./couponCollection.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/api1_4_0.js"></script>
<script src="./tabbar.js"></script>
<link rel="stylesheet" href="./tabbar.css">
</head>
<body>
<div id="homepage">
<div v-show="loading">
<preload-component />
</div>
<div v-show="!loading&&!suspension" class="main-body">
<!-- 配置的顶部banner -->
<div class="topBanner">
<div class="search-backpresty">
<img class="backpresty" @click="backHandler" v-if="goodsShow&&!iskey"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"
alt="">
<div class="search-box">
<input type="text" class="search" placeholder="请输入关键字查找">
<img class="search-img" src="./img/search.png" alt="">
</div>
</div>
<img class="banner" :src="topImg" alt="">
</div>
<!-- 配置的图片 -->
<div class="autoImg">
<img src="./img/coupon.png" alt="">
</div>
<!-- 配置的标题 -->
<div class="title">
<img src="./img/or.png" alt="" class="or">
<p>热销商品</p>
</div>
<!-- 轮播展示 -->
<div id="rotation" v-if="layout=='2'">
<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==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="item.type==1?item.entity.show_url:item.entity.channel==1?'http://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/zfbreduce.png':'http://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/wxreduce.png'"
:class="item.stock&&item.stock<0||item.available!=1&&item.available!=2?'changegray':''"></img>
</div>
<div class="item-name"
v-html="item.type==1?item.entity.product_name:item.entity.batch_goods_name"
:class="item.stock&&item.stock<0||item.available!=1&&item.available!=2?'changegray':''">
</div>
<p class="price">
原价¥180.60
</p>
<p class="money">
券后价
<span class="sign"></span>
<span class="current-price">100</span>
</p>
</div>
</div>
</div>
</div>
<div class="exchangeBtn"
:class="gstatus!=1?describe.type&&describe.type!=2&&describe.content?'bottomBtn noexchangeBtn':'noexchangeBtn':describe.type&&describe.type!=2&&describe.content?'bottomBtn':''"
:style="{'background': bgcolor,'color':ftcolor}" @click="exchangeBtn()">
立即兑换
</div>
</div>
<!-- 列表 展示-->
<div id="list" v-if="layout=='1'">
<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 class="box">
<div class="imgBG">
<img :src="item.type==1?item.entity.show_url:item.entity.channel==1?'http://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/zfbreduce.png':'http://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/wxreduce.png'"
alt=""
:class="item.stock&&item.stock<0||item.available!=1&&item.available!=2?'changegray':''">
</div>
<div>
<font
:class="item.stock&&item.stock<0||item.available!=1&&item.available!=2?'changegray':''">
{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}</font>
<div class="details">
<p class="sign"></p>
<p class="price">15</p>
<p class="coupon">券后价</p>
<p class="original-price">原价¥20</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- 矩阵展示 -->
<div id="matrix" v-if="layout=='3'">
<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 class="goodsNum-frist">
<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==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 class="img"
:src="item.type==1?item.entity.show_url:item.entity.channel==1?'http://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/zfbreduce.png':'http://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/wxreduce.png'"
alt="" />
</div>
<div class="detail-text">
<font>{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}</font>
<p class="original-price">原价¥25</p>
<p>
<span class="sign"></span>
<span class="price">20</span>
<span class="coupon">券后价</span>
</p>
</div>
</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()">
<tab-component :current="1" />
</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: '',
iskey: true,
allgoods: [],
showType: 0,
tiptext: '还没开始哟兑换时间为2021-12-05 12:12:12至2021-01-01 12:12:12',
successTip: '兑换成功请直接登录app使用',
}
},
components: {
tabComponent
},
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.iskey = sessionStorage.getItem('haskey');
this.describe = productConfig.describe;
},
methods: {
tabHandle (id) {
this.tabActive = id
},
closeTip () {
this.suspension = false;
},
susTipFn () {
this.suspension = true;
},
onSelected (item) {
this.exchangeCommity = item;
this.gstatus = item.available;
},
backHandler () {
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 () {
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.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 == -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, 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 = 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]));
sessionStorage.setItem('key', goodsArr[0].key);
sessionStorage.setItem('token', goodsArr[0].token);
window.location.replace(goodsArr[0].type == 1 ? "./exchange.html" : "./reduce.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.axiosPost('/key/products', data).then(res => {
if (res.code == 200) {
self.swiperDataList = res.data;
sessionStorage.setItem('goodsCount', res.data.length);
self.goodsShow = res.data.length > 1;
if (res.data && res.data.length == 1) {//单个商品直接进入详情页面
sessionStorage.setItem('goodsInfo', JSON.stringify(res.data[0]));
window.location.replace(res.data[0].type == 1 ? "./exchange.html" : "./reduce.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.history.back();
}, 3000);
} else {
setTimeout(() => {
window.location.href = "./index.html?id=" + sessionStorage.getItem('linkId');
}, 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));
//type :1 兑换码 2:立减金
window.location.replace(row.type == 1 ? "./exchange.html" : "./reduce.html");
} 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);
}
},
//刷新页面
successchangeBtnFn () {
window.history.go(0);
}
}
})
</script>
</html>