book-hi/pages/home/components/BookItem.vue

<template>
  <view class="book-item" :class="{ disabled: book.status != 1 }">
    <view class="book-info">
      <view class="book-image-container">
        <u-image
          width="140rpx"
          height="140rpx"
          :src="book.cover"
          mode="aspectFill"
        />
        <view class="no-recycle" v-if="book.status != 1">
          <text>已收满</text>
        </view>
      </view>
      <view class="book-detail">
        <view class="book-title">
          <view class="book-name">{{ book.bookName }}</view>
          <view class="book-price-labels">
            <view class="book-upsell has-upsell" v-if="book.currUpsellMoney > 0"
              >已涨价{{ book.currUpsellMoney }}元</view
            >
            <view
              class="book-upsell enable-upsell"
              v-if="!book.currUpsellMoney && book.upsellMoney"
            >
              可涨价{{ book.upsellMoney }}元
              <image
                src="/static/img/activity/up.png"
                mode="aspectFill"
                style="width: 16rpx; height: 16rpx; margin-left: 6rpx"
              />
            </view>
          </view>
        </view>

        <view class="flex flex-j-b flex-a-c mb-10">
          <view class="top-info">
            <view class="book-tags">
              <text class="tzs tag-text" v-if="book.suit == 1">套装书</text>
              <text class="kmdb tag-text" v-if="book.maxNum > 1">可卖多本</text>
            </view>
          </view>

          <u-number-box
            class="number-box"
            bg-color="#38c148"
            color="#ffffff"
            v-model="book.num"
            :min="1"
            :max="book.maxNum || 40"
            @blur="onQuantityChange"
            @minus="addReduceNum(-1)"
            @plus="addReduceNum(1)"
            :disabled="book.status != 1"
          ></u-number-box>
        </view>

        <view class="flex flex-a-c" style="align-items: center">
          <view class="book-price"
            >回收价
            <text style="font-weight: 600; color: #db0702; margin-left: 8rpx">
              ¥{{ recycleMoney }}</text
            ></view
          >
          <view class="price-action" style="margin-left: 10rpx">
            <button
              class="up-price-btn"
              @tap="handleUpsell"
              v-if="book.canInvite === 1"
            >
              去加价
            </button>
            <view class="countdown-wrap" v-if="book.restTime > 0">
              <text>加价剩余</text>
              <u-count-down
                :timestamp="book.restTime"
                format="HH:mm:ss"
                autoStart
                color="#db0702"
                font-size="20rpx"
                separator-color="#db0702"
                @finish="onCountdownFinish"
              ></u-count-down>
            </view>
          </view>
        </view>
      </view>
      <view class="delete-btn" @tap="onDelete">
        <u-icon name="close" size="26" color="#999"></u-icon>
      </view>
    </view>

    <common-dialog ref="deleteDialog" title="温馨提示" @confirm="confirmDelete">
      <text>确定删除这本图书吗？</text>
    </common-dialog>
  </view>
</template>

<script>
import commonDialog from "@/components/common-dialog.vue";
export default {
  components: {
    commonDialog,
  },
  props: {
    book: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    recycleMoney() {
      return (this.book.recyclePrice * (this.book.num || 1)).toFixed(2);
    },
  },
  methods: {
    onDelete() {
      this.$refs.deleteDialog.openPopup();
    },
    confirmDelete() {
      this.$emit("delete", this.book);
    },
    // /api/token/order/addReduceNum
    addReduceNum(changeNum) {
      uni.$u.http
        .post("/token/order/addReduceNum", {
          orderId: this.book.orderId,
          isbn: this.book.isbn,
          changeNum,
        })
        .then((res) => {
          if (res.data == 1) {
            this.$emit("quantity-change", this.book);
          }
        });
    },
    onQuantityChange(data) {
      uni.$u.http
        .post("/token/order/changeNum", {
          orderId: this.book.orderId,
          isbn: this.book.isbn,
          afterNum: data.value,
        })
        .then((res) => {
          if (res.data == 1) {
            this.$emit("quantity-change", this.book);
          }
        });
    },
    handleUpsell() {
      this.$emit("upsell", this.book);
    },
    onCountdownFinish() {
      this.$emit("countdown-finish", this.book);
    },
  },
};
</script>

<style lang="scss" scoped>
.book-item {
  background: #ffffff;
  padding: 20rpx;
  margin-top: 20rpx;
  border-radius: 10rpx;
  &.disabled {
    background: #f9ccc9;
  }

  .book-info {
    display: flex;
    align-items: center;
    position: relative;

    .book-image-container {
      position: relative;

      .no-recycle {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #ff5252;
        color: #ffffff;
        padding: 4rpx 10rpx;
        border-radius: 4rpx 4rpx 0 0;
        font-size: 24rpx;
        text-align: center;
        width: 100%;
      }
    }

    .book-cover {
      width: 140rpx;
      height: 196rpx;
      border-radius: 8rpx;
    }

    .tag-text {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }

    .tzs {
      width: 91rpx;
      height: 30rpx;
      background: linear-gradient(263deg, #98e05f, #0de3ac);
      border-radius: 2rpx;
      padding: 4rpx 10rpx;
      margin-right: 10rpx;
    }

    .kmdb {
      width: 117rpx;
      height: 30rpx;
      background: linear-gradient(263deg, #f7cb6b, #fba980);
      border-radius: 2rpx;
      padding: 4rpx 10rpx;
      margin-right: 10rpx;
    }

    .book-detail {
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      :v-deep .u-number-input {
        background: #f9f9f9 !important;
        border-radius: 6rpx;
      }

      .book-title {
        width: calc(100% - 60rpx);
        margin-bottom: 10rpx;
        display: flex;
        align-items: center;
      }

      .book-name {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-family: Source Han Sans CN;
        font-weight: bold;
        word-break: break-all;
        margin-right: 10rpx;
      }

      .book-price-labels {
        display: flex;
        margin-top: -2rpx;
        flex-shrink: 0;
      }

      .book-price {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
      }

      .price-action {
        display: flex;
        align-items: center;

        .up-price-btn {
          background-color: #38c148;
          color: #ffffff;
          font-size: 24rpx;
          height: 48rpx;
          line-height: 48rpx;
          padding: 0 14rpx;
          border-radius: 24rpx;
        }

        .countdown-wrap {
          display: flex;
          align-items: center;
          font-size: 24rpx !important;
          color: #db0702;
          margin-left: 10rpx;
          text {
            margin-right: 10rpx;
          }

          :v-deep .u-count-down {
            color: #db0702;
            font-size: 20rpx !important;
          }
        }
      }
    }

    .book-upsell {
      font-size: 22rpx;
      padding: 2rpx 10rpx;
      border-radius: 4rpx;
      margin-right: 10rpx;
      display: inline-flex;
      align-items: center;

      &.has-upsell {
        color: #276f1e;
        background-color: #a8dda2;
      }

      &.enable-upsell {
        color: #ff0e11;
        background-color: #ffe9eb;
      }

      .u-image {
        margin-left: 4rpx;
      }
    }

    .delete-btn {
      position: absolute;
      right: 0;
      top: -10rpx;
      padding: 10rpx;
    }
  }
}
</style>