优化页面（专家介绍、养育话题）模块对接接口

src/api/optimize.js

@@ -1,14 +1,35 @@
 import request from '@/config/request_java';
 
 export const APIOptimize = {
-    getExpertList       // 获取专家列表
+    getExpertList,       // 获取专家列表
+    getTalkList,         // 获取养育话题列表
+    addTalkLabels        // 新增养育话题标签
 };
 export default APIOptimize;
 
 // 获取专家列表
-function getExpertList() {
+function getExpertList(id) {
   return request({
     url: `/java_api/optimize/getExpertList`,
-    method: 'get'
+    method: 'get',
+    params: { id }
   });
-}
+}
+
+// 获取养育话题列表
+function getTalkList(id) {
+    return request({
+      url: `/java_api/optimize/getTalkList`,
+      method: 'get',
+      params: { id }
+    });
+  }
+
+// 新增养育话题标签
+function addTalkLabels(params) {
+    return request({
+      url: `/java_api/optimize/addTalkLabels`,
+      method: 'post',
+      data: params
+    });
+  }

src/router/router.config.js

@@ -313,6 +313,12 @@ export const constantRouterMap = [
         name: 'questionnaire',
         component: () => import('@/views/questionnaire/index'),
         meta: { title: '问卷', keepAlive: false }
+      },
+      {
+        path: '/talk',
+        name: 'talk',
+        component: () => import('@/views/optimize/talk'),
+        meta: { title: '养育话题', keepAlive: false }
       }
     ]
   }

src/views/optimize/experts.vue

@@ -10,25 +10,19 @@
     </van-nav-bar>
     <div class="main">
       <div class="introduce">
-        <h3>黛建松</h3>
-        <span>清华大学心理学教授儿童心理问题咨询治疗经验。</span>
-        <p><i>700人次</i>咨询<br />从业<i>30年</i></p>
+        <h3>{{info.name}}</h3>
+        <span>{{info.summary}}</span>
+        <!-- <p><i>700人次</i>咨询<br />从业<i>30年</i></p> -->
+        <p>{{info.seek}}</p>
         <img src="@/assets/optimize/images/3_48.png" alt="" />
       </div>
       <div class="title">
         <van-checkbox-group v-model="result">
-          <van-checkbox name="1">北京协和医学院专家</van-checkbox>
-          <van-checkbox name="1">儿童青少年心理权威专家</van-checkbox>
-          <van-checkbox name="1">北京云帆启迪心理咨询中心主任</van-checkbox>
+          <van-checkbox v-for="(item, index) in info.titles" :key="index" name="1">{{item}}</van-checkbox>
         </van-checkbox-group>
       </div>
       <div class="summary">
-        <p>
-          她提倡“适应力教育和能力训练”，训练孩子的学习能力、良好 的情绪、人际关系以及强大的适应力。30年来帮助数万个家庭
-          走出孩子成长中的困境，引领家长成为孩子成长的好教练。她
-          著有《让孩子学习上瘾的十大法则》、《不抢跑也能超越》等多本
-          畅销书。在《人民日报》、《北京青年报》等主流媒体发表上百篇科 普文章。担任中央电视台多档节目特邀专家。
-        </p>
+        <p>{{ info.introduce }}</p>
       </div>
     </div>
     <!-- 底部导航 -->
@@ -38,6 +32,7 @@
 
 <script>
 import TabBar from '@/components/TabBar';
+import APIOptimize from '@/api/optimize';
 import { Checkbox, CheckboxGroup } from 'vant';
 export default {
   components: {
@@ -47,19 +42,32 @@ export default {
   },
   data() {
     return {
-      result: ['1']
+      result: ['1'],
+      info: {}
     };
   },
   created() {
-    console.log(this.$route.query);
+    this.init(this.$route.query.id);
   },
   mounted() {},
   methods: {
-    //   返回
     onNavBack() {
       this.$router.push({
         name: 'Optimize'
       });
+    },
+    init(id) {
+      // 专家详情
+      APIOptimize.getExpertList(id)
+        .then(res => {
+          if ( res.data.data.length != 0 ) {
+            this.info = res.data.data[0]
+            this.info.titles = this.info.titles.split('|')
+          }
+        })
+        .catch(e => {
+          console.log(e);
+        })
     }
   }
 };

src/views/optimize/index.vue

@@ -4,8 +4,12 @@
     <!-- 专家介绍 -->
     <div class="expert-box">
       <van-swipe indicator-color="white">
-        <van-swipe-item v-for="(item, index) in expertImages" :key="index" @click="goExperts(item.id)">
-          <img v-lazy="item.image" />
+        <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>
           <!-- <p>了解详情</p> -->
         </van-swipe-item>
       </van-swipe>
@@ -17,20 +21,10 @@
         <a href="/">查看更多</a>
       </div>
       <ul>
-        <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 v-for="(item, index) in talkList" :key="index" @click="goTalk(item.id)">
+          <img src="@/assets/optimize/images/3_20.png" :alt="item.name" />
+          <p>{{item.name}}</p>
+          <span>{{item.summary}}</span>
         </li>
       </ul>
     </div>
@@ -135,7 +129,6 @@
 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, {
@@ -150,16 +143,8 @@ export default {
   },
   data() {
     return {
-      expertImages: [
-        {
-          id: 1,
-          image: expertImage
-        },
-        {
-          id: 2,
-          image: expertImage
-        }
-      ]
+      expertList: [],
+      talkList: []
     };
   },
   created() {
@@ -169,9 +154,17 @@ export default {
   methods: {
     init() {
       // 专家列表
-      APIOptimize.getExpertList()
+      APIOptimize.getExpertList(0)
         .then(res => {
-          console.log(res);
+          this.expertList = res.data.data
+        })
+        .catch(e => {
+          console.log(e);
+        })
+      // 专家详情
+      APIOptimize.getTalkList(0)
+        .then(res => {
+          this.talkList = res.data.data
         })
         .catch(e => {
           console.log(e);
@@ -185,6 +178,14 @@ export default {
         }
       });
     },
+    goTalk(id) {
+      this.$router.push({
+        name: 'talk',
+        query: {
+          id: id
+        }
+      });
+    },
     goTrainingcamp(id) {
       this.$router.push({
         name: 'trainingcamp',

src/views/optimize/scss/experts.scss

@@ -51,7 +51,7 @@
                 .van-checkbox {
                     pointer-events: none;
                     font-size: 16px;
-                    color: #fff;
+                    color: #fff !important;
                     & + .van-checkbox {
                         margin-top: 10px;
                     }

src/views/optimize/scss/index.scss

@@ -11,19 +11,36 @@
             height: 100%;
             object-fit: contain;
         }
-        .van-swipe-item {
-            position: relative;
+        .summary {
+            position: absolute;
+            top: 30%;
+            left: 20px;
+            h4 {
+                font-size: 52px;
+                color: #fff;
+                font-weight: bold;
+            }
             p {
-                position: absolute;
-                right: 40px;
-                bottom: 40px;
                 font-size: 24px;
                 color: #fff;
-                padding: 10px 18px 10px 15px;
-                background-color: #000;
-                border-radius: 10px;
+                font-weight: normal;
+                margin-top: 10px;
+                max-width: 300px;
             }
         }
+        .van-swipe-item {
+            position: relative;
+            // p {
+            //     position: absolute;
+            //     right: 40px;
+            //     bottom: 40px;
+            //     font-size: 24px;
+            //     color: #fff;
+            //     padding: 10px 18px 10px 15px;
+            //     background-color: #000;
+            //     border-radius: 10px;
+            // }
+        }
     }
     .title {
         display: flex;

src/views/optimize/scss/talk.scss

@@ -0,0 +1,40 @@
+.talk {
+    position: relative;
+    min-height: 100vh;
+    .main {
+        padding: 40px 32px;
+        video {
+            width: 100%;
+            height: 520px;
+            object-fit: contain;
+            background-color: #000;
+            border-radius: 30px;
+        }
+        .message {
+            span {
+                display: inline-block;
+                margin: 6px 8px;
+                padding: 8px 24px;
+            }
+        }
+    }
+    .input {
+        width: 100%;
+        position: fixed;
+        bottom: 10px;
+        display: flex;
+        align-items: center;
+        align-content: space-between;
+        justify-content: space-between;
+        .van-search {
+            width: 100%;
+            background-color: transparent;
+            > div {
+                border: 1px solid grey;
+            }
+        }
+        .van-button {
+            margin-right: 12px;
+        }
+    }
+}

src/views/optimize/talk.vue

@@ -0,0 +1,99 @@
+<!-- 养育话题 -->
+<template>
+  <div class="talk">
+    <!-- 养育话题 -->
+    <van-nav-bar :title="info.name" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回">
+        <template #left>
+            <van-icon name="arrow-left" size="24" style="padding: 0" />
+            <span>返回</span>
+        </template>
+    </van-nav-bar>
+    <div class="main">
+        <!-- 视频 -->
+        <video :src="info.url" controls>
+            你的浏览器不支持 <code>video</code> 标签。
+        </video>
+        <!-- 留言 -->
+        <div class="message">
+            <van-tag 
+                round 
+                type="primary" 
+                size="large" 
+                color="#179b3b"
+                v-for="(item, index) in info.labels" 
+                :key="index"
+            >
+                {{ item }}
+            </van-tag>
+        </div>
+    </div>
+    <!-- 提交 -->
+    <div class="input">
+        <van-search
+            v-model="value"
+            left-icon="chat-o"
+            shape="round"
+            placeholder="说点什么"
+        />
+        <van-button color="#179b3b" round type="info" size="small" icon="arrow-up" @click="submit" />
+    </div>
+  </div>
+</template>
+
+<script>
+import APIOptimize from '@/api/optimize';
+import { Search } from 'vant';
+export default {
+    components: {
+        // TabBar
+        [Search.name]: Search
+    },
+    data() {
+        return {
+            info: {},
+            value: ''
+        };
+    },
+    created() {
+        this.init(this.$route.query.id);
+    },
+    mounted() {},
+    methods: {
+        onNavBack() {
+            this.$router.push({
+                name: 'Optimize'
+            });
+        },
+        init(id) {
+            // 养育话题详情
+            APIOptimize.getTalkList(id)
+                .then(res => {
+                    if ( res.data.data.length != 0 ) {
+                        this.info = res.data.data[0]
+                        this.info.labels = this.info.labels.split('|')
+                    }
+                })
+                .catch(e => {
+                    console.log(e);
+                })
+        },
+        submit() {
+            if ( this.value !== '' ) {
+                let labels = this.info.labels.join('|')
+                labels += "|" + this.value
+                this.value = "";
+                let id = Number(this.$route.query.id);
+                APIOptimize.addTalkLabels({ 'id': id, 'labels': labels }).then(res => {
+                    console.log(res)
+                    this.init(this.$route.query.id);
+                });
+            } else {
+                this.$notify({ type: 'warning', message: '内容不能为空' });
+            }
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+    @import './scss/talk.scss';
+</style>