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

src/router/index.js

@@ -116,6 +116,11 @@ export const constantRoutes = [
     component: resolve => require(['@/views/search'], resolve),
     name: 'search'
   },
+  {
+    path: '/result',
+    component: resolve => require(['@/views/result'], resolve),
+    name: 'result'
+  },
   {
     path: '/404',
     component: resolve => require(['@/views/error/404'], resolve),

src/views/home/home.vue

@@ -38,9 +38,20 @@
                   :key="item.id"
                 >
                   <span :class="index < 3 ? 'color' : ''">{{ index + 1 }}</span>
-                  <span class="text_hidden_one text_18_333 pointer">{{
+                  <!-- <span class="text_hidden_one text_18_333 pointer">{{
                     item.title
-                  }}</span>
+                  }}</span> -->
+                  <span class="text_hidden_one text_18_333 pointer">
+                    <router-link
+                      target="_blank"
+                      :to="{
+                        path: '/result',
+                        query: { key: 'policyRead', id: item.id }
+                      }"
+                    >
+                      {{ item.title }}
+                    </router-link>
+                  </span>
                   <i v-if="index < 3">
                     <img src="@/assets/image/new.png" alt="" />
                   </i>
@@ -68,7 +79,18 @@
             <el-tab-pane label="其他" name="1415157049267982336"></el-tab-pane>
             <div style="min-height:290px">
               <div class="banner_r_list" v-for="item in list" :key="item.id">
-                <div class="text_18_333 pointer">{{ item.title }}</div>
+                <!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
+                <div class="text_18_333 pointer">
+                  <router-link
+                    target="_blank"
+                    :to="{
+                      path: '/result',
+                      query: { key: 'policy', id: item.id }
+                    }"
+                  >
+                    {{ item.title }}
+                  </router-link>
+                </div>
                 <span>{{ parseTime(item.listDate, '{m}-{d}') }}</span>
               </div>
             </div>
@@ -85,7 +107,18 @@
             </div>
             <div class="tab_list">
               <div class="banner_r_list" v-for="item in list3" :key="item.id">
-                <div class="text_18_333 pointer">{{ item.title }}</div>
+                <!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
+                <div class="text_18_333 pointer">
+                  <router-link
+                    target="_blank"
+                    :to="{
+                      path: '/result',
+                      query: { key: 'information', id: item.id }
+                    }"
+                  >
+                    {{ item.title }}
+                  </router-link>
+                </div>
                 <span>{{ parseTime(item.createTime, '{m}-{d}') }}</span>
               </div>
             </div>

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>

src/views/search.vue

@@ -13,13 +13,24 @@
           <el-divider></el-divider>
           <div class="item_i" v-for="(item, index2) in value" :key="index2">
             <div>
-              <h4 class="pointer" @click="handleItem(key, item.id)">
-                {{ item.title }}
+              <h4 class="pointer">
+                <router-link
+                  target="_blank"
+                  :to="{ path: '/result', query: { key, id: item.id } }"
+                  >{{ item.title }}</router-link
+                >
               </h4>
               <div class="info" v-if="key == 'policy' || key == 'policyRead'">
                 <div>来源：{{ item.source }}</div>
                 <div>发布：{{ item.listDate }}</div>
               </div>
+              <div
+                class="info"
+                style="justify-content: flex-end"
+                v-if="key == 'information'"
+              >
+                <div>发布：{{ parseTime(item.listDate, '{y}-{m}-{d}') }}</div>
+              </div>
               <div
                 class="info"
                 v-else-if="key == 'companyNeed' || key == 'scienceResult'"
@@ -83,38 +94,7 @@ export default {
     },
     deep: true
   },
-  methods: {
-    handleItem(key, id) {
-      this.type = key;
-      this.dialogVisible = true;
-      if (key == 'policy') {
-        // 政策
-        getPolicyInfo({ policyId: id }).then(({ data }) => {
-          this.formData = data;
-        });
-      } else if (key == 'policyRead') {
-        // 政策解读
-        getPolicyReadInfo({ readId: id }).then(({ data }) => {
-          this.formData = data;
-        });
-      } else if (key == 'information') {
-        // 资讯快报
-        getInfo({ id }).then(({ data }) => {
-          this.formData = data;
-        });
-      } else if (key == 'companyNeed') {
-        // 企业需求
-        getInfo2({ id }).then(({ data }) => {
-          this.formData = data;
-        });
-      } else if (key == 'scienceResult') {
-        // 科学成功
-        getInfo3({ id }).then(({ data }) => {
-          this.formData = data;
-        });
-      }
-    }
-  },
+  methods: {},
   created() {
     let { val: param } = this.$route.query;
     search({ param }).then(({ data }) => {