wangfei 6 年 前
コミット
562ab567bb
共有3 個のファイルを変更した63 個の追加83 個の削除を含む
  1. 31
    79
      src/pages/user/fiveA/index.vue
  2. 27
    3
      src/store/fiveA/fiveA.js
  3. 5
    1
      src/util/api.js

+ 31
- 79
src/pages/user/fiveA/index.vue ファイルの表示

@@ -1,36 +1,36 @@
1 1
 <template>
2 2
   <div class="mainPage flex-v">
3 3
     <nav class="flex-h">
4
-      <a class="flex-item" v-for="(item,index) in nav" :key="index" :class="{'active':index==active.index}" @click="changeLocation(item,index)">{{item.LocationName}}</a>
4
+      <a class="flex-item" v-for="(item,index) in locations" :key="index" :class="{'active':index==active.index}" @click="changeLocation(item,index)">{{item.LocationName}}</a>
5 5
     </nav>
6 6
     <div class="flex-item">
7 7
       <div>
8
-        <div v-for="(item,index) in nav" :key="index" v-if="index==active.index">
8
+        <div v-for="(item,index) in locations" :key="index" :hidden="index!==active.index">
9 9
           <div class="banner flex-h">
10 10
             <div class="flex-item">
11 11
               <swiper :options="swiperOption" ref="mySwiper">
12
-                <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
13
-                  <img :src='item.ImageUrl' class="cover" style="border-radius: .12rem;" alt=""  @click="jump(item)">
12
+                <swiper-slide class="swiper-slide" v-for="(banner,bindex) in item.Banners" :key="bindex">
13
+                  <img :src='banner.ImageUrl' class="cover" style="border-radius: .12rem;" alt=""  @click="jump(banner)">
14 14
                 </swiper-slide>
15 15
               </swiper>
16 16
             </div>
17 17
           </div>
18
-          <h5>结识更多朋友</h5>
18
+          <h5>{{item.Title}}</h5>
19 19
           <div class="courseList flex-h">
20 20
             <ul class="flex-item" v-if="!fiveANoData">
21
-              <router-link tag="li" v-for="(item,index) in courseList" :key="index" :to="{name:'majorProjectsDetail',query:{id: item.id}}">
22
-                <courseItem :data="item"></courseItem>
21
+              <router-link tag="li" v-for="(course,cindex) in item.Courses" :key="cindex" :to="{name:'majorProjectsDetail',query:{id: course.CourseId}}">
22
+                <courseItem :data="courseInfo(course)"></courseItem>
23 23
               </router-link>
24 24
             </ul>
25 25
             <span v-if="fiveANoData" style="width:100%;line-height:.3rem;display:block;text-align:center;color:#ccc;margin-bottom:.1rem;">暂无数据</span>
26 26
           </div>
27 27
           <router-link :to="{name:'',query:{}}" class="more">查看更多</router-link>
28 28
           <div style="width:100%;height:.1rem;background:#f8f8f8;margin:0 auto;"></div>
29
-          <h5>资讯</h5>
29
+          <h5>{{item.Consult}}</h5>
30 30
           <div class="newsList flex-h">
31 31
             <ul class="flex-item">
32
-              <router-link tag="li" :to="{name:'',query:{}}" v-for="(item,index) in newsList" :key="index">
33
-                <newsItem :data="item" @jump='jump'></newsItem>
32
+              <router-link tag="li" :to="{name:'',query:{}}" v-for="(newinfo,nindex) in item.News" :key="nindex">
33
+                <newsItem :data="newinfo" @jump='jump'></newsItem>
34 34
               </router-link>
35 35
             </ul>
36 36
           </div>
@@ -63,28 +63,16 @@ export default {
63 63
           disableOnInteraction: false,
64 64
         }
65 65
       },
66
-      nav: [{
67
-        LocationId: "selected",
68
-        LocationName: "精选"
69
-      }],
70
-      courseList: [], // 课程列表
71
-      newsList: [], // 资讯列表
66
+      locations: [],
72 67
     }
73 68
   },
74 69
   computed: {
75
-    ...mapState({
76
-      orgid: x => x.app.orgId,
77
-      navList: x => x.fiveA.nav,
78
-      banner: x => x.fiveA.banner,
79
-      cms: x => x.fiveA.cms,
80
-      fiveAList: x => x.fiveA.fiveAList,
81
-    }),
82 70
     MySwiper () {
83 71
       return this.$refs.mySwiper.swiper
84 72
     },
85 73
     MySwiperMsg () {
86 74
       return this.$refs.MySwiperMsg.swiper
87
-    }
75
+    },
88 76
   },
89 77
   components: {
90 78
     newsItem,
@@ -93,72 +81,36 @@ export default {
93 81
     courseItem,
94 82
   },
95 83
   created () {
96
-    this.getNav({ orgid: this.orgid, issys: '0' }).then(() => {
97
-      this.nav = this.nav.concat(this.navList)
98
-      if (this.$route.query.id !== undefined) {
99
-        for (var n = 0; n < this.nav.length; n++) {
100
-          if (this.nav[n].LocationId === this.$route.query.id) {
101
-            this.active.index = n
102
-            this.active.locationid = this.nav[n].LocationId
103
-          }
104
-        }
105
-      } else {
106
-        this.active.index = 0
107
-        this.active.locationid = this.nav[0].LocationId
108
-      }
109
-      this.getFiveAList({ locationid: this.active.locationid, orgid: this.orgid }).then((res) => {
110
-        // console.log(JSON.stringify(res))
111
-        this.courseList = []
112
-        if (res !== null) {
113
-          this.fiveANoData = false
114
-          this.returnCourseList(res)
115
-        } else {
116
-          this.fiveANoData = true
117
-        }
118
-      })
119
-      this.getFiveAInfo({ orgid: this.orgid, locationid: this.active.locationid }).then(() => {
120
-        this.newsList = this.cms
121
-      })
84
+    const _that = this
85
+    this.getLocationDetails().then(res => {
86
+      _that.locations = res
122 87
     })
123 88
   },
124 89
   methods: {
125 90
     ...mapFiveAActions([
126
-      'getNav',
127
-      'getFiveAInfo',
128
-      'getFiveAList',
91
+      'getLocationDetails',
129 92
     ]),
130 93
     changeLocation (item, index) {
131 94
       this.active.index = index
132
-      this.active.locationid = item.LocationId
133
-      this.getFiveAList({ locationid: this.active.locationid, orgid: this.orgid }).then((res) => {
134
-        // console.log(JSON.stringify(res))
135
-        this.courseList = []
136
-        if (res !== null) {
137
-          this.fiveANoData = false
138
-          this.returnCourseList(res)
139
-        } else {
140
-          this.fiveANoData = true
141
-        }
142
-      })
143
-      this.getFiveAInfo({ orgid: this.orgid, locationid: this.active.locationid }).then(() => {
144
-        this.newsList = this.cms
145
-      })
146 95
     },
147
-    returnCourseList (arr) { // 转换课程列表格式
148
-      for (var n = 0; n < arr.length; n++) {
149
-        this.courseList.push({
150
-          id: arr[n].CourseId,
151
-          title: arr[n].CourseName,
152
-          img: arr[n].CourseImg,
153
-          remark: arr[n].Remark,
154
-          address: arr[n].CaseInfo.CaseAddress,
155
-          tag: arr[n].CourseTags || [],
96
+    courseInfo (course) {
97
+      return {
98
+          id: course.CourseId,
99
+          title: course.CourseName,
100
+          img: course.CourseImg,
101
+          remark: course.Remark,
102
+          address: course.CaseAddress,
103
+          tag: course.CourseTags || [],
156 104
           courseType: '',
157
-          defaultPrice: arr[n].Price + '/节',
105
+          defaultPrice: course.Price + '/节',
158 106
           getWay: 'ticket'
159
-        })
160
-      }
107
+        }
161 108
     },
109
+    // returnCourseList (arr) { // 转换课程列表格式
110
+    //   for (var n = 0; n < arr.length; n++) {
111
+    //     this.courseList.push()
112
+    //   }
113
+    // },
162 114
     jump (item) {
163 115
       // console.log(item)
164 116
       item.ForwardType = item.ForwardType || ''

+ 27
- 3
src/store/fiveA/fiveA.js ファイルの表示

@@ -66,6 +66,18 @@ http.getCms = (data) => {
66 66
   })
67 67
 }
68 68
 
69
+http.getLocationDetails = (data) => {
70
+  return new Promise((resolve, reject) => {
71
+    Ajax(api.index.locationDetails.url, {
72
+      method: api.index.locationDetails.method,
73
+    }).then(res => {
74
+      resolve(res)
75
+    }).catch((err) => {
76
+      reject(err)
77
+    })
78
+  })
79
+}
80
+
69 81
 export default {
70 82
   namespaced: true,
71 83
   state: {
@@ -74,6 +86,7 @@ export default {
74 86
     list: [],
75 87
     cms: [],
76 88
     fiveAList: [],
89
+    locationDetails: [],
77 90
   },
78 91
   mutations: {
79 92
     setNav (state, data) {
@@ -91,6 +104,9 @@ export default {
91 104
     setFiveAList (state, data) {
92 105
       state.fiveAList = data
93 106
     },
107
+    setLocationDetails (state, data) {
108
+      state.locationDetails = data
109
+    }
94 110
   },
95 111
   actions: {
96 112
     getFiveAList (context, { ...payload }) { // 获取5A列表
@@ -116,15 +132,23 @@ export default {
116 132
     },
117 133
     getFiveAInfo (context, data) {
118 134
       // console.log(data)
119
-      // http.getBanner(data).then((res) => {
120
-      //   context.commit('setBanner', res)
121
-      // })
135
+      http.getBanner(data).then((res) => {
136
+        context.commit('setBanner', res)
137
+      })
122 138
       // http.getList(data).then((res) => {
123 139
       //   context.commit('setList', res)
124 140
       // })
125 141
       http.getCms(data).then((res) => {
126 142
         context.commit('setCms', res)
127 143
       })
144
+    },
145
+    getLocationDetails (context, data) {
146
+      return new Promise((resolve) => {
147
+        http.getLocationDetails(data).then((res) => {
148
+          context.commit('setLocationDetails', res)
149
+          resolve(res)
150
+        })
151
+      })
128 152
     }
129 153
   }
130 154
 }

+ 5
- 1
src/util/api.js ファイルの表示

@@ -28,7 +28,11 @@ const $api = {
28 28
     getFiveAList: { // 获取5A列表
29 29
       method: 'get',
30 30
       url: `${baseUrl}${guest}/cms/course`
31
-    }
31
+    },
32
+    locationDetails: {
33
+      method: 'get',
34
+      url: `${baseUrl}${guest}/cms/location/detail`
35
+    },
32 36
   },
33 37
   caseForCoffee: {
34 38
     getCaseTableList: { // 获取案场桌位列表