training-wx/src/views/ClassInfo.vue

<template>
  <div class="class-box">
    <ratio-div class="thumb-banner" :ratio="0.6">
      <img width="100%" :src="ClassContent.thumb" alt />
    </ratio-div>

    <div class="summary">
      <div class="title">
        {{ClassContent.title}}
      </div>
      <div class="flex" style="margin-top: 16px">
        <div class="flex-1 subtitle">
          {{dateStr}}
        </div>
        <div class="flex-0" @click="handleFavor()">
          <span>
            <van-icon size="1.4em" :name="favor.icon" :color="favor.color" />
          </span>
          <span class="star-favor">{{favor.text}}</span>
        </div>
      </div>
    </div>

    <div class="content-bar"></div>
    
    <div class="class-box-body">
      <img :src="ClassContent.content" alt />
    </div>
  </div>
</template>

<script>
import { getCourseInfof, addCollection, deleteCollection } from '@/util/api'
import { parseTime } from '@/util/formattingData'

export default {
  components: {
    RatioDiv: () => import('@/components/RatioDiv/index.vue')
  },
  data() {
    return {
      ClassContent: {},
      isShoucang: false,
      courseIds: '',

      on: require('@/assets/Collection/on.png'),
      off: require('@/assets/Collection/off.png')
    }
  },
  computed: {
    dateStr() {
      if (!this.startDate || !this.endDate) return '课程时间: 暂无';

      const start = parseTime(this.startDate, '{y}-{m}-{d} {h}:{i}')
      const end = parseTime(this.endDate, '{y}-{m}-{d} {h}:{i}')

      return `课程时间: ${start} ~ ${end}`
    },
    favor() {
      const isFavored = this.ClassContent.isFavored || false

      return {
        icon: isFavored ? 'star' : 'star-o',
        color: isFavored ? '#2BB898' : '#000',
        text: isFavored?'已收藏':'收藏',
      }
    }
  },
  watch: {
    '$route.query.courseId': {
      handler(id) {
        this.onloadClass(id)
      },
      immediate: true
    }
  },
  methods: {
    onloadClass(id) {
      const courseId = id || this.$route.query.courseId;

      getCourseInfof(courseId).then((e) => {
        this.ClassContent = e
        if (e.isFavored) {
          this.isShoucang = true
        }

        console.log(e)
      })
    },
    handleFavor() {
      if (this.ClassContent.isFavored) {
        this.deleteColl()
      } else {
        this.collectionHande()
      }
    },
    collectionHande() {
      addCollection({
        targetId: this.$route.query.courseId,
        targetName: this.ClassContent.title,
        targetType: 'course'
      }).then((e) => {
        console.log(e)
        this.ClassContent.isFavored = true
        this.$toast('收藏成功')
        // this.onloadClass()
      })
    },
    deleteColl() {
      deleteCollection({
        targetId: this.$route.query.courseId,
        targetName: this.ClassContent.title,
        targetType: 'course'
      }).then((e) => {
        console.log(e)
        this.ClassContent.isFavored = false
        this.$toast('取消收藏成功')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.class-box {
  font-size: 14px;
  height: 100%;
  background: #fff;

  .summary {
    margin-top: -30px;
    font-size: 12px;
    color: #000;
    padding: 24px 2em 3em;
    background-color: #f9f9f9;
    box-sizing: border-box;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    position: relative;

    .title {
      font-size: 1.3em;
      // min-height: 2.6em;
      line-height: 1.4em;
    }
    .subtitle {
      color: rgb(133, 133, 133);
    }

    .star-favor {
      display: inline-block;
      margin-left: .6em;
      vertical-align: top;
    }
  }

  .content-bar {
    position: relative;
    margin-top: -1.5em;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, .08);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    height: 30px;
    background: #fff;
  }

  &-body {
    position: relative;
    background: #fff;
    padding: 0 2em 1em;

    > img {
      width: 100%;
    }
  }
}
</style>