150 lines
4.1 KiB
Vue
150 lines
4.1 KiB
Vue
<template>
|
|
<div class="goods-item">
|
|
<el-image
|
|
v-if="item.coverImg"
|
|
class="goods-image"
|
|
:src="item.coverImg + '?x-oss-process=image/resize,m_lfit,w_100,h_100'"
|
|
fit="cover"
|
|
></el-image>
|
|
<div class="info" @click="itemClick">
|
|
<div class="name u-flex u-flex-wrap">
|
|
<span class="weight" v-if="item.type == 'weight'">称重</span>
|
|
<span class="u-line-3">{{ item.name }}</span>
|
|
</div>
|
|
<div class="">￥{{ item.lowPrice }}</div>
|
|
</div>
|
|
<div
|
|
class="status"
|
|
v-if="
|
|
item.isSoldStock ||
|
|
!item.isSale ||
|
|
!item.isSaleTime ||
|
|
(item.isStock && item.stockNumber * 1 <= 0)
|
|
"
|
|
>
|
|
<svg-icon
|
|
@click="ElMessage.error('该商品已下架')"
|
|
v-if="!item.isSale"
|
|
iconClass="yi-xiajia"
|
|
color="#fff"
|
|
size="60"
|
|
></svg-icon>
|
|
<svg-icon
|
|
@click="
|
|
ElMessage.error('该商品不在可售时间内') ||
|
|
isProductAvailable(item.days, item.startTime, item.endTime)
|
|
"
|
|
v-else-if="!item.isSaleTime"
|
|
iconClass="no-sale"
|
|
color="#fff"
|
|
size="60"
|
|
></svg-icon>
|
|
<svg-icon
|
|
@click="ElMessage.error('该商品已售罄')"
|
|
v-else-if="item.isSoldStock"
|
|
iconClass="shouqing"
|
|
color="#fff"
|
|
size="60"
|
|
></svg-icon>
|
|
<svg-icon
|
|
@click="ElMessage.error('库存不足')"
|
|
v-else-if="item.isStock && item.stockNumber * 1 <= 0"
|
|
iconClass="stock_null"
|
|
color="#fff"
|
|
size="60"
|
|
></svg-icon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from "dayjs";
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
index: Number,
|
|
active: Boolean,
|
|
select: Function,
|
|
});
|
|
const emits = defineEmits(["itemClick"]);
|
|
function itemClick() {
|
|
emits("itemClick");
|
|
}
|
|
|
|
// 判断商品是否在可售时间内
|
|
function isProductAvailable(sellDaysStr, startTimeStr, endTimeStr) {
|
|
// 将后端返回的字符串转换为数组
|
|
const sellDays = sellDaysStr.split(",");
|
|
const now = dayjs();
|
|
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
|
const currentDay = days[now.day()]; // console.log('当前日期:', currentDay); // console.log('可售日期列表:', sellDays); // 检查当前周几是否在可售周几列表中
|
|
|
|
if (!sellDays.includes(currentDay)) {
|
|
// console.log('当前日期不在可售日期列表中');
|
|
return false;
|
|
}
|
|
|
|
const startTime = dayjs(`${now.format("YYYY-MM-DD")} ${startTimeStr}`);
|
|
let endTime = dayjs(`${now.format("YYYY-MM-DD")} ${endTimeStr}`); // 处理跨天情况
|
|
|
|
if (endTime.isBefore(startTime)) {
|
|
endTime = endTime.add(1, "day");
|
|
} // console.log('当前时间:', now.format('YYYY-MM-DD HH:mm:ss')); // console.log('开始时间:', startTime.format('YYYY-MM-DD HH:mm:ss')); // console.log('结束时间:', endTime.format('YYYY-MM-DD HH:mm:ss'));
|
|
|
|
const isInRange = now.isBetween(startTime, endTime, null, "[)"); // console.log('当前时间是否在可售时间范围内:', isInRange);
|
|
return isInRange;
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.goods-item {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
.goods-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.info {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
background-color: rgba(46, 46, 46, 0.38);
|
|
z-index: 1;
|
|
}
|
|
.status {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
padding: 8px;
|
|
z-index: 2;
|
|
inset: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgba($color: #000000, $alpha: 0.5);
|
|
}
|
|
}
|
|
:deep(.svg-icon) {
|
|
margin-right: 0;
|
|
}
|
|
.weight {
|
|
height: 15px;
|
|
background: linear-gradient(124deg, rgb(115, 201, 105) 6%, rgb(39, 146, 27) 93%);
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
line-height: 15px;
|
|
padding: 0px 2px;
|
|
margin-right: 2px;
|
|
}
|
|
</style> |