1

src/views/refute/detail.vue

@@ -5,13 +5,16 @@
         <el-col :span="24" class="top">
           <top topType="2" @upBack="upBack"></top>
         </el-col>
-        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }" @scroll.native="scrollEvent"> </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <info :form="form"></info>
+        </el-col>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import info from './parts/info.vue';
 import top from '@/layout/common/top.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mapRefute } = createNamespacedHelpers('refute');
@@ -19,11 +22,21 @@ export default {
   name: 'index',
   props: {},
   components: {
+    info,
     top,
   },
   data: function() {
     return {
       clientHeight: '',
+      form: {
+        // title: '全国七万硕士在送外卖？别被贩卖焦虑的自媒体忽悠',
+        // origin: '系统管理员',
+        // renew_time: '2021-03-25 10:00:00',
+        // fileUrl: '',
+        // website: 'http://broadcast.waityou24.cn/platlive/home.html',
+        // zan: true,
+        // content: '信息内容',
+      },
     };
   },
   async created() {
@@ -38,7 +51,9 @@ export default {
     async search() {
       if (this.id) {
         let res = await this.fetch(this.id);
-        console.log(res);
+        if (this.$checkRes(res)) {
+          this.$set(this, `form`, res.data);
+        }
       }
     },
     // 返回上一页
@@ -67,6 +82,7 @@ export default {
     border-bottom: 1px solid #f1f1f1;
   }
   .info {
+    overflow-x: hidden;
     overflow-y: auto;
   }
 }

src/views/refute/parts/info.vue

@@ -0,0 +1,117 @@
+<template>
+  <div id="info">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="title"> {{ form.title }} </el-col>
+        <el-col :span="24" class="other">
+          <span>来源:{{ form.origin || '系统管理员' }}</span>
+          <span>更新时间:{{ form.renew_time || '暂无时间' }}</span>
+        </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 :span="24" class="content">
+          <p v-html="form.content"></p>
+        </el-col>
+        <el-col :span="24" class="web" v-if="form.website">
+          <p>原文网址</p>
+          <el-link :underline="false" :href="form.website" target="_blank">{{ form.website }}</el-link>
+        </el-col>
+        <el-col :span="24" class="zan">
+          <img :src="form.zan == true ? zan2 : zan" alt="点赞" @click="zanBtn" />
+        </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 {
+      zan: require('@a/zan.png'),
+      zan2: require('@a/zan2.png'),
+    };
+  },
+  created() {},
+  methods: {
+    zanBtn() {
+      alert('点赞');
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 0 5px;
+  .title {
+    font-size: 18px;
+    text-align: center;
+    padding: 10px 0px 10px 0;
+    font-weight: bold;
+  }
+  .other {
+    font-size: 14px;
+    color: #666;
+    margin: 0 0 10px 0;
+    span {
+      padding: 0 0 0 5px;
+    }
+  }
+  .video {
+    margin: 0 0 10px 0;
+    video {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .content {
+    margin: 0 0 10px 0;
+  }
+  .web {
+    font-size: 14px;
+    color: #666;
+    text-align: center;
+    p {
+      margin: 0 0 5px 0;
+    }
+  }
+  .zan {
+    text-align: center;
+    margin: 15px 0 0 0;
+    img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+</style>