添加新闻预览功能

src/pages/case/details/index.vue

@@ -115,7 +115,7 @@
       <el-form-item>
         <div style="float: right">
           <el-button type="info" plain @click="$router.back()">取消</el-button>
-          <el-button type="primary" @click="submit">{{id ? '修改' : '新增'}}</el-button>
+          <el-button type="primary" @click="submit(1)">{{id ? '修改' : '新增'}}</el-button>
         </div>
       </el-form-item>
     </el-form>
@@ -156,7 +156,7 @@ export default {
     handleLogoSuccess (data) {
       this.logoUrl = data.content
     },
-    async submit () {
+    async submit (oper) {
       if (!this.title) {
         return this.$error('请填写标题')
       } else if (!this.coverUrl) {
@@ -183,17 +183,21 @@ export default {
         body.chinese_id = this.on_language
       }
 
-      try {
-        if (this.id) {
-          body.id = this.id
-          await this.$http.put('/case', body)
-          this.$success('修改成功')
-        } else {
-          await this.$http.post('/case', body)
-          this.$router.back()
+      if (oper) {
+        try {
+          if (this.id) {
+            body.id = this.id
+            await this.$http.put('/case', body)
+            this.$success('修改成功')
+          } else {
+            await this.$http.post('/case', body)
+            this.$router.back()
+          }
+        } catch (e) {
+          this.$error(e.msg)
         }
-      } catch (e) {
-        this.$error(e.msg)
+      } else {
+        this.previewData = body
       }
     },
     async getInfo () {

src/pages/case/details/style.css

@@ -15,4 +15,4 @@
   padding-left: 10px;
   border-left: 1px solid #dcdfe6;
   margin-left: 40px;
-}
+}

src/pages/news/details/index.vue

@@ -77,15 +77,24 @@
       <el-form-item>
         <div style="float: right">
           <el-button type="info" plain @click="$router.back()">取消</el-button>
-          <el-button type="primary" @click="submit">{{id ? '修改' : '新增'}}</el-button>
+          <el-button type="warning" plain @click="submit(0)">预览</el-button>
+          <el-button type="primary" @click="submit(1)">{{id ? '修改' : '新增'}}</el-button>
         </div>
       </el-form-item>
     </el-form>
+    <div class="preview" v-if="previewData">
+      <i class="el-icon-close" @click="previewData = null"></i>
+      <div class="preview-layer">
+        <preview :activep="previewData" class="layer"/>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import {root} from '@/util/http'
+import preview from '../preview'
+
 export default {
   data () {
     return {
@@ -101,7 +110,8 @@ export default {
       language: null,
       on_language: null,
       redire: 1,
-      root
+      root,
+      previewData: null
     }
   },
   methods: {
@@ -110,7 +120,7 @@ export default {
     handleCoverSuccess (data) {
       this.coverUrl = data.content
     },
-    async submit () {
+    async submit (oper) {
       if (!this.title) {
         return this.$error('请填写标题')
       } else if (!this.adate) {
@@ -138,17 +148,21 @@ export default {
         body.chinese_id = this.on_language
       }
 
-      try {
-        if (this.id) {
-          body.id = this.id
-          await this.$http.put('/news', body)
-          this.$success('修改成功')
-        } else {
-          await this.$http.post('/news', body)
-          this.$router.back()
+      if (oper) {
+        try {
+          if (this.id) {
+            body.id = this.id
+            await this.$http.put('/news', body)
+            this.$success('修改成功')
+          } else {
+            await this.$http.post('/news', body)
+            this.$router.back()
+          }
+        } catch (e) {
+          this.$error(e.msg)
         }
-      } catch (e) {
-        this.$error(e.msg)
+      } else {
+        this.previewData = body
       }
     },
     async getInfo () {
@@ -191,7 +205,8 @@ export default {
       await this.getInfo()
       editor.txt.html(this.content)
     }
-  }
+  },
+  components: {preview}
 }
 </script>
 

src/pages/news/details/style.css

@@ -8,6 +8,7 @@
 
 .l-form {
   flex: 0 0 450px;
+  z-index: 1;
 }
 
 .r-form {
@@ -15,4 +16,35 @@
   padding-left: 10px;
   border-left: 1px solid #dcdfe6;
   margin-left: 40px;
+  z-index: 1;
+}
+
+.preview {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(255, 255, 255, 0.9);
+  z-index: 9999;
+}
+
+.preview-layer {
+  overflow-y: scroll;
+  height: 100%;
+}
+
+.preview .layer {
+  margin: 50px auto;
+  max-width: 780px;
+  text-align: center;
+}
+
+.el-icon-close {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  font-size: 26px;
+  color: #000;
+  cursor: pointer;
 }

src/pages/news/preview/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="layout" v-if="article" :class="{mobile: isMobile}" >
+    <h2>{{article.title}}</h2>
+    <span v-if="article.date">{{new Date(Number(article.date)).format('yyyy-MM-dd')}} 发表</span>
+    <span>来源： {{article.origin}}</span>
+    <div v-html="article.content" class="new-content"></div>
+    <br><br><br>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: ['activep'],
+  data () {
+    return {
+      isMobile: false,
+      article: this.activep
+    }
+  }
+}
+</script>
+
+<style scoped>
+.layout {
+  padding-bottom: 40px;
+}
+.layout.mobile {
+  text-align: left;
+}
+
+.layout > h2 {
+  font-size: 18px;
+  color: #000000;
+  font-weight: bold;
+}
+
+.layout > span {
+  color: #989898;
+  font-size: 14px;
+  margin: 15px 0;
+  display: block;
+}
+
+.layout > img {
+  display: block;
+  max-width: 100%;
+}
+
+.layout > div {
+  font-size: 14px;
+  line-height: 25px;
+  color: #989898;
+  margin-top: 25px;
+}
+
+.new-content {
+  text-align: left;
+}
+
+</style>
+
+<style>
+
+.new-content img,
+.new-content video {
+  max-width: 100% !important;
+}
+</style>