1

src/layout/common/top.vue

@@ -76,6 +76,9 @@ export default {
     /deep/.van-nav-bar__content {
       height: 40px;
     }
+    /deep/.van-icon {
+      top: 2px;
+    }
   }
   .thr {
     .back {

src/router/index.js

@@ -70,6 +70,11 @@ const routes = [
     meta: { title: '咨询服务', isleftarrow: false },
     component: () => import('../views/service/index.vue'),
   },
+  {
+    path: '/service/detail',
+    meta: { title: '文章正文', isleftarrow: false },
+    component: () => import('../views/service/detail.vue'),
+  },
   // 引用管理员
   ...admin,
 ];

src/views/service/detail.vue

@@ -0,0 +1,108 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <top topType="2" @upBack="upBack"></top>
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <el-col :span="24" class="one">
+            <info :form="form"></info>
+          </el-col>
+          <el-col :span="24" class="two">
+            <contact :contactInfo="form.contactInfo"></contact>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import info from './parts/info.vue';
+import contact from './parts/contact.vue';
+import top from '@/layout/common/top.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    info,
+    contact,
+    top,
+  },
+  data: function() {
+    return {
+      clientHeight: '',
+      // 信息详情
+      form: {
+        title: '测试信息',
+        origin: '信息来源',
+        renew_time: '2021-03-31 10:00:00',
+        content: '信息内容',
+        imgUrl: [
+          {
+            name: '第一张',
+            url: require('@a/news1.jpg'),
+          },
+          {
+            name: '第一张',
+            url: require('@a/news1.jpg'),
+          },
+          {
+            name: '第一张',
+            url: require('@a/news1.jpg'),
+          },
+        ],
+        fileUrl: require('@a/video1.mp4'),
+        contactInfo: {
+          name: '联系人',
+          phone: '17319450324',
+          email: 'guhongwei0324@163com',
+          address: '吉林省长春市朝阳区吉林省科技厅科研院1244号一号楼南小二楼',
+        },
+      },
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 40;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+  methods: {
+    search() {
+      console.log();
+    },
+    // 返回
+    upBack() {
+      this.$router.push({ path: '/service/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/service/index.vue

@@ -8,16 +8,16 @@
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
           <van-tabs v-model="active">
             <van-tab title="文字">
-              <list type="1" :list="oneList"></list>
+              <list type="1" :list="oneList" @detailBtn="detailBtn"></list>
             </van-tab>
             <van-tab title="图片">
-              <list type="2" :list="twoList"></list>
+              <list type="2" :list="twoList" @detailBtn="detailBtn"></list>
             </van-tab>
             <van-tab title="科普视频">
-              <list type="3" :list="thrList"></list>
+              <list type="3" :list="thrList" @detailBtn="detailBtn"></list>
             </van-tab>
             <van-tab title="培训视频">
-              <list type="4" :list="fourList"></list>
+              <list type="4" :list="fourList" @detailBtn="detailBtn"></list>
             </van-tab>
           </van-tabs>
         </el-col>
@@ -111,6 +111,10 @@ export default {
     search({ skip = 0, limit = 10, searchName, ...info } = {}) {
       console.log();
     },
+    // 文章正文
+    detailBtn(data) {
+      this.$router.push({ path: '/service/detail', query: { id: data.id } });
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/service/parts/contact.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="contact">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="title">
+          服务咨询联系方式：
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24" class="name">
+            联系人：<span>{{ contactInfo.name }}</span>
+          </el-col>
+          <el-col :span="24" class="name">
+            联系电话：<span>{{ contactInfo.phone }}</span>
+          </el-col>
+          <el-col :span="24" class="name">
+            电子邮箱：<span>{{ contactInfo.email }}</span>
+          </el-col>
+          <el-col :span="24" class="name">
+            联系地址：<span>{{ contactInfo.address }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'contact',
+  props: {
+    contactInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 0 10px 10px 10px;
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0 0 5px 0;
+  }
+  .info {
+    .name {
+      font-size: 16px;
+      margin: 0 0 5px 0;
+      color: #666;
+      span {
+        color: #000;
+      }
+    }
+  }
+}
+</style>

src/views/service/parts/info.vue

@@ -0,0 +1,112 @@
+<template>
+  <div id="info">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="title">
+            {{ form.title }}
+          </el-col>
+          <el-col :span="12" class="origin textOver">
+            {{ form.origin || '系统管理员' }}
+          </el-col>
+          <el-col :span="12" class="origin date textOver">
+            {{ form.renew_time || '暂无时间' }}
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="two">
+          {{ form.content }}
+        </el-col>
+        <el-col :span="24" class="image" v-if="form.imgUrl.length > 0">
+          <el-image :src="item.url" v-for="(item, index) in form.imgUrl" :key="index"></el-image>
+        </el-col>
+        <el-col :span="24" class="video" v-if="form.fileUrl">
+          <video
+            autoplay="autoplay"
+            controls="controls"
+            preload="meta"
+            x-webkit-airplay="true"
+            webkit-playsinline="true"
+            playsinline="true"
+            x5-video-player-type="h5"
+            x5-video-player-fullscreen="true"
+            controlsList="nodownload"
+            :src="form.fileUrl"
+            loop="loop"
+          >
+            <source src="movie.ogg" type="video/ogg" />
+            <source src="movie.mp4" type="video/mp4" />
+          </video>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'info',
+  props: {
+    form: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 0 10px;
+  .one {
+    margin: 0 0 10px 0;
+    border-bottom: 1px solid #f1f1f1;
+    padding: 10px 0;
+    .title {
+      text-align: center;
+      font-size: 16px;
+      margin: 0 0 5px 0;
+    }
+    .origin {
+      font-size: 14px;
+      color: #666;
+      text-align: right;
+      padding: 0 5px;
+    }
+    .date {
+      text-align: left;
+      padding: 2px 0 0 0;
+    }
+  }
+  .two {
+    font-size: 16px;
+    margin: 0 0 10px 0;
+  }
+  .image {
+    margin: 0 0 5px 0;
+    .el-image {
+      width: 100%;
+      height: 100%;
+      margin: 0 0 5px 0;
+    }
+  }
+  .video {
+    margin: 0 0 10px 0;
+    video {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #f1f1f1;
+    }
+  }
+}
+</style>

src/views/service/parts/list.vue

@@ -3,7 +3,7 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="one" v-if="type == '1'">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
             <el-col :span="24" class="title">
               {{ item.title }}
             </el-col>
@@ -21,7 +21,7 @@
           </el-col>
         </el-col>
         <el-col :span="24" class="two" v-else-if="type == '2'">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
             <el-col :span="17" class="title">
               <el-col :span="24" class="text">
                 {{ item.title }}
@@ -43,7 +43,7 @@
           </el-col>
         </el-col>
         <el-col :span="24" class="thr" v-else-if="type == '3'">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
             <el-col :span="24" class="title">
               {{ item.title }}
             </el-col>
@@ -72,7 +72,7 @@
           </el-col>
         </el-col>
         <el-col :span="24" class="thr" v-else-if="type == '4'">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
             <el-col :span="24" class="title">
               {{ item.title }}
             </el-col>
@@ -120,7 +120,11 @@ export default {
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    detailBtn(data) {
+      this.$emit('detailBtn', data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },