<!--
|
* @Descripttion: 限时抢购列表页面
|
* @version: 1.0.0
|
* @Author: huangpan
|
* @Date: 2021-09-06 16:04:44
|
-->
|
<template>
|
<div class="seckill-detail">
|
<nav-bar :shadow="false" :autoBack="false" leftIcon="arrow-left" title="活动详情"
|
@clickRight="clickShare" @clickLeft="clickLeft" v-if="getQueryVariable('flag')">
|
<div slot="right" class="right-icon"
|
v-if="prodList[isActive] && prodList[isActive].length > 0 && isShare"></div>
|
</nav-bar>
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height: 100vh;"
|
:class="seckillTimeList.length?'seckill-box-grey':'seckill-box-red'">
|
<div class="seckill-bg">
|
<div class="bg-style" :style="{
|
'margin-top': getQueryVariable('flag') ? '44px' : '0',
|
}">
|
<div class="seckill-header" :style="{'background-image': `url(${bgImg})`}">
|
<span class="seckill-time-t ztdx" v-if="
|
limitTimePromotion.promotionStartTimeStr &&
|
limitTimePromotion.promotionEndTimeStr
|
">活动时间：{{ limitTimePromotion.promotionStartTimeStr }}-{{
|
limitTimePromotion.promotionEndTimeStr
|
}}</span>
|
<div class="banner-style">
|
<banner-module v-if='bannerImgFlag' :list="bannerImgList"></banner-module>
|
</div>
|
</div>
|
</div>
|
<div class="seckill-con">
|
<div class="seckill-con-c">
|
<div class="seckill-list">
|
<div v-if='seckillTimeList.length' class="seckill-list-top">
|
<div class="today-seckill">
|
<p>今日</p>
|
<p>秒杀</p>
|
</div>
|
<div class="list-content">
|
<div class="list-t row-center coloum-center"
|
v-for="(item, index) in seckillTimeList" :key="index"
|
:class="{ active: isActive === index, 'rush-buy':activeList.includes(index) }"
|
@click="getCurentSeckillData(item, index)">
|
<div class="row-content">
|
<div v-if="item.status !== '10'" class="row-jc">{{ item.timeDes }}</div>
|
<div class="row-t">{{ item.statusStr }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="seckill-list-bottom">
|
<div v-if="showGoodsList.length" class="list-bg">
|
<div class="seckill-info" v-for="(item, index) in showGoodsList" :key="index"
|
@click="goClick(item)">
|
<div class="seckill-list-left">
|
<div class="seckill-list-img"
|
:style="{ 'background-image': `url(${item.prodImgUrl?($isMp4(item.prodImgUrl)?`${item.prodImgUrl}?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360`:item.prodImgUrl) : require('@/assets/images/find_logo.png')})` }">
|
</div>
|
</div>
|
<div class="seckill-list-right">
|
<div class="bt-style">
|
<div class="info-left">
|
<div class="title" :class="{'grey-box':!item.ensalequantity}">
|
<span class="title-d">{{ item.prodName }}</span>
|
<span class="title-info">{{ item.prodSpecs }}</span>
|
</div>
|
<div class="price-style" :class="{'grey-box':!item.ensalequantity}">
|
<div class="p-price">
|
<span v-if='!activeList.includes(isActive)&&seckillTimeList[isActive].limitTimePromotion.priceDesc'
|
class="price_tag">{{seckillTimeList[isActive].limitTimePromotion.priceDesc}}</span>
|
<template v-else>
|
<span class="price_tag">￥</span>
|
<span class="price_tag">{{item.salePrice | fillerToFixed}}</span>
|
</template>
|
</div>
|
<div class="actual-price">
|
<span class="price_tag">￥</span>
|
<span class="price_tag">{{item.prodPrice | fillerToFixed}}</span>
|
</div>
|
</div>
|
<div class="desc" v-if="item.maxbuyquantity && item.ensalequantity">
|
每人限购 {{ item.maxbuyquantity }} 件
|
</div>
|
</div>
|
<div>
|
</div>
|
<div class="info-right" v-if="seckillTimeList[isActive].status === '10'">
|
<span class="qg"
|
v-if="item.ensalequantity && item.ensalequantity != 0">去抢购</span>
|
<div class="qg-xq" v-else>
|
<img src="../../assets/images/seckill/frame.png" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else class="row-center">
|
<div class="empty-row pdt">
|
<img src="../../assets/images/seckill/empy.png" class="empty-img" />
|
<div class="empty-text">很抱歉，当前暂无可抢购的商品</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="download-btn" @click="goApp()" v-if="!getQueryVariable('flag')">
|
下载APP
|
</div>
|
</van-pull-refresh>
|
<!-- 微信引导提示 -->
|
<guide-open :openStatus.sync="openStatus"></guide-open>
|
</div>
|
</template>
|
<script type="text/javascript">
|
/* eslint-disable */
|
import { activityList, prodListForUser } from "@/api/activityList/index";
|
import bannerImg from "../../assets/images/seckill/classify_bg.png";
|
import bannerModule from "./modules/banner.vue";
|
import guideOpen from "@/components/pop-up/guideOpen.vue";
|
import newPopupShare from "@/components/pop-up/new-uni-popup-share.vue";
|
var baseUrl = process.env.VUE_APP_H5_URL
|
|
export default {
|
name: "ActivityList",
|
components: {
|
bannerModule,
|
guideOpen,
|
newPopupShare,
|
},
|
data() {
|
return {
|
times: 1,
|
bannerImgFlag: true,
|
isActive: 0, // 操作是否选中
|
bannerImg: bannerImg,
|
isShow: false,
|
isLoading: false,
|
htmlHeight: {
|
height: "0px",
|
},
|
activeList: [], // 处于抢购中时间段的Index，兼容后期多个时间段时间交叉
|
timer: null,
|
prodList: [],
|
seckillTimeList: [],
|
dataLoad: false,
|
openStatus: false,
|
isShare: false,
|
sharewx: {},
|
shareUrl: `${baseUrl}/activity`, //分享链接
|
//默认背景图
|
defaultImg: require('../../assets/images/seckill/seckill_bg.png'),
|
};
|
},
|
filters: {
|
// 保留两位小数
|
fillerToFixed(val) {
|
var num = "0.00";
|
if (val) {
|
num = Number(val).toFixed(2);
|
}
|
return num;
|
},
|
},
|
computed: {
|
showGoodsList() {
|
let arr = this.prodList && this.prodList.length ? this.prodList[this.isActive].filter(val => {
|
// 即将开始 并且已下架（ensalequantity为0）不展示
|
return val.ensalequantity || this.seckillTimeList[this.isActive].status !== "00"
|
}) : []
|
return arr
|
},
|
limitTimePromotion() {
|
return this.seckillTimeList.length ? this.seckillTimeList[this.isActive].limitTimePromotion : {}
|
},
|
//背景图
|
bgImg() {
|
let url;
|
if (this.dataLoad) {
|
url = this.limitTimePromotion.ruleFileUrl ? this.limitTimePromotion.ruleFileUrl : this.defaultImg;
|
}
|
return url;
|
},
|
bannerImgList() {
|
return this.limitTimePromotion.promoPicUrlList || []
|
},
|
},
|
created() {
|
this.times = 1
|
this.getActivityList();
|
},
|
beforeDestroy() {
|
this.timer && clearInterval(this.timer)
|
},
|
mounted() {
|
this.getHtmlHeight();
|
},
|
methods: {
|
getHtmlHeight() {
|
let htmlHeight = window.innerHeight + "px";
|
this.$set(this.htmlHeight, "height", htmlHeight);
|
},
|
// 获取活动列表
|
async getActivityList() {
|
let params = {
|
promotionId: this.$route.query.promotionId,
|
bizId: 'B02'
|
}
|
// 安卓判断是否存在token（安卓先登录后退出，H5未清除token），进入页面再判断getToken是否存在
|
if (window.wlyxls) {
|
const _token = window.wlyxls.getToken('') || ''
|
window.localStorage.setItem('access_token', _token)
|
}
|
this.dataLoad = false;
|
this.timer && clearInterval(this.timer) // 清除定时器
|
const res = localStorage.getItem('access_token') ? await prodListForUser(params) : await activityList(params)
|
this.seckillTimeList = [];
|
this.prodList = [];
|
this.activeList = [];
|
if (res.code === "0") {
|
let _data = res.data;
|
if (_data && _data.length > 0) {
|
_data.forEach((item, index) => {
|
if (item.status === "10") {
|
this.isShowText = true;
|
this.isActive = index;
|
this.activeList.push(index);
|
}
|
if (item.status === "10" || item.status === "00") {
|
this.isShare = true;
|
}
|
let _curItem = {
|
limitTimePromotion: item.limitTimePromotion,
|
statusStr: item.statusStr,
|
timeDes: item.timeDes,
|
status: item.status,
|
}
|
this.$set(this.seckillTimeList, index, _curItem)
|
this.$set(this.prodList, index, item.prodList)
|
});
|
}
|
this.dataLoad = true;
|
this.isLoading = false;
|
this.seckillTimeList.length && this.isOver()
|
}
|
},
|
//判断活动是否已经结束 第一个已结束 重新获取活动
|
isOver() {
|
this.timer = setInterval(() => {
|
let startTime = this.seckillTimeList[0].limitTimePromotion.promotionStartTime.replace(/-/g, '/')
|
let endTime = this.seckillTimeList[0].limitTimePromotion.promotionEndTime.replace(/-/g, '/')
|
//转换成24小时的日期格式
|
var tempTimeStr24D = new Date().toLocaleDateString('zh').replaceAll('/', '-');
|
var tempTimeStr24T = new Date().toLocaleTimeString('zh', { hour12: false });
|
var _date = `${tempTimeStr24D} ${tempTimeStr24T}`;
|
// 等待过程 活动开始
|
console.log(new Date(_date.replace(/-/g, '/')).getTime(), "=====时间戳====", new Date(startTime).getTime())
|
if (new Date(_date.replace(/-/g, '/')).getTime() > new Date(startTime).getTime() + 5000 && new Date(_date.replace(/-/g, '/')).getTime() < new Date(endTime).getTime() + 5000 && this.times === 1) {
|
this.times++
|
this.getActivityList();
|
} else if (new Date(_date.replace(/-/g, '/')).getTime() > new Date(endTime).getTime() + 5000) {
|
this.times = 1;
|
this.getActivityList();
|
}
|
}, 1000);
|
},
|
onRefresh() {
|
this.getActivityList();
|
},
|
// 选中时间段
|
getCurentSeckillData(data, index) {
|
this.bannerImgFlag = false
|
this.isShowText = data.status === "10" ? true : false;
|
this.isActive = index;
|
// 解决切换 banner图还有上一个图 Bug
|
setTimeout(() => {
|
this.bannerImgFlag = true
|
}, 500);
|
},
|
//点击抢购
|
goClick(data) {
|
if (this.$route.query.isPreview) return
|
// 已抢购完 不跳转
|
if (!data.ensalequantity) {
|
this.$toast('当前商品已售完')
|
return
|
}
|
let _extparams = JSON.parse(data.extparams);
|
if (JSON.stringify(_extparams) != "{}") {
|
//商品详情
|
if (this.getQueryVariable("flag")) {
|
let params = {
|
activityType: '4',
|
shopSpuId: _extparams.shopSpuId,
|
shopSkuId: _extparams.shopSkuId,
|
spuId: data.prodId
|
};
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage(
|
`wlyxls://product_detail?activityType=4&shopSpuId=${_extparams.shopSpuId}&spuId=${data.prodId}&shopSkuId=${_extparams.shopSkuId}`
|
);
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.toCommodityDetailPage(JSON.stringify(params));
|
}
|
}
|
} else {
|
location.href = `${baseUrl}/goodsDetail?shopSpuId=${_extparams.shopSpuId}&spuId=${data.prodId}&shopSkuId=${_extparams.shopSkuId}`;
|
}
|
}
|
},
|
// 下载app
|
goApp() {
|
let url;
|
var isWeixin = this.is_weixin();
|
//判断是否在微信内置浏览器打开
|
if (isWeixin) {
|
this.openStatus = true;
|
} else {
|
if (this.$root.isIos) {
|
url = this.$store.getters.iosUrl
|
} else {
|
url = this.$store.getters.androidUrl
|
}
|
location.href = url
|
}
|
},
|
is_weixin() {
|
var ua = window.navigator.userAgent.toLowerCase();
|
if (ua.match(/MicroMessenger/i) == "micromessenger") {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
//打开分享面板
|
clickShare() {
|
if (this.$route.query.isPreview) return
|
const _this = this;
|
let params = {
|
// type: _name === "wx" ? 0 : 1, //0-好友 1-朋友圈
|
title: `${this.limitTimePromotion.promotionName}`,
|
description: "五味相谐，人生对味！五粮液新零售APP邀您共品佳酿！",
|
imgurl: `${baseUrl}/frame.png`,
|
url: _this.shareUrl,
|
};
|
if (this.$route.query && this.$route.query.promotionId) {
|
params.url = `${_this.shareUrl}?promotionId=${this.$route.query.promotionId}`;
|
}
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosShare.postMessage(JSON.stringify(params));
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.openShareWindow(JSON.stringify(params));
|
}
|
}
|
},
|
//获取url参数
|
getQueryVariable(variable) {
|
var query = window.location.search.substring(1);
|
var vars = query.split("&");
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split("=");
|
if (pair[0] == variable) {
|
return pair[1];
|
}
|
}
|
return false;
|
},
|
//返回上一页
|
clickLeft() {
|
if (window.wlyxls) {
|
//navigateBack 返回 navigateClose关闭
|
window.wlyxls.navigateBack("");
|
} else if (window.webkit) {
|
window.webkit.messageHandlers.iosBrowserPop.postMessage("");
|
} else {
|
this.$router.go(-1);
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
@import "@/views/activityList/index.scss";
|
</style>
|
