修改 优化页面

src/views/optimize/index.vue

@@ -4,12 +4,8 @@
     <!-- 专家介绍 -->
     <div class="expert-box">
       <van-swipe indicator-color="white">
-        <van-swipe-item v-for="(item, index) in expertList" :key="index" @click="goExperts(item.id)">
-          <img src="@/assets/optimize/images/3_08_2.png" />
-          <div class="summary">
-            <h4>{{ item.name }}</h4>
-            <p>{{ item.title }}</p>
-          </div>
+        <van-swipe-item v-for="(item, index) in expertImages" :key="index" @click="goExperts(item.id)">
+          <img v-lazy="item.image" />
           <!-- <p>了解详情</p> -->
         </van-swipe-item>
       </van-swipe>
@@ -18,13 +14,23 @@
     <div class="parenting">
       <div class="title">
         <p>养育话题</p>
-        <a href="/">查看更多</a>
+        <a>查看更多</a>
       </div>
       <ul>
-        <li v-for="(item, index) in talkList" :key="index" @click="goTalk(item.id)">
-          <img :src="item.image" :alt="item.name" />
-          <p>{{item.name}}</p>
-          <span>{{item.summary}}</span>
+        <li>
+          <img src="@/assets/optimize/images/3_20.png" alt="拖延症" />
+          <p>拖延症</p>
+          <span>L1入门 12分钟</span>
+        </li>
+        <li>
+          <img src="@/assets/optimize/images/3_22.png" alt="沉迷网络" />
+          <p>沉迷网络</p>
+          <span>L1入门 40分钟</span>
+        </li>
+        <li>
+          <img src="@/assets/optimize/images/3_24.png" alt="不自信" />
+          <p>不自信</p>
+          <span>L1入门 25分钟</span>
         </li>
       </ul>
     </div>
@@ -35,16 +41,27 @@
       </div>
       <div class="main">
         <ul>
-          <li v-for="(item, index) in campList" :key="index" @click="goTrainingcamp(item.id)">
+          <li @click="goTrainingcamp(1)">
             <div class="left">
-              <p>{{item.name}}</p>
-              <span>{{item.summary}}</span>
+              <p>情绪管理控制</p>
+              <span>入门易学</span>
               <div>
-                <h5>会员价 ¥{{item.vipPrice}}</h5>
-                <s>¥{{item.price}}</s>
+                <h5>会员价 ¥998</h5>
+                <s>¥1288</s>
               </div>
             </div>
-            <img :src="item.cover" />
+            <img src="@/assets/today/images/2_42.png" />
+          </li>
+          <li @click="goTrainingcamp(2)">
+            <div class="left">
+              <p>情绪管理控制</p>
+              <span>入门易学</span>
+              <div>
+                <h5>会员价 ¥998</h5>
+                <s>¥1288</s>
+              </div>
+            </div>
+            <img src="@/assets/today/images/2_42.png" />
           </li>
         </ul>
       </div>
@@ -56,29 +73,55 @@
       </div>
       <div class="select">
         <ul>
-          <li v-for="(item, index) in expertList" :key="index" @click="switchPsychology(item.id)">
+          <li>
+            <img src="@/assets/optimize/icons/3_55.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_58.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_62.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_66.png" alt="" />
+          </li>
+          <li>
             <img src="@/assets/optimize/icons/3_55.png" alt="" />
           </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_58.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_62.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_66.png" alt="" />
+          </li>
         </ul>
       </div>
       <div class="main">
         <div class="top">
-          <p>{{psychologyInfo.name}}</p>
-          <span>{{psychologyInfo.title}}</span>
+          <p>黛建松</p>
+          <span>清华大学心理学教授</span>
           <img src="@/assets/optimize/images/3_48.png" alt="" />
         </div>
         <div class="bottom">
-          <!-- <h4>700人次<span>咨询</span>，<span>从业</span>8年</h4> -->
-          <h4>{{psychologyInfo.seek}}</h4>
+          <h4>700人次<span>咨询</span>，<span>从业</span>8年</h4>
           <ul>
-            <li v-for="(item, index) in psychologyInfo.labels" :key="index">{{item}}</li>
+            <li>焦虑</li>
+            <li>抑郁</li>
+            <li>儿童心理</li>
+            <li>亲子关系</li>
+            <li>青春期心理</li>
+            <li>家庭关系</li>
+            <li>压力管理</li>
           </ul>
           <div>
             <h5>
               <img src="@/assets/optimize/icons/location.png" alt="" />
-              <span>{{psychologyInfo.address}}</span>
+              <span>郴州市苏仙区</span>
             </h5>
-            <p>¥{{psychologyInfo.price}}</p>
+            <p>¥2480</p>
           </div>
         </div>
       </div>
@@ -90,8 +133,8 @@
 
 <script>
 import Vue from 'vue';
-import APIOptimize from '@/api/optimize';
 import TabBar from '@/components/TabBar';
+import expertImage from '@/assets/optimize/images/3_08.png';
 import { Swipe, SwipeItem, Lazyload } from 'vant';
 Vue.use(Lazyload);
 Vue.use(Lazyload, {
@@ -106,45 +149,21 @@ export default {
   },
   data() {
     return {
-      expertList: [],
-      talkList: [],
-      campList: [],
-      psychologyInfo: {}
+      expertImages: [
+        {
+          id: 1,
+          image: expertImage
+        },
+        {
+          id: 2,
+          image: expertImage
+        }
+      ]
     };
   },
-  created() {
-    this.init();
-  },
+  created() {},
   mounted() {},
   methods: {
-    init() {
-      // 专家列表
-      APIOptimize.getExpertList(0)
-        .then(res => {
-          this.expertList = res.data.data
-          this.psychologyInfo = this.expertList[0]
-          this.psychologyInfo.labels = this.psychologyInfo.labels.split('|');
-        })
-        .catch(e => {
-          console.log(e);
-        })
-      // 专家详情
-      APIOptimize.getTalkList(0)
-        .then(res => {
-          this.talkList = res.data.data
-        })
-        .catch(e => {
-          console.log(e);
-        })
-      // 训练营列表
-      APIOptimize.getCampList(0)
-        .then(res => {
-          this.campList = res.data.data
-        })
-        .catch(e => {
-          console.log(e);
-        })
-    },
     goExperts(id) {
       this.$router.push({
         name: 'experts',
@@ -153,14 +172,6 @@ export default {
         }
       });
     },
-    goTalk(id) {
-      this.$router.push({
-        name: 'talk',
-        query: {
-          id: id
-        }
-      });
-    },
     goTrainingcamp(id) {
       this.$router.push({
         name: 'trainingcamp',
@@ -168,12 +179,6 @@ export default {
           id: id
         }
       });
-    },
-    switchPsychology(id) {
-      this.psychologyInfo = this.expertList.find(item => item.id == id);
-      if ( typeof this.psychologyInfo.labels == 'string' ) {
-        this.psychologyInfo.labels = this.psychologyInfo.labels.split('|');
-      }
     }
   }
 };