HM21St_Page_User/src/components/common/BookCard.vue

<template>
  <div>
    <el-skeleton
      style="width: 240px"
      :loading="true"
      animated
      v-if="item.skeleton"
    >
      <template slot="template">
        <el-skeleton-item variant="image" style="width: 200px; height: 280px" />
        <div style="padding: 12px; width: 200px">
          <el-skeleton-item variant="h3" style="width: 100%; height: 22px" />
          <el-skeleton-item
            variant="text"
            style="margin: 4px 0 12px 0; height: 16px; width: 50%"
          />
          <el-skeleton-item
            variant="text"
            style="height: 21px; width: 70%"
            v-if="!type || type != 'bookShelf'"
          />
        </div>
      </template>
    </el-skeleton>
    <div
      class="BookCard"
      :class="[item.isYD ? 'BookCard-no' : '']"
      @click="handleLink"
      v-else
    >
      <!-- <div
            class="image"
            :style="{height:height?height:'280px'}"
            ></div> -->
      <span class="isNew" v-if="item.is_new && item.is_new === 'true'"
        >NEW</span
      >
      <span
        class="isReservation"
        v-if="item.is_reservation && item.is_reservation === 'true'"
        >订阅</span
      >
      <el-image
        class="image"
        :src="
          item.cover_image_url
            ? item.cover_image_url
            : item.course_type === 'baozhi' ||
              (goodsTypeList[item.type] &&
                goodsTypeList[item.type].type === 'baozhi')
            ? item.study_phase
              ? item.study_phase === 11
                ? require('../../assets/baozhi3.png')
                : item.study_phase === 20 ||
                  item.study_phase === 21 ||
                  item.study_phase === 22 ||
                  item.study_phase === 23
                ? require('../../assets/baozhi1.png')
                : item.study_phase === 30 ||
                  item.study_phase === 31 ||
                  item.study_phase === 32 ||
                  item.study_phase === 33
                ? require('../../assets/baozhi2.png')
                : require('../../assets/baozhi' +
                    (Math.floor(Math.random() * 2) + 1) +
                    '.png')
              : require('../../assets/baozhi' +
                  (Math.floor(Math.random() * 2) + 1) +
                  '.png')
            : require('../../assets/kecheng' +
                (Math.floor(Math.random() * 3) + 1) +
                '.png')
        "
        :fit="'cover'"
      >
      </el-image>
      <div class="bottom">
        <template v-if="item.isYD">
          <p class="name">
            二十一世纪学生英文报·{{ item.study_phase_name }}第{{
              item.iss_no
            }}期{{ item.school_year_no ? "(" + item.school_year_no + ")" : "" }}
          </p>

          <p class="author">
            {{ item.shelve_date || "暂无" }}
          </p>
        </template>
        <template v-else>
          <p class="name">
            {{ item.name
            }}{{ item.school_year_no ? "(" + item.school_year_no + ")" : "" }}
          </p>
          <!-- <template>
                <el-rate
                v-model="item.score"
                disabled
                show-score
                :colors="colors"
                :score-template="score"
                >
                </el-rate>
            </template> -->
          <p class="author">
            {{
              item.shelve_date ||
              item.typeName ||
              item.classperiod ||
              item.author ||
              "暂无"
            }}
          </p>
        </template>

        <template v-if="!type || type != 'bookShelf'">
          <p class="price">
            <span class="OPPOSans"
              >￥{{
                item.hasOwnProperty("price_discount")
                  ? item.price_discount
                  : item.price | cutMoneyFiter
              }}</span
            >
            <s
              v-if="
                item.hasOwnProperty('price_discount') &&
                item.price_discount !== item.price
              "
              >￥{{ item.price | cutMoneyFiter }}</s
            >
          </p>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import { cutMoneyFiter } from "@/utils/defined";
import { getLogin } from "@/api/ajax";
import { getToken } from "@/utils/auth";
export default {
  name: "BookCard",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: [
    "item",
    "height",
    "type",
    "LoginNavIndex",
    "userBg",
    "headerBorder",
    "headerBg",
    "previousPage",
    "isBuy",
  ],
  filters: {
    cutMoneyFiter,
  },
  data() {
    //这里存放数据
    return {
      goodsTypeList: {
        0: {
          type: "LB",
        },
        2: {
          type: "baozhi",
        },
        3: {
          type: "jingdu",
        },
        4: {
          type: "huakan",
        },
        20: {
          type: "zhuanji",
        },
      },
      userMessage: getToken() ? JSON.parse(getToken()) : null,
    };
  },
  //计算属性 类似于data概念
  computed: {
    score() {
      return this.item.score.toFixed(1);
    },
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    changeData(data) {
      var datasort = data.sort((a, b) => a.date.localeCompare(b.date));
      var timeArr = new Set(datasort.map((it) => it.date));
      let newarr = [];
      let rateArr = [];
      timeArr.forEach((item) => {
        let a = {
          date: "",
          arr: [],
        };
        data.forEach((items) => {
          if (item == items.date) {
            a.date = items.date;
            a.arr.push(items.weight);
            rateArr.push(items.rate);
          }
        });
        newarr.push(a);
      });
      newarr.forEach((item) => {
        if (item.arr.length < 3) {
          for (let i = 0; i < 3 - (item.arr.length - 1); i++) {
            item.arr.push(0);
          }
        }
      });
      return { newarr, timeArr, rateArr };
    },
    async handleLink() {
      if (this.item.isYD) return;
      let url = this.LoginNavIndex + "&&&1&&&2&&&3&&&" + this.previousPage;
      if (this.LoginNavIndex === 0 && this.userMessage) {
        let MethodName = "/ShopServer/Client/BookshelfQuery/SetMyGoodsIsLooked";
        let data = {
          goods_id: this.item.id,
          goods_type: this.item.type,
        };
        await getLogin(MethodName, data)
          .then((res) => {
            if (res.status === 1) {
            }
          })
          .catch(() => {});
      }
      if (this.item.type === 3 && this.userMessage) {
        this.$router.push({
          path: "/bookPeruseItem",
          query: {
            headerConfig: encodeURIComponent(url),
            cardType: "jingdu",
            id: this.item.goods_id,
          },
        });
      } else {
        this.$router.push({
          path: "/bookItem",
          query: {
            headerConfig: encodeURIComponent(url),
            isBuy: this.isBuy,
            cardType:
              this.item.course_type || this.goodsTypeList[this.item.type].type,
            id: this.item.goods_id || this.item.id,
          },
        });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // let data = this.changeData(this.dataContext)
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.BookCard {
  width: 100%;
  cursor: pointer;
  position: relative;

  .image {
    width: 100%;
    height: 280px;
  }
  &-no {
    cursor: initial;
    .image {
      opacity: 0.8;
    }
  }
  .bottom {
    // height: 132px;
    padding: 4px 12px 12px;
  }
  p {
    margin: 0;
    padding: 0;
  }
  .name {
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #2f3742;
    height: 44px;
    word-break: break-word;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 超出几行省略 */
    overflow: hidden;
  }
  .author {
    margin-top: 1px;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #929ca8;
  }
  .price {
    margin-top: 1px;
    display: flex;
    align-items: flex-end;
    :nth-child(1) {
      font-weight: 700;
      font-size: 14px;
      line-height: 22px;
      color: #ec5e41;
    }
    :nth-child(2) {
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      text-decoration-line: line-through;
      color: #929ca8;
      margin-left: 8px;
    }
  }
}
</style>