mobileclient/1.html

569 lines
21 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.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>