wechat/src/components/libraryListItem/index.vue

<template>
  <div class="libraryListItem flex-h" @click="itemClick(data)">
    <div class="img">
      <a>
        <img :src="data.BookImg" class="centerLabel cover" alt>
      </a>
      <span v-if="type === 1" :class="data.BorrowStatus=='0'?'active':''">{{myBookStatus}}</span>
    </div>
    <div class="flex-item">
      <div>
        <span>{{data.BookName}}</span>
        <h5 v-if="!type">{{data.BookDescription}}</h5>
        <div v-if="!type" class="flex-h" style="margin-top: .06rem;">
          <span class="flex-item">{{data.Author}} 著</span>
          <span class="status" :class="{'active' : status != 1 && status != 0 && status != 4}" @click="appointmentBook(data.BookId)">{{bookStatus}}</span>
        </div>
        <div v-if="!type" class="flex-h">
          <span class="flex-item">{{data.Publisher}}</span>
          <span>
            剩余可借
            <em>{{data.LeftNum}}</em>本
          </span>
        </div>
        <div v-if="type === 1" class="flex-h" style="margin-top: .06rem;">
          <span class="flex-item">应还时间：{{toolClass.dateFormat(data.EndDate, 'yyyy-MM-dd')}}</span>
        </div>
        <div v-if="type === 1" class="flex-h">
          <span class="flex-item">{{data.CaseName}}</span>
          <span v-if="data.BorrowStatus=='3' || data.BorrowStatus=='2'">已归还</span>
          <span v-if="data.BorrowStatus == '1'">
            已借阅
            <em>{{borrowDay}}</em>天
          </span>
          <span v-if="data.BorrowStatus == '0'">
            已逾期
            <em>{{lateDay}}</em>天
          </span>
        </div>
        <div v-if="type === 2" class="flex-h" style="margin-top: .06rem;">
          <span class="flex-item">预约时间：{{toolClass.dateFormat(data.ReserveDate)}}</span>
        </div>
        <div v-if="type === 2" class="flex-h" style="margin-top: 0;">
          <span
            class="flex-item"
          >预约资格将保留至：{{toolClass.dateFormat(data.ReserveEndDate, 'yyyy-MM-dd')}}</span>
        </div>
        <div v-if="type === 2" class="flex-h" style="margin-top: 0;">
          <span class="flex-item">{{data.CaseName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import toolClass from '../../util/util'
import { mapState } from 'vuex'

export default {
  name: '',
  props: ['data', 'type', 'status'],
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      user: item => item.userCenter.userInfo.customer
    }),
    bookStatus () {
      let status = '在线预约'
      switch (this.status) {
        case '4':
          status = '已预约'
          break
        case '1':
          status = '借阅中'
          break
        case '0':
          status = '借阅中'
          break
      }
      return status
    },
    myBookStatus () {
      let status = ''
      switch (this.data.BorrowStatus) {
        case '4':
          status = '已预约'
          break
        case '1':
          status = '借阅中'
          break
        case '0':
          status = '逾期未还'
          break
        case '3':
          status = '逾期归还'
          break
        case '2':
          status = '已归还'
          break
      }
      return status
    },
    lateDay () {
      const nowdata = new Date()
      return toolClass.diffDate(new Date(this.data.EndDate), nowdata)
    },
    borrowDay () {
      const nowdata = new Date()
      return toolClass.diffDate(new Date(this.data.BorrowDate), nowdata)
    }
  },
  components: {
  },
  created () {
  },
  methods: {
    appointmentBook (id) {
      if (this.status == '4' || this.status == '1' || this.status == '0') {
        return
      }
      if (!this.user.Phone) {
        this.$router.push({ name: 'bindMobile' })
        return
      }
      this.$emit('appointmentBook', id)
    },
    itemClick (target) {
      this.$emit('itemClick', target)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.libraryListItem {
  width: 100%;
  position: relative;
  overflow: visible;
  align-items: center;
  .img {
    width: 0.78rem;
    position: relative;
    overflow: visible;
    a {
      width: 100%;
      display: block;
      height: 0;
      position: relative;
      overflow: hidden;
      padding-bottom: 143.5%;
      background: #eee;
      border-radius: 0.03rem;
      z-index: 1;
    }
    > span {
      display: inline-block;
      position: absolute;
      left: -0.1rem;
      bottom: 0.2rem;
      z-index: 2;
      font-size: 0.12rem;
      color: #fff;
      background: #333;
      line-height: 0.25rem;
      border-radius: 0.25rem;
      padding: 0 0.15rem;
      &.active {
        background: #fc5534;
      }
    }
  }
  > div.flex-item {
    margin-left: 0.1rem;
    > div {
      width: 100%;
      position: relative;
      overflow: hidden;
      > span {
        width: 100%;
        display: block;
        line-height: 0.22rem;
        font-size: 0.16rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 0.43rem;
      }
      > h5 {
        font-size: 0.11rem;
        color: #ccc;
        line-height: 0.16rem;
        font-weight: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 0.31rem;
      }
      > div {
        margin-top: 0.03rem;
        align-items: center;
        span {
          line-height: 0.25rem;
          font-size: 0.12rem;
          color: #999;
          white-space: nowrap;
          em {
            color: #fc5534;
            font-size: 0.13rem;
          }
          &.status {
            padding: 0 0.15rem;
            font-size: 0.12rem;
            color: #999;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
            box-sizing: border-box;
          }
          &.status.active {
            color: #fc674a;
            background: #fcf3f3;
            border: none;
          }
        }
      }
    }
  }
}
</style>