HandOver-liuwu
/
mobileclient
mirror of https://codeup.aliyun.com/lsxd/marketing/mobileclient.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
mobileclient/1.html

569 lines
21 KiB
HTML
Raw Normal View History

白名单C端更新
2022-01-20 14:45:21 +08:00
<!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.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.js"></script> -->
<script src="./api1_1.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?'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:[],
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获取商品信息
getGoods() {
let self = this;
let showType=sessionStorage.getItem('showType');
let data = {
"last_product_id": sessionStorage.getItem('lastid') | 0,
}
if(showType==1){//白名单
let tokenList=JSON.parse(sessionStorage.getItem('getTokenList'));
// let goodsList=[];
tokenList.forEach(item=>{
data.token=item.token;
req.axiosPostproducts('/key/products', data).then(res => {
if (res.code == 200) {
res.data.forEach(it=>{
it.token=item.token;
});
// goodsList=goodsList.concat(res.data);
}
});
});
let duplicate=[];
setTimeout(() => {
// this.allgoods=goodsList;
let goodsArr=[];
let goodsList=[
{
"code_batch_id": 1440,
"available":2,
"product_id": 104,
"product_type": 1,
"product_name": "优酷年卡第一",
"map_product_name": "优酷年卡",
"account_type": 5,
"contract_price": "100.0000",
"official_price": "198.0000",
"quantity": 20,
"stock": 20,
"show_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/youku.png",
"describe_url": "",
"begin_time": "2022-01-18 09:39:35",
"end_time": "2022-01-18 23:59:59",
"exchange": 0,
"key": "AAAAUERhrBvgg8B1",
"token": "03cbdaf3d9e29212a1552ec0f4daab32"
},
{
"code_batch_id": 1441,
"available": 1,
"product_id": 103,
"product_type": 1,
"product_name": "优酷季卡",
"map_product_name": "优酷季卡",
"account_type": 15,
"contract_price": "60.0000",
"official_price": "56.0000",
"quantity": 40,
"stock": 40,
"show_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/youku.png",
"describe_url": "",
"begin_time": "2022-01-18 09:39:35",
"end_time": "2022-01-18 23:59:59",
"exchange": 0,
"key": "AAAAUERhrBvgg8B1",
"token": "03cbdaf3d9e29212a1552ec0f4daab32"
},
{
"code_batch_id": 1442,
"available": 1,
"product_id": 107,
"product_type": 1,
"product_name": "爱奇艺黄金会员月卡",
"map_product_name": "爱奇艺黄金会员月卡",
"account_type": 15,
"contract_price": "60.0000",
"official_price": "19.8000",
"quantity": 20,
"stock": 20,
"show_url": "https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220118/ade7159cee476f41323f64ecaf87127a.png",
"describe_url": "",
"begin_time": "2022-01-18 09:39:35",
"end_time": "2022-01-18 23:59:59",
"exchange": 0,
"key": "AAAAUERhrBvgg8B1",
"token": "03cbdaf3d9e29212a1552ec0f4daab32"
},
{
"code_batch_id": 1442,
"available": 1,
"product_id": 116,
"product_type": 1,
"product_name": "腾讯视频会员季卡",
"map_product_name": "腾讯视频会员季卡",
"account_type": 5,
"contract_price": "50.0000",
"official_price": "58.0000",
"quantity": 20,
"stock": 20,
"show_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/tenxun.png",
"describe_url": "",
"begin_time": "2022-01-18 09:39:35",
"end_time": "2022-01-18 23:59:59",
"exchange": 0,
"key": "AAAAUERhrBvgg8B1",
"token": "03cbdaf3d9e29212a1552ec0f4daab32"
},{
"code_batch_id": 1440,
"available":5,
"product_id": 104,
"product_type": 1,
"product_name": "优酷年卡第一基带升级的",
"map_product_name": "优酷年卡",
"account_type": 5,
"contract_price": "100.0000",
"official_price": "198.0000",
"quantity": 20,
"stock": 20,
"show_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/youku.png",
"describe_url": "",
"begin_time": "2022-01-18 09:39:35",
"end_time": "2022-01-18 23:59:59",
"exchange": 0,
"key": "AAAAUERhrBvgg8B1",
"token": "03cbdaf3d9e29212a1552ec0f4daab32"
}
];
goodsList.forEach(item=>{
if(duplicate.indexOf(item.product_id)==-1){
duplicate.push(item.product_id);
}
});
let result=[]
duplicate.forEach(it=>{
result=goodsList.filter(iten=>{//goodshow为去重后的数据
return iten.product_id==it;
});
console.log('结果集合',result);
let flag=[1,2,6,8,7,5,4,3];
let minIndex = 7;
result.forEach(item=>{
let flagIndex=flag.indexOf(item.available);
if(flagIndex > -1)
{
if(flagIndex < minIndex)
minIndex = flagIndex;
}
})
let obj = result.find((o)=>{return o.available ==flag[minIndex] })
console.log("查找",obj)
goodsArr.push(obj);
});
console.log(537,goodsArr);
}, 1000);
// 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 => {
}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) {
window.location.href = "./exchange.html";
sessionStorage.setItem('goodsInfo', JSON.stringify(res.data[0]));
return false;
}
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.goodsNum = false;
}
} 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) {
// 跳转商品详情页面
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>