mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-18 17:05:54 +08:00
首页展示秒杀商品，楼层装修页面调整
This commit is contained in:
mabo
@@ -62,7 +62,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
searchData: '', // 搜索内容
|
||||
searchData: '' // 搜索内容
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
this.$emit('search', this.searchData)
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
computed: {
|
||||
promotionTags () {
|
||||
return JSON.parse(this.$store.state.hotWordsList)
|
||||
}
|
||||
@@ -90,19 +90,18 @@ export default {
|
||||
if (!this.hover) { // 首页顶部固定搜索栏不调用热词接口
|
||||
// 搜索热词每一小时请求一次
|
||||
const reloadTime = storage.getItem('hotWordsReloadTime')
|
||||
const time = new Date().getTime() - 60*60*1000
|
||||
const time = new Date().getTime() - 5 * 60 * 1000
|
||||
if (!reloadTime) {
|
||||
hotWords({count: 5}).then(res => {
|
||||
if (res.success) storage.setItem('hotWordsList', res.result)
|
||||
})
|
||||
storage.setItem('hotWordsReloadTime',new Date().getTime())
|
||||
storage.setItem('hotWordsReloadTime', new Date().getTime())
|
||||
} else if (reloadTime && time > reloadTime) {
|
||||
hotWords({count: 5}).then(res => {
|
||||
if (res.success) storage.setItem('hotWordsList', res.result)
|
||||
})
|
||||
storage.setItem('hotWordsReloadTime',new Date().getTime())
|
||||
storage.setItem('hotWordsReloadTime', new Date().getTime())
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -30,14 +30,14 @@
|
||||
</ul>
|
||||
</template>
|
||||
<!-- 限时秒杀 待完善 -->
|
||||
<!-- <template v-if="element.type == 'seckill'">
|
||||
<seckill class="mb_20"></seckill>
|
||||
</template> -->
|
||||
<template v-if="element.type == 'seckill' && element.options.list.length">
|
||||
<seckill :data="element" class="mb_20"></seckill>
|
||||
</template>
|
||||
<!-- 折扣广告 -->
|
||||
<template v-if="element.type == 'discountAdvert'">
|
||||
<div
|
||||
class="discountAdvert mb_20"
|
||||
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png')+')'}"
|
||||
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
|
||||
>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
|
||||
@@ -30,14 +30,14 @@
|
||||
</ul>
|
||||
</template>
|
||||
<!-- 限时秒杀 待完善 -->
|
||||
<!-- <template v-if="element.type == 'seckill'">
|
||||
<seckill class="mb_20"></seckill>
|
||||
</template> -->
|
||||
<template v-if="element.type == 'seckill' && element.options.list.length">
|
||||
<seckill :data="element" class="mb_20"></seckill>
|
||||
</template>
|
||||
<!-- 折扣广告 -->
|
||||
<template v-if="element.type == 'discountAdvert'">
|
||||
<div
|
||||
class="discountAdvert mb_20"
|
||||
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png')+')'}"
|
||||
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
|
||||
>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
|
||||
@@ -1,56 +1,171 @@
|
||||
<template>
|
||||
<div class="seckill">
|
||||
<div class="aside hover-pointer" @click="goPromotion">
|
||||
<div class="aside hover-pointer" @click="goToSeckill">
|
||||
<div class="title">{{ actName }}</div>
|
||||
<div class="hour">
|
||||
<span>{{ currHour }}:00</span>点场 倒计时
|
||||
</div>
|
||||
<div class="count-down" v-if="actStatus === 1">
|
||||
<span>{{ hours }}</span
|
||||
><span>{{ minutes }}</span
|
||||
><span>{{ seconds }}</span>
|
||||
</div>
|
||||
<div class="act-status" v-else>
|
||||
{{ actStatus == 0 ? "未开始" : "已结束" }}
|
||||
<span>{{ hours }}</span>
|
||||
<span>{{ minutes }}</span>
|
||||
<span>{{ seconds }}</span>
|
||||
</div>
|
||||
<div class="act-status" v-else>未开始</div>
|
||||
</div>
|
||||
<swiper :options="swiperOption" ref="mySwiper">
|
||||
<swiper-slide v-for="(item,index) in goodsList" :key="index">
|
||||
<div class="content hover-pointer" @click="goToSeckill">
|
||||
<img :src="item.goodsImage" width="140" height="140" :alt="item.goodsName">
|
||||
<div class="ellipsis">{{item.goodsName}}</div>
|
||||
<div>
|
||||
<span>{{ item.price | unitPrice('￥') }}</span>
|
||||
<span>{{ item.originalPrice | unitPrice('￥') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<div class="swiper-button-prev" slot="button-prev">
|
||||
<Icon type="ios-arrow-back" />
|
||||
</div>
|
||||
<div class="swiper-button-next" slot="button-next">
|
||||
<Icon type="ios-arrow-forward" />
|
||||
</div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
// 引入插件
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper';
|
||||
import 'swiper/dist/css/swiper.css';
|
||||
import {seckillByDay} from '@/api/promotion'
|
||||
export default {
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
list: [], // 秒杀商品
|
||||
actStatus: 0, // 0 未开始 1 进行中 2 已结束
|
||||
list: [], // 秒杀时段列表
|
||||
goodsList: [], // 商品列表
|
||||
actStatus: 0, // 0 未开始 1 进行中
|
||||
actName: '限时秒杀', // 活动名称
|
||||
currIndex: 0, // 当前时间段的下标
|
||||
currHour: '00', // 当前秒杀场
|
||||
diffSeconds: 0, // 倒计时秒数
|
||||
days: 0, // 天
|
||||
hours: 0, // 小时
|
||||
minutes: 0, // 分钟
|
||||
seconds: 0, // 秒
|
||||
interval: null, // 定时器
|
||||
swiperOptions: { // 轮播图参数
|
||||
// slidesPerView: 5,
|
||||
// autoplay: true,
|
||||
// loop: true
|
||||
swiperOption: { // 轮播图参数
|
||||
loop: true,
|
||||
slidesPerView: 5,
|
||||
// 设置点击箭头
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
currIndex (val) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
this.countDown(val)
|
||||
this.goodsList = this.list[val].seckillGoodsList
|
||||
},
|
||||
diffSeconds (val) {
|
||||
const hours = Math.floor(val / 3600);
|
||||
// 当前秒数 / 60，向下取整
|
||||
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||
// 对60取模，超过小时数的分钟数
|
||||
const minutes = Math.floor(val / 60) % 60;
|
||||
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
|
||||
const seconds = val % 60;
|
||||
this.hours = filteTime(hours)
|
||||
this.minutes = filteTime(minutes)
|
||||
this.seconds = filteTime(seconds)
|
||||
if (val <= 0) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
}
|
||||
function filteTime (time) {
|
||||
if (time < 10) {
|
||||
return '0' + time
|
||||
} else {
|
||||
return time
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
swiper () { // 轮播组件
|
||||
return this.$refs.mySwiper.swiper;
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
// 销毁前清除定时器
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
mounted () {
|
||||
this.getListByDay()
|
||||
},
|
||||
methods: {
|
||||
goPromotion () { // 跳转秒杀页面
|
||||
goToSeckill () { // 跳转秒杀页面
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/seckill'
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
countDown (currIndex) { // 倒计时
|
||||
// 0点时间戳
|
||||
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
|
||||
let currTime = new Date().getTime()
|
||||
let actTime = 0;
|
||||
let nowHour = new Date().getHours(); // 当前小时数
|
||||
if (this.list[currIndex].timeLine > nowHour) { // 活动未开始
|
||||
this.actStatus = 0;
|
||||
actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000
|
||||
} else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中
|
||||
this.actStatus = 1;
|
||||
if (currIndex === this.list.length - 1) { // 如果是最后一个活动，直到24点结束
|
||||
actTime = zeroTime + 24 * 3600 * 1000
|
||||
} else {
|
||||
actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000
|
||||
}
|
||||
}
|
||||
this.currHour = this.list[this.currIndex].timeLine
|
||||
this.diffSeconds = Math.floor((actTime - currTime) / 1000)
|
||||
this.interval = setInterval(() => {
|
||||
this.diffSeconds--
|
||||
}, 1000)
|
||||
},
|
||||
getListByDay () { // 当天秒杀活动
|
||||
// seckillByDay().then(res => {
|
||||
// if (res.success) {
|
||||
// this.list = res.result
|
||||
// this.goodsList = this.list[0].seckillGoodsList
|
||||
// this.countDown(this.currIndex)
|
||||
// }
|
||||
// })
|
||||
// const list = [
|
||||
// {
|
||||
// timeLine: 18,
|
||||
// seckillGoodsList: [
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12}
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
this.list = this.data.options.list
|
||||
this.goodsList = this.list[0].seckillGoodsList
|
||||
this.countDown(this.currIndex)
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -60,6 +175,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
display: flex;
|
||||
background-color: #eee;
|
||||
.aside {
|
||||
overflow: hidden;
|
||||
width: 190px;
|
||||
@@ -117,80 +233,99 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 1000px;
|
||||
// background: #efefef;
|
||||
.swiper-slide {
|
||||
height: 260px;
|
||||
.content {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.content {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||
}
|
||||
img {
|
||||
margin-top: 30px;
|
||||
}
|
||||
> div {
|
||||
width: 160px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
> div:nth-of-type(1):hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
border: 1px solid $theme_color;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 92px;
|
||||
background-color: $theme_color;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
&::before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent white transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 24px 8px 0 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||
top: 0;
|
||||
left: 84px;
|
||||
}
|
||||
img {
|
||||
margin-top: 30px;
|
||||
}
|
||||
> div {
|
||||
width: 160px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
> div:nth-of-type(1):hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
border: 1px solid $theme_color;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 92px;
|
||||
background-color: $theme_color;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent white transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 24px 8px 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #999;
|
||||
width: 66px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
span:nth-child(2) {
|
||||
color: #999;
|
||||
width: 66px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.swiper-container {
|
||||
height: 260px;
|
||||
width: 1000px;
|
||||
margin-left: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
background: #ccc;
|
||||
width: 25px;
|
||||
height: 35px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.swiper-button-prev:hover, .swiper-button-next:hover{
|
||||
background: #aaa;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: 0;
|
||||
border-bottom-right-radius: 18px;
|
||||
border-top-right-radius: 18px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: 0;
|
||||
border-top-left-radius: 18px;
|
||||
border-bottom-left-radius: 18px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,56 +1,171 @@
|
||||
<template>
|
||||
<div class="seckill">
|
||||
<div class="aside hover-pointer" @click="goPromotion">
|
||||
<div class="aside hover-pointer" @click="goToSeckill">
|
||||
<div class="title">{{ actName }}</div>
|
||||
<div class="hour">
|
||||
<span>{{ currHour }}:00</span>点场 倒计时
|
||||
</div>
|
||||
<div class="count-down" v-if="actStatus === 1">
|
||||
<span>{{ hours }}</span
|
||||
><span>{{ minutes }}</span
|
||||
><span>{{ seconds }}</span>
|
||||
</div>
|
||||
<div class="act-status" v-else>
|
||||
{{ actStatus == 0 ? "未开始" : "已结束" }}
|
||||
<span>{{ hours }}</span>
|
||||
<span>{{ minutes }}</span>
|
||||
<span>{{ seconds }}</span>
|
||||
</div>
|
||||
<div class="act-status" v-else>未开始</div>
|
||||
</div>
|
||||
<swiper :options="swiperOption" ref="mySwiper">
|
||||
<swiper-slide v-for="(item,index) in goodsList" :key="index">
|
||||
<div class="content hover-pointer" @click="goToSeckill">
|
||||
<img :src="item.goodsImage" width="140" height="140" :alt="item.goodsName">
|
||||
<div class="ellipsis">{{item.goodsName}}</div>
|
||||
<div>
|
||||
<span>{{ item.price | unitPrice('￥') }}</span>
|
||||
<span>{{ item.originalPrice | unitPrice('￥') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<div class="swiper-button-prev" slot="button-prev">
|
||||
<Icon type="ios-arrow-back" />
|
||||
</div>
|
||||
<div class="swiper-button-next" slot="button-next">
|
||||
<Icon type="ios-arrow-forward" />
|
||||
</div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
// 引入插件
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper';
|
||||
import 'swiper/dist/css/swiper.css';
|
||||
import {seckillByDay} from '@/api/promotion'
|
||||
export default {
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
list: [], // 秒杀商品
|
||||
actStatus: 0, // 0 未开始 1 进行中 2 已结束
|
||||
list: [], // 秒杀时段列表
|
||||
goodsList: [], // 商品列表
|
||||
actStatus: 0, // 0 未开始 1 进行中
|
||||
actName: '限时秒杀', // 活动名称
|
||||
currIndex: 0, // 当前时间段的下标
|
||||
currHour: '00', // 当前秒杀场
|
||||
diffSeconds: 0, // 倒计时秒数
|
||||
days: 0, // 天
|
||||
hours: 0, // 小时
|
||||
minutes: 0, // 分钟
|
||||
seconds: 0, // 秒
|
||||
interval: null, // 定时器
|
||||
swiperOptions: { // 轮播图参数
|
||||
// slidesPerView: 5,
|
||||
// autoplay: true,
|
||||
// loop: true
|
||||
swiperOption: { // 轮播图参数
|
||||
loop: true,
|
||||
slidesPerView: 5,
|
||||
// 设置点击箭头
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
currIndex (val) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
this.countDown(val)
|
||||
this.goodsList = this.list[val].seckillGoodsList
|
||||
},
|
||||
diffSeconds (val) {
|
||||
const hours = Math.floor(val / 3600);
|
||||
// 当前秒数 / 60，向下取整
|
||||
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||
// 对60取模，超过小时数的分钟数
|
||||
const minutes = Math.floor(val / 60) % 60;
|
||||
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
|
||||
const seconds = val % 60;
|
||||
this.hours = filteTime(hours)
|
||||
this.minutes = filteTime(minutes)
|
||||
this.seconds = filteTime(seconds)
|
||||
if (val <= 0) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
}
|
||||
function filteTime (time) {
|
||||
if (time < 10) {
|
||||
return '0' + time
|
||||
} else {
|
||||
return time
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
swiper () { // 轮播组件
|
||||
return this.$refs.mySwiper.swiper;
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
// 销毁前清除定时器
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
mounted () {
|
||||
this.getListByDay()
|
||||
},
|
||||
methods: {
|
||||
goPromotion () { // 跳转秒杀页面
|
||||
goToSeckill () { // 跳转秒杀页面
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/seckill'
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
countDown (currIndex) { // 倒计时
|
||||
// 0点时间戳
|
||||
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
|
||||
let currTime = new Date().getTime()
|
||||
let actTime = 0;
|
||||
let nowHour = new Date().getHours(); // 当前小时数
|
||||
if (this.list[currIndex].timeLine > nowHour) { // 活动未开始
|
||||
this.actStatus = 0;
|
||||
actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000
|
||||
} else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中
|
||||
this.actStatus = 1;
|
||||
if (currIndex === this.list.length - 1) { // 如果是最后一个活动，直到24点结束
|
||||
actTime = zeroTime + 24 * 3600 * 1000
|
||||
} else {
|
||||
actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000
|
||||
}
|
||||
}
|
||||
this.currHour = this.list[this.currIndex].timeLine
|
||||
this.diffSeconds = Math.floor((actTime - currTime) / 1000)
|
||||
this.interval = setInterval(() => {
|
||||
this.diffSeconds--
|
||||
}, 1000)
|
||||
},
|
||||
getListByDay () { // 当天秒杀活动
|
||||
// seckillByDay().then(res => {
|
||||
// if (res.success) {
|
||||
// this.list = res.result
|
||||
// this.goodsList = this.list[0].seckillGoodsList
|
||||
// this.countDown(this.currIndex)
|
||||
// }
|
||||
// })
|
||||
// const list = [
|
||||
// {
|
||||
// timeLine: 18,
|
||||
// seckillGoodsList: [
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12}
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
this.list = this.data.options.list
|
||||
this.goodsList = this.list[0].seckillGoodsList
|
||||
this.countDown(this.currIndex)
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -60,6 +175,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
display: flex;
|
||||
background-color: #eee;
|
||||
.aside {
|
||||
overflow: hidden;
|
||||
width: 190px;
|
||||
@@ -117,80 +233,99 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 1000px;
|
||||
// background: #efefef;
|
||||
.swiper-slide {
|
||||
height: 260px;
|
||||
.content {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.content {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||
}
|
||||
img {
|
||||
margin-top: 30px;
|
||||
}
|
||||
> div {
|
||||
width: 160px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
> div:nth-of-type(1):hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
border: 1px solid $theme_color;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 92px;
|
||||
background-color: $theme_color;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
&::before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent white transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 24px 8px 0 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||
top: 0;
|
||||
left: 84px;
|
||||
}
|
||||
img {
|
||||
margin-top: 30px;
|
||||
}
|
||||
> div {
|
||||
width: 160px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
> div:nth-of-type(1):hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
border: 1px solid $theme_color;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 92px;
|
||||
background-color: $theme_color;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent white transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 24px 8px 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #999;
|
||||
width: 66px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
span:nth-child(2) {
|
||||
color: #999;
|
||||
width: 66px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.swiper-container {
|
||||
height: 260px;
|
||||
width: 1000px;
|
||||
margin-left: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
background: #ccc;
|
||||
width: 25px;
|
||||
height: 35px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.swiper-button-prev:hover, .swiper-button-next:hover{
|
||||
background: #aaa;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: 0;
|
||||
border-bottom-right-radius: 18px;
|
||||
border-top-right-radius: 18px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: 0;
|
||||
border-top-left-radius: 18px;
|
||||
border-bottom-left-radius: 18px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,6 +25,7 @@ import ModelForm from '@/components/indexDecorate/ModelForm';
|
||||
import HoverSearch from '@/components/header/hoverSearch';
|
||||
import storage from '@/plugins/storage';
|
||||
import { indexData } from '@/api/index.js';
|
||||
import {seckillByDay} from '@/api/promotion'
|
||||
export default {
|
||||
name: 'Index',
|
||||
mounted () {
|
||||
@@ -54,11 +55,28 @@ export default {
|
||||
if (res.success) {
|
||||
let dataJson = JSON.parse(res.result.pageData);
|
||||
this.modelForm = dataJson;
|
||||
// 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
|
||||
for (let i = 0; i < dataJson.list.length; i++) {
|
||||
if (dataJson.list[i].type === 'discountAdvert') {
|
||||
let seckill = this.getListByDay()
|
||||
dataJson.list[i].options.list = seckill
|
||||
break;
|
||||
}
|
||||
}
|
||||
storage.setItem('navList', dataJson.list[1])
|
||||
this.showNav = true
|
||||
this.topAdvert = dataJson.list[0];
|
||||
}
|
||||
});
|
||||
},
|
||||
async getListByDay () { // 当天秒杀活动
|
||||
const res = await seckillByDay()
|
||||
console.log(res);
|
||||
if (res.success && res.result.length) {
|
||||
return res.result
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="pay-done">
|
||||
<BaseHeader></BaseHeader>
|
||||
<div class="pay-done-box">
|
||||
<img src="../../assets/images/pay-success.png">
|
||||
@@ -14,7 +14,10 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PayDone'
|
||||
name: 'PayDone',
|
||||
mounted () {
|
||||
document.querySelector('.pay-done').style.height = window.innerHeight + 'px'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -23,7 +26,6 @@ export default {
|
||||
margin: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.pay-btn{
|
||||
|
||||
@@ -68,6 +68,10 @@ export default {
|
||||
nowHour: new Date().getHours() // 当前小时数
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
// 销毁前清除定时器
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
watch: {
|
||||
currIndex (val) {
|
||||
clearInterval(this.interval)
|
||||
|
||||
Reference in New Issue
Block a user