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

<template>
  <div class="mainPage flex-v">
    <nav class="flex-h">
      <a class="flex-item" v-for="(item,index) in locations" :key="index" :class="{'active':index==active.index}" @click="changeLocation(item,index)">{{item.LocationName}}</a>
    </nav>
    <div class="flex-item">
      <div>
        <div v-for="(item,index) in locations" :key="index" :hidden="index!==active.index">
          <div class="banner flex-h">
            <div class="flex-item">
              <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide class="swiper-slide" v-for="(banner,bindex) in item.Banners" :key="bindex">
                  <img :src='banner.ImageUrl' class="cover" style="border-radius: .12rem;" alt=""  @click="jump(banner)">
                </swiper-slide>
              </swiper>
            </div>
          </div>
          <h5>{{item.Title}}</h5>
          <div class="courseList flex-h">
            <ul class="flex-item" v-if="!fiveANoData">
              <router-link tag="li" v-for="(course,cindex) in item.Courses" :key="cindex" :to="{name:'majorProjectsDetail',query:{id: course.CourseId}}">
                <courseItem :data="courseInfo(course)"></courseItem>
              </router-link>
            </ul>
            <!-- <span v-if="fiveANoData" style="width:100%;line-height:.3rem;display:block;text-align:center;color:#ccc;margin-bottom:.1rem;">暂无数据</span> -->
          </div>
          <div style="width:100%;height:.1rem;background:#f8f8f8;margin:0 auto;"></div>
          <h5>{{item.Consult}}</h5>
          <div class="newsList flex-h">
            <ul class="flex-item">
              <router-link tag="li" :to="{name:'',query:{}}" v-for="(newinfo,nindex) in item.News" :key="nindex">
                <newsItem :data="newinfo" @jump='jump'></newsItem>
              </router-link>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import courseItem from '../../../components/courseItem/index'
import newsItem from '../../../components/newsItem/index'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapFiveAActions } = createNamespacedHelpers('fiveA')
export default {
  name: '',
  data () {
    return {
      fiveANoData: false,
      active: {
        index: 0,
        locationid: ''
      },
      swiperOption: {
        observer: true,
        loop: true,
        autoplay: {
          disableOnInteraction: false,
        }
      },
      locations: [],
    }
  },
  computed: {
    MySwiper () {
      return this.$refs.mySwiper.swiper
    },
    MySwiperMsg () {
      return this.$refs.MySwiperMsg.swiper
    },
  },
  components: {
    newsItem,
    swiper,
    swiperSlide,
    courseItem,
  },
  created () {
    const _that = this
    this.getLocationDetails().then(res => {
      _that.locations = res
    })
  },
  methods: {
    ...mapFiveAActions([
      'getLocationDetails',
    ]),
    changeLocation (item, index) {
      this.active.index = index
    },
    courseInfo (course) {
      return {
          id: course.CourseId,
          title: course.CourseName,
          img: course.CourseImg,
          remark: course.Remark,
          address: course.CaseAddress,
          tag: course.CourseTags || [],
          courseType: '',
          defaultPrice: course.Price + '/节',
          getWay: 'ticket'
        }
    },
    // returnCourseList (arr) { // 转换课程列表格式
    //   for (var n = 0; n < arr.length; n++) {
    //     this.courseList.push()
    //   }
    // },
    jump (item) {
      // console.log(item)
      item.ForwardType = item.ForwardType || ''
      if (item.ForwardType === 'url') {
        window.location.href = item.ForwardUrl
      } else if (item.ForwardType === 'course') {
        this.$router.push({ name: '', query: { id: item.ForwardResourceId } }) // 此处去课程详情
      } else {
        window.location.href = item.InfoUrl
      }
    }
  }
}
</script>

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