You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
524 lines
13 KiB
524 lines
13 KiB
<template>
|
|
<!-- 限时秒杀 -->
|
|
<div class="seckill wrapper_1200">
|
|
<div class="swiperBoxBg">
|
|
<div class="swiperBoxBg_l"></div>
|
|
<div class="swiperBoxBg_c"></div>
|
|
<div class="swiperBoxBg_r"></div>
|
|
</div>
|
|
<div v-swiper:navSwiper="swiperOption" class="swiperBox">
|
|
<div class="seckill_title">
|
|
<div class="seckill_title_txt">
|
|
<div>秒杀专区</div>
|
|
<div>疯狂抢购</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-wrapper" v-if="HourList.length">
|
|
<div
|
|
@click="seckillDetail(item, index)"
|
|
v-for="(item, index) in HourList"
|
|
v-show="item.isSeckillBg"
|
|
:key="index"
|
|
:class="{ 'row-column_active': item.isSeckillBg, on: slideIndex == index }"
|
|
class="acea-row row-center-wrapper swiper-slide row-column"
|
|
>
|
|
<div style="font-size: 30px; font-family: DINAlternate-Bold, DINAlternate">
|
|
{{ item.hours }}:00
|
|
</div>
|
|
<div v-if="moment == item.hours && item.isSeckillBg" style="color: #000">
|
|
进行中
|
|
</div>
|
|
<div v-if="moment < item.hours && item.isSeckillBg">即将开始</div>
|
|
<div v-if="moment > item.hours && item.isSeckillBg">已结束</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
<!-- -->
|
|
<div class="goods_list" v-if="goods_seckillList.length">
|
|
<div
|
|
class="item"
|
|
v-for="(item, index) in goods_seckillList"
|
|
:key="index"
|
|
@click="goDetail(item.goods_id)"
|
|
>
|
|
<div class="pictrue">
|
|
<img v-lazy="imgUrl + item.sku_image" v-if="item.sku_image" />
|
|
<img src="~assets/images/no_goods.jpg" alt v-else />
|
|
</div>
|
|
<div style="padding: 0 15px">
|
|
<!-- <i>
|
|
秒杀活动:
|
|
<span class="seckill_name">{{ item.seckill_name }}</span>
|
|
</i> -->
|
|
|
|
<div class="name">{{ item.sku_name }}</div>
|
|
<div class="kc">
|
|
<span>库存：{{ item.stock }}</span>
|
|
<span> 销量：{{ item.sale_num }} </span>
|
|
</div>
|
|
<!-- <div class="kc">
|
|
<span
|
|
>活动开始时间：{{
|
|
$dayjs(item.start_time * 1000).format("YYYY-MM-DD HH:mm")
|
|
}}
|
|
</span>
|
|
<span
|
|
>活动结束时间：{{ $dayjs(item.end_time * 1000).format("YYYY-MM-DD HH:mm") }}
|
|
</span>
|
|
</div> -->
|
|
<div class="stock" v-if="userInfo.show_price">
|
|
<p>
|
|
秒杀价：
|
|
<span>￥{{ item.seckill_price }}</span>
|
|
<!-- /{{ item.unit }} -->
|
|
</p>
|
|
<div class="originalPrice">原价¥{{ item.price }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!goods_seckillList.length" class="nothing">
|
|
<img src="@/assets/images/noGoods.png" />
|
|
暂无秒杀商品，去看点别的吧
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Setting from "~/setting";
|
|
import Guess from "@/components/guess.vue";
|
|
import countDown from "@/components/countDown";
|
|
export default {
|
|
auth: false,
|
|
components: { countDown, Guess },
|
|
data() {
|
|
return {
|
|
isSignin: localStorage.getItem("token") ? true : false,
|
|
userInfo: {},
|
|
imgUrl: Setting.uplodBaseURL,
|
|
swiperOption: {
|
|
slidesPerView: "auto",
|
|
loop: true,
|
|
},
|
|
|
|
finished: false,
|
|
currentTimeId: "",
|
|
currentStopTime: "",
|
|
currentTimeState: "",
|
|
currentTimeStatus: "",
|
|
seckillTime: [],
|
|
goods_seckillList: [],
|
|
|
|
slideIndex: 0,
|
|
isMoment: false,
|
|
moment: undefined,
|
|
beforeData: undefined,
|
|
momentData: {},
|
|
isSeckillBg: false,
|
|
rangeTime: [],
|
|
nowHour: "", //当前小时
|
|
HourList: [], //钟点时间 24小时
|
|
};
|
|
},
|
|
fetch({ store }) {
|
|
store.commit("isHeader", true);
|
|
store.commit("isFooter", true);
|
|
},
|
|
head() {
|
|
return {
|
|
title: "秒杀列表-" + this.$store.state.titleCon,
|
|
};
|
|
},
|
|
watch: {},
|
|
created() {
|
|
// 已登录
|
|
if (this.isSignin) {
|
|
this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
|
}
|
|
this.nowHour = this.getHour();
|
|
|
|
//钟点时间 24小时
|
|
var hoursObj = {};
|
|
for (var i = 0; i <= 23; i++) {
|
|
hoursObj = i;
|
|
this.HourList.push({
|
|
hours: hoursObj,
|
|
isSeckillBg: false,
|
|
});
|
|
}
|
|
let time = new Date();
|
|
this.moment = time.getHours();
|
|
this.swiperOption.initialSlide = this.moment;
|
|
this.getSeckillTime();
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
// 获取秒杀时间段列表
|
|
getSeckillTime() {
|
|
this.$axios
|
|
.post(`/goodssku/seckilltimeList`)
|
|
.then((res) => {
|
|
this.seckillTime = res.data.list;
|
|
this.changeTime(this.seckillTime);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 将秒杀时段转化
|
|
changeTime(list) {
|
|
let arr = [];
|
|
arr = list.map((item) => {
|
|
return {
|
|
start: item.seckill_start_time / 3600,
|
|
end: item.seckill_end_time / 3600,
|
|
data: item,
|
|
};
|
|
});
|
|
arr.forEach((item) => {
|
|
for (let newNum = item.start; newNum <= item.end; newNum++) {
|
|
this.rangeTime.push({ newNum, data: item.data });
|
|
}
|
|
});
|
|
this.HourList.forEach((item) => {
|
|
this.rangeTime.forEach((v, i) => {
|
|
if (item.hours == v.newNum) {
|
|
item.index1 = i;
|
|
item.isSeckillBg = true;
|
|
item.seckilldata = v.data;
|
|
}
|
|
});
|
|
});
|
|
|
|
this.HourList.forEach((item, index) => {
|
|
if (this.moment == item.hours && item.isSeckillBg) {
|
|
// 获取当前时间段秒杀商品
|
|
this.seckillDetail(item, index);
|
|
}
|
|
});
|
|
// console.log(this.HourList);
|
|
},
|
|
//获取当前时间 24小时
|
|
getHour() {
|
|
var h = new Date().getHours();
|
|
var m = new Date().getMinutes();
|
|
if (m > 1) {
|
|
h = h + 1;
|
|
}
|
|
return h;
|
|
},
|
|
// 点击秒杀时段获取当前秒杀商品
|
|
seckillDetail(item, index) {
|
|
// isSeckillBg true 该时段有秒杀活动 false 该时段无秒杀活动
|
|
if (item.isSeckillBg) {
|
|
this.slideIndex = index;
|
|
let obj = {
|
|
seckill_time_id: item.seckilldata.id,
|
|
};
|
|
this.$axios
|
|
.post(`/goodssku/seckillgoodsList`, obj)
|
|
.then((res) => {
|
|
this.goods_seckillList = res.data.list;
|
|
// this.guessPage.total = res.data.count;
|
|
console.log(this.goods_seckillList);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
} else {
|
|
this.$message.error("该时段无秒杀活动");
|
|
}
|
|
},
|
|
goDetail(id) {
|
|
this.$router.push({
|
|
path: `/activityDetail`,
|
|
query: {
|
|
id,
|
|
isSeckill: true,
|
|
isCollage: false,
|
|
isSetMeal: false,
|
|
},
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.seckill {
|
|
min-height: 330px;
|
|
|
|
.swiperBoxBg {
|
|
margin: 0 auto;
|
|
margin-top: 30px;
|
|
width: 510px;
|
|
height: 15px;
|
|
display: flex;
|
|
.swiperBoxBg_c {
|
|
width: 500px;
|
|
height: 15px;
|
|
background: var(--themeColor) !important;
|
|
}
|
|
.swiperBoxBg_l {
|
|
width: 0px;
|
|
height: 0px;
|
|
border-top: 0px solid transparent;
|
|
border-left: 5px solid transparent;
|
|
border-right: 0px solid transparent;
|
|
border-bottom: 15px solid var(--themeColor) !important;
|
|
}
|
|
.swiperBoxBg_r {
|
|
width: 0px;
|
|
height: 0px;
|
|
border-top: 0px solid transparent;
|
|
border-left: 0px solid transparent;
|
|
border-right: 5px solid transparent;
|
|
border-bottom: 15px solid var(--themeColor) !important;
|
|
}
|
|
}
|
|
|
|
.title-section {
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
text-align: center;
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: 200px;
|
|
height: 48px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.swiperBox {
|
|
width: 1200px;
|
|
.seckill_title {
|
|
width: 500px;
|
|
height: 60px;
|
|
margin: 0 auto;
|
|
margin-bottom: 20px;
|
|
font-size: 36px;
|
|
font-family: Helvetica;
|
|
color: #ffffff;
|
|
line-height: 48px;
|
|
background: var(--themeColor) !important;
|
|
border-radius: 0px 0px 54px 54px;
|
|
.seckill_title_txt {
|
|
width: 408px;
|
|
height: 50px;
|
|
font-size: 40px;
|
|
font-family: Helvetica;
|
|
color: #ffffff;
|
|
line-height: 40px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
.swiper-container {
|
|
width: 1200px;
|
|
background: #ffffff;
|
|
|
|
.swiper-slide {
|
|
width: 253px;
|
|
height: 80px;
|
|
padding-right: 18px;
|
|
margin-right: -18px;
|
|
// background: url("~assets/images/seckill-slide-arrow.png") right top/18px
|
|
// 80px no-repeat;
|
|
font-size: 14px;
|
|
color: #282828;
|
|
cursor: pointer;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.row-column {
|
|
width: 161px;
|
|
height: 91px;
|
|
margin: 0px 30px 30px 20px;
|
|
background: #f7f7f7;
|
|
border-radius: 4px;
|
|
div {
|
|
&:first-child {
|
|
width: auto;
|
|
height: auto;
|
|
margin-right: 0;
|
|
margin-bottom: 4px;
|
|
background: none;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
line-height: normal;
|
|
text-align: inherit;
|
|
}
|
|
}
|
|
}
|
|
&.row-column_active {
|
|
background: var(--themeColor) !important;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
}
|
|
|
|
&.off {
|
|
color: #969696;
|
|
}
|
|
|
|
&.on {
|
|
// background: url("~assets/images/seckill-slide-back.png") center/100%
|
|
// 100% no-repeat;
|
|
color: #222;
|
|
}
|
|
|
|
> div {
|
|
&:first-child {
|
|
width: 76px;
|
|
height: 60px;
|
|
margin-right: 16px;
|
|
// background: url("~assets/images/seckill-slide-clock.png") center/60px
|
|
// 60px no-repeat;
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
margin-top: 8px;
|
|
margin-right: -3px;
|
|
margin-left: -3px;
|
|
font-weight: bold;
|
|
font-size: 17px;
|
|
}
|
|
|
|
/deep/.styleAll {
|
|
width: 30px;
|
|
height: 25px;
|
|
margin-right: 3px;
|
|
margin-left: 3px;
|
|
background-color: #222222;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods_list {
|
|
width: 1200px;
|
|
min-height: 400px;
|
|
margin: 20px auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.item {
|
|
width: 260px;
|
|
height: 320px;
|
|
background-color: #fff;
|
|
margin: 10px 20px;
|
|
cursor: pointer;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
|
|
&:hover {
|
|
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.pictrue {
|
|
width: 100%;
|
|
height: 202px;
|
|
position: relative;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.newTag {
|
|
color: white;
|
|
width: 60px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
background: #ff7d02;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
border-bottom-right-radius: 15px;
|
|
}
|
|
}
|
|
.seckill_name {
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: var(--themeColor);
|
|
line-height: 28px;
|
|
margin-top: 10px;
|
|
}
|
|
.name {
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 28px;
|
|
}
|
|
.kc {
|
|
margin-top: 10px;
|
|
span {
|
|
font-size: 13px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
.stock {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 15px;
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
p {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #999;
|
|
span {
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ff1d1d;
|
|
|
|
line-height: 25px;
|
|
}
|
|
}
|
|
.originalPrice {
|
|
color: #999999;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nothing {
|
|
padding-top: 250px;
|
|
padding-bottom: 150px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
color: #969696;
|
|
|
|
img {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|