<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>