xcx

package-lock.json

@@ -13389,8 +13389,7 @@
     "weixin-js-sdk": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/weixin-js-sdk/-/weixin-js-sdk-1.3.3.tgz",
-      "integrity": "sha512-1ofMi7Q1ioXV8/V8tGv3DrU7pugmyvhN86Pxbj1WaGeIEs/+yz0Jdv/5L+ocuDh/JAbKmtvMvBXh0OyuP6kQ8A==",
-      "dev": true
+      "integrity": "sha512-1ofMi7Q1ioXV8/V8tGv3DrU7pugmyvhN86Pxbj1WaGeIEs/+yz0Jdv/5L+ocuDh/JAbKmtvMvBXh0OyuP6kQ8A=="
     },
     "which": {
       "version": "1.3.1",

src/components/courseItem/index.vue

@@ -5,7 +5,7 @@
         <img :src="data.img" class="centerLabel cover" alt="">
       </a>
     </div>
-    <div class="flex-item flex-v">
+    <div class="flex-item flex-v" :style="{marginRight: marginRight + 'rem'}">
       <div class="flex-item">
         <div class="content">
           <div class="title flex-h">
@@ -41,7 +41,7 @@
 
 export default {
   name: '',
-  props: ['data'],
+  props: ['data', 'marginRight'],
   data () {
     return {
       

src/pages/user/App.vue

@@ -14,7 +14,7 @@ export default {
   name: 'app',
   data () {
     return {
-      showPage: false,
+      showPage: true,
       logo
     }
   },
@@ -26,14 +26,15 @@ export default {
     })
   },
   created () {
-    if (location.search && this.toolClass.UrlSearch(location.search).code) {
-      this.code = this.toolClass.UrlSearch(location.search).code
-    } else {
-      this.code = null
-    }
-    this.getUserInfo({ org: this.org, code: this.code }).then(() => {
-      this.showPage = true
-    })
+    // if (location.search && this.toolClass.UrlSearch(location.search).code) {
+    //   this.code = this.toolClass.UrlSearch(location.search).code
+    // } else {
+    //   this.code = null
+    // }
+    // this.getUserInfo({ org: this.org, code: this.code }).then(() => {
+    //   this.showPage = true
+    // })
+    
     // wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
     //   title: '城的空间',
     //   desc: '城的空间',

src/pages/user/courseList/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="mainPage" @scroll="pageScroll" ref="parentBox">
+    <div class="flex-h">
+      <div class="flex-item">
+        <div ref="box">
+          <ul>
+            <router-link
+              tag="li"
+              v-for="(item,index) in list"
+              :key="index"
+              :to="{name: 'majorProjectsDetail', query: {id: item.id}}"
+              class="flex-h"
+            >
+              <div class="flex-item">
+                <div>
+                  <courseItem :data="item" marginRight=".2"></courseItem>
+                </div>
+              </div>
+            </router-link>
+          </ul>
+          <span class="footerWord" v-if="total === list.length">加载完毕</span>
+          <span class="footerWord" v-else>正在加载更多</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex'
+import courseItem from '../../../components/courseItem/index'
+const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')
+
+export default {
+  name: '',
+  data () {
+    return {
+      list: [],
+      ajaxOff: true,
+      postData: {
+        pagesize: 10,
+        page: 1
+      },
+      total: 1
+    }
+  },
+  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,
+    }),
+    ...mapIndexState({
+      courseList: x => x.courseList
+    })
+  },
+  components: {
+    courseItem
+  },
+  created () {
+    this.getData()
+  },
+  methods: {
+    ...mapIndexActions(['getCourseList']),
+    pageScroll () {
+      var docHeight = this.$refs.box.offsetHeight, parHeight = this.$refs.parentBox.offsetHeight, scrollTop = this.$refs.parentBox.scrollTop
+      if (scrollTop === docHeight - parHeight) {
+        if (this.ajaxOff && this.list.length < this.total) {
+          this.ajaxOff = false
+          this.postData.page += 1
+          this.getData()
+        }
+      }
+    },
+    getData () {
+      this.getCourseList(this.postData).then((res) => {
+        this.ajaxOff = true
+        this.total = res.pagenum;
+        (res.list || []).map((item) => {
+          this.list.push({
+            id: item.CourseId,
+            title: item.CourseName,
+            img: item.CourseImg,
+            remark: this.toolClass.dateFormat(item.BeginDate, 'yyyy-MM-dd') + '至' + this.toolClass.dateFormat(item.EndDate, 'yyyy-MM-dd'),
+            address: item.CaseAddress,
+            tag: '',
+            courseType: '团体课',
+            defaultPrice: item.Price + '/节',
+            getWay: 'ticket',
+            startDate: new Date(item.BeginDate).getTime(),
+            endDate: new Date(item.EndDate).getTime(),
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/user/courseList/page.scss

@@ -0,0 +1,31 @@
+.mainPage{
+  background: #fff;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  >div{
+    >div{
+      margin-left: .2rem;
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        >ul{
+          >li{
+            padding: .2rem 0;
+            border-bottom: 1px solid #eee;
+          }
+        }
+      }
+    }
+    .footerWord{
+      width: 100%;
+      display: block;
+      text-align: center;
+      text-indent: -.1rem;
+      line-height: .4rem;
+      color: #666;
+    }
+  }
+}

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

@@ -1,113 +1,118 @@
 <template>
   <div class="mainPage">
-    <div class="topBanner">
-      <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 class="pageTitle flex-h">
-      <h5 class="flex-item">
-        <span>银城5A全龄生活体验平台</span>
-      </h5>
-    </div>
-    <div class="flex-h">
-      <nav class="pageNav flex-item">
-        <router-link :to="{name:'fiveA',query:{id:item.LocationId}}" v-for="(item,index) in data.fiveA" :key="index">
-          <a>
-            <img :src="item.TypeImg" class="centerLabel cover" alt="">
-            <em>{{item.LocationName}}</em>
-          </a>
-          <span>{{item.Title}}</span>
-        </router-link>
-      </nav>
-    </div>
-    <div class="MsgBanner">
-      <div class="flex-h">
-        <i class="iconfont icon-xiaoxi"></i>
-        <span>最新消息：</span>
-        <div class="flex-item">
+    <div class="banner flex-h">
+      <div class="flex-item">
+        <div>
           <div>
-            <swiper :options="swiperOptionMsg" ref="mySwiperMsg">
-              <swiper-slide class="swiper-slide" v-for="(item,index) in message" :key="index">
-                <router-link :to="{name:'',query:{}}"><span @click="jump(item)">{{item.InfoName}}</span></router-link>
+            <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>
-              <div class="swiper-pagination"  slot="pagination"></div>
             </swiper>
           </div>
         </div>
       </div>
     </div>
-    <div class="pageTitle flex-h">
-      <h5 class="flex-item">
-        <span>售楼处项目专题</span>
-      </h5>
-    </div>
-    <div class="flex-h">
-      <ul class="projectList flex-item">
-        <router-link tag="li" :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }" v-for="(item,index) in project" :key="index">
-          <img :src='item.CaseImageUrl' class="centerLabel cover" alt="">
+    <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 style="width:100%;height:.1rem;background:#f8f8f8;margin:.25rem auto 0;"></div>
-    <div class="pageTitle flex-h">
-      <h5 class="flex-item">
-        <span>活动资讯</span>
-      </h5>
+    <div class="areaHeader flex-h">
+      <h1 class="flex-item">探索·发现</h1>
+      <router-link :to="{name: 'majorProjectsList'}">查看所有</router-link>
     </div>
-    <div class="flex-h">
-      <ul class="newsList flex-item">
-        <li @click="jump(item)" v-for="(item,index) in newsList" v-if="index < 5" :key="index">
-          <newsItem :data="item"></newsItem>
-        </li>
-      </ul>
+    <div class="areaContent">
+      <div class="scroll-h find">
+        <div>
+          <swiper :options="swiperHOption" ref="mySwiperH">
+            <swiper-slide class="swiper-slide" v-for="(item,index) in project" :key="index">
+              <router-link tag="div" :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }" style="width:100%;height:100%;position:relative;">
+                <img :src='item.CaseImageUrl' class="cover" alt="">
+                <span><i class="iconfont icon-dingwei"></i>距离{{item.Coordinate}}米</span>
+              </router-link>
+            </swiper-slide>
+          </swiper>
+        </div>
+      </div>
+    </div>
+    <div class="areaHeader flex-h" :hidden="!courseList.length">
+      <h1 class="flex-item">近期课程</h1>
+      <router-link :to="{name: 'courseList'}">查看所有</router-link>
+    </div>
+    <div class="areaContent" :hidden="!courseList.length">
+      <div class="scroll-h course">
+        <div>
+          <swiper :options="swiperHOption" ref="mySwiperH">
+            <swiper-slide class="swiper-slide" v-for="(item,index) in courseList" :key="index">
+              <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)}}</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)">
+              <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 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: mapIndexActions } = createNamespacedHelpers('index')
-const { mapState: mapUserState } = createNamespacedHelpers('userCenter')
+const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')
 export default {
   name: '',
   data () {
     return {
-      data: {
-        fiveA: []
-      },
-      locationId: '',
       swiperOption: {
         observer: true,
         loop: true,
-        speed: 1000,
+        speed: 400,
         autoplay: {
           disableOnInteraction: false,
         }
       },
-      swiperOptionMsg: {
+      swiperHOption: {
         observer: true,
-        observeParents:true,
-        // slidesPerView: 3,
-        direction: 'vertical',
-        speed: 1000,
-        // loop: true,
-        autoplay: {
-          disableOnInteraction: false,
-        }
+        freeMode: true,
+        slidesPerView: 'auto',
       },
       newsList: []
     }
   },
   computed: {
-    ...mapUserState({
-      userInfo: x => x.userInfo
-    }),
     ...mapState({
       orgid: x => x.app.orgId,
       fiveA: x => x.index.fiveA,
@@ -116,23 +121,25 @@ export default {
       project: x => x.index.project,
       cms: x => x.index.cms,
     }),
+    ...mapIndexState({
+      courseList: x => x.courseList
+    }),
     MySwiper () {
       return this.$refs.mySwiper.swiper
     },
-    MySwiperMsg () {
-      return this.$refs.MySwiperMsg.swiper
+    MySwiperH () {
+      return this.$refs.mySwiperH.swiper
     }
   },
   components: {
-    newsItem,
     swiper,
-    swiperSlide,
+    swiperSlide
   },
   created () {
     this.getIndexLocation({ orgid: this.orgid, issys: '0' }).then((res) => {
-      this.data.fiveA = this.fiveA
+      // this.data.fiveA = this.fiveA
       this.locationId = 'index'
-      this.getIndexInfo({ orgid: this.orgid, locationid: this.locationId }).then(() => {
+      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++) {
@@ -146,18 +153,21 @@ export default {
           }
         }
       })
+      this.getCourseList({
+        pagesize: 5,
+        page: 1
+      })
     })
   },
   methods: {
-    ...mapIndexActions(['getIndexInfo']),
-    ...mapIndexActions(['getIndexLocation']),
+    ...mapIndexActions(['getIndexLocation', 'getIndexInfo', 'getCourseList']),
     jump (item) {
       item.ForwardType = item.ForwardType || ''
       if (item.ForwardType === 'url') {
         window.location.href = item.ForwardUrl
         return
       } else if (item.ForwardType === 'course') {
-        if (item.ForwardResourceId){
+        if (item.ForwardResourceId) {
           this.$router.push({ name: 'majorProjectsDetail', query: { id: item.ForwardResourceId } }) // 此处去课程详情
           return
         } else {

src/pages/user/mainPage/indexPage/page.scss

@@ -4,180 +4,236 @@
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
   background: #fff;
-  &>*:last-child{
-    margin-bottom: .2rem;
-  }
-  .topBanner{
+  .banner{
     width: 100%;
-    height: 0;
-    position: relative;
-    overflow: hidden;
-    padding-bottom: 54%;
-    background: #eee;
-    &>div{
-      width: 100%;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      top: 0;
-    }
-  }
-  .pageTitle{
-    margin: .18rem auto 0;
     position: relative;
     overflow: hidden;
-    h5{
-      &::after{
-        content: '';
-        width: 100%;
-        height: .01rem;
-        background: #eee;
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        -webkit-transform: translateY(-50%);
-        z-index: 1;
-      }
-      width: 100%;
-      display: block; 
-      text-align: center;
+    margin: .15rem auto 0;
+    >div{
+      margin: 0 .15rem;
       position: relative;
       overflow: hidden;
-      margin: 0 .2rem;
-      span{
-        display: inline-block; 
-        line-height: .26rem;
-        font-size: .14rem;
-        font-weight: normal;
-        background: #fff;
-        position: relative;
-        z-index: 2;
-        padding: 0 .15rem;
-      }
-    }
-  }
-  .pageNav{
-    margin: 0 .1rem;
-    font-size: 0;
-    &>a{
-      width: 20%;
-      display: inline-block;
-      position: relative;
-      overflow: hidden;
-      margin-top: .15rem;
-      vertical-align: top;
-      a{
-        width: 70%;
-        display: block;
-        padding-bottom: 70%;
+      >div{
+        width: 100%;
         position: relative;
         overflow: hidden;
+        border-radius: .1rem;
+        height: 0;
+        padding-bottom: 55%;
         background: #eee;
-        margin: 0 auto;
-        border-radius: 100%;
-        img{
-          z-index: 1;
-        }
-        em{
+        >div{
           width: 100%;
-          display: block;
           position: absolute;
           left: 0;
+          top: 0;
           bottom: 0;
-          line-height: .3rem;
-          font-size: .11rem;
-          text-align: center;
-          color: #fff;
-          z-index: 2;
+          overflow: hidden;
+          >div{
+            width: 100%;
+            height: 100%;
+          }
         }
       }
-      span{
-        width: 70%;
-        display: block;
-        margin: .1rem auto 0;
-        line-height: .16rem;
-        font-size: .1rem;
-        text-align: center;
-        color: #666;
-      }
     }
   }
-  .MsgBanner{
-    width: 100%;
-    height: .44rem;
-    position: relative;
-    overflow: hidden;
-    background: #f8f8f8;
-    margin: .25rem auto 0;
-    &>div{
+  .subNav{
+    margin: .3rem auto 0;
+    ul{
       width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      align-items: center;
-      &>i,
-      &>span{
-        color: #f05a3f;
-        font-size: .12rem;
-        margin-left: .08rem;
+      li{
+        text-align: center;
+        font-size: 0;
+        img{
+          display: inline-block;
+          height: .25rem;
+        }
+        span{
+          width: 100%;
+          display: inline-block;
+          text-align: center;
+          font-size: .14rem;
+          line-height: .22rem;
+        }
       }
-      &>i{
-        font-size: .16rem;
-        margin-left: .3rem;
+    }
+  }
+  .areaHeader{
+    margin: .35rem auto 0;
+    align-items: center;
+    >h1{
+      line-height: .28rem;
+      margin-left: .15rem;
+      font-size: .17rem;
+    }
+    >a{
+      font-size: .12rem;
+      color: #f83c00;
+      margin-right: .15rem;
+    }
+  }
+  .areaContent{
+    margin: .2rem auto 0;
+    .find{
+      >div{
+        width: 100%;
+        position: relative;
+        .swiper-container{
+          width: 100%;
+          position: relative;
+          .swiper-slide{
+            width: 1.15rem;
+            height: .9rem;
+            background: #eee;
+            position: relative;
+            overflow: hidden;
+            border-radius: .1rem;
+            margin-right: .15rem;
+            &:first-child{
+              margin-left: .15rem;
+            }
+            img{
+              display: inline-block;
+              position: relative;
+              z-index: 1;
+            }
+            span{
+              display: inline-block;
+              position: absolute;
+              z-index: 2;
+              width: 100%;
+              left: 0;
+              bottom: .1rem;
+              color: #fff;
+              font-size: .11rem;
+              i{
+                font-size: .12rem;
+                color: #fff;
+                margin-left: .1rem;
+              }
+            }
+          }
+        }
       }
-      &>div{
-        margin-left: .1rem;
-        height: 100%;
-        margin-right: .2rem;
-        &>div{
+    }
+    .course{
+      >div{
+        width: 100%;
+        position: relative;
+        .swiper-container{
           width: 100%;
-          height: 100%;
           position: relative;
-          overflow: hidden;
-          &>div{
-            width: 100%;
-            height: 100%;
-            a{
+          .swiper-slide{
+            width: 1.15rem;
+            position: relative;
+            overflow: visible;
+            margin-right: .25rem;
+            &:first-child{
+              margin-left: .15rem;
+            }
+            .img{
               width: 100%;
-              display: inline-block;
+              padding-bottom: 100%;
+              background: #eee;
+              border-radius: .1rem;
+              position: relative;
               overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              line-height: .44rem;
-              color: #f05a3f;
+              img{
+                z-index: 1;
+              }
               span{
-                color: #f05a3f;
+                width: 100%;
+                left: 0;
+                top: 0;
+                font-size: .13rem;
+                font-weight: bolder;
+                top: .1rem;
+                text-indent: .1rem;
+                display: inline-block;
+                z-index: 2;
+                position: absolute;
+                color: #fff;
               }
             }
+            .price{
+              position: relative;
+              overflow: visible;
+              text-align: right;
+              height: 0;
+              span{
+                display: inline-block;
+                position: relative;
+                z-index: 2;
+                line-height: .24rem;
+                color: #fff;
+                padding: 0 .1rem;
+                background: #ec1d24;
+                border-radius: .24rem;
+                font-size: .11rem;
+                transform: translate(.1rem, -.35rem);
+                -webkit-transform: translate(.1rem, -.35rem);
+                box-shadow: 0 0 .1rem .01rem rgba(236, 29, 36, .15);
+              }
+              +span{
+                line-height: .18rem;
+                font-size: .1rem;
+                margin: .1rem auto 0;
+                +span{
+                  line-height: .2rem;
+                  font-size: .13rem;
+                }
+              }
+            }
+            >span{
+              width: 100%;
+              display: block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
           }
         }
       }
     }
   }
-  .projectList{
-    margin: .1rem .1rem 0;
-    li{
-      width: 100%;
-      position: relative;
-      height: 0;
-      padding-bottom: 30%;
-      background: #eee;
-      overflow: hidden;
-      margin: .08rem auto 0;
-    }
-  }
   .newsList{
-    margin: .15rem .2rem .2rem;
-    &>li{
-      width: 100%;
-      display: block;
-      position: relative;
-      overflow: hidden;
-      border-top: .01rem solid #eee;
-      &:first-child{
-        border-top:none
+    >div{
+      margin: 0 .15rem .2rem;
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        ul{
+          li{
+            margin: .2rem auto 0;
+            align-items: center;
+            &:first-child{
+              margin: 0 auto;
+            }
+            .img{
+              width: 1.25rem;
+              height: .8rem;
+              border-radius: .1rem;
+              background: #eee;
+              position: relative;
+              overflow: hidden;
+            }
+            >div{
+              margin-left: .15rem;
+              span{
+                width: 100%;
+                display: block;
+                line-height: .24rem;
+                &:first-child{
+                  font-size: .14rem;
+                  font-weight: bold;
+                }
+                &:nth-child(2){
+                  font-size: .12rem;
+                  color: #9d9d9d;
+                }
+              }
+            }
+          }
+        }
       }
     }
   }

src/pages/user/mainPage/userCenter/index.vue

@@ -57,6 +57,10 @@
           <span>抽奖记录</span>
           <i class="iconfont icon-jiantou-right"></i>
         </div>
+        <div class="menu-item flex-h" @click="toActivity">
+          <span>活动记录</span>
+          <i class="iconfont icon-jiantou-right"></i>
+        </div>
       </div>
     </div>
   </div>
@@ -96,6 +100,9 @@ export default {
   },
   methods: {
     ...actions(['getUserInfo', 'getNum']),
+    toActivity () {
+      this.$router.push({ name: 'activityList' })
+    },
     toLessonOrder () {
       this.$router.push({ name: 'lessonOrder' })
     },

src/pages/user/majorProjectsList/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="mainPage">
+    <div class="flex-h">
+      <div class="flex-item">
+        <div>
+          <ul>
+            <router-link v-for="(item, index) in project" :key="index" class="flex-h" tag="li" :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }">
+              <a class="img">
+                <img :src="item.CmsCaseImgs[0].CaseImageUrl" class="cover" alt>
+              </a>
+              <router-link tag="div" class="flex-item" :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }">
+                <div>
+                  <span>{{item.Name}}</span>
+                  <span>{{item.CaseAddress}}</span>
+                </div>
+              </router-link>
+            </router-link>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: mapIndexActions } = createNamespacedHelpers('index')
+
+export default {
+  name: '',
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapState({
+      orgid: x => x.app.orgId,
+      project: x => x.index.project
+    })
+  },
+  components: {
+  },
+  created () {
+    this.getProjectList({
+      orgid: this.orgid
+    }).then(() => {
+      console.log(this.project)
+    })
+  },
+  methods: {
+    ...mapIndexActions(['getProjectList'])
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/user/majorProjectsList/page.scss

@@ -0,0 +1,55 @@
+.mainPage{
+  background: #fff;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  >div{
+    >div{
+      margin: 0 .15rem;
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        >ul{
+          margin: .15rem auto;
+          >li{
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            align-items: center;
+            padding: .03rem 0;
+            border-bottom: 1px solid #ededed;
+            img{
+              width: 1.15rem;
+              height: .9rem;
+              position: relative;
+              overflow: hidden;
+              border-radius: .05rem;
+            }
+            >div{
+              margin-left: .15rem;
+              >div{
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                >span{
+                  width: 100%;
+                  display: block;
+                  line-height: .2rem;
+                  font-size: .14rem;
+                  font-weight: bolder;
+                  &:nth-child(2){
+                    font-size: .12rem;
+                    color: #999;
+                    font-weight: normal;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/user/router.js

@@ -5,6 +5,7 @@ import mainPage from './mainPage/index' // 主页
 import indexPage from './mainPage/indexPage/index' // 首页
 import fiveA from './fiveA/index' // 5A
 import majorProjects from './majorProjects/index' // 项目专题
+import majorProjectsList from './majorProjectsList/index' // 项目专题列表
 import majorProjectsDetail from './majorProjectsDetail/index' // 项目专题详情
 import placeOrderForCourse from './placeOrderForCourse/index' // 购买课程下单
 import coffeeIndex from './mainPage/coffeeIndex/index' // 城咖啡
@@ -18,6 +19,7 @@ import vip from './vip/index' // vip卡说明
 import vipDetail from './vipDetail/index' // vip卡说明
 import card from './card/index' // 卡
 import coupons from './coupons/index' // 优惠券
+import courseList from './courseList/index' // 课程列表
 import lessonDetail from './lessonDetail/index' // 课程详情
 import cardDetail from './cardDetail/index' // 体验卡详情
 import gymCardDetail from './gymCardDetail/index' // 健身卡详情
@@ -70,6 +72,16 @@ const router = new Router({
     name: 'majorProjects',
     component: majorProjects,
     children: []
+  }, { // 课程列表
+    path: '/courseList',
+    name: 'courseList',
+    component: courseList,
+    children: []
+  }, { // 项目专题列表
+    path: '/majorProjectsList',
+    name: 'majorProjectsList',
+    component: majorProjectsList,
+    children: []
   }, { // 项目专题详情
     path: '/majorProjectsDetail',
     name: 'majorProjectsDetail',

src/store/index/index.js

@@ -90,7 +90,8 @@ export default {
     fiveA: [],
     message: [],
     project: [],
-    cms: []
+    cms: [],
+    courseList: []
   },
   mutations: {
     setBanner (state, data) { // 获取首页轮播图
@@ -104,7 +105,7 @@ export default {
     setMessage (state, data) { // 获取首页消息
       data = data || []
       if (data.length > 3) {
-        state.message = data.slice(0,3)
+        state.message = data.slice(0, 3)
       } else {
         state.message = data
       }
@@ -116,9 +117,25 @@ export default {
     setCms (state, data) { // 获取cms
       data = data || []
       state.cms = data
-    }
+    },
+    updateCourseList (state, data) { // 更新附近课程
+      state.courseList = data.list || []
+    },
   },
   actions: {
+    getCourseList (context, payload) { // 获取附近课程
+      return new Promise((resolve, reject) => {
+        Ajax(api.index.getCourseList.url, {
+          method: api.index.getCourseList.method,
+          queryData: { ...payload }
+        }).then(res => {
+          context.commit('updateCourseList', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
     getIndexLocation (context, data) {
       return new Promise((resolve) => {
         http.getIndexLocation(data).then((res) => {
@@ -127,6 +144,22 @@ export default {
         })
       })
     },
+    getProjectList (context, data) {
+      return new Promise((resolve, reject) => {
+        Ajax(api.index.project.url, {
+          method: api.index.project.method,
+          queryData: {
+            locationid: data.locationid,
+            orgid: data.orgid
+          }
+        }).then(res => {
+          context.commit('setProject', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
     async getIndexInfo (context, param) { // 首页全部请求
       try {
         let banner = await http.getBanner(param)

src/util/api.js

@@ -33,6 +33,10 @@ const $api = {
       method: 'get',
       url: `${baseUrl}${guest}/cms/location/detail`
     },
+    getCourseList: { // 获取附近课程
+      method: 'get',
+      url: `${baseUrl}${guest}/course`
+    }
   },
   caseForCoffee: {
     getCaseTableList: { // 获取案场桌位列表

vue.config.js

@@ -23,8 +23,8 @@ module.exports = {
     proxy: {
       '/api': {
         // target: 'https://dp.huiju360.com.cn/hj_operations',
-        target: 'http://192.168.0.62:8080', // wf
-        // target: 'http://192.168.0.125:8080', // hyq
+        // target: 'http://192.168.0.62:8080', // wf
+        target: 'http://192.168.0.102:8080', // hyq
         // target: 'http://192.168.0.11', // ys
         // target: 'http://dev.ycjcjy.com', // frp
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
@@ -34,7 +34,7 @@ module.exports = {
       },
     },
     // compress: true,
-    devtool: 'source-map',
+    // devtool: 'source-map',
     disableHostCheck: true,   // That solved it
   }
 }