Merge branch 'master' of gitee.com:beijing_hongye_huicheng/lilishop-ui

master
Chopper 2021-08-02 18:45:01 +08:00
commit 4008816c66
13 changed files with 778 additions and 430 deletions

View File

@ -68,6 +68,7 @@
"shelljs": "^0.7.6", "shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1", "uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8", "url-loader": "^0.5.8",
"vue-awesome-swiper": "^3.1.3",
"vue-loader": "^13.3.0", "vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1", "vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "^2.5.2",

View File

@ -62,7 +62,7 @@ export default {
}, },
data () { data () {
return { return {
searchData: '', // searchData: '' //
}; };
}, },
methods: { methods: {
@ -80,7 +80,7 @@ export default {
this.$emit('search', this.searchData) this.$emit('search', this.searchData)
} }
}, },
computed:{ computed: {
promotionTags () { promotionTags () {
return JSON.parse(this.$store.state.hotWordsList) return JSON.parse(this.$store.state.hotWordsList)
} }
@ -90,19 +90,18 @@ export default {
if (!this.hover) { // if (!this.hover) { //
// //
const reloadTime = storage.getItem('hotWordsReloadTime') const reloadTime = storage.getItem('hotWordsReloadTime')
const time = new Date().getTime() - 60*60*1000 const time = new Date().getTime() - 5 * 60 * 1000
if (!reloadTime) { if (!reloadTime) {
hotWords({count: 5}).then(res => { hotWords({count: 5}).then(res => {
if (res.success) storage.setItem('hotWordsList', res.result) 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) { } else if (reloadTime && time > reloadTime) {
hotWords({count: 5}).then(res => { hotWords({count: 5}).then(res => {
if (res.success) storage.setItem('hotWordsList', res.result) if (res.success) storage.setItem('hotWordsList', res.result)
}) })
storage.setItem('hotWordsReloadTime',new Date().getTime()) storage.setItem('hotWordsReloadTime', new Date().getTime())
} }
} }
} }
}; };

View File

@ -30,14 +30,14 @@
</ul> </ul>
</template> </template>
<!-- 限时秒杀 待完善 --> <!-- 限时秒杀 待完善 -->
<!-- <template v-if="element.type == 'seckill'"> <template v-if="element.type == 'seckill' && element.options.list.length">
<seckill class="mb_20"></seckill> <seckill :data="element" class="mb_20"></seckill>
</template> --> </template>
<!-- 折扣广告 --> <!-- 折扣广告 -->
<template v-if="element.type == 'discountAdvert'"> <template v-if="element.type == 'discountAdvert'">
<div <div
class="discountAdvert mb_20" class="discountAdvert mb_20"
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png')+')'}" :style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
> >
<img <img
@click="linkTo(item.url)" @click="linkTo(item.url)"

View File

@ -30,14 +30,14 @@
</ul> </ul>
</template> </template>
<!-- 限时秒杀 待完善 --> <!-- 限时秒杀 待完善 -->
<!-- <template v-if="element.type == 'seckill'"> <template v-if="element.type == 'seckill' && element.options.list.length">
<seckill class="mb_20"></seckill> <seckill :data="element" class="mb_20"></seckill>
</template> --> </template>
<!-- 折扣广告 --> <!-- 折扣广告 -->
<template v-if="element.type == 'discountAdvert'"> <template v-if="element.type == 'discountAdvert'">
<div <div
class="discountAdvert mb_20" class="discountAdvert mb_20"
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png')+')'}" :style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
> >
<img <img
@click="linkTo(item.url)" @click="linkTo(item.url)"

View File

@ -1,56 +1,171 @@
<template> <template>
<div class="seckill"> <div class="seckill">
<div class="aside hover-pointer" @click="goPromotion"> <div class="aside hover-pointer" @click="goToSeckill">
<div class="title">{{ actName }}</div> <div class="title">{{ actName }}</div>
<div class="hour"> <div class="hour">
<span>{{ currHour }}:00</span>点场 倒计时 <span>{{ currHour }}:00</span>点场 倒计时
</div> </div>
<div class="count-down" v-if="actStatus === 1"> <div class="count-down" v-if="actStatus === 1">
<span>{{ hours }}</span <span>{{ hours }}</span>
><span>{{ minutes }}</span <span>{{ minutes }}</span>
><span>{{ seconds }}</span> <span>{{ seconds }}</span>
</div>
<div class="act-status" v-else>
{{ actStatus == 0 ? "未开始" : "已结束" }}
</div> </div>
<div class="act-status" v-else></div>
</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> </div>
</template> </template>
<script> <script>
//
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import {seckillByDay} from '@/api/promotion'
export default { export default {
components: {
swiper,
swiperSlide
},
props: {
data: Object
},
data () { data () {
return { return {
list: [], // list: [], //
actStatus: 0, // 0 1 2 goodsList: [], //
actStatus: 0, // 0 1
actName: '限时秒杀', // actName: '限时秒杀', //
currIndex: 0, //
currHour: '00', // currHour: '00', //
diffSeconds: 0, // diffSeconds: 0, //
days: 0, //
hours: 0, // hours: 0, //
minutes: 0, // minutes: 0, //
seconds: 0, // seconds: 0, //
interval: null, // interval: null, //
swiperOptions: { // swiperOption: { //
// slidesPerView: 5, loop: true,
// autoplay: true, slidesPerView: 5,
// loop: true //
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: { computed: {
swiper () { //
return this.$refs.mySwiper.swiper;
}
}, },
beforeDestroy () { beforeDestroy () {
//
clearInterval(this.interval); clearInterval(this.interval);
}, },
mounted () { mounted () {
this.getListByDay()
}, },
methods: { methods: {
goPromotion () { // goToSeckill () { //
let routeUrl = this.$router.resolve({ let routeUrl = this.$router.resolve({
path: '/seckill' path: '/seckill'
}); });
window.open(routeUrl.href, '_blank'); 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%; width: 100%;
height: 260px; height: 260px;
display: flex; display: flex;
background-color: #eee;
.aside { .aside {
overflow: hidden; overflow: hidden;
width: 190px; width: 190px;
@ -117,80 +233,99 @@ export default {
} }
} }
.section { .content {
width: 1000px; width: 200px;
// background: #efefef; display: flex;
.swiper-slide { justify-content: center;
height: 260px; align-items: center;
.content { flex-direction: column;
width: 200px; position: relative;
display: flex; &::after {
justify-content: center; content: "";
align-items: center; display: block;
flex-direction: column; 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; position: relative;
&::after { &::before {
content: ""; content: " ";
display: block; width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 8px 0 0;
position: absolute; position: absolute;
top: 50%; top: 0;
right: 0; left: 84px;
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) { span:nth-child(2) {
color: #fff; color: #999;
font-size: 16px; width: 66px;
width: 92px; text-decoration: line-through;
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;
}
}
} }
} }
} }
} }
.ellipsis { .swiper-container {
overflow: hidden; height: 260px;
text-overflow: ellipsis; width: 1000px;
white-space: nowrap; 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> </style>

View File

@ -1,56 +1,171 @@
<template> <template>
<div class="seckill"> <div class="seckill">
<div class="aside hover-pointer" @click="goPromotion"> <div class="aside hover-pointer" @click="goToSeckill">
<div class="title">{{ actName }}</div> <div class="title">{{ actName }}</div>
<div class="hour"> <div class="hour">
<span>{{ currHour }}:00</span>点场 倒计时 <span>{{ currHour }}:00</span>点场 倒计时
</div> </div>
<div class="count-down" v-if="actStatus === 1"> <div class="count-down" v-if="actStatus === 1">
<span>{{ hours }}</span <span>{{ hours }}</span>
><span>{{ minutes }}</span <span>{{ minutes }}</span>
><span>{{ seconds }}</span> <span>{{ seconds }}</span>
</div>
<div class="act-status" v-else>
{{ actStatus == 0 ? "未开始" : "已结束" }}
</div> </div>
<div class="act-status" v-else></div>
</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> </div>
</template> </template>
<script> <script>
//
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import {seckillByDay} from '@/api/promotion'
export default { export default {
components: {
swiper,
swiperSlide
},
props: {
data: Object
},
data () { data () {
return { return {
list: [], // list: [], //
actStatus: 0, // 0 1 2 goodsList: [], //
actStatus: 0, // 0 1
actName: '限时秒杀', // actName: '限时秒杀', //
currIndex: 0, //
currHour: '00', // currHour: '00', //
diffSeconds: 0, // diffSeconds: 0, //
days: 0, //
hours: 0, // hours: 0, //
minutes: 0, // minutes: 0, //
seconds: 0, // seconds: 0, //
interval: null, // interval: null, //
swiperOptions: { // swiperOption: { //
// slidesPerView: 5, loop: true,
// autoplay: true, slidesPerView: 5,
// loop: true //
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: { computed: {
swiper () { //
return this.$refs.mySwiper.swiper;
}
}, },
beforeDestroy () { beforeDestroy () {
//
clearInterval(this.interval); clearInterval(this.interval);
}, },
mounted () { mounted () {
this.getListByDay()
}, },
methods: { methods: {
goPromotion () { // goToSeckill () { //
let routeUrl = this.$router.resolve({ let routeUrl = this.$router.resolve({
path: '/seckill' path: '/seckill'
}); });
window.open(routeUrl.href, '_blank'); 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%; width: 100%;
height: 260px; height: 260px;
display: flex; display: flex;
background-color: #eee;
.aside { .aside {
overflow: hidden; overflow: hidden;
width: 190px; width: 190px;
@ -117,80 +233,99 @@ export default {
} }
} }
.section { .content {
width: 1000px; width: 200px;
// background: #efefef; display: flex;
.swiper-slide { justify-content: center;
height: 260px; align-items: center;
.content { flex-direction: column;
width: 200px; position: relative;
display: flex; &::after {
justify-content: center; content: "";
align-items: center; display: block;
flex-direction: column; 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; position: relative;
&::after { &::before {
content: ""; content: " ";
display: block; width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 8px 0 0;
position: absolute; position: absolute;
top: 50%; top: 0;
right: 0; left: 84px;
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) { span:nth-child(2) {
color: #fff; color: #999;
font-size: 16px; width: 66px;
width: 92px; text-decoration: line-through;
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;
}
}
} }
} }
} }
} }
.ellipsis { .swiper-container {
overflow: hidden; height: 260px;
text-overflow: ellipsis; width: 1000px;
white-space: nowrap; 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> </style>

View File

@ -25,6 +25,7 @@ import ModelForm from '@/components/indexDecorate/ModelForm';
import HoverSearch from '@/components/header/hoverSearch'; import HoverSearch from '@/components/header/hoverSearch';
import storage from '@/plugins/storage'; import storage from '@/plugins/storage';
import { indexData } from '@/api/index.js'; import { indexData } from '@/api/index.js';
import {seckillByDay} from '@/api/promotion'
export default { export default {
name: 'Index', name: 'Index',
mounted () { mounted () {
@ -54,11 +55,28 @@ export default {
if (res.success) { if (res.success) {
let dataJson = JSON.parse(res.result.pageData); let dataJson = JSON.parse(res.result.pageData);
this.modelForm = dataJson; 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]) storage.setItem('navList', dataJson.list[1])
this.showNav = true this.showNav = true
this.topAdvert = dataJson.list[0]; 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: { components: {

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="pay-done">
<BaseHeader></BaseHeader> <BaseHeader></BaseHeader>
<div class="pay-done-box"> <div class="pay-done-box">
<img src="../../assets/images/pay-success.png"> <img src="../../assets/images/pay-success.png">
@ -14,7 +14,10 @@
<script> <script>
export default { export default {
name: 'PayDone' name: 'PayDone',
mounted () {
document.querySelector('.pay-done').style.height = window.innerHeight + 'px'
}
}; };
</script> </script>
@ -23,7 +26,6 @@ export default {
margin: 100px; margin: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
} }
.pay-btn{ .pay-btn{

View File

@ -68,6 +68,10 @@ export default {
nowHour: new Date().getHours() // nowHour: new Date().getHours() //
} }
}, },
beforeDestroy () {
//
clearInterval(this.interval);
},
watch: { watch: {
currIndex (val) { currIndex (val) {
clearInterval(this.interval) clearInterval(this.interval)

View File

@ -2724,6 +2724,13 @@
"domelementtype" "^2.0.1" "domelementtype" "^2.0.1"
"entities" "^2.0.0" "entities" "^2.0.0"
"dom7@^2.1.3":
"integrity" "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA=="
"resolved" "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz"
"version" "2.1.5"
dependencies:
"ssr-window" "^2.0.0"
"domain-browser@^1.1.1": "domain-browser@^1.1.1":
"integrity" "sha1-PTH1AZGmdJ3RN1p/Ui6CPULlTto=" "integrity" "sha1-PTH1AZGmdJ3RN1p/Ui6CPULlTto="
"resolved" "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1604239910191&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz" "resolved" "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1604239910191&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz"
@ -7728,6 +7735,16 @@
"safer-buffer" "^2.0.2" "safer-buffer" "^2.0.2"
"tweetnacl" "~0.14.0" "tweetnacl" "~0.14.0"
"ssr-window@^1.0.1":
"integrity" "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
"resolved" "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz"
"version" "1.0.1"
"ssr-window@^2.0.0":
"integrity" "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
"resolved" "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz"
"version" "2.0.0"
"ssri@^5.2.4": "ssri@^5.2.4":
"integrity" "sha512-XRSIPqLij52MtgoQavH/x/dU1qVKtWUAAZeOHsR9c2Ddi4XerFy3mc1alf+dLJKl9EUIm/Ht+EowFkTUOA6GAQ==" "integrity" "sha512-XRSIPqLij52MtgoQavH/x/dU1qVKtWUAAZeOHsR9c2Ddi4XerFy3mc1alf+dLJKl9EUIm/Ht+EowFkTUOA6GAQ=="
"resolved" "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz" "resolved" "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz"
@ -7991,6 +8008,14 @@
"unquote" "~1.1.1" "unquote" "~1.1.1"
"util.promisify" "~1.0.0" "util.promisify" "~1.0.0"
"swiper@^4.0.7":
"integrity" "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA=="
"resolved" "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz"
"version" "4.5.1"
dependencies:
"dom7" "^2.1.3"
"ssr-window" "^1.0.1"
"table@4.0.2": "table@4.0.2":
"integrity" "sha1-ozRHN1OR52atNNNIbm4q7chNLjY= sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==" "integrity" "sha1-ozRHN1OR52atNNNIbm4q7chNLjY= sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA=="
"resolved" "https://registry.npm.taobao.org/table/download/table-4.0.2.tgz" "resolved" "https://registry.npm.taobao.org/table/download/table-4.0.2.tgz"
@ -8487,6 +8512,14 @@
"resolved" "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz" "resolved" "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz"
"version" "1.1.2" "version" "1.1.2"
"vue-awesome-swiper@^3.1.3":
"integrity" "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg=="
"resolved" "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz"
"version" "3.1.3"
dependencies:
"object-assign" "^4.1.1"
"swiper" "^4.0.7"
"vue-eslint-parser@^2.0.3": "vue-eslint-parser@^2.0.3":
"integrity" "sha1-wmjJbG2Uz+PZOKX3WTlZsMozYNE= sha512-ZezcU71Owm84xVF6gfurBQUGg8WQ+WZGxgDEQu1IHFBZNx7BFZg3L1yHxrCBNNwbwFtE1GuvfJKMtb6Xuwc/Bw==" "integrity" "sha1-wmjJbG2Uz+PZOKX3WTlZsMozYNE= sha512-ZezcU71Owm84xVF6gfurBQUGg8WQ+WZGxgDEQu1IHFBZNx7BFZg3L1yHxrCBNNwbwFtE1GuvfJKMtb6Xuwc/Bw=="
"resolved" "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz?cache=0&sync_timestamp=1608030990315&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-2.0.3.tgz" "resolved" "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz?cache=0&sync_timestamp=1608030990315&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-2.0.3.tgz"

View File

@ -35,7 +35,7 @@
</template> </template>
<!-- 折扣广告 --> <!-- 折扣广告 -->
<template v-if="element.type == 'discountAdvert'"> <template v-if="element.type == 'discountAdvert'">
<div class="discountAdvert" :style="{'background-image' : 'url(' + element.options.bgImg.img + ')'}"> <div class="discountAdvert" :style="{'background-image' : 'url(' + require('@/assets/nav/decorate.png') + ')'}">
<div> <div>
<div v-for="(item,index) in element.options.classification" :key="index" class="setup-content"> <div v-for="(item,index) in element.options.classification" :key="index" class="setup-content">
<img :src="item.img" width="190" height="210" alt=""> <img :src="item.img" width="190" height="210" alt="">

View File

@ -1,262 +1,283 @@
<template> <template>
<div class="seckill"> <div class="seckill">
<div class="aside"> <div class="aside">
<div class="title">{{actName}}</div> <div class="title">{{ actName }}</div>
<div class="hour"><span>{{currHour}}:00</span>点场 倒计时</div> <div class="hour">
<div class="count-down" v-if="actStatus === 1"><span>{{hours}}</span><span>{{minutes}}</span><span>{{seconds}}</span></div> <span>{{ currHour }}:00</span>点场 倒计时
<div class="act-status" v-else>{{ actStatus == 0 ?'':'' }}</div> </div>
</div> <div class="count-down" v-if="actStatus === 1">
<div class="section"> <span>{{ hours }}</span
<swiper ref="mySwiper" :options="swiperOptions"> ><span>{{ minutes }}</span
<swiper-slide v-for="(item,index) in options.list[0].goodsList" :key="index" class="swiper-slide"> ><span>{{ seconds }}</span>
<div class="content"> </div>
<img :src="item.img" width="140" height="140" :alt="item.name"> <div class="act-status" v-else>
<div class="ellipsis">{{item.name}}</div> {{ actStatus == 0 ? "未开始" : "已结束" }}
<div> </div>
<span>{{ item.price | unitPrice('¥') }}</span>
<span>{{ item.originalPrice | unitPrice('¥') }}</span>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
<div class="section">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide
v-for="(item, index) in options.list[0].goodsList"
:key="index"
>
<div class="content">
<img :src="item.img" width="140" height="140" :alt="item.name" />
<div class="ellipsis">{{ item.name }}</div>
<div>
<span>{{ item.price | unitPrice("¥") }}</span>
<span>{{ item.originalPrice | unitPrice("¥") }}</span>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template> </template>
<script> <script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper' import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import 'swiper/swiper-bundle.css' import "swiper/swiper-bundle.css";
export default { export default {
components: { components: {
Swiper, Swiper,
SwiperSlide SwiperSlide,
},
directives: {
swiper: directive,
},
props: {
data: {
type: Object,
default: null,
}, },
directives: { },
swiper: directive data() {
}, return {
props:{ options: this.data.options, //
data:{ actStatus: 0, // 0 1 2
type: Object, actName: "限时秒杀",
default: null currHour: "00", //
} diffSeconds: 0, //
}, hours: "00", //
data() { minutes: "00", //
return { seconds: "00", //
options:this.data.options, // interval: undefined, //
actStatus:0, // 0 1 2 swiperOptions: {
actName:'限时秒杀', //
currHour:'00', // slidesPerView: 5,
diffSeconds:0, // autoplay: true,
hours: '00', // loop: true,
minutes: '00', // },
seconds: '00', // };
interval:undefined, // },
swiperOptions:{ // watch: {
slidesPerView: 5, diffSeconds(val) {
autoplay:true, const hours = Math.floor(val / 3600);
loop:true // / 60
} // 3600 / 60 = 60
} // 60
}, const minutes = Math.floor(val / 60) % 60;
watch: { // % 60
diffSeconds(val){ const seconds = val % 60;
const hours = Math.floor(val / 3600) this.hours = hours < 10 ? "0" + hours : hours;
// / 60 this.minutes = minutes < 10 ? "0" + minutes : minutes;
// 3600 / 60 = 60 this.seconds = seconds < 10 ? "0" + seconds : seconds;
// 60
const minutes = Math.floor(val / 60) % 60
// % 60
const seconds = val % 60
this.hours = hours < 10 ? '0' + hours : hours
this.minutes = minutes < 10 ? '0' + minutes : minutes
this.seconds = seconds < 10 ? '0' + seconds : seconds
if(val === 0){ if (val === 0) {
clearInterval(this.interval) clearInterval(this.interval);
this.hours = 0; this.hours = 0;
this.minutes = 0; this.minutes = 0;
this.seconds = 0; this.seconds = 0;
this.countDown(this.options.list) this.countDown(this.options.list);
} }
},
},
mounted() {
this.countDown(this.options.list);
},
beforeDestroy() {
clearInterval(this.interval);
},
methods: {
//
countDown(list) {
/**
* 默认倒计时两小时
* 如果没有开始则显示未开始
* 进行中显示倒计时
* 今天的秒杀结束则显示已结束
*/
let nowHour = new Date().getHours();
if (nowHour < Number(list[0].time)) {
//
this.currHour = list[0].time;
this.actStatus = 0;
} else if (nowHour >= Number(list[list.length - 1].time + 2)) {
//
this.actStatus = 2;
this.currHour = list[list.length - 1].time;
} else {
//
this.actStatus = 1;
for (let i = 0; i < list.length; i++) {
if (nowHour == Number(list[i].time)) {
this.currHour = list[i].time;
}
if (
nowHour > Number(list[i].time) &&
nowHour < Number(list[i].time + 2)
) {
this.currHour = list[i].time;
}
} }
// 0
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
//
this.diffSeconds = Math.floor(
(zeroTime +
3600 * 1000 * (this.currHour + 2) -
new Date().getTime()) /
1000
);
const that = this;
this.interval = setInterval(() => {
this.diffSeconds--;
}, 1000);
}
}, },
mounted(){ },
this.countDown(this.options.list) };
},
beforeDestroy(){
clearInterval(this.interval)
},
methods: {
//
countDown(list){
/**
* 默认倒计时两小时
* 如果没有开始则显示未开始
* 进行中显示倒计时
* 今天的秒杀结束则显示已结束
*/
let nowHour = new Date().getHours();
if(nowHour < Number(list[0].time)){ //
this.currHour = list[0].time
this.actStatus = 0;
} else if(nowHour >= Number(list[list.length-1].time + 2)) { //
this.actStatus = 2;
this.currHour = list[list.length-1].time
} else { //
this.actStatus = 1;
for(let i = 0; i < list.length; i++) {
if(nowHour == Number(list[i].time)) {
this.currHour = list[i].time;
}
if( nowHour > Number(list[i].time) && nowHour < Number(list[i].time + 2) ){
this.currHour = list[i].time;
}
}
// 0
let zeroTime = new Date(new Date().toLocaleDateString()).getTime()
//
this.diffSeconds = Math.floor( ( zeroTime + 3600 * 1000 * (this.currHour+2) - new Date().getTime() ) / 1000)
const that = this;
this.interval = setInterval(() => {
this.diffSeconds--
}, 1000);
}
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.seckill{ .seckill {
width: 100%; width: 100%;
height: 260px; height: 260px;
display: flex; display: flex;
.aside{ .aside {
overflow: hidden; overflow: hidden;
width: 190px; width: 190px;
height: 100%; height: 100%;
color: #fff; color: #fff;
background-image: url('../../../assets/seckillBg.png'); background-image: url("../../../assets/seckillBg.png");
.title{ .title {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 28px; font-size: 28px;
margin-top: 31px; margin-top: 31px;
}
.hour{
margin-top: 90px;
text-align: center;
span{
font-size: 18px;
}
}
.count-down{
margin: 10px 0 0 30px;
>span{
position: relative;
float: left;
width: 30px;
height: 30px;
text-align: center;
background-color: #2f3430;
margin-right: 20px;
color: white;
font-size: 20px;
&::after{
content: ":";
display: block;
position: absolute;
right: -20px;
font-weight: bolder;
font-size: 18px;
width: 20px;
height: 100%;
top: 0;
}
}
>span:last-child::after{
content: '';
}
}
.act-status{
margin: 10px 0 0 65px;
font-size: 20px;
}
} }
.section{ .hour {
width: 1000px; margin-top: 90px;
// background: #efefef; text-align: center;
.swiper-slide{ span {
height: 260px; font-size: 18px;
.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;
&::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;
}
}
}
}
} }
.count-down {
margin: 10px 0 0 30px;
> span {
position: relative;
float: left;
width: 30px;
height: 30px;
text-align: center;
background-color: #2f3430;
margin-right: 20px;
color: white;
font-size: 20px;
&::after {
content: ":";
display: block;
position: absolute;
right: -20px;
font-weight: bolder;
font-size: 18px;
width: 20px;
height: 100%;
top: 0;
}
}
> span:last-child::after {
content: "";
}
}
.act-status {
margin: 10px 0 0 65px;
font-size: 20px;
}
}
.section {
width: 1000px;
// background: #efefef;
.swiper-slide {
height: 260px;
.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;
&::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;
}
}
}
}
}
} }
</style> </style>

View File

@ -2,7 +2,7 @@ echo '开始推送github'
echo '切换git地址' echo '切换git地址'
git remote rm origin git remote rm origin
git remote add origin git@github.com:hongyehuicheng/lilishop-ui.git git remote add origin git@github.com:lilishop/lilishop-ui.git
echo '设置上传代码分支推送github' echo '设置上传代码分支推送github'
git push --set-upstream origin master --force git push --set-upstream origin master --force
echo '推送github完成' echo '推送github完成'