intelligent-bookshelf/src/views/module/homeListItem.vue

<template>
  <div>
    <div :class="[isNewBook ? 'list-small' : (isOtherBook ? 'list-middle' : 'list-big') ]">
      <div v-for="(item,index) in listData" :key="item.ranking" class="list-item" @click="handleDetails(index)">
        <div class="book-img">
          <img :src="item.cover" :onerror="defaultImg" />
        </div>
        <div class="book-info">
          <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4>
          <p class="book-author">{{ item.nbAuthor }}</p>
          <div v-if="!isNewBook" class="book-num">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-remen" />
            </svg>
            <p>{{ item.num }}</p>
          </div>
        </div>
      </div>
    </div>
    <BookDetails ref="detailDom" />
  </div>
</template>

<script>
import { getBookDetailsByISBN } from '@/api/bookshelf'
import BookDetails from './bookDetails.vue'

export default {
  name: 'BookListItem',
  components: { BookDetails },
  props: {
    listData: {
      type: Array,
      default: function() {
        return []
      }
    },
    isOtherBook: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    isNewBook: {
      type: Boolean,
      default: function() {
        return false
      }
    }
  },
  data() {
    return {
      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
    }
  },
  watch: {
    listData: function(newValue, oldValue) {
    },
    isOtherBook: function(newValue, oldValue) {
    },
    isNewBook: function(newValue, oldValue) {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleDetails(index) {
      const params = {
        isbn: this.listData[index].isbn.replace(/\-/g, '')
      }
      getBookDetailsByISBN(params).then(res => {
        this.$refs.detailDom.dialogVisible = true
        if (res) {
          this.$refs.detailDom.bookData = res
        } else {
          this.$refs.detailDom.bookData = {
            srcUrl: this.listData[index].cover,
            bookName: this.listData[index].nbName,
            bookAuthor: this.listData[index].nbAuthor ? this.listData[index].nbAuthor : '暂无信息',
            gist: '暂无简介',
            Publish: '暂无信息',
            places: [
              { shelfName: '' }
            ]
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
</style>