1

src/router/index.js

@@ -19,15 +19,20 @@ const routes = [
   },
   {
     path: '/refute/detail',
-    meta: { title: '文章详情', isleftarrow: false },
+    meta: { title: '文章正文', isleftarrow: false },
     component: () => import('../views/refute/detail.vue'),
   },
   // 社区话题
   {
     path: '/community/index',
-    meta: { title: 'community_index', isleftarrow: false },
+    meta: { title: '社区话题', isleftarrow: false },
     component: () => import('../views/community/index.vue'),
   },
+  {
+    path: '/community/detail',
+    meta: { title: '话题正文', isleftarrow: false },
+    component: () => import('../views/community/detail.vue'),
+  },
   // 咨询服务
   {
     path: '/service/index',

src/views/community/detail.vue

@@ -0,0 +1,151 @@
+<template>
+  <div id="detail">
+    <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 :detailInfo="detailInfo"></info>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-tabs v-model="active">
+              <el-tab-pane label="用户评论" name="first">
+                <comment :list="commentList"></comment>
+              </el-tab-pane>
+            </el-tabs>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <el-col :span="8" class="button"><i class="el-icon-position"></i>分享</el-col>
+          <el-col :span="8" class="button"><i class="el-icon-chat-line-round"></i>评论</el-col>
+          <el-col :span="8" class="button"><i class="el-icon-thumb"></i>点赞</el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import info from './parts/info.vue';
+import comment from './parts/comment.vue';
+import top from '@/layout/common/top.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    info,
+    comment,
+    top,
+  },
+  data: function() {
+    return {
+      clientHeight: '',
+      // 话题正文
+      detailInfo: {
+        content:
+          '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容',
+        origin: '文章来源',
+        renew_time: '2021-02-01 10:00:00',
+        type: '0',
+        imgUrl: [
+          { name: '图片名称', url: require('@a/news1.jpg') },
+          { name: '图片名称1', url: require('@a/news1.jpg') },
+          { name: '图片名称2', url: require('@a/news1.jpg') },
+        ],
+        fileUrl: require('@a/video1.mp4'),
+      },
+      // 评论
+      active: 'first',
+      // 用户评论列表
+      commentList: [
+        {
+          icon: require('@a/system.png'),
+          name: '测试用户',
+          content: '你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好',
+          renew_time: '2021-02-01 10:00:00',
+        },
+        {
+          icon: require('@a/system.png'),
+          name: '测试用户1',
+          content: '你好1',
+          renew_time: '2021-02-01 10:00:00',
+        },
+        {
+          icon: require('@a/system.png'),
+          name: '测试用户2',
+          content: '你好2',
+          renew_time: '2021-02-01 10:00:00',
+        },
+      ],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 80;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+  methods: {
+    search({ skip = 0, limit = 10, ...info } = {}) {},
+    // 返回上一页
+    upBack() {
+      this.$router.push({ path: '/community/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  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;
+    background-color: #f1f1f1;
+    .one {
+      background-color: #ffffff;
+      margin: 6px 0;
+    }
+    .two {
+      padding: 0 10px;
+      min-height: 50px;
+      background-color: #ffffff;
+      /deep/.el-tabs__header {
+        margin: 0;
+      }
+    }
+  }
+  .foot {
+    height: 40px;
+    overflow: hidden;
+    background-color: #ffffff;
+    border-top: 1px solid #f1f1f1;
+    padding: 10px 0;
+    .button {
+      text-align: center;
+      height: 20px;
+      border-right: 1px solid #ccc;
+      line-height: 20px;
+      font-size: 14px;
+    }
+    .button:last-child {
+      border-right: none;
+    }
+  }
+}
+</style>

src/views/community/index.vue

@@ -6,7 +6,7 @@
           <top topType="1" @search="search"></top>
         </el-col>
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <list :list="communityList"></list>
+          <list :list="communityList" @detailBtn="detailBtn"></list>
         </el-col>
         <el-col :span="24" class="foot">
           <page limit="5" :total="total" @search="search"></page>
@@ -38,7 +38,7 @@ export default {
             '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容',
           origin: '文章来源',
           renew_time: '2021-02-01 10:00:00',
-          type: '1',
+          type: '0',
           imgUrl: [
             { name: '图片名称', url: require('@a/news1.jpg') },
             // { name: '图片名称1', url: require('@a/news1.jpg') },
@@ -93,6 +93,10 @@ export default {
     search({ skip = 0, limit = 10, searchName, ...info } = {}) {
       console.log(searchName);
     },
+    // 话题正文
+    detailBtn(data) {
+      this.$router.push({ path: '/community/detail', query: { id: data.id } });
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -120,6 +124,7 @@ export default {
   .info {
     overflow-x: hidden;
     overflow-y: auto;
+    background-color: #f1f1f1;
   }
   .foot {
     height: 40px;

src/views/community/parts/comment.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="comment">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="4" class="left">
+            <el-image :src="item.icon"></el-image>
+          </el-col>
+          <el-col :span="20" class="right">
+            <p>{{ item.name }}</p>
+            <p>{{ item.content }}</p>
+            <p>{{ item.renew_time }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'comment',
+  props: {
+    list: { type: Array },
+  },
+  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 {
+  .list {
+    border-bottom: 1px solid #f1f1f1;
+    padding: 8px 0;
+    .left {
+      text-align: center;
+      .el-image {
+        width: 40px;
+        height: 40px;
+      }
+    }
+    .right {
+      p:nth-child(1) {
+        color: #666;
+        font-size: 14px;
+      }
+      p:nth-child(3) {
+        font-size: 12px;
+        color: #666;
+        margin: 5px 0 0 0;
+      }
+    }
+  }
+  .list:last-child {
+    border-bottom: none;
+  }
+}
+</style>

src/views/community/parts/info.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="info">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="4" class="left">
+            <el-image :src="system"></el-image>
+          </el-col>
+          <el-col :span="20" class="right">
+            <p>系统管理员</p>
+            <p>
+              <span>{{ detailInfo.renew_time || '暂无时间' }}</span>
+              <span>来源:{{ detailInfo.origin || '系统管理员' }}</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="two">
+          <el-col :span="24" class="content">
+            {{ detailInfo.content }}
+          </el-col>
+          <el-col :span="24" class="image" v-if="detailInfo.type == '0'">
+            <img :src="tag.url" v-for="(tag, index) in detailInfo.imgUrl" :key="index" :style="{ width: detailInfo.imgUrl.length == 1 ? '100%' : '48%' }" />
+          </el-col>
+          <el-col :span="24" class="video" v-else-if="detailInfo.type == '1'">
+            <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="detailInfo.fileUrl"
+              loop="loop"
+            >
+              <source src="movie.ogg" type="video/ogg" />
+              <source src="movie.mp4" type="video/mp4" />
+            </video>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'info',
+  props: {
+    detailInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {
+      system: require('@a/system.png'),
+    };
+  },
+  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 {
+  .one {
+    padding: 6px 0;
+    .left {
+      text-align: center;
+      .el-image {
+        width: 40px;
+        height: 40px;
+      }
+    }
+    .right {
+      p:nth-child(1) {
+        font-size: 14px;
+      }
+      p:nth-child(2) {
+        font-size: 12px;
+        margin: 5px 0 0 0;
+        color: #666;
+        span:nth-child(2) {
+          padding: 0 5px;
+        }
+      }
+    }
+  }
+  .two {
+    padding: 0 10px;
+    .content {
+      font-size: 16px;
+      margin: 0 0 5px 0;
+    }
+    .image {
+      margin: 0 0 5px 0;
+      img {
+        margin: 0 10px 0 0;
+        border-radius: 5px;
+      }
+      img:nth-child(2n) {
+        margin: 0 0 0 0;
+      }
+    }
+    .video {
+      margin: 0 0 5px 0;
+      video {
+        width: 100%;
+        height: 100%;
+        border: 1px solid #f1f1f1;
+      }
+    }
+  }
+}
+</style>

src/views/community/parts/list.vue

@@ -2,7 +2,7 @@
   <div id="list">
     <el-row>
       <el-col :span="24" class="main">
-        <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="content">
             {{ item.content }}
           </el-col>
@@ -11,7 +11,7 @@
             <span>更新时间:{{ item.renew_time || '暂无时间' }}</span>
           </el-col>
           <el-col :span="24" class="image" v-if="item.type == '0'">
-            <img :src="tag.url" v-for="(tag, index) in item.imgUrl" :key="index" :style="{ width: item.imgUrl.length == 1 ? '100%' : '48.5%' }" />
+            <img :src="tag.url" v-for="(tag, index) in item.imgUrl" :key="index" :style="{ width: item.imgUrl.length == 1 ? '100%' : '48%' }" />
           </el-col>
           <el-col :span="24" class="video" v-else-if="item.type == '1'">
             <video
@@ -33,9 +33,9 @@
           </el-col>
           <el-col :span="24" class="btn">
             <el-col :span="6" class="button"><i class="el-icon-position"></i>分享</el-col>
-            <el-col :span="6" class="button"><i class="el-icon-chat-line-round"></i>分享</el-col>
+            <el-col :span="6" class="button" @click.native="detailBtn(item)"><i class="el-icon-chat-line-round"></i>评论</el-col>
             <el-col :span="6" class="button"><i class="el-icon-thumb"></i>点赞</el-col>
-            <el-col :span="6" class="button"><i class="el-icon-view"></i>阅读</el-col>
+            <el-col :span="6" class="button textOver"><i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }}</el-col>
           </el-col>
         </el-col>
       </el-col>
@@ -55,7 +55,11 @@ export default {
     return {};
   },
   created() {},
-  methods: {},
+  methods: {
+    detailBtn(data) {
+      this.$emit('detailBtn', data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -74,10 +78,12 @@ export default {
 
 <style lang="less" scoped>
 .main {
-  padding: 0 5px;
+  padding: 10px 5px 0 5px;
   .list {
-    border-bottom: 1px solid #ccc;
-    padding: 10px 0 0 0;
+    background-color: #fff;
+    margin: 0 0 10px 0;
+    border-radius: 5px;
+    padding: 10px 10px 0 10px;
   }
   .content {
     font-size: 15px;
@@ -85,7 +91,7 @@ export default {
   }
   .other {
     color: #666;
-    font-size: 14px;
+    font-size: 13px;
     margin: 0 0 10px 0;
     span:nth-child(2) {
       padding: 0 0 0 10px;
@@ -105,15 +111,20 @@ export default {
     video {
       width: 100%;
       height: 100%;
+      border: 1px solid #f1f1f1;
     }
   }
   .btn {
     .button {
       text-align: center;
-      height: 40px;
-      line-height: 40px;
-      background-color: #f1f1f1;
-      border-top: 1px solid #ccc;
+      height: 35px;
+      line-height: 35px;
+      border-top: 1px solid #f1f1f1;
+      // border-right: 1px solid #f1f1f1;
+      font-size: 12px;
+    }
+    .button:nth-child(4) {
+      border-right: none;
     }
   }
 }