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

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

master
学习很差啦 2022-10-09 18:33:32 +08:00
parent 7dfdb4f685 0cc27f4e60
commit 6007dc57d5
2 changed files with 138 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
buyer/src/pages/promotion/seckill.vue
View File

@ -6,14 +6,23 @@
<div class="promotion-decorate">限时秒杀</div> <div class="promotion-decorate">限时秒杀</div>
<ul class="time-line"> <ul class="time-line">
<template v-for="(time, index) in list"> <template v-for="(time, index) in list">
<li v-if="index < 5" @click="currIndex = index" :key="index" :class="{'currTimeline': currIndex === index}"> <li
<div>{{time.timeLine+':00'}}</div> v-if="index < 5"
@click="currIndex = index"
:key="index"
:class="{ currTimeline: currIndex === index }"
>
<div>{{ time.timeLine + ":00" }}</div>
<div v-if="currIndex === index"> <div v-if="currIndex === index">
<p>{{nowHour >= time.timeLine ? '秒杀中' : '即将开始'}}</p> <p>{{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}</p>
<p>{{nowHour >= time.timeLine ? '距结束' : '距开始'}}&nbsp;{{currTime}}</p> <p>
{{ nowHour >= time.timeLine ? "距结束" : "距开始" }}&nbsp;{{
currTime
}}
</p>
</div> </div>
<div v-else class="not-curr"> <div v-else class="not-curr">
{{nowHour >= time.timeLine ? '秒杀中' : '即将开始'}} {{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}
</div> </div>
</li> </li>
</template> </template>
@ -23,29 +32,63 @@
<empty v-if="goodsList.length === 0" /> <empty v-if="goodsList.length === 0" />
<div <div
v-else v-else
class="goods-show-info" class="goods-show-info1"
v-for="(item, index) in goodsList" v-for="(item, index) in goodsList"
:key="index" :key="index"
@click="goGoodsDetail(item.skuId, item.goodsId)" @click="goGoodsDetail(item.skuId, item.goodsId)"
> >
<div class="goods-show-img"> <div class="goods-show-img">
<img width="220" height="220" :src="item.goodsImage" /> <img width="200" height="200" :src="item.goodsImage" />
</div> </div>
<div class="goods-show-price"> <div class="goods-show-price">
<span> <span>
<span class="seckill-price text-danger">{{ <span class="seckill-price text-danger">{{
item.price | unitPrice("￥") item.price | unitPrice("￥")
}}</span> }}</span>
<span style="color:#999;text-decoration:line-through;">{{item.originalPrice | unitPrice('￥')}}</span> <span style="color: #999; text-decoration: line-through">{{
item.originalPrice | unitPrice("￥")
}}</span>
</span> </span>
</div> </div>
<div class="goods-show-detail"> <div class="goods-show-detail">
<span>{{ item.goodsName }}</span> <span>{{ item.goodsName }}</span>
</div> </div>
<div v-if="item.quantity" class="goods-seckill-btn" :class="{'goods-seckill-btn-gray' : nowHour < list[currIndex].timeLine}">{{nowHour >= list[currIndex].timeLine ? '立即抢购' : '即将开始'}}</div> <div
<div v-else-if="!item.quantity || item.quantity <= item.salesNum" class="goods-seckill-btn goods-seckill-btn-gray">已售罄</div> class="goods-seckill-btn"
<div class="goods-show-num"> :class="{
已售<Progress style="width:110px" class="ml_10" :percent="item.quantity ? Math.ceil(item.salesNum/(item.quantity+item.salesNum)*100) : 100" /> 'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine,
}"
>
{{ nowHour >= list[currIndex].timeLine ? "立即抢购" : "即将开始" }}
</div>
<div
v-if="nowHour >= list[currIndex].timeLine"
class="goods-seckill-btn goods-seckill-btn-gray"
>
已售罄
</div>
<div v-if="nowHour >= list[currIndex].timeLine" class="goods-show-num1">
<span
>已售{{
(item.quantity && item.quantity > 0
? Math.ceil(
(item.salesNum / (item.quantity + item.salesNum)) * 100
)
: 100) + "%"
}}</span
><Progress
hide-info
stroke-color="#df0021"
style="width: 110px"
class="ml_10"
:percent="
item.quantity && item.quantity > 0
? Math.ceil(
(item.salesNum / (item.quantity + item.salesNum)) * 100
)
: 100
"
/>
</div> </div>
<div class="goods-show-seller"> <div class="goods-show-seller">
<span>{{ item.storeName }}</span> <span>{{ item.storeName }}</span>
@ -56,9 +99,9 @@
</div> </div>
</template> </template>
<script> <script>
import {seckillByDay} from '@/api/promotion' import { seckillByDay } from "@/api/promotion";
export default { export default {
data () { data() {
return { return {
list: [], // 秒杀时段列表 list: [], // 秒杀时段列表
goodsList: [], // 商品列表 goodsList: [], // 商品列表
@ -66,22 +109,22 @@ export default {
currIndex: 0, // 当前时间段的下标 currIndex: 0, // 当前时间段的下标
currTime: 0, // 当前显示的倒计时 currTime: 0, // 当前显示的倒计时
diffSeconds: 0, // 倒计时时间戳 diffSeconds: 0, // 倒计时时间戳
nowHour: new Date().getHours() // 当前小时数 nowHour: new Date().getHours(), // 当前小时数
} };
}, },
beforeDestroy () { beforeDestroy() {
// 销毁前清除定时器 // 销毁前清除定时器
clearInterval(this.interval); clearInterval(this.interval);
}, },
watch: { watch: {
currIndex (val) { currIndex(val) {
clearInterval(this.interval) clearInterval(this.interval);
this.interval = null this.interval = null;
this.nowHour = new Date().getHours() this.nowHour = new Date().getHours();
this.countDown(val) this.countDown(val);
this.goodsList = this.list[val].seckillGoodsList this.goodsList = this.list[val].seckillGoodsList;
}, },
diffSeconds (val) { diffSeconds(val) {
const hours = Math.floor(val / 3600); const hours = Math.floor(val / 3600);
// 当前秒数 / 60，向下取整 // 当前秒数 / 60，向下取整
// 获取到所有分钟数 3600 / 60 = 60分钟 // 获取到所有分钟数 3600 / 60 = 60分钟
@ -89,66 +132,72 @@ export default {
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.currTime = filteTime(hours) + ':' + filteTime(minutes) + ':' + filteTime(seconds) this.currTime =
filteTime(hours) + ":" + filteTime(minutes) + ":" + filteTime(seconds);
if (val <= 0) { if (val <= 0) {
clearInterval(this.interval) clearInterval(this.interval);
this.interval = null this.interval = null;
} }
function filteTime (time) { function filteTime(time) {
if (time < 10) { if (time < 10) {
return '0' + time return "0" + time;
} else { } else {
return time return time;
} }
} }
} },
}, },
methods: { methods: {
getListByDay () { // 当天秒杀活动 getListByDay() {
seckillByDay().then(res => { // 当天秒杀活动
seckillByDay().then((res) => {
if (res.success) { if (res.success) {
this.list = res.result this.list = res.result;
this.goodsList = this.list[0].seckillGoodsList this.goodsList = this.list[0].seckillGoodsList;
this.countDown(this.currIndex) this.countDown(this.currIndex);
} }
}) });
}, },
goGoodsDetail (skuId, goodsId) { goGoodsDetail(skuId, goodsId) {
// 跳转商品详情 // 跳转商品详情
let routeUrl = this.$router.resolve({ let routeUrl = this.$router.resolve({
path: '/goodsDetail', path: "/goodsDetail",
query: { skuId, goodsId } query: { skuId, goodsId },
}); });
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, "_blank");
}, },
countDown (currIndex) { // 倒计时 countDown(currIndex) {
// 倒计时
// 0点时间戳 // 0点时间戳
let zeroTime = new Date(new Date().toLocaleDateString()).getTime(); let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
let currTime = new Date().getTime() let currTime = new Date().getTime();
let actTime = 0; let actTime = 0;
let nowHour = new Date().getHours(); // 当前小时数 let nowHour = new Date().getHours(); // 当前小时数
if (this.list[currIndex].timeLine > nowHour) { // 活动未开始 if (this.list[currIndex].timeLine > nowHour) {
actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000 // 活动未开始
} else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中 actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000;
if (currIndex === this.list.length - 1) { // 如果是最后一个活动，直到24点结束 } else if (this.list[currIndex].timeLine <= nowHour) {
actTime = zeroTime + 24 * 3600 * 1000 // 活动进行中
if (currIndex === this.list.length - 1) {
// 如果是最后一个活动，直到24点结束
actTime = zeroTime + 24 * 3600 * 1000;
} else { } else {
actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000 actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000;
} }
} }
this.diffSeconds = Math.floor((actTime - currTime) / 1000) this.diffSeconds = Math.floor((actTime - currTime) / 1000);
this.interval = setInterval(() => { this.interval = setInterval(() => {
this.diffSeconds-- this.diffSeconds--;
}, 1000) }, 1000);
} },
}, },
mounted () { mounted() {
this.getListByDay() this.getListByDay();
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../assets/styles/goodsList.scss'; @import "../../assets/styles/goodsList.scss";
.goods-seckill-btn { .goods-seckill-btn {
position: absolute; position: absolute;
right: 0; right: 0;
@ -164,16 +213,17 @@ export default {
.goods-seckill-btn-gray { .goods-seckill-btn-gray {
background-color: #666; background-color: #666;
} }
.promotion-decorate::before,.promotion-decorate::after{ .promotion-decorate::before,
background-image: url('/src/assets/images/sprite@2x.png'); .promotion-decorate::after {
background-image: url("/src/assets/images/sprite@2x.png");
} }
.time-line{ .time-line {
width: 1200px; width: 1200px;
height: 60px; height: 60px;
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
li{ li {
padding: 0 30px; padding: 0 30px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@ -181,7 +231,7 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
&:hover{ &:hover {
cursor: pointer; cursor: pointer;
} }
.not-curr { .not-curr {
@ -193,16 +243,37 @@ export default {
font-weight: normal; font-weight: normal;
} }
} }
.currTimeline{ .currTimeline {
background-color: $theme_color; background-color: $theme_color;
color: #fff; color: #fff;
>div:nth-child(1) { > div:nth-child(1) {
font-size: 20px; font-size: 20px;
} }
>div:nth-child(2) { > div:nth-child(2) {
font-size: 14px; font-size: 14px;
margin-left: 10px; margin-left: 10px;
} }
} }
} }
.goods-show-info1 {
width: 275px;
padding: 6px;
margin: 10px 0px;
margin-left: 5px;
position: relative;
border: 1px solid #fff;
cursor: pointer;
background-color: #fff;
}
.goods-show-info1:hover {
border: 1px solid #ccc;
box-shadow: 0px 0px 15px #ccc;
}
.goods-show-img {
display: flex;
justify-content: center;
}
.ivu-progress-success .ivu-progress-bg {
background-color: #111fff;
}
</style> </style>

2
manager/src/views/goods/goods-manage/category.vue
View File

@ -285,7 +285,7 @@ export default {
getSpecList() { getSpecList() {
getSpecificationList().then((res) => { getSpecificationList().then((res) => {
if (res.length != 0) { if (res.length != 0) {
this.specifications = res; this.specifications = res.result;
} }
}); });
}, },