首页跟多和公共详情页面改造

src/views/home/home.vue

@@ -17,9 +17,17 @@
                   <img src="@/assets/image/icon4.png" alt="" />
                   <img src="@/assets/image/icon5.png" alt="" />
                 </div>
+                <router-link
+                  target="_blank"
+                  :to="{
+                    path: '/portrait',
+                    query: { key: 'policyRead', val: '归口' }
+                  }"
+                >
                   <div class="title_top_r pointer">
                     更多<i class="el-icon-arrow-right"></i>
                   </div>
+                </router-link>
               </div>
               <span>{{ date }}</span>
             </div>
@@ -101,9 +109,17 @@
               <div>
                 <img src="@/assets/image/icon6.png" alt="" />
               </div>
+              <router-link
+                target="_blank"
+                :to="{
+                  path: '/portrait',
+                  query: { key: 'information', val: '' }
+                }"
+              >
                 <div class="title_top_r pointer">
                   更多<i class="el-icon-arrow-right"></i>
                 </div>
+              </router-link>
             </div>
             <div class="tab_list">
               <div class="banner_r_list" v-for="item in list3" :key="item.id">

src/views/home/notice.vue

@@ -158,11 +158,17 @@
           </div>
           <div class="more">
             <!-- query: { key: 'policy', id: item.id } -->
-            <router-link target="_blank" :to="{ path: '/portrait' }">
+            <router-link
+              target="_blank"
+              :to="{
+                path: '/portrait',
+                query: { key: 'policy', val: '企业画像' }
+              }"
+            >
               <el-button
                 type="primary"
                 size="mini"
-                v-show="portraitData.length >= 4"
+                v-show="portraitData.length <= 4"
               >
                 查看更多
               </el-button>

src/views/portrait.vue

@@ -1,15 +1,28 @@
 <template>
   <div class="portrait_page content">
-    <div class="header">
+    <div class="header" v-if="type == 'policy'">
-      <span class="span">企业画像：</span>
+      <span class="span">{{ val }}：</span>
-      <el-tabs v-model="queryParams.labelId" @tab-click="handleClick">
+      <el-radio
-        <el-tab-pane
+        v-model="queryParams.labelId"
-          :label="item.name"
-          :name="item.id"
         v-for="item in portraitList"
         :key="item.id"
-        ></el-tab-pane>
+        :label="item.id"
-      </el-tabs>
+        border
+        @change="handleClick"
+        >{{ item.name }}</el-radio
+      >
+    </div>
+    <div class="header" v-else-if="type == 'policyRead'">
+      <span class="span">{{ val }}：</span>
+      <el-radio
+        v-model="queryParams.attributeId"
+        v-for="item in attributeOptions"
+        :key="item.value"
+        :label="item.value"
+        border
+        @change="handleClick"
+        >{{ item.label }}</el-radio
+      >
     </div>
     <div class="screen_l_b" v-for="item in portraitData" :key="item.id">
       <div class="title text_hidden_one pointer">
@@ -17,16 +30,19 @@
           target="_blank"
           :to="{
             path: '/result',
-            query: { key: 'policy', id: item.id }
+            query: { key: type, id: item.id }
           }"
         >
           {{ item.title }}
         </router-link>
       </div>
-      <div class="info">
+      <div class="info" v-if="type != 'information'">
         <span>来源：{{ item.source }}</span>
         <span>发布：{{ item.listDate }}</span>
       </div>
+      <div class="info" style="justify-content: flex-end;" v-else>
+        <span>发布：{{ item.createTime }}</span>
+      </div>
     </div>
     <!-- 分页 -->
     <pagination
@@ -43,17 +59,37 @@
 import { getPolicyMatch } from '@/api/home/notice';
 import { mapGetters } from 'vuex';
 import { userInfo, getLabelSetting } from '@/api/home/info';
+import { getPolicyRead, getInformation } from '@/api/home/home';
 export default {
   data() {
     return {
-      activeName: '',
+      type: '',
+      val: '',
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 10
-        labelId: ''
       },
       total: 0,
       portraitList: [], // 企业画像
+      // 归口选项
+      attributeOptions: [
+        {
+          value: 'KJJ',
+          label: '科技'
+        },
+        {
+          value: 'JXJ',
+          label: '经信'
+        },
+        {
+          value: 'FGW',
+          label: '发改'
+        },
+        {
+          value: 'OTHER',
+          label: '其他'
+        }
+      ],
       portraitData: [], // 企业画像绑定的政策列表
       portraitTotal: 0
     };
@@ -64,10 +100,22 @@ export default {
   methods: {
     // 获取企业画像数据列表
     getPortraitList() {
+      if (this.type == 'policy') {
         getPolicyMatch(this.queryParams).then(({ data }) => {
           this.portraitData = data.list;
           this.total = data.total;
         });
+      } else if (this.type == 'policyRead') {
+        getPolicyRead(this.queryParams).then(({ data }) => {
+          this.portraitData = data.list;
+          this.total = data.total;
+        });
+      } else if (this.type == 'information') {
+        getInformation(this.queryParams).then(({ data }) => {
+          this.portraitData = data.list;
+          this.total = data.total;
+        });
+      }
     },
     handleClick() {
       this.getPortraitList();
@@ -75,10 +123,16 @@ export default {
   },
   created() {
     if (this.token) {
+      console.log();
+      const { key, val } = this.$route.query;
+      this.type = key;
+      this.val = val;
+      if (key == 'policy') {
         userInfo().then(({ data }) => {
           if (data.companyId) {
             getLabelSetting({ companyId: data.companyId }).then(({ data }) => {
               if (data.length) {
+                console.log(data);
                 this.portraitList = data.map(item =>
                   item.labelList
                     ? item.labelList.filter(v => v.isHas)[0]
@@ -92,8 +146,16 @@ export default {
             });
           }
         });
+      } else if (key == 'policyRead') {
+        this.queryParams.attributeId = this.attributeOptions[0].value;
+        this.getPortraitList();
+      } else if (key == 'information') {
+        this.getPortraitList();
       } else {
-      this.msgSuccess('请先登录');
+        this.msgError('非法进入');
+      }
+    } else {
+      this.msgError('请先登录');
     }
   }
 };
@@ -114,6 +176,9 @@ export default {
         height: 0;
       }
     }
+    /deep/.el-radio__input {
+      display: none;
+    }
   }
   .screen_l_b {
     height: 110px;

src/views/result.vue

@@ -1,6 +1,30 @@
 <template>
   <!-- 预览弹出层 -->
-  <div class="result_page content">
+  <div class="result_page">
+    <el-backtop target=".result_page" :visibility-height="500"></el-backtop>
+    <div class="my_header">
+      <div class="title content p0-100">
+        <el-row :gutter="20">
+          <el-col :span="8"><span>嘉策科技创新服务平台</span></el-col>
+          <el-col :span="8"
+            ><el-input
+              v-model.trim="input"
+              placeholder="请输入搜索关键字"
+              prefix-icon="el-icon-search"
+              @keyup.enter.native="toSearch"
+            ></el-input
+          ></el-col>
+          <el-col :span="8" style="text-align:right">
+            <span
+              >服务热线：<span style="color:#ffa32c">400-0507-580</span></span
+            >
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+
+    <div class="my_main content p0-100" style="display:flex">
+      <div class="l" style="width:75%;background-color: #fff;padding: 30px;">
         <h2>{{ formData.title }}</h2>
         <div class="info" v-if="type != 'information'">
           <span v-if="type != 'companyNeed' && type != 'scienceResult'"
@@ -44,6 +68,98 @@
           <div v-html="formData.text" />
         </div>
       </div>
+      <div
+        class="r"
+        style="width:24%;margin-left:1%;background-color: #fff;padding: 20px 10px;"
+      >
+        <!-- 公告模块 -->
+        <div class="notice">
+          <div class="title">
+            <div>通知公告</div>
+            <router-link target="_blank" :to="{ path: '/notice' }">
+              <div class="pointer" style="color:#999">
+                更多<i class="el-icon-arrow-right"></i>
+              </div>
+            </router-link>
+          </div>
+          <div class="list">
+            <ul>
+              <li
+                class="text_hidden_one pointer"
+                v-for="item in noticeList"
+                :key="item.id"
+              >
+                <router-link
+                  target="_blank"
+                  :to="{
+                    path: '/result',
+                    query: { key: 'policy', id: item.id }
+                  }"
+                >
+                  <span>•</span>{{ item.title }}
+                </router-link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="my_footer">
+      <div style="height: 4px;background: #FFA32C;"></div>
+      <div class="footer_one content">
+        <p>
+          <span>
+            <i><img src="@/assets/image/icon1.png" alt=""/></i>
+            总浏览量：1020</span
+          >
+          <span>
+            <i><img src="@/assets/image/icon1.png" alt=""/></i>
+            今日浏览：1020</span
+          >
+        </p>
+        <div class="footer_two">
+          <div class="footer_left">
+            <div class="footer_left_one">
+              <span class="footer_left_l">版权声明</span>
+              <span class="footer_left_r">
+                <i><img src="@/assets/image/icon3.png" alt=""/></i>
+                客服热线：(周一至周五8:30-18:00)
+              </span>
+            </div>
+            <div class="footer_left_two">
+              <span class="footer_left_l">用户协议</span>
+            </div>
+            <div class="footer_left_three">
+              <span class="footer_left_l">意见反馈</span>
+              <span class="footer_left_r">
+                <i><img src="@/assets/image/icon2.png" alt=""/></i>
+                公司地址：安徽省合肥市蜀山区黄山市601号412-414
+              </span>
+            </div>
+          </div>
+          <div class="footer_right">
+            <div class="item">
+              <img src="@/assets/image/scanloginqrcode.jpg" alt="" />
+              <div>嘉策公众号</div>
+            </div>
+            <div class="item">
+              <img src="@/assets/image/scanloginqrcode.jpg" alt="" />
+              <div>QQ群</div>
+            </div>
+          </div>
+        </div>
+        <div class="footer_three">
+          <div>
+            <span>商务合作</span>
+            <span>政策服务</span>
+            <span>在线解答</span>
+          </div>
+          <p>版权服务：合肥嘉策信息技术服务有限公司 皖ICP备45619723号</p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -55,6 +171,7 @@ import {
   getInfo2,
   getInfo3
 } from '@/api/search';
+import { getPolicyList } from '@/api/home/notice';
 import { mapGetters } from 'vuex';
 import { add, cancel } from '@/api/search';
 import Editor from '@/components/Editor';
@@ -64,8 +181,10 @@ export default {
   },
   data() {
     return {
+      input: '',
       type: '',
-      formData: {}
+      formData: {},
+      noticeList: []
     };
   },
   watch: {
@@ -82,6 +201,14 @@ export default {
     ...mapGetters(['token'])
   },
   methods: {
+    toSearch() {
+      if (!this.input.length) return this.msgError('请输入搜索关键字');
+      let routerJump = this.$router.resolve({
+        path: '/search',
+        query: { val: this.input }
+      });
+      window.open(routerJump.href, '_blank');
+    },
     addItem() {
       add({ policyId: this.formData.id }).then(res => {
         this.formData.collected = 1;
@@ -124,6 +251,9 @@ export default {
         this.formData = data;
       });
     }
+    getPolicyList({ pageNum: 1, pageSize: 5 }).then(({ data }) => {
+      this.noticeList = data.list;
+    });
   }
 };
 </script>
@@ -133,6 +263,9 @@ export default {
   padding-top: 0;
 }
 .result_page {
+  height: 100vh;
+  overflow: auto;
+  background-color: #f1f1f1;
   .info {
     display: flex;
     justify-content: space-between;
@@ -146,5 +279,110 @@ export default {
       border: 0;
     }
   }
+  .my_header {
+    position: fixed;
+    z-index: 1;
+    width: 100%;
+    height: 46px;
+    line-height: 46px;
+    background: #3d3e3e;
+    .title {
+      color: #fff;
+    }
+  }
+  .my_main {
+    padding-top: 70px;
+    .r {
+      .title {
+        display: flex;
+        justify-content: space-between;
+      }
+      .list {
+        ul {
+          padding-left: 0;
+          line-height: 35px;
+          li {
+            color: #999;
+            span {
+              margin-right: 5px;
+            }
+            &:hover {
+              color: #ffa32c;
+            }
+          }
+        }
+      }
+    }
+  }
+  .my_footer {
+    margin-top: 30px;
+    background-color: #fff;
+    .footer_one {
+      p {
+        text-align: center;
+        font-size: 14px;
+        color: #666;
+        span {
+          i {
+            margin-right: 3px;
+            img {
+              vertical-align: middle;
+            }
+          }
+        }
+        span:nth-child(2) {
+          margin-left: 40px;
+        }
+      }
+    }
+    .footer_two {
+      border-bottom: 1px solid #dcdcdc;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .footer_left {
+        padding: 50px 0;
+        .footer_left_two {
+          margin: 20px 0;
+        }
+        .footer_left_l {
+          font-size: 18px;
+          color: #333;
+          margin-right: 30px;
+        }
+        .footer_left_r {
+          i {
+            img {
+              vertical-align: middle;
+            }
+          }
+        }
+      }
+      .footer_right {
+        display: flex;
+        .item {
+          font-size: 18px;
+          color: #333;
+          margin-right: 50px;
+          text-align: center;
+        }
+      }
+    }
+    .footer_three {
+      text-align: center;
+      padding: 36px 0;
+      div {
+        font-size: 16px;
+        color: #3394ff;
+        span:nth-child(2) {
+          margin: 0 39px;
+        }
+      }
+      p {
+        font-size: 14px;
+        color: #333;
+      }
+    }
+  }
 }
 </style>