cashier-web/src/views/tool/Instead/components/goods-item.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="dot" v-if="item.isLimitDiscount">限时折扣</div>
      <div class="btm">
        <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="limit_wrap" v-if="item.isLimitDiscount">
          <span class="o_price">￥{{ item.lowPrice }}</span>
          <span class="sale_price">￥{{ item.limitDiscountPrice }}</span>
        </div>
        <div v-else>￥{{ item.lowPrice }}</div>
      </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.3);
    z-index: 1;

    .btm {
      width: 100%;
      padding: 20px 6px 0;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
    }

    .dot {
      padding: 2px 4px 2px 6px;
      border-radius: 0 0 0 8px;
      font-size: 10px;
      background-color: var(--el-color-danger);
      display: flex;
      justify-content: center;
      position: absolute;
      top: 0;
      right: -0;
    }
  }

  .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.6);
  }
}

: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;
}

.limit_wrap {
  display: flex;

  .o_price {
    font-size: 12px;
    text-decoration: line-through;
    opacity: .8;
    margin-right: 4px;
    position: relative;
    top: 2px;
  }

  .sale_price {
    font-size: 14px;
  }
}
</style>