xcx

config/index.js

@@ -24,9 +24,9 @@ module.exports = {
     proxyTable: {
       '/api': {
         // target: 'https://dp.huiju360.com.cn/hj_operations',
-        // target: 'http://192.168.0.62:8080', //wf
+        target: 'http://192.168.0.62:8080', //wf
         // target: 'http://192.168.0.11:8080', //ys
-        target: 'http://dev.ycjcjy.com', //zys
+        // target: 'http://dev.ycjcjy.com', //zys
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
         // pathRewrite: {
         //   '^/api': '/api-v2/api'

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

@@ -46,7 +46,7 @@
     </div>
     <div class="flex-h">
       <ul class="projectList flex-item">
-        <router-link tag="li" :to="{ name:'majorProjects', query:{ CmsCaseId: item.CmsCaseId } }" v-for="(item,index) in project" :key="index">
+        <router-link tag="li" :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }" v-for="(item,index) in project" :key="index">
           <img :src='item.CaseImageUrl' :key="indexs" class="centerLabel cover" alt="">
         </router-link>
       </ul>
@@ -142,7 +142,6 @@ export default {
     ...mapIndexActions(['getIndexInfo']),
     ...mapIndexActions(['getIndexLocation']),
     jump (item) {
-      console.log(item)
       item.ForwardType = item.ForwardType || ''
       if (item.ForwardType === 'url') {
         window.location.href = '//' + item.ForwardUrl

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

@@ -1,7 +1,8 @@
 <template>
   <div class="mainPage">
     <div class="loading" v-if="isLoading">
-      <img :src='loading' alt="">
+      <!-- <img :src='loading' alt=""> -->
+      <div @click="bindMobile">请绑定手机号</div>
     </div>
     <div v-else>
       <div class="userTop_view" >
@@ -82,15 +83,13 @@ export default {
 
   },
   created () {
-    this.getUserInfo({ org: this.org }).then(() => {
+    this.getUserInfo({ org: this.org }).then((res) => {
       this.user = this.userInfo.customer
       this.AccountInfo = JSON.parse(this.user.AccountInfo)
       this.headimgurl = this.AccountInfo.headimgurl
-      if (this.user.Phone) {
-        this.isLoading = false
-      } else {
-        this.$router.push({ name: 'bindMobile' })
-      }
+      this.isLoading = false
+    }).catch((err) => {
+      console.log(err)
     })
   },
   methods: {
@@ -106,6 +105,9 @@ export default {
     },
     toCoupons () {
       this.$router.push({ name: 'coupons' })
+    },
+    bindMobile () {
+      this.$router.push({ name: 'bindMobile' })
     }
   }
 }

src/module/user/majorProjects/index.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="mainPage">
     <div class="banner">
-      <img src="" class="centerLabel cover" alt="">
+      <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>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
+    <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" :to="{name: 'majorProjectsDetail', query: {}}" v-for="(subItem,subIndex) in item.list" :key="subIndex" class="flex-h">
+            <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>
@@ -44,73 +50,143 @@
 </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,
-      }],
+      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: {},
+  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())

src/module/user/majorProjects/page.scss

@@ -11,6 +11,20 @@
     background: #eee;
     position: relative;
     overflow: hidden;
+    >div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      >div{
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+      }
+    }
   }
   p{
     width: 100%;

src/module/user/majorProjectsDetail/index.vue

@@ -3,22 +3,28 @@
     <div class="flex-item">
       <div class="content">
         <div class="banner">
-          <img src="" class="centerLabel cover" alt="">
+          <div class="scrollImg">
+            <swiper :options="swiperOption" ref="mySwiper">
+              <swiper-slide class="swiper-slide" v-for="(item,index) in courseDetail.CourseImgs" :key="index">
+                <img :src='item.ImgUrl' class="cover" alt="">
+              </swiper-slide>
+            </swiper>
+          </div>
           <div>
-            <span>课程名称</span>
+            <span>{{courseDetail.CourseName}}</span>
             <div>
-              <span>￥<em>199</em>.00起/课时</span>
-              <span>参与者<em>30</em>/40人</span>
+              <span>￥<em>{{courseDetail.Price}}</em>起/课时</span>
+              <span>参与者<em>{{courseDetail.SignupNum}}</em>/{{courseDetail.MaxNum}}人</span>
             </div>
           </div>
         </div>
         <div class="subContent time">
           <h5>时间</h5>
-          <span>2018年03月03日~2018年03月21日</span>
+          <span>{{returnDate(courseDetail.BeginDate)}}~{{returnDate(courseDetail.EndDate)}}</span>
           <div class="list flex-h">
             <div class="flex-item">
               <ul :class="{'show':showMoreCourse}">
-                <li v-for="(item,index) in 10" :key="index">03/21 周六 14:00~17:30</li>
+                <li v-for="(item,index) in courseTimeList" :key="index">{{returnCourseTime(item.BeginDate,item.EndDate)}}</li>
               </ul>
               <a class="moreCourse" @click="triggerCourseTime">
                 {{showMoreCourse ? '收起' : '更多'}}
@@ -35,7 +41,15 @@
             <div class="flex-item">
               <div class="img">
                 <router-link :to="{name: '', query: {}}">
-
+                  <img :src="courseDetail.CaseInfo.CaseIcon" class="centerLabel cover" alt="">
+                  <div class="flex-h">
+                    <i class="iconfont icon-dingwei"></i>
+                    <div class="flex-item">
+                      <div>
+                        <span>{{courseDetail.CaseInfo.CaseName}}（{{courseDetail.CaseInfo.CaseAddress}}）</span>
+                      </div>
+                    </div>
+                  </div>
                 </router-link>
               </div>
             </div>
@@ -46,27 +60,78 @@
     <div class="flex-h">
       <div class="flex-item">
         <div>
-          <span>总计￥<em>109</em>.00</span>
+          <span>总计￥<em>{{courseDetail.Price}}</em></span>
           <span>优惠券体验</span>
         </div>
       </div>
-      <router-link :to="{name: 'placeOrderForCourse', query: {}}">去购买</router-link>
+      <router-link :to="{name: 'placeOrderForCourse', query: {id: courseDetail.CourseId}}">去购买</router-link>
     </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')
 
 export default {
   name: '',
   data () {
     return {
+      swiperOption: {
+        observer: true,
+        autoplay: {
+          disableOnInteraction: false,
+        }
+      },
       showMoreCourse: false, // 显隐更多课程时间
+      courseTimeList: [], // 课程时间
     }
   },
-  computed: {},
-  created () { },
+  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({
+      courseDetail: x => x.courseDetail
+    }),
+    MySwiper () {
+      return this.$refs.mySwiper.swiper
+    },
+  },
+  components: {
+    swiper,
+    swiperSlide,
+  },
+  created () {
+    this.getCourseDetailInfo({ id: this.$route.query.id }).then((res) => {
+      var arr = res.CourseDetail
+      this.courseTimeList = arr.sort(function (a, b) { return new Date(a.BeginDate).getTime() > new Date(b.BeginDate).getTime() ? 1 : -1 })
+      console.log(JSON.stringify(this.courseTimeList))
+    })
+  },
   methods: {
+    ...mapProjectActions([
+      'getCourseDetailInfo',
+    ]),
+    returnCourseTime (val,endVal) { // 返回课时时间
+      val = new Date(val)
+      endVal = new Date(endVal)
+      return this.returnNum(val.getMonth() + 1) + '/' + this.returnNum(val.getDate()) + ' 周' + '日一二三四五六'.split('')[new Date(val).getDay()] + ' ' + this.returnNum(val.getHours()) + ':' + this.returnNum(val.getMinutes()) + '~' + this.returnNum(endVal.getHours()) + ':' + this.returnNum(endVal.getMinutes())
+    },
+    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()) + '日'
+    },
     triggerCourseTime () { // 显隐更多课程时间
       this.showMoreCourse = !this.showMoreCourse
     },

src/module/user/majorProjectsDetail/page.scss

@@ -18,10 +18,23 @@
         background: #eee;
         position: relative;
         overflow: hidden;
-        img{
+        &>div.scrollImg{
+          width: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          overflow: hidden;
           z-index: 1;
+          >div{
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+          }
         }
-        &>div{
+        &>div.scrollImg+div{
           width: 100%;
           position: absolute;
           left: 0;
@@ -150,6 +163,42 @@
                 border-radius: .06rem;
                 position: relative;
                 overflow: hidden;
+                >div{
+                  width: 100%;
+                  position: absolute;
+                  left: 0;
+                  bottom: 0;
+                  overflow: hidden;
+                  background: rgba(0,0,0,.3);
+                  z-index: 2;
+                  *{
+                    font-size: .13rem;
+                    color: #fff;
+                  }
+                  i{
+                    margin-left: .1rem;
+                    line-height: .3rem;
+                  }
+                  >div{
+                    margin: 0 .1rem 0 .05rem;
+                    >div{
+                      width: 100%;
+                      position: relative;
+                      overflow: hidden;
+                      >span{
+                        width: 100%;
+                        display: block;
+                        line-height: .3rem;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                      }
+                    }
+                  }
+                }
+                img{
+                  z-index: 1;
+                }
               }
             }
           }

src/module/user/placeOrderForCourse/index.vue

@@ -3,48 +3,89 @@
     <div class="flex-item">
       <div>
         <h4>订单信息</h4>
-        <ul>
-          <li class="flex-h">
-            <div class="flex-item">
-              <div>
-                <span>精品课程名称</span>
+        <div class="list flex-h">
+          <div class="flex-item">
+            <ul>
+              <li class="flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>精品课程名称</span>
+                  </div>
+                </div>
+                <span>满手</span>
+              </li>
+              <li class="flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>预计开班时间</span>
+                  </div>
+                </div>
+                <span>满手</span>
+              </li>
+              <li class="flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>时间描述</span>
+                  </div>
+                </div>
+                <span>满手</span>
+              </li>
+              <li class="flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>地点</span>
+                  </div>
+                </div>
+                <span>满手</span>
+              </li>
+              <li class="flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>价格</span>
+                  </div>
+                </div>
+                <span>满手</span>
+              </li>
+            </ul>
+            <div class="selectTicket">
+              <div class="flex-h" @click="showLayer = true">
+                <div class="flex-item">
+                  <div>
+                    <span>优惠信息</span>
+                  </div>
+                </div>
+                <span>{{postData.CouponId == '' ? '暂未选择优惠券' : postData.CouponName}}</span>
+                <i class="iconfont icon-jiantou-right"></i>
               </div>
-            </div>
-            <span>满手</span>
-          </li>
-          <li class="flex-h">
-            <div class="flex-item">
-              <div>
-                <span>预计开班时间</span>
-              </div>
-            </div>
-            <span>满手</span>
-          </li>
-          <li class="flex-h">
-            <div class="flex-item">
-              <div>
-                <span>时间描述</span>
+              <div class="flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>优惠券</span>
+                  </div>
+                </div>
+                <span>{{columns.length > 1 ? (columns.length-1) + '张可用优惠券' : '暂无优惠券'}}</span>
               </div>
             </div>
-            <span>满手</span>
-          </li>
-          <li class="flex-h">
-            <div class="flex-item">
-              <div>
-                <span>地点</span>
+            <div class="agreement">
+              <span>购前需知</span>
+              <div class="flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>同意《银城精品团课服务协议》</span>
+                  </div>
+                </div>
+                <i class="iconfont icon-gouxuan" :class="{'active': agreementOff}" @click="agreement"></i>
               </div>
             </div>
-            <span>满手</span>
-          </li>
-          <li class="flex-h">
-            <div class="flex-item">
-              <div>
-                <span>价格</span>
-              </div>
+            <div class="protocol">
+              <div>1、协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容</div>
+              <div>2、协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容</div>
+              <div>3、协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容</div>
+              <div>4、协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容</div>
+              <div>5、协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容</div>
             </div>
-            <span>满手</span>
-          </li>
-        </ul>
+          </div>
+        </div>
       </div>
     </div>
     <div class="flex-h">
@@ -55,6 +96,18 @@
       </div>
       <router-link :to="{name: '', query: {}}">确认订单</router-link>
     </div>
+    <div class="layer" :class="{'show': showLayer}"> 
+      <div>
+        <van-picker
+          show-toolbar
+          title="选择优惠券"
+          :columns="columns"
+          @cancel="onCancel"
+          @confirm="onConfirm"
+          value-key="value"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -64,13 +117,41 @@ export default {
   name: '',
   data () {
     return {
-      
+      agreementOff: false, // 是否同意协议
+      postData: {
+        CouponId: '',
+        CouponName: '',
+      },
+      showLayer: false, // 显隐选择优惠券弹窗
+      columns: [{ // 优惠券列表
+        value: '不选择优惠券',
+        id: '',
+      }, {
+        value: '优惠券1',
+        id: '1',
+      }, {
+        value: '优惠券2',
+        id: '2',
+      }, {
+        value: '优惠券3',
+        id: '3',
+      }],
     }
   },
   computed: {},
   created () { },
   methods: {
-    
+    onConfirm (value, index) {
+      this.postData.CouponId = value.id
+      this.postData.CouponName = value.value
+      this.showLayer = false
+    },
+    onCancel () {
+      this.showLayer = false
+    },
+    agreement () { // 同意协议
+      this.agreementOff = !this.agreementOff
+    },
   }
 }
 </script>

src/module/user/placeOrderForCourse/page.scss

@@ -11,7 +11,132 @@
       -webkit-overflow-scrolling: touch;
       transform: translateZ(0);
       -webkit-transform: translateZ(0);
-      
+      >h4{
+        width: 100%;
+        line-height: .3rem;
+        font-size: .16rem;
+        text-indent: .2rem;
+        margin-top: .15rem;
+      }
+      .list{
+        >div{
+          margin: 0 .2rem;
+          >ul{
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            >li{
+              padding: .09rem 0;
+              border-bottom: .01rem solid #eee;
+              span{
+                line-height: .24rem;
+                font-size: .14rem;
+              }
+              >div{
+                margin-right: .1rem;
+                >div{
+                  width: 100%;
+                  position: relative;
+                  overflow: hidden;
+                  span{
+                    width: 100%;
+                    display: block;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .selectTicket{
+        padding: .15rem 0;
+        border-bottom: .01rem solid #eee;
+        >div{
+          >div{
+            >div{
+              width: 100%;
+              position: relative;
+              overflow: hidden;
+              >span{
+                width: 100%;
+                display: block;
+                line-height: .32rem;
+                font-size: .16rem;
+                font-weight: bolder;
+              }
+            }
+          }
+          >*{
+            line-height: .32rem;
+            font-size: .13rem;
+            margin-left: .1rem;
+          }
+          >div{
+            margin-left: 0;
+          }
+        }
+        >div:nth-child(2){
+          >div{
+            >div{
+              >span{
+                line-height: .26rem;
+                font-size: .13rem;
+                color: #666;
+                font-weight: normal;
+              }
+            }
+          }
+          >span{
+            color: #ccc;
+          }
+        }
+      }
+      .agreement{
+        margin-top: .1rem;
+        padding: .1rem 0;
+        border-bottom: .01rem solid #eee;
+        >span{
+          font-weight: bolder;
+          line-height: .32rem;
+          font-size: .16rem;
+        }
+        >div{
+          >div{
+            >div{
+              width: 100%;
+              position: relative;
+              overflow: hidden;
+              >span{
+                width: 100%;
+                display: block;
+                line-height: .3rem;
+                font-size: .13rem;
+                color: #fb3f19;
+              }
+            }
+          }
+        }
+        i{
+          font-size: .2rem;
+          line-height: .3rem;
+          color: #ccc;
+          &.active{
+            color: #fb3f19;
+          }
+        }
+      }
+      .protocol{
+        padding: .1rem 0;
+        >*{
+          line-height: .2rem;
+          font-size: .12rem;
+          color: #666;
+          text-align: justify;
+        }
+      }
     }
   }
   &>div.flex-h{
@@ -25,7 +150,7 @@
       span{
         width: 100%;
         display: inline-block;
-        text-align: center;
+        text-indent: .2rem;
         text-decoration: line-through;
         font-size: .11rem;
         em{
@@ -52,4 +177,24 @@
       background: #fc6243;
     }
   }
+  .layer{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    background: rgba(0,0,0,.5);
+    display: none;
+    &.show{
+      display: block;
+    }
+    >div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      overflow: hidden;
+    }
+  }
 }

src/store/index.js

@@ -14,6 +14,7 @@ export const modules = {
   index: () => require('./index/index').default,
   fiveA: () => require('./fiveA/fiveA').default,
   userCenter: () => require('./userCenter/userCenter').default,
+  majorProjects: () => require('./majorProjects/majorProjects').default,
 }
 
 Object.keys(modules).forEach((modKey) => {

src/store/majorProjects/majorProjects.js

@@ -0,0 +1,51 @@
+import Ajax from '../../util/ajax'
+import api from '../../util/api'
+
+// 请求数据
+export default {
+  namespaced: true,
+  state: {
+    projectInfo: {},
+    courseDetail: {},
+  },
+  mutations: {
+    setPageInfo (state, data) { // 设置页面信息
+      state.projectInfo = data
+    },
+    setCourseDetailInfo (state, data) { // 设置课程详情信息
+      state.courseDetail = data
+    }
+  },
+  actions: {
+    getProjectInfo (context, { id }) { // 获取课程列表
+      return new Promise((resolve) => {
+        Ajax(api.majorProjects.getCourseList.url, {
+          method: api.majorProjects.getCourseList.method,
+          urlData: {
+            id,
+          }
+        }).then(res => {
+          context.commit('setPageInfo', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getCourseDetailInfo (context, { id }) { // 获取课程列表
+      return new Promise((resolve) => {
+        Ajax(api.majorProjects.getCourseDetail.url, {
+          method: api.majorProjects.getCourseDetail.method,
+          urlData: {
+            id,
+          }
+        }).then(res => {
+          context.commit('setCourseDetailInfo', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+  }
+}

src/util/ajax.js

@@ -15,6 +15,7 @@ const Axios = axios.create({
 
 Axios.interceptors.request.use((config) => {
   // 处理请求data,若为get请求，拼到url后面，若为post请求，直接添加到body中
+  config.urlData = {...config.urlData, org: 1}
   let urlData = qs.stringify(config.urlData)
   let queryData = qs.stringify(config.queryData)
   // 判断是通过斜杠传参还是通过query传参
@@ -25,10 +26,9 @@ Axios.interceptors.request.use((config) => {
         return url.replace(re, config.urlData[k])
       }, config.url)
     }
-  } else {
-    if (queryData) {
-      config.url += '?' + queryData
-    }
+  }
+  if (queryData) {
+    config.url += '?' + queryData
   }
   let fm = new FormData()
   for (let k in config.data) {
@@ -52,7 +52,7 @@ const ajax = (...args) => {
       if (code === 200) {
         resolve(result)
       } else if (code === 401) {
-        // router.push({ name: 'login' })
+        // reject(code)
       } else {
         Message({
           message: message,

src/util/api.js

@@ -1,7 +1,7 @@
 const baseUrl = '/api'
-const wechat = '/wechat'
-const guest = '/guest'
-const common = '/common'
+const wechat = '/wechat/:org'
+const guest = '/guest/:org'
+const common = '/common/:org'
 
 const $api = {
   index: { // 首页
@@ -26,6 +26,16 @@ const $api = {
       url: `${baseUrl}${guest}/cms/news`
     }
   },
+  majorProjects: { // 项目专题
+    getCourseList: { // 获取课程列表
+      method: 'get',
+      url: `${baseUrl}${guest}/cms/case/:id`
+    },
+    getCourseDetail: { // 获取课程详情
+      method: 'get',
+      url: `${baseUrl}${guest}/course/:id`
+    },
+  },
   user: {
     info: { // 获取用户信息
       method: 'get',