HealthStudentWeb/src/views/optimize/trainingcamp.vue

<!-- 训练营 -->
<template>
  <div class="trainingcamp">
    <!-- 训练营 -->
    <van-nav-bar title="52场专家课" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回">
      <template #left>
        <van-icon name="arrow-left" size="24" style="padding: 0" />
        <span>返回</span>
      </template>
    </van-nav-bar>
    <div class="main">
      <ul>
        <li :class="active == 'brief' ? 'active' : ''" @click="switchNav('brief')">简介</li>
        <li :class="active == 'content' ? 'active' : ''" @click="switchNav('content')">内容</li>
        <li :class="active == 'evaluate' ? 'active' : ''" @click="switchNav('evaluate')">评价</li>
        <!-- <li :class="active == 'recommend' ? 'active' : ''" @click="switchNav('recommend')">推荐</li> -->
      </ul>
      <!-- 简介 -->
      <div class="brief-box" v-show="active == 'brief'">
        <!-- <img :src="info.introduce" alt="" /> -->
        <div class="con">
          <!-- banner -->
          <div class="banner">
            <img :src="camp.introductionImg" alt="">
          </div>
          <div class="article"></div>
        </div>
        <div class="bottom">
          <div class="customer">
            <img :src="customerImg" />
          </div>
          <div class="price">
            <div class="left">
              <span>¥{{ camp.vipPrice }}</span>
            </div>
            <div class="right">
              <span>会员免费</span>
            </div>
          </div>
        </div>


      </div>
      <!-- 内容 -->
      <div class="content-box" v-show="active == 'content'">

        <div class="list">
          <div class="list-item" v-for="(item, index) in info.videoList" :key="index" @click="onRoterTo(item)">
            <p>{{ item.title }}</p>
            <!-- <span><i v-if="item.isFree == 0">免费</i>{{ item.duration }} | {{ item.playBack }}次播放</span>
              <img v-if="item.isFree == 0" src="@/assets/optimize/icons/play.png" alt="" />
              <img v-else src="@/assets/optimize/icons/lock.png" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="evaluate-box" v-show="active == 'evaluate'">
        <div class="list">
          <div class="list-item" v-for="(item, index) in info.evaluate" :key="index">
            <div class="top">
              <img src="@/assets/optimize/icons/3_55.png" alt="" />
              <div>
                <p>{{ item.nickName || '匿名' }}</p>
                <span>{{ item.createdAt }} {{ item.address }}</span>
              </div>
            </div>
            <p>{{ item.content }}</p>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
      <div class="recommend-box" v-show="active == 'recommend'">
        <ul>
          <li v-for="(item, index) in campList" :key="index">
            <h4>{{ item.name }}</h4>
            <p>{{ item.summary }}</p>
            <span>播放</span>
            <img src="@/assets/optimize/images/3_48.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部导航 -->
    <TabBar />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar';
import APIOptimize from '@/api/optimize';
export default {
  components: {
    TabBar
  },
  data() {
    return {
      active: 'brief',
      campList: [],
      customerImg: require('@/assets/optimize/images/3_88.png'),
      info: {
        videoList: [
          /* {
            "lessonId": 1,
            "title": "《心理健康—依靠爱的支撑》",
            "isFree": false,
            "createdAt": "2024-01-26 18:14:19",
            "readCount": null
          },
          {
            "lessonId": 2,
            "title": "《心理健康—亲和力》",
            "isFree": false,
            "createdAt": "2024-02-21 15:16:58",
            "readCount": null
          },
          {
            "lessonId": 3,
            "title": "《心理健康—推动内驱力、树立人格美》",
            "isFree": false,
            "createdAt": "2024-02-21 15:16:58",
            "readCount": null
          } */
        ],
        evaluate: [
          {
            "commentId": 1,
            "avatar": "https://ai.ssjlai.com/fastdfs/group1/M00/00/89/rBMqKGWiUrmAJUReAAMG6aq1a-4091.png",
            "nickName": '张杰妈妈',
            "content": "买了好多课，这个是最值得的！！",
            "createdAt": "2024-01-29 16:34:27",
            "address": "佛山",
            "title": "心理健康—依靠爱的支撑》"
          },
          {
            "commentId": 1,
            "avatar": "https://ai.ssjlai.com/fastdfs/group1/M00/00/89/rBMqKGWiUrmAJUReAAMG6aq1a-4091.png",
            "nickName": '张杰妈妈',
            "content": "买了好多课，这个是最值得的！！",
            "createdAt": "2024-01-29 16:34:27",
            "address": "佛山",
            "title": "心理健康—依靠爱的支撑》"
          },
        ]
      },
      bannerImg: '',
      camp: {}
    };
  },
  watch: {
    active(val) {
      if (val == 'content') {
        this.getTrainingCampDetail();
      } else if (val == 'evaluate') {
        this.getTrainingCampDetailComment()
      }
    }
  },
  created() {


  },
  mounted() {
    this.$nextTick(() => {
      this.getCampList();
    })

  },
  methods: {
    getCampList() {

      APIOptimize.getCampList().then(res => {
        let data = res.data.data;
        const campObj = data.filter(f => {
          return this.$store.getters.campId == f.id
        })[0];
        this.camp = { ...campObj }
      })
    },
    getTrainingCampDetail() {
      let reqParams = {
        courseId: Number(this.$store.getters.campId)
      };
      APIOptimize.getTrainingCampDetail(reqParams).then(res => {
        let data = res.data.data;
        this.info.videoList = data.lessonList
      })
    },
    getTrainingCampDetailComment() {
      let reqParams = {
        courseId: Number(this.$store.getters.campId)
      };
      APIOptimize.getTrainingCampDetailComment(reqParams).then(res => {
        let data = res.data.data;
        console.log("data", data);
        this.info.evaluate = data;
      })
    },
    // 返回
    onNavBack() {
      this.$router.push({
        name: 'Optimize'
      });
    },
    // 切换
    switchNav(e) {
      this.active = e;
    },
    onRoterTo(item) {
      console.log(item);
      this.$router.push({
        name: 'expertChat',
        query: {
          title: item.title.replace("《", '').replace("》", ''),
          lessonId: item.lessonId
        }
      })
    }
  },

};
</script>

<style scoped lang="scss">
@import './scss/trainingcamp.scss';
</style>