quickapp_front/src/components/book/book.ux

<template>
  <div class="{{multi ? 'book-wrap__multi' : 'book-wrap'}}" style="{{bookSimpleStyle()}}" @click="getBooks(book)">
    <block if="!multi">
      <image style="height: {{width * 1.33}}px" class="book-cover__simple" src="{{book.cover_url}}"></image>
      <text class="book-name {{lines ? 'book-name__line2' : ''}}">{{book.book_name}}</text>
    </block>
    <block else>
      <image style="{{bookMultiStyle()}}" class="book-cover__multi" src="{{book.cover_url}}"></image>
      <slot>
        <div class="book-info__multi">
          <text class="name">{{book.book_name}}</text>
          <text class="intro">{{book.book_summary}}</text>
        </div>
      </slot>
    </block>
  </div>
</template>

<script>
import router from "@system.router";

export default {
  props: {
    multi: {
      type: Boolean,
      default: false
    },
    prevent: {
      type: Boolean,
      default: false
    },
    similar: {
      type: Boolean,
      default: false
    },
    book: {
      type: Object,
      default: {}
    },
    width: {
      type: Number,
      default: 200
    },
    lines: {
      type: Boolean,
      default: false
    }
  },
  bookSimpleStyle() {
    if (!this.multi) {
      return {
        width: this.width + 'px'
      }
    }
  },
  bookMultiStyle() {
    if (this.multi) {
      return {
        width: this.width + 'px',
        height: this.width * 1.33 + 'px'
      }
    }
  },
  getBooks(book) {
    if (this.prevent) return;
    if (this.similar) {
      router.replace({
        uri: "/views/Detail",
        params: {
          bid: book.bid || ""
        }
      })
    } else {
      router.push({
        uri: "/views/Detail",
        params: {
          bid: book.bid || ""
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.book-wrap {
  width: 200px;
  flex-shrink: 0;
  flex-direction: column;

  .book-cover__simple {
    width: 100%;
    height: 264px;
    border-radius: 6px;
  }

  .book-name {
    font-size: 24px;
    color: #999;
    margin-top: 14px;
    margin-bottom: 36px;
    lines: 1;
    text-overflow: ellipsis;

    &__line2 {
      lines: 2;
    }
  }
}

.book-wrap__multi {
  /* flex: 1; */
  flex-direction: row;

  .book-cover__multi {
    width: 200px;
    flex-shrink: 0;
    height: 266px;
    border-radius: 6px;
  }

  .book-info__multi {
    flex: 1;
    height: 266px;
    flex-direction: column;
    margin-left: 38px;
    margin-bottom: 40px;

    .name {
      font-size: 36px;
      color: #333;
      margin-bottom: 54px;
      lines: 1;
      text-overflow: ellipsis;
    }

    .intro {
      font-size: 26px;
      color: #666;
      line-height: 40px;
      lines: 4;
      text-overflow: ellipsis;
    }
  }
}
</style>