wechat/src/pages/user/mainPage/indexPage/index.vue

<template>
  <div class="mainPage" v-if="showPage">
    <div class="banner flex-h">
      <div class="flex-item">
        <div>
          <div>
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
                <img :src="item.ImageUrl" class="cover" alt @click="jump(item)">
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>
    <div class="subNav">
      <ul class="flex-h">
        <router-link
          tag="li"
          class="flex-item"
          v-for="(item, index) in fiveA"
          :to="{name:'fiveA',query:{id:item.LocationId}}"
          :key="index"
        >
          <img :src="item.TypeImg" alt>
          <span>{{item.LocationName}}</span>
        </router-link>
      </ul>
    </div>
    <div class="areaHeader flex-h">
      <h1 class="flex-item">探索·发现</h1>
      <router-link v-if="project.length>5" :to="{name: 'majorProjectsList'}">查看所有</router-link>
    </div>
    <div class="areaContent">
      <div class="scroll-h find">
        <div>
          <swiper :options="swiperHOption" ref="mySwiperH">
            <swiper-slide
              class="swiper-slide"
              v-for="(item,index) in ProjectWithLocationList"
              v-if="index<5"
              :key="index"
            >
              <router-link
                tag="div"
                :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }"
                style="width:100%;height:100%;position:relative;"
              >
                <img :src="getImg(item.CmsCaseImgs)" class="cover" alt>
                <span v-if="item.CaseId!='all'">
                  <i class="iconfont icon-dingwei"></i>
                  {{item.jl}}
                </span>
              </router-link>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <div class="areaHeader flex-h" v-if="courseList.length>0">
      <h1 class="flex-item">近期课程</h1>
      <router-link v-show="courseList.length>5" :to="{name: 'courseList'}">查看所有</router-link>
    </div>
    <div class="areaContent" v-if="courseList.length>0">
      <div class="scroll-h course">
        <div>
          <swiper :options="swiperHOption" ref="mySwiperH">
            <swiper-slide
              class="swiper-slide"
              v-for="(item,index) in courseList"
              :key="index"
              v-if="index<5"
            >
              <router-link
                tag="div"
                :to="{ name:'majorProjectsDetail', query:{ id: item.CourseId } }"
                style="width:100%;position:relative;overflow:visible"
              >
                <div class="img">
                  <img :src="item.CourseImg" class="cover centerLabel" alt>
                  <span>{{item.CourseName}}</span>
                </div>
                <div class="price">
                  <span>￥{{item.Price}}</span>
                </div>
                <span>{{`${toolClass.dateFormat(item.BeginDate,'yyyy.MM.dd')}~${toolClass.dateFormat(item.EndDate,'MM.dd')}`}}</span>
                <span>{{item.CaseName}}</span>
              </router-link>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <div class="areaHeader flex-h">
      <h1 class="flex-item">活动资讯</h1>
    </div>
    <div class="areaContent newsList flex-h">
      <div class="flex-item">
        <div>
          <ul>
            <li
              class="flex-h"
              v-for="(item,index) in newsList"
              :key="index"
              @click="jump(item)"
              v-if="index<5"
            >
              <a class="img">
                <img :src="item.ImageUrl" class="centerLabel cover" alt>
              </a>
              <div class="flex-item">
                <div>
                  <span>{{item.Title}}</span>
                  <span>{{toolClass.dateFormat(item.CreateDate)}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import toolClass from '../../../../util/util'
import { mapState, createNamespacedHelpers } from 'vuex'
import wx from 'weixin-jsapi'
const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')
// const wx = require('weixin-js-sdk')
import wxsdk from '@/util/share'
export default {
  name: '',
  data () {
    return {
      swiperOption: {
        observer: true,
        loop: true,
        speed: 400,
        autoplay: {
          disableOnInteraction: false,
        }
      },
      swiperHOption: {
        observer: true,
        freeMode: true,
        slidesPerView: 'auto',
      },
      newsList: [],
      showPage: false
    }
  },
  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,
      longitude1: x => x.index.longitude1,
      latitude1: x => x.index.latitude1
    }),
    ...mapIndexState({
      courseList: x => x.courseList
    }),
    MySwiper () {
      return this.$refs.mySwiper.swiper
    },
    MySwiperH () {
      return this.$refs.mySwiperH.swiper
    },
    ProjectWithLocationList () {
      var data = this.project || []
      if (this.latitude1 === 0 && this.longitude1 === 0) {
        data.forEach((item) => {
          item.jl = '未获取到当前定位'
        })
        return data
      } else {
        let arr = []
        let dataNew = []
        data.forEach((item) => {
          if (item.Coordinate) {
            item.jl = parseInt(toolClass.getGreatCircleDistance(this.latitude1, this.longitude1, item.Coordinate.split(',')[0], item.Coordinate.split(',')[1]))
            arr.push({ jl: item.jl, CmsCaseId: item.CmsCaseId })
          } else {
            item.jl = 400000000
            arr.push({ jl: item.jl, CmsCaseId: item.CmsCaseId })
          }
        })
        arr.sort((a, b) => { return a.jl - b.jl })
        arr.forEach((curr) => {
          data.forEach((item) => {
            if (curr.CmsCaseId === item.CmsCaseId && item.jl === curr.jl) {
              item.jl = `距离${item.jl}米`
              dataNew.push(item)
            }
          })
        })
        return dataNew
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  created () {
    let that = this
    wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
      title: '城的空间',
      desc: '城的空间',
      link: `${window.location.origin}${window.location.pathname}#/mainPage/indexPage`,
      thu_image: `https://spaceofcheng.oss-cn-beijing.aliyuncs.com/indexlogo.jpg?x-oss-process=style/wxicon`
    }).then(() => {
      wx.getLocation({
        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          that.setLocation({ latitude1: res.latitude, longitude1: res.longitude })
        },
      })
    })
    that.showPage = true
    that.init()
  },
  methods: {
    ...mapIndexActions(['getIndexLocation', 'getIndexInfo', 'getCourseList', 'setLocation']),
    jump (item) {
      item.ForwardType = item.ForwardType || ''
      if (item.ForwardType === 'url') {
        window.location.href = item.ForwardUrl
        return
      } else if (item.ForwardType === 'course') {
        if (item.ForwardResourceId) {
          this.$router.push({ name: 'majorProjectsDetail', query: { id: item.ForwardResourceId } }) // 此处去课程详情
          return
        } else {
          this.$router.push({ name: 'majorProjectsDetail', query: { id: item.ForwardCourseId } }) // 此处去课程详情
          return
        }
      } else {
        window.location.href = item.InfoUrl
        return
      }
    },
    getImg (list) {
      return list.filter(item => item.ImageType === 'cover')[0].CaseImageUrl
    },
    init () {
      this.getIndexLocation({ orgid: this.orgid, issys: '0' }).then((res) => {
        // this.data.fiveA = this.fiveA
        this.locationId = 'index'
        this.getIndexInfo({ orgid: this.orgid, locationid: this.locationId }).then((res) => {
          this.newsList = this.cms
          if (this.project !== undefined && this.project !== null) {
            for (let i = 0; i < this.project.length; i++) {
              if (this.project[i].CmsCaseImgs != null) {
                for (let j = 0; j < this.project[i].CmsCaseImgs.length; j++) {
                  if (this.project[i].CmsCaseImgs[j].ImageType === 'cover') {
                    this.project[i].CaseImageUrl = this.project[i].CmsCaseImgs[j].CaseImageUrl
                  }
                }
              }
            }
          }
        })
        this.getCourseList({
          pagesize: 10000,
          page: 1
        }).then(() => {
          this.showPage = true
        })
      })
    }
  }
}
</script>

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