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

<template>
  <div class="mainPage">
    <div class="banner">
      <div>
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide class="swiper-slide" v-for="(item,index) in projectInfo.CmsCaseImgs" :key="index">
            <img :src='item.CaseImageUrl' class="cover" alt="">
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <p>{{projectInfo.DetailContent}}</p>
    <div class="list flex-h">
      <div class="flex-item">
        <div v-for="(item,index) in courseList" :key="index">
          <span>{{item.month+1}}月</span>
          <ul>
            <router-link tag="li" v-for="(subItem,subIndex) in item.list" :key="subIndex" :to="{name: 'majorProjectsDetail', query: {id: subItem.id}}" class="flex-h">
              <div class="flex-item">
                <div>
                  <courseItem :data="subItem"></courseItem>
                </div>
              </div>
            </router-link>
          </ul>
        </div>
        <div class="cutLine"></div>
        <div>
          <span>关注我们</span>
          <ul>
            <li class="flex-h">
              <div class="bottom flex-item flex-h">
                <div class="flex-item flex-h">
                  <div class="flex-item">
                    <div>
                      <span class="centerLabel">长按右方二维码<br>关注“城的空间”公众号</span>
                    </div>
                  </div>
                  <div class="qrCode">
                    <a><img src="" class="centerLabel cover" alt=""></a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </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')
import courseItem from '../../../components/courseItem/index'

export default {
  name: '',
  data () {
    return {
      swiperOption: {
        observer: true,
        autoplay: {
          disableOnInteraction: false,
        }
      },
      courseList: [], // 课程列表
      initList: [
        // { // 初始化课程列表
        //   id: '',
        //   title: '课程名称',
        //   img: '',
        //   time: '2018.04.04 18:30-20:00',
        //   address: '南京南',
        //   tag: ['儿童教育', '小小外交官'],
        //   courseType: '团体课',
        //   defaultPrice: '168/节',
        //   getWay: 'ticket',
        //   startDate: 1514779200000,
        //   endDate: 1514781600000,
        // }, {
        //   id: '',
        //   title: '课程名称',
        //   img: '',
        //   time: '2018.04.04 18:30-20:00',
        //   address: '南京南',
        //   tag: ['儿童教育', '小小外交官'],
        //   courseType: '团体课',
        //   defaultPrice: '168/节',
        //   getWay: 'ticket',
        //   startDate: 1514779200000,
        //   endDate: 1514781600000,
        // }, {
        //   id: '',
        //   title: '课程名称',
        //   img: '',
        //   time: '2018.04.04 18:30-20:00',
        //   address: '南京南',
        //   tag: ['儿童教育', '小小外交官'],
        //   courseType: '团体课',
        //   defaultPrice: '168/节',
        //   getWay: 'ticket',
        //   startDate: 1517460000000,
        //   endDate: 1517467200000,
        // }, {
        //   id: '',
        //   title: '课程名称',
        //   img: '',
        //   time: '2018.04.04 18:30-20:00',
        //   address: '南京南',
        //   tag: ['儿童教育', '小小外交官'],
        //   courseType: '团体课',
        //   defaultPrice: '168/节',
        //   getWay: 'ticket',
        //   startDate: 1517460000000,
        //   endDate: 1517467200000,
        // }
      ],
    }
  },
  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({
      projectInfo: x => x.projectInfo
    }),
    MySwiper () {
      return this.$refs.mySwiper.swiper
    },
  },
  components: {
    courseItem,
    swiper,
    swiperSlide,
  },
  created () {
    this.initData()
  },
  methods: {
    ...mapProjectActions([
      'getProjectInfo',
    ]),
    returnTag (arr) {
      var aArr = []
      for (var n = 0; n < arr.length; n++) {
        aArr.push(arr[n].TagName)
      }
      return aArr
    },
    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())
    },
    initData () { // 初始化数据
      this.getProjectInfo({ id: this.$route.query.id }).then((res) => {
        // console.log(JSON.stringify(res))
        // this.initList
        var aArr = []
        for (var n = 0; n < res.Courses.length; n++) {
          aArr.push({
            id: res.Courses[n].CourseId,
            title: res.Courses[n].CourseName,
            img: res.Courses[n].CourseImg,
            time: this.returnDate(res.Courses[n].BeginDate) + '至' + this.returnDate(res.Courses[n].EndDate),
            address: res.CaseAddress == undefined ? '暂无数据' : res.CaseAddress,
            tag: this.returnTag(res.Courses[n].CourseTags),
            courseType: '团体课',
            defaultPrice: res.Courses[n].Price + '/节',
            getWay: 'ticket',
            startDate: new Date(res.Courses[n].BeginDate).getTime(),
            endDate: new Date(res.Courses[n].EndDate).getTime(),
          })
        }
        this.initList = aArr
        this.calcArr()
      })
    },
    calcArr () {
      let arr = []
      for (var n = 0; n < this.initList.length; n++) {
        arr.push(new Date(this.initList[n].startDate).getMonth())
      }
      for (var i = 0; i < arr.length; i++) {
        if (arr.indexOf(arr[i]) !== i) {
          arr.splice(i, 1)
          i--
        }
      }
      for (var i = 0; i < arr.length; i++) {
        this.courseList.push({
          month: arr[i],
          list: []
        })
      }
      for (var n = 0; n < this.initList.length; n++) {
        for (var i = 0; i < this.courseList.length; i++) {
          if (new Date(this.initList[n].startDate).getMonth() === this.courseList[i].month) {
            this.courseList[i].list.push(this.initList[n])
          }
        }
      }
    },
  }
}
</script>

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