|
|
|
<template>
|
|
|
|
<LayoutApp :title="title" >
|
|
|
|
<div class="activity-wrapper">
|
|
|
|
<div class="activity-container">
|
|
|
|
<ul id="page_ul">
|
|
|
|
<li>
|
|
|
|
<img :src="pageData.title">
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<div class="tab-container">
|
|
|
|
<div v-for="(item, index) in pageData.couponData" :class="['tab-item', index === nowActiveIndex ? 'active' : '']" :data-index="index" @click="changeTab">
|
|
|
|
<p class="time-text">{{item.time + ':00'}}</p>
|
|
|
|
<p class="status-text">{{item.statusText}}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<div class="coupon-container">
|
|
|
|
<div class="coupon-item" v-for="(item, index) in pageData.couponData" v-if="index === nowActiveIndex">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</LayoutApp>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import LayoutApp from '../../../components/layout/layout-app';
|
|
|
|
import {createNamespacedHelpers} from 'vuex';
|
|
|
|
|
|
|
|
const {mapState, mapActions, mapMutations} = createNamespacedHelpers('activitys/limitTimeCoupon');
|
|
|
|
const STATUS_MAP = {
|
|
|
|
0: '已抢完',
|
|
|
|
1: '即将开始',
|
|
|
|
2: '立即抢券',
|
|
|
|
3: '明日开启'
|
|
|
|
};
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'limitTimeCoupon',
|
|
|
|
components: {LayoutApp},
|
|
|
|
asyncData({store, router}) {
|
|
|
|
},
|
|
|
|
activated() {
|
|
|
|
this.openTime = Date.now();
|
|
|
|
this.getServerTime().then(result => {
|
|
|
|
this.serverTime = result.data;
|
|
|
|
console.log('serverTime', result, (new Date(result.data)).toLocaleString());
|
|
|
|
this.initCouponData();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
// ...mapState(['serverTime'])
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
title: 'UFO限时抢券',
|
|
|
|
serverTime: 0, // 服务器时间，后面会累加计时器时间
|
|
|
|
pageData: {
|
|
|
|
title: '//ad.yoho.cn/html5/2019/10/activity/004/base/title.jpg?imageslim',
|
|
|
|
repeat: '//ad.yoho.cn/html5/2019/10/activity/004/base/repeat_bg.jpg?imageslim',
|
|
|
|
couponBg: '//ad.yoho.cn/html5/2019/10/activity/004/base/coupon_bg.png?imageslim',
|
|
|
|
buttonEnd: '//ad.yoho.cn/html5/2019/10/activity/004/base/btn_end.png?imageslim', // 已抢完按钮
|
|
|
|
buttonGet: '//ad.yoho.cn/html5/2019/10/activity/004/base/btn_get.png?imageslim', // 立即抢券按钮
|
|
|
|
buttonReady: '//ad.yoho.cn/html5/2019/10/activity/004/base/btn_ready.png?imageslim', // 即将开始按钮
|
|
|
|
couponBaseData: {
|
|
|
|
'2019-10-28': [
|
|
|
|
{
|
|
|
|
time: 10,
|
|
|
|
tokens: [
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/1.png',
|
|
|
|
token: '22cae1c5-8e8c-4f8a-9502-c59fa752974a'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/2.png',
|
|
|
|
token: '66ef584f-6925-466e-ac04-126993c316a1'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/3.png',
|
|
|
|
token: 'f7be232b-d548-4927-bc53-db0d10d9f5f1'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/4.png',
|
|
|
|
token: 'e30b346f-ec92-453c-8b4e-08f5da225eb4'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/5.png',
|
|
|
|
token: 'f3a0b83e-b2d5-450c-9e1d-c68aa7e1fd4e'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
time: 16,
|
|
|
|
tokens: [
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/1.png',
|
|
|
|
token: '91c38ce0-bd9e-4d11-9bf0-f53c633b60c3'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/2.png',
|
|
|
|
token: '6f0d6158-061f-44f7-aed8-789c12eb9dc8'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/3.png',
|
|
|
|
token: 'c002aeb5-a398-4113-bbe0-a60369d9242e'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/4.png',
|
|
|
|
token: 'f5dd41ca-2a4b-4374-9bc3-c2777da82a8b'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/5.png',
|
|
|
|
token: 'e8bc629c-3bda-4778-a863-ae70bc7a5ce7'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
time: 22,
|
|
|
|
tokens: [
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/1.png',
|
|
|
|
token: '8eb43f41-b35f-4469-b7d2-b076e6315a71'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/2.png',
|
|
|
|
token: 'f066e81a-6d27-493f-8a3a-9276bd620718'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/3.png',
|
|
|
|
token: '0234b183-834e-4c53-ad42-b1fda17eb122'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/4.png',
|
|
|
|
token: '9957ec2f-dec4-46d3-8ae8-55c82d375443'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: '//ad.yoho.cn/html5/2019/10/activity/004/coupon/1/5.png',
|
|
|
|
token: '1eb7ef64-fb07-4564-b61c-53d4e473292a'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
],
|
|
|
|
'2019-10-29': [
|
|
|
|
{
|
|
|
|
time: 10,
|
|
|
|
tokens: []
|
|
|
|
},
|
|
|
|
{
|
|
|
|
time: 16,
|
|
|
|
tokens: []
|
|
|
|
},
|
|
|
|
{
|
|
|
|
time: 22,
|
|
|
|
tokens: []
|
|
|
|
}
|
|
|
|
],
|
|
|
|
'2019-10-30': [
|
|
|
|
{
|
|
|
|
time: 10,
|
|
|
|
tokens: []
|
|
|
|
},
|
|
|
|
{
|
|
|
|
time: 16,
|
|
|
|
tokens: []
|
|
|
|
},
|
|
|
|
{
|
|
|
|
time: 22,
|
|
|
|
tokens: []
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
couponData: [],
|
|
|
|
},
|
|
|
|
nowActiveIndex: 0,
|
|
|
|
nextTime: 0, // 下一次抢券时间点
|
|
|
|
intervalTime: 10000, // 计时器时间
|
|
|
|
timeout: null, // 定时器
|
|
|
|
openTime: 0, // 用户打开页面的时间
|
|
|
|
};
|
|
|
|
},
|
|
|
|
beforeRouteLeave(from, to, next) {
|
|
|
|
console.log('routeLeave');
|
|
|
|
this.clearData();
|
|
|
|
next();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['getServerTime', 'getCoupon']),
|
|
|
|
getDateString(time) { // 获取日期的字符串，如'2019-10-26'
|
|
|
|
let date = new Date(time);
|
|
|
|
let month = date.getMonth() + 1 > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1);
|
|
|
|
let day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
|
|
|
|
|
|
|
|
return {
|
|
|
|
str: [date.getFullYear(), month, day].join('-'),
|
|
|
|
safariStr: [date.getFullYear(), month, day].join('/'), // safari中只能使用这种格式
|
|
|
|
dateNum: time
|
|
|
|
};
|
|
|
|
},
|
|
|
|
clearData() {
|
|
|
|
clearTimeout(this.timeout);
|
|
|
|
this.timeout = null;
|
|
|
|
this.serverTime = 0;
|
|
|
|
this.nowActiveIndex = 0;
|
|
|
|
this.nextTime = 0;
|
|
|
|
this.intervalTime = 10000;
|
|
|
|
this.openTime = 0;
|
|
|
|
this.pageData.couponData = [];
|
|
|
|
},
|
|
|
|
|
|
|
|
getActiveIndex(time) { // 计算当前应该生效的tab
|
|
|
|
console.log('time=', time, new Date(time));
|
|
|
|
if (this.pageData.couponData.length > 0) {
|
|
|
|
for (let i = 0; i < this.pageData.couponData.length; i ++) {
|
|
|
|
let obj = this.pageData.couponData[i];
|
|
|
|
|
|
|
|
if ((time >= obj.date_time && time < obj.date_time + 3600000) || (time > obj.date_time - 3600000 && time < obj.date_time)) {
|
|
|
|
this.nowActiveIndex = i;
|
|
|
|
this.nextTime = obj.date_time;
|
|
|
|
break;
|
|
|
|
} else if (time < obj.date_time) {
|
|
|
|
this.nowActiveIndex = i - 1 > 0 ? (i - 1) : 0;
|
|
|
|
this.nextTime = obj.date_time;
|
|
|
|
break;
|
|
|
|
} else if (time > obj.date_time + 3600000) {
|
|
|
|
this.nowActiveIndex = i;
|
|
|
|
this.nextTime = obj.date_time;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (this.nextTime) {
|
|
|
|
this.checkCouponTime();
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
initCouponData() { // 初始化今日需要使用到的券的信息
|
|
|
|
if (this.serverTime) {
|
|
|
|
this.pageData.couponData = [];
|
|
|
|
let today = this.getDateString(this.serverTime);
|
|
|
|
|
|
|
|
let tomorrow = this.getDateString(this.serverTime + 86400000);
|
|
|
|
|
|
|
|
// 此处把今天日期对应的券信息取出放入couponData
|
|
|
|
if (this.pageData.couponBaseData[today.str] && this.pageData.couponBaseData[today.str].length > 0) {
|
|
|
|
this.pageData.couponBaseData[today.str].forEach((obj) => {
|
|
|
|
obj.date = today.str;
|
|
|
|
|
|
|
|
// 计算领券开始时间，用于比较，这边用safariStr取时间，防止浏览器兼容问题
|
|
|
|
obj.date_time = new Date(today.safariStr + ' ' + obj.time + ':00:00').getTime();
|
|
|
|
obj.is_today = true;
|
|
|
|
|
|
|
|
if (today.dateNum < obj.date_time) {
|
|
|
|
obj.status = 1; // 即将开始
|
|
|
|
} else if (today.dateNum > obj.date_time && today.dateNum < obj.date_time + 3600000) {
|
|
|
|
obj.status = 2; // 进行中
|
|
|
|
} else if (today.dateNum > obj.date_time + 3600000) {
|
|
|
|
obj.status = 0; // 已抢完
|
|
|
|
}
|
|
|
|
obj.statusText = STATUS_MAP[obj.status];
|
|
|
|
|
|
|
|
this.pageData.couponData.push(obj);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 把明日对应的首条券信息放入couponData
|
|
|
|
if (this.pageData.couponBaseData[tomorrow.str] && this.pageData.couponBaseData[tomorrow.str].length > 0) {
|
|
|
|
let obj = this.pageData.couponBaseData[tomorrow.str][0];
|
|
|
|
|
|
|
|
obj.date = tomorrow.str;
|
|
|
|
obj.date_time = new Date(tomorrow.safariStr + ' ' + obj.time + ':00:00').getTime();
|
|
|
|
obj.is_today = false;
|
|
|
|
obj.status = 3;
|
|
|
|
obj.statusText = STATUS_MAP[obj.status];
|
|
|
|
this.pageData.couponData.push(obj);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.getActiveIndex(this.serverTime); // 获取生效的tab页
|
|
|
|
|
|
|
|
console.log(this.pageData.couponData);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
checkCouponTime() { // 定时器用于判断是否到下一次抢券的时间
|
|
|
|
let interval = this.intervalTime;
|
|
|
|
let serverDate = new Date(this.serverTime);
|
|
|
|
|
|
|
|
if (serverDate.getDate() !== new Date(this.openTime).getDate()) {
|
|
|
|
this.openTime = Date.now();
|
|
|
|
console.log(serverDate.getDate(), new Date(this.openTime).getDate());
|
|
|
|
this.$router.replace({
|
|
|
|
name: 'LimitTimeCoupon',
|
|
|
|
params: {
|
|
|
|
code: Math.random().toString(16).substr(2,8)
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.nextTime - this.serverTime < 10000 && this.serverTime < this.nextTime) {
|
|
|
|
interval = 1000; // 当下一次开始时间和当前时间比较小于10秒时，则1秒判断一次
|
|
|
|
}
|
|
|
|
this.serverTime += interval;
|
|
|
|
console.log('timeout=', new Date(this.serverTime));
|
|
|
|
|
|
|
|
if (this.serverTime >= this.nextTime && this.serverTime < this.nextTime + 1000) { // 在抢券时间内则初始化券信息
|
|
|
|
this.initCouponData();
|
|
|
|
} else if (this.serverTime - this.nextTime > 3600000 + interval) {
|
|
|
|
this.initCouponData();
|
|
|
|
} else {
|
|
|
|
this.timeout = setTimeout(this.getActiveIndex.bind(this), interval, this.serverTime);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
changeTab(e) {
|
|
|
|
let index = e.currentTarget.dataset.index;
|
|
|
|
|
|
|
|
this.nowActiveIndex = parseInt(index, 10);
|
|
|
|
clearTimeout(this.timeout);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.activity-wrapper {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: scroll;
|
|
|
|
background-color: #444;
|
|
|
|
}
|
|
|
|
|
|
|
|
.activity-container {
|
|
|
|
width: 100%;
|
|
|
|
height: 3000px;
|
|
|
|
background-image: url("//ad.yoho.cn/html5/2019/10/activity/004/base/repeat_bg.jpg?imageslim");
|
|
|
|
background-repeat: repeat-y;
|
|
|
|
background-size: 100% auto;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
#page_ul {
|
|
|
|
width: 100%;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
list-style: none;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
li {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-container {
|
|
|
|
width: 100%;
|
|
|
|
height: 112px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
|
|
.tab-item {
|
|
|
|
display: inline-block;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
background-color: #9ef43a;
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
background-color: #fff;
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
font-family: "Helvetica Neue", "Source Han Sans CN", "PingFang SC", Helvetica, sans-serif;
|
|
|
|
display: inline-block;
|
|
|
|
text-align: center;
|
|
|
|
width: 100%;
|
|
|
|
line-height: 40px;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
|
|
|
|
.time-text {
|
|
|
|
font-size: 40px;
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.status-text {
|
|
|
|
font-size: 24px;
|
|
|
|
line-height: 32px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.coupon-container {
|
|
|
|
position: relative;
|
|
|
|
background-image: url("//ad.yoho.cn/html5/2019/10/activity/004/base/coupon_bg.png?imageslim");
|
|
|
|
background-size: 100% auto;
|
|
|
|
background-repeat: repeat-y;
|
|
|
|
overflow: hidden;
|
|
|
|
margin-top: 40px;
|
|
|
|
|
|
|
|
.coupon-item {
|
|
|
|
position: relative;
|
|
|
|
margin: 0 auto 20px auto;
|
|
|
|
width: 530px;
|
|
|
|
height: 127px;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
