From 559d5de4f57efa27464f46561dd50ef9f0970eb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Wed, 11 Aug 2021 09:30:53 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=91=E6=8A=80=E6=88=90=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/achievements.vue | 240 +++++++++++++-------------------
 1 file changed, 95 insertions(+), 145 deletions(-)

diff --git a/src/views/home/achievements.vue b/src/views/home/achievements.vue
index 0698d59..4633d90 100644
--- a/src/views/home/achievements.vue
+++ b/src/views/home/achievements.vue
@@ -4,8 +4,12 @@
     <div class="search">
       <div class="search_input" style="display:flex">
         <span>科技成果检索</span>
-        <el-input v-model="input" placeholder="请输入搜索关键字"></el-input>
-        <el-button type="warning">搜索</el-button>
+        <el-input
+          v-model="queryParams.title"
+          placeholder="请输入搜索关键字"
+          @keyup.enter.native="getList"
+        ></el-input>
+        <el-button type="warning" @click="getList">搜索</el-button>
       </div>
     </div>
     <!-- 筛选部分 -->
@@ -15,11 +19,12 @@
         <div class="screen_l_t">
           <div class="screen_l_t_item">
             <span class="text_col">技术领域：</span>
-            <el-radio-group v-model="queryParams.radio1" size="medium">
+            <el-radio-group v-model="queryParams.field" size="medium">
+              <el-radio-button label="">不限</el-radio-button>
               <el-radio-button
-                :label="item.label"
+                :label="item.id"
                 v-for="item in levelList"
-                :key="item.label"
+                :key="item.id"
               >
                 {{ item.name }}
               </el-radio-button>
@@ -27,149 +32,129 @@
           </div>
           <div class="screen_l_t_item">
             <span class="text_col">成熟度：</span>
-            <el-radio-group v-model="queryParams.radio2" size="medium">
+            <el-radio-group v-model="queryParams.maturityId" size="medium">
               <el-radio-button label="">不限</el-radio-button>
-              <el-radio-button :label="item" v-for="item in 3" :key="item">
-                {{ item }}
+              <el-radio-button
+                :label="item.id"
+                v-for="item in maturityList"
+                :key="item.id"
+              >
+                {{ item.name }}
               </el-radio-button>
             </el-radio-group>
           </div>
           <div class="screen_l_t_item">
             <span class="text_col">合作标签：</span>
-            <el-radio-group v-model="queryParams.radio2" size="medium">
+            <el-radio-group v-model="queryParams.labelId" size="medium">
               <el-radio-button label="">不限</el-radio-button>
-              <el-radio-button :label="item" v-for="item in 3" :key="item">
-                {{ item }}
+              <el-radio-button
+                :label="item.id"
+                v-for="item in cooperationList"
+                :key="item.id"
+              >
+                {{ item.name }}
               </el-radio-button>
             </el-radio-group>
           </div>
         </div>
         <!-- 检索列表 -->
         <div class="screen_l_b">
-          <div class="screen_item" v-for="item in 5" :key="item">
-            <div class="screen_item_l" style="background-color: red">
-              123
-              <!-- <img src="" alt=""> -->
-            </div>
-            <div class="screen_item_r">
-              <div class="title">金属抛光粉尘管理与净化系统</div>
-              <div class="text_hidden_two text">
-                寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法
+          <div v-for="item in listData" :key="item.id">
+            <router-link
+              target="_blank"
+              :to="{
+                path: '/result',
+                query: { key: 'scienceResult', id: item.id }
+              }"
+            >
+              <div class="screen_item">
+                <div class="screen_item_l">
+                  <img :src="item.picList[0]" alt="" />
+                </div>
+                <div class="screen_item_r">
+                  <div class="title">{{ item.title }}</div>
+                  <div class="text_hidden_two text" v-html="item.text"></div>
+                  <div class="tags">
+                    <el-tag type="warning" effect="dark">
+                      {{ item.fieldName }}
+                    </el-tag>
+                    <el-tag type="warning" effect="dark">
+                      {{ item.maturityName }}
+                    </el-tag>
+                    <el-tag type="warning" effect="dark">
+                      {{ item.labelName }}
+                    </el-tag>
+                  </div>
+                  <div class="time">
+                    {{ parseTime(item.createTime, '{y}-{m}-{d}') }}发布
+                  </div>
+                </div>
               </div>
-              <div class="tags">
-                <el-tag type="warning" effect="dark">装备制造</el-tag>
-                <el-tag type="warning" effect="dark">技术需求</el-tag>
-              </div>
-              <div class="time">2021-07-23发布</div>
-            </div>
-            <!-- <div class="title text_hidden_one">
-              <span class="txt">【￥100万】</span
-              ><span>寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法</span>
-            </div>
-            <div class="tags">
-              <el-tag effect="dark">装备制造</el-tag>
-              <el-tag effect="dark">技术需求</el-tag>
-            </div>
-            <p class="text_hidden_four">
-              企业主要做电梯配件中的电梯导轨，2020年产值2亿元左右，属于重金属加工企业主要做电梯配件中的电梯导轨，2020年产值2亿元左右，属于重金属加工企业主要做电梯配件中的电梯导轨，2020年产值2亿元左右，属于重金属加工企业主要做电梯配件中的电梯导轨，2020年产值2亿元左右，属于重金属加工
-            </p>
-            <div class="time">2021-07-23发布</div> -->
+            </router-link>
           </div>
         </div>
         <!-- 分页 -->
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="queryParams.pageNum"
-          :page-sizes="[6, 12, 18, 24]"
-          :page-size="queryParams.pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="36"
-        >
-        </el-pagination>
-        <!-- <pagination
-          v-show="10 > 0"
-          :total="24"
+        <pagination
+          v-show="total > 0"
+          :total="total"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
-        /> -->
+        />
       </div>
     </div>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import { getDictListByStatus } from '@/api/home/info';
 import { getScienceResultList } from '@/api/home/demand';
 export default {
   data() {
     return {
-      activeName: '1',
-      input: '',
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        radio1: '',
-        radio2: ''
+        title: '',
+        field: '',
+        maturityId: '', // 成熟度id
+        labelId: '' // 合作标签id
       },
-      levelList: [
-        {
-          label: '1',
-          name: '信息技术'
-        },
-        {
-          label: '2',
-          name: '装备制造'
-        },
-        {
-          label: '3',
-          name: '新材料'
-        },
-        {
-          label: '4',
-          name: '新能源'
-        },
-        {
-          label: '5',
-          name: '生物医药'
-        },
-        {
-          label: '6',
-          name: '节能环保'
-        },
-        {
-          label: '7',
-          name: '数字创意'
-        },
-        {
-          label: '8',
-          name: '检验检测'
-        },
-        {
-          label: '9',
-          name: '教育教学'
-        },
-        {
-          label: '10',
-          name: '检验检测'
-        }
-      ]
+      listData: [],
+      total: 0,
+      levelList: [], // 技术领域
+      maturityList: [], // 成熟度
+      cooperationList: [] // 合作标签
     };
   },
   computed: {
     ...mapGetters(['token'])
   },
   methods: {
-    getList() {},
+    getList() {
+      getScienceResultList(this.queryParams).then(({ data }) => {
+        this.listData = data.list;
+        this.total = data.total;
+      });
+    },
     handleClick() {},
     handleSizeChange() {},
     handleCurrentChange() {}
   },
   created() {
-    this.levelList.unshift({
-      label: '',
-      name: '不限'
+    // 技术领域
+    getDictListByStatus({ type: 1 }).then(({ data }) => {
+      this.levelList = data;
     });
+    // 成熟度
+    getDictListByStatus({ type: 3 }).then(({ data }) => {
+      this.maturityList = data;
+    });
+    // 合作标签
+    getDictListByStatus({ type: 4 }).then(({ data }) => {
+      this.cooperationList = data;
+    });
+    this.getList();
   }
 };
 </script>
@@ -247,16 +232,21 @@ export default {
       .screen_l_b {
         margin-top: 10px;
         padding: 10px 0;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
+        // display: flex;
+        // flex-wrap: wrap;
+        // justify-content: flex-start;
         .screen_item {
+          cursor: pointer;
           display: flex;
           border: 1px solid #ffa32c;
           padding: 15px;
           margin-top: 30px;
           .screen_item_l {
             width: 225px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
           }
           .screen_item_r {
             width: calc(100% - 225px);
@@ -285,46 +275,6 @@ export default {
             }
           }
         }
-        //   .screen_item {
-        //     display: flex;
-        //     flex-direction: column;
-        //     justify-content: space-between;
-        //     width: calc((100% - 24px) / 3);
-        //     height: 292px;
-        //     margin-right: 12px;
-        //     box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
-        //     margin-bottom: 14px;
-        //     cursor: pointer;
-        //     border-radius: 6px;
-        //     overflow: hidden;
-        //     padding: 30px 20px;
-        //     .title {
-        //       font-size: 18px;
-        //       color: #333;
-        //       .txt {
-        //         color: #ffa32c;
-        //       }
-        //     }
-        //     .tags {
-        //       margin-top: 22px;
-        //       .el-tag {
-        //         margin-right: 10px;
-        //       }
-        //     }
-        //     p {
-        //       font-size: 16px;
-        //       color: #666;
-        //       line-height: 27px;
-        //     }
-        //     .time {
-        //       text-align: right;
-        //       font-size: 16px;
-        //       color: #999;
-        //     }
-        //   }
-        //   .screen_item:nth-of-type(3n + 0) {
-        //     margin-right: 0;
-        //   }
       }
       .el-pagination {
         text-align: right;