HM21St_Page_User/src/components/common/BookLiveCard.vue

<template>
  <div>
    <el-skeleton style="width: 282px" :loading="true" animated v-if="item.skeleton">
            <template slot="template">
                <el-skeleton-item
                    variant="image"
                    style="width: 282px; height: 174px;"
                />
                <div style="padding: 8px 8px 16px 8px;width: 282px;">
                    <el-skeleton-item variant="h3" style="width: 100%; height: 24px" />
                    <el-skeleton-item variant="text" style="margin: 4px 0 12px 0; height: 20px; width:50%;" />
                    <el-skeleton-item variant="text" style="height: 24px; width:70%;" />
                </div>
            </template>
        </el-skeleton>
        <div class="BookCard" v-else @click="handleLink">
            <el-image
                class="image"
                :src="item.cover_image_url?item.cover_image_url:item.course_type==='baozhi'?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">
            <p class="name">{{item.name}}</p>
            <div class="live-box">
                <img src="../../assets/icon-live.png" />
                <p>直播{{item.begin_time}}</p>
            </div>
            <template>
                <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';
export default {
  name: "BookCard",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["item", "height"],
  filters:{
    cutMoneyFiter
  },
  data() {
    //这里存放数据
    return {
      colors: ['#EA5939', '#EA5939', '#EA5939'],
      dataContext: [
        { "houseId": 1, "date": "2023-02-25", "weight": 150, "rate": 1.5 },
        { "houseId": 1, "date": "2023-02-26", "weight": 200, "rate": 1.5 },
        { "houseId": 1, "date": "2023-02-24", "weight": 50, "rate": 1.5 },
        { "houseId": 1, "date": "2023-02-27", "weight": 300, "rate": 1.5 },
        { "houseId": 2, "date": "2023-02-25", "weight": 100, "rate": 3.6 },
        { "houseId": 2, "date": "2023-02-26", "weight": 500, "rate": 7.9 },
        { "houseId": 3, "date": "2023-02-25", "weight": 80, "rate": 7.9 },
        { "houseId": 3, "date": "2023-02-26", "weight": 200, "rate": 7.9 }
      ]
    }
  },
  //计算属性 类似于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));// 大重_-----Set 中的元素只会出现一次
      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 }
    },
    handleLink(){
        window.open(this.item.url)
    }
  },
  //生命周期 - 创建完成（可以访问当前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;
  .image {
    width: 100%;
    height: 174px;

  }
  .bottom {
    // height: 132px;
    padding: 8px 8px 16px 8px
  }
  p {
    margin: 0;
    padding: 0;
  }
  .name {
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #2F3742;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .live-box{
    background: #E8FFEA;
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-top: 4px;
    width: max-content;
    img{
        width: 12px;
        margin-right: 4px;
    }
    p{
        font-weight: 500;
        font-size: 12px;
        line-height: 20px;
        color: #00B42A;
        margin: 0;
    }
  }
  .price {
    margin-top: 12px;
    display: flex;
    align-items: flex-end;
    :nth-child(1) {
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      color: #EC5E41;
    }
    :nth-child(2) {
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      text-decoration-line: line-through;
      color: #929CA8;
      margin-left: 8px;
    }
  }
}
</style>