library-wechat/components/lending-list-item/lending-list-item.vue

<template>
  <view class="item-container" @click="$emit('click')">
    <view class="book-item-box">
      <view class="item-box-left">
        <image
          class="img-item"
          :src="data.cover || data.imgCover || '/static/images/default-book.png'"
          mode="scaleToFill"
          @error="onImgError"
        />
      </view>
      <view class="item-box-right">
        <view class="item-title line-clamp-2">{{ data.title || '暂无标题' }}</view>
        <view>
          <text class="item-author">{{ data.author || '佚名' }}</text>
        </view>
        <view class="item-desc line-clamp-2">{{ data.localname || data.oplocalname }}</view>
      </view>
    </view>

    <view class="lending-info">
      <view class="lending-time">
        <text>借书时间：{{ data.loantime || '' }}</text>
        <text>应还时间：{{ data.returntime || '' }}</text>
      </view>

      <!-- 只在 在借中 显示状态 -->
      <image
        v-if="isLending && status === 'overdue'"
        class="lending-status"
        src="@/static/images/mylending-img1.png"
        mode="heightFix"
      />
      <image
        v-if="isLending && status === 'warning'"
        class="lending-status"
        src="@/static/images/mylending-img3.png"
        mode="heightFix"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: "lending-list-item",
  props: {
    data: {
      type: Object,
      required: true
    },
    // 父组件传：是否是在借列表
    isLending: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    status() {
      if (!this.isLending || !this.data.returntime) return '';

      const now = Date.now();
      const returnTime = new Date(this.data.returntime).getTime();
      
      // 相差毫秒数
      const diffTime = returnTime - now;
      // 换算成天数
      const day = diffTime / (1000 * 60 * 60 * 24);

      // 1. 已经过期 → 逾期
      if (day < 0) {
        return 'overdue';
      }

      // 2. 没过期，但 ≤3 天 → 临期
      if (day <= 3) {
        return 'warning';
      }

      // 3. 大于3天 → 正常，不显示
      return '';
    }
  },
  methods: {
    onImgError(e) {
      e.target.src = "/static/images/default-book.png";
    }
  },
};
</script>

<style lang="scss" scoped>
.item-container {
  padding: 10px;
  background-color: #fff;
  border-radius: 6px;
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 10px;

  .book-item-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .item-box-left {
      margin-right: 10px;

      .img-item {
        width: 64px;
        height: 90px;
        border-radius: 5px;
      }
    }

    .item-box-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      flex: 1;

      .item-title {
        font-size: 15px;
        font-weight: bold;
        color: #000;
        margin-bottom: 6px;
      }

      .item-author {
        font-size: 12px;
        color: #191A1A;
        padding: 2px 4px;
        border-radius: 2px;
        background-color: #F4F6FC;
        margin-right: 6px;
      }

      .item-desc {
        font-size: 12px;
        color: #191A1A;
        padding-top: 8px;
      }
    }
  }
}

.lending-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 10px 0;

  .lending-time {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    line-height: 22px;
  }

  .lending-status {
    height: 50px;
  }

  .type-tag {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
  }

  .tag-lend {
    background-color: #409eff;
  }

  .tag-return {
    background-color: #ff3871;
  }
}
</style>