zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页展示秒杀商品，楼层装修页面调整

master
mabo 2021-08-02 18:13:08 +08:00
parent 8cec0e6ab8
commit 8d6ee03d88
12 changed files with 777 additions and 429 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
buyer/package.json
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",

11
buyer/src/components/Search.vue
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())
} }
} }
} }
}; };

8
buyer/src/components/indexDecorate/ModelFormItem.vue
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)"

8
buyer/src/components/indexDecorate/modelFormItem.vue
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)"

187
buyer/src/components/indexDecorate/modelList/Seckill.vue
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>
<div class="act-status" v-else> <div class="act-status" v-else>未开始</div>
{{ actStatus == 0 ? "未开始" : "已结束" }} </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>
</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,11 +233,6 @@ export default {
} }
} }
.section {
width: 1000px;
// background: #efefef;
.swiper-slide {
height: 260px;
.content { .content {
width: 200px; width: 200px;
display: flex; display: flex;
@ -185,12 +296,36 @@ export default {
} }
} }
} }
}
}
} }
.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>

187
buyer/src/components/indexDecorate/modelList/seckill.vue
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>
<div class="act-status" v-else> <div class="act-status" v-else>未开始</div>
{{ actStatus == 0 ? "未开始" : "已结束" }} </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>
</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,11 +233,6 @@ export default {
} }
} }
.section {
width: 1000px;
// background: #efefef;
.swiper-slide {
height: 260px;
.content { .content {
width: 200px; width: 200px;
display: flex; display: flex;
@ -185,12 +296,36 @@ export default {
} }
} }
} }
}
}
} }
.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>

18
buyer/src/pages/Index.vue
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: {

8
buyer/src/pages/payment/PayDone.vue
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{

4
buyer/src/pages/promotion/seckill.vue
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)

33
buyer/yarn.lock
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"

2
manager/src/views/lili-floor-renovation/modelFormItem.vue
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="">

195
manager/src/views/lili-floor-renovation/modelList/seckill.vue
View File

@ -1,94 +1,105 @@
<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 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 ? "未开始" : "已结束" }}
</div>
</div> </div>
<div class="section"> <div class="section">
<swiper ref="mySwiper" :options="swiperOptions"> <swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide v-for="(item,index) in options.list[0].goodsList" :key="index" class="swiper-slide"> <swiper-slide
v-for="(item, index) in options.list[0].goodsList"
:key="index"
>
<div class="content"> <div class="content">
<img :src="item.img" width="140" height="140" :alt="item.name"> <img :src="item.img" width="140" height="140" :alt="item.name" />
<div class="ellipsis">{{item.name}}</div> <div class="ellipsis">{{ item.name }}</div>
<div> <div>
<span>{{ item.price | unitPrice('￥') }}</span> <span>{{ item.price | unitPrice("￥") }}</span>
<span>{{ item.originalPrice | unitPrice('￥') }}</span> <span>{{ item.originalPrice | unitPrice("￥") }}</span>
</div> </div>
</div> </div>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</div> </div>
</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: { directives: {
swiper: directive swiper: directive,
}, },
props:{ props: {
data:{ data: {
type: Object, type: Object,
default: null default: null,
} },
}, },
data() { data() {
return { return {
options:this.data.options, // 当前数据 options: this.data.options, // 当前数据
actStatus:0, // 0 未开始 1 进行中 2 已结束 actStatus: 0, // 0 未开始 1 进行中 2 已结束
actName:'限时秒杀', actName: "限时秒杀",
currHour:'00', // 当前秒杀场 currHour: "00", // 当前秒杀场
diffSeconds:0, // 倒地时 diffSeconds: 0, // 倒地时
hours: '00', // 小时 hours: "00", // 小时
minutes: '00', // 分钟 minutes: "00", // 分钟
seconds: '00', // 秒 seconds: "00", // 秒
interval:undefined, // 定时器 interval: undefined, // 定时器
swiperOptions:{ // 轮播图参数 swiperOptions: {
// 轮播图参数
slidesPerView: 5, slidesPerView: 5,
autoplay:true, autoplay: true,
loop:true loop: true,
} },
} };
}, },
watch: { watch: {
diffSeconds(val){ diffSeconds(val) {
const hours = Math.floor(val / 3600) const hours = Math.floor(val / 3600);
// 当前秒数 / 60，向下取整 // 当前秒数 / 60，向下取整
// 获取到所有分钟数 3600 / 60 = 60分钟 // 获取到所有分钟数 3600 / 60 = 60分钟
// 对60取模，超过小时数的分钟数 // 对60取模，超过小时数的分钟数
const minutes = Math.floor(val / 60) % 60 const minutes = Math.floor(val / 60) % 60;
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数） // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
const seconds = val % 60 const seconds = val % 60;
this.hours = hours < 10 ? '0' + hours : hours this.hours = hours < 10 ? "0" + hours : hours;
this.minutes = minutes < 10 ? '0' + minutes : minutes this.minutes = minutes < 10 ? "0" + minutes : minutes;
this.seconds = seconds < 10 ? '0' + seconds : seconds 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(){ mounted() {
clearInterval(this.interval) this.countDown(this.options.list);
},
beforeDestroy() {
clearInterval(this.interval);
}, },
methods: { methods: {
// 倒计时 // 倒计时
countDown(list){ countDown(list) {
/** /**
* 默认倒计时两小时 * 默认倒计时两小时
* 如果没有开始，则显示未开始 * 如果没有开始，则显示未开始
@ -96,65 +107,76 @@ export default {
* 今天的秒杀结束则显示已结束 * 今天的秒杀结束则显示已结束
*/ */
let nowHour = new Date().getHours(); let nowHour = new Date().getHours();
if(nowHour < Number(list[0].time)){ // 活动未开始 if (nowHour < Number(list[0].time)) {
this.currHour = list[0].time // 活动未开始
this.currHour = list[0].time;
this.actStatus = 0; this.actStatus = 0;
} else if(nowHour >= Number(list[list.length-1].time + 2)) { // 活动已结束 } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
// 活动已结束
this.actStatus = 2; this.actStatus = 2;
this.currHour = list[list.length-1].time this.currHour = list[list.length - 1].time;
} else { // 活动进行中 } else {
// 活动进行中
this.actStatus = 1; this.actStatus = 1;
for(let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
if(nowHour == Number(list[i].time)) { if (nowHour == Number(list[i].time)) {
this.currHour = list[i].time; this.currHour = list[i].time;
} }
if( nowHour > Number(list[i].time) && nowHour < Number(list[i].time + 2) ){ if (
nowHour > Number(list[i].time) &&
nowHour < Number(list[i].time + 2)
) {
this.currHour = list[i].time; this.currHour = list[i].time;
} }
} }
// 当前0点时间戳 // 当前0点时间戳
let zeroTime = new Date(new Date().toLocaleDateString()).getTime() let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
// 活动倒计时 // 活动倒计时
this.diffSeconds = Math.floor( ( zeroTime + 3600 * 1000 * (this.currHour+2) - new Date().getTime() ) / 1000) this.diffSeconds = Math.floor(
(zeroTime +
3600 * 1000 * (this.currHour + 2) -
new Date().getTime()) /
1000
);
const that = this; const that = this;
this.interval = setInterval(() => { this.interval = setInterval(() => {
this.diffSeconds-- this.diffSeconds--;
}, 1000); }, 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{ .hour {
margin-top: 90px; margin-top: 90px;
text-align: center; text-align: center;
span{ span {
font-size: 18px; font-size: 18px;
} }
} }
.count-down{ .count-down {
margin: 10px 0 0 30px; margin: 10px 0 0 30px;
>span{ > span {
position: relative; position: relative;
float: left; float: left;
width: 30px; width: 30px;
@ -164,7 +186,7 @@ export default {
margin-right: 20px; margin-right: 20px;
color: white; color: white;
font-size: 20px; font-size: 20px;
&::after{ &::after {
content: ":"; content: ":";
display: block; display: block;
position: absolute; position: absolute;
@ -176,30 +198,30 @@ export default {
top: 0; top: 0;
} }
} }
>span:last-child::after{ > span:last-child::after {
content: ''; content: "";
} }
} }
.act-status{ .act-status {
margin: 10px 0 0 65px; margin: 10px 0 0 65px;
font-size: 20px; font-size: 20px;
} }
} }
.section{ .section {
width: 1000px; width: 1000px;
// background: #efefef; // background: #efefef;
.swiper-slide{ .swiper-slide {
height: 260px; height: 260px;
.content{ .content {
width: 200px; width: 200px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
&::after{ &::after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
@ -208,35 +230,34 @@ export default {
width: 1px; width: 1px;
height: 200px; height: 200px;
transform: translateY(-50%); transform: translateY(-50%);
background: linear-gradient(180deg,white,#eeeeee,white); background: linear-gradient(180deg, white, #eeeeee, white);
} }
img{ img {
margin-top: 30px; margin-top: 30px;
} }
>div{ > div {
width: 160px; width: 160px;
margin-top: 10px; margin-top: 10px;
font-size: 12px; font-size: 12px;
position: relative; position: relative;
} }
>div:nth-of-type(1):hover{ > div:nth-of-type(1):hover {
color: $theme_color; color: $theme_color;
cursor: pointer; cursor: pointer;
} }
>div:nth-of-type(2){ > div:nth-of-type(2) {
border: 1px solid $theme_color; border: 1px solid $theme_color;
line-height: 24px; line-height: 24px;
display: flex; display: flex;
text-align: center; text-align: center;
span:nth-child(1){ span:nth-child(1) {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
width: 92px; width: 92px;
background-color: $theme_color; background-color: $theme_color;
position: relative; position: relative;
&::before{ &::before {
content: " "; content: " ";
width: 0; width: 0;
height: 0; height: 0;
@ -249,7 +270,7 @@ export default {
} }
} }
span:nth-child(2){ span:nth-child(2) {
color: #999; color: #999;
width: 66px; width: 66px;
text-decoration: line-through; text-decoration: line-through;