wechat/src/pages/user/majorProjectsDetail/index.vue

<template>
  <div class="mainPage flex-v">
    <div class="flex-item">
      <div class="content">
        <div class="banner">
          <div class="scrollImg">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide class="swiper-slide" v-for="(item,index) in courseDetail.CourseImgs" :key="index">
                <img :src='item.ImgUrl' class="cover" alt="">
              </swiper-slide>
            </swiper>
          </div>
          <div>
            <span>{{courseDetail.CourseName}}</span>
            <div>
              <span>￥<em>{{courseDetail.Price}}</em>起/课时</span>
              <span>参与者<em>{{courseDetail.SignupNum}}</em>/{{courseDetail.MaxNum}}人</span>
            </div>
          </div>
        </div>
        <div class="subContent time">
          <h5>时间</h5>
          <span>{{returnDate(courseDetail.BeginDate)}}~{{returnDate(courseDetail.EndDate)}}</span>
          <div class="list flex-h">
            <div class="flex-item">
              <ul :class="{'show':showMoreCourse}">
                <li v-for="(item,index) in courseTimeList" :key="index">{{returnCourseTime(item.BeginDate,item.EndDate)}}</li>
              </ul>
              <a class="moreCourse" @click="triggerCourseTime">
                {{showMoreCourse ? '收起' : '更多'}}
                <i v-if="!showMoreCourse" class="iconfont icon-jiantou-down"></i>
                <i v-if="showMoreCourse" class="iconfont icon-jiantou-up"></i>
              </a>
            </div>
          </div>
        </div>
        <div style="width:100%;height:.1rem;background:#ebf1f2;"></div>
        <div class="subContent address">
          <h5>地点</h5>
          <div class="flex-h">
            <div class="flex-item">
              <div class="img">
                <router-link :to="{name: '', query: {}}">
                  <img :src="courseDetail.CaseInfo.CaseIcon" class="centerLabel cover" alt="">
                  <div class="flex-h">
                    <i class="iconfont icon-dingwei"></i>
                    <div class="flex-item">
                      <div>
                        <span>{{courseDetail.CaseInfo.CaseName}}（{{courseDetail.CaseInfo.CaseAddress}}）</span>
                      </div>
                    </div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-h">
      <div class="flex-item">
        <div>
          <span>总计￥<em>{{courseDetail.Price}}</em></span>
          <span>优惠券体验</span>
        </div>
      </div>
      <router-link :to="{name: 'placeOrderForCourse', query: {id: courseDetail.CourseId}}">去购买</router-link>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapProjectActions, mapState: mapProjectState } = createNamespacedHelpers('majorProjects')

export default {
  name: '',
  data () {
    return {
      swiperOption: {
        observer: true,
        autoplay: {
          disableOnInteraction: false,
        }
      },
      showMoreCourse: false, // 显隐更多课程时间
      courseTimeList: [], // 课程时间
    }
  },
  computed: {
    ...mapState({
      orgid: x => x.app.orgId,
      fiveA: x => x.index.fiveA,
      banner: x => x.index.banner,
      message: x => x.index.message,
      project: x => x.index.project,
      cms: x => x.index.cms,
    }),
    ...mapProjectState({
      courseDetail: x => x.courseDetail
    }),
    MySwiper () {
      return this.$refs.mySwiper.swiper
    },
  },
  components: {
    swiper,
    swiperSlide,
  },
  created () {
    this.getCourseDetailInfo({ id: this.$route.query.id }).then((res) => {
      var arr = res.CourseDetail
      this.courseTimeList = arr.sort(function (a, b) { return new Date(a.BeginDate).getTime() > new Date(b.BeginDate).getTime() ? 1 : -1 })
      // console.log(JSON.stringify(res))
    })
  },
  methods: {
    ...mapProjectActions([
      'getCourseDetailInfo',
    ]),
    returnCourseTime (val,endVal) { // 返回课时时间
      val = new Date(val)
      endVal = new Date(endVal)
      return this.returnNum(val.getMonth() + 1) + '/' + this.returnNum(val.getDate()) + ' 周' + '日一二三四五六'.split('')[new Date(val).getDay()] + ' ' + this.returnNum(val.getHours()) + ':' + this.returnNum(val.getMinutes()) + '~' + this.returnNum(endVal.getHours()) + ':' + this.returnNum(endVal.getMinutes())
    },
    returnNum (val) {
      return val > 9 ? val : '0' + val
    },
    returnDate (val) {
      val = new Date(val)
      return val.getFullYear() + '年' + this.returnNum(val.getMonth() + 1) + '月' + this.returnNum(val.getDate()) + '日'
    },
    triggerCourseTime () { // 显隐更多课程时间
      this.showMoreCourse = !this.showMoreCourse
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>