抽离列表弹窗为新窗口并去掉网站进来时的loading效果

src/views/result.vue

@@ -0,0 +1,139 @@
+<template>
+  <!-- 预览弹出层 -->
+  <div class="result_page content">
+    <h2>{{ formData.title }}</h2>
+    <div class="info" v-if="type != 'information'">
+      <span v-if="type != 'companyNeed' && type != 'scienceResult'"
+        >来源：{{ formData.source }}</span
+      >
+      <span v-if="type == 'companyNeed'">价格：{{ formData.price }}</span>
+      <el-image
+        v-if="type == 'scienceResult'"
+        style="width: 100px; height: 100px"
+        :src="formData.picList ? formData.picList[0] : ''"
+        fit="cover"
+        :preview-src-list="formData.picList"
+      ></el-image>
+      <span
+        >发布：{{
+          formData.listDate || parseTime(formData.createTime, '{y}-{m}-{d}')
+        }}</span
+      >
+      <span v-if="token && type == 'policy'">
+        <el-button
+          type="primary"
+          size="mini"
+          v-if="formData.collected == 0"
+          @click="addItem"
+        >
+          <i class="el-icon-star-on"></i><span>收藏</span>
+        </el-button>
+        <el-button
+          type="info"
+          size="mini"
+          v-if="formData.collected == 1"
+          @click="cancelItem"
+        >
+          <i class="el-icon-star-on"></i><span>取消收藏</span>
+        </el-button>
+      </span>
+    </div>
+    <!-- <div v-html="formData.text"></div> -->
+    <div id="text">
+      <editor v-model="formData.text" :min-height="192" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  search,
+  getPolicyInfo,
+  getPolicyReadInfo,
+  getInfo,
+  getInfo2,
+  getInfo3
+} from '@/api/search';
+import { mapGetters } from 'vuex';
+import { add, cancel } from '@/api/search';
+import Editor from '@/components/Editor';
+export default {
+  components: {
+    Editor
+  },
+  data() {
+    return {
+      type: '',
+      formData: {}
+    };
+  },
+  computed: {
+    ...mapGetters(['token'])
+  },
+  methods: {
+    addItem() {
+      add({ policyId: this.formData.id }).then(res => {
+        this.formData.collected = 1;
+        this.msgSuccess('操作成功');
+      });
+    },
+    cancelItem() {
+      cancel({ policyId: this.formData.id }).then(res => {
+        this.formData.collected = 0;
+        this.msgSuccess('操作成功');
+      });
+    }
+  },
+  created() {
+    let { key, id } = this.$route.query;
+    this.type = key;
+    if (this.type == 'policy') {
+      // 政策
+      getPolicyInfo({ policyId: id }).then(({ data }) => {
+        this.formData = data;
+      });
+    } else if (this.type == 'policyRead') {
+      // 政策解读
+      getPolicyReadInfo({ readId: id }).then(({ data }) => {
+        this.formData = data;
+      });
+    } else if (this.type == 'information') {
+      // 资讯快报
+      getInfo({ id }).then(({ data }) => {
+        this.formData = data;
+      });
+    } else if (this.type == 'companyNeed') {
+      // 企业需求
+      getInfo2({ id }).then(({ data }) => {
+        this.formData = data;
+      });
+    } else if (this.type == 'scienceResult') {
+      // 科学成功
+      getInfo3({ id }).then(({ data }) => {
+        this.formData = data;
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.el-dialog__body {
+  padding-top: 0;
+}
+.result_page {
+  .info {
+    display: flex;
+    justify-content: space-between;
+  }
+  #text {
+    margin-top: 30px;
+    /deep/.ql-toolbar {
+      display: none;
+    }
+    /deep/.editor {
+      border: 0;
+    }
+  }
+}
+</style>