feat: 完善首页&新增mock搜索数据示例

jydocs-pc/.env.alone

@@ -1,5 +1,5 @@
 NODE_ENV=development
-VUE_APP_BASE_API='/api-docs/'
+VUE_APP_BASE_API='/jydocs/'
 VUE_APP_BASE_URL='/'
 VUE_APP_MOCK=true
 VUE_APP_ALONE=true

jydocs-pc/.env.development

@@ -1,5 +1,5 @@
 NODE_ENV=development
-VUE_APP_BASE_API='/api-docs/'
+VUE_APP_BASE_API='/jydocs/'
 VUE_APP_BASE_URL='/swordfish/docs/index'
 VUE_APP_MOCK=true
 VUE_APP_BASE_PUBLIC='http://localhost:8080/'

jydocs-pc/.env.production

@@ -1,4 +1,4 @@
 NODE_ENV=production
-VUE_APP_BASE_API='/api-docs/'
+VUE_APP_BASE_API='/jydocs/'
 VUE_APP_BASE_URL='/swordfish/docs/index'
 VUE_APP_BASE_PUBLIC='/page_docs/'

jydocs-pc/src/api/mock/search.json

@@ -0,0 +1,29 @@
+{
+  "error_code": 0,
+  "error_msg": "",
+  "data": {
+    "total": 2,
+    "list": [
+      {
+        "docId": "RJ82241sM3DyHwrupW7w",
+        "docName": "软件单元、组装、确认测试系统-中标候选人公示",
+        "price": 359,
+        "docFileSize": 387,
+        "docPageSize": 5,
+        "uploadDate": "2021-03-17 15:46:04",
+        "docSummary": "公告软件单元、组装、确认测试系统-中标候选人公示(招标编号：ZKX20210231A002)公示开始时间：2021年01月28日09时00分00秒公示结束时间：2021年02月01日23时59分59秒本软件单元、组装、确认测试系统（招标项目",
+        "docFileType": "其他"
+      },
+      {
+        "docId": "PImyRKyNohbocfUbhIef",
+        "docName": "北京精密机电控制设备研究所软件单元、组装、确认测试系统",
+        "price": 193,
+        "docFileSize": 164,
+        "docPageSize": 3,
+        "uploadDate": "2021-03-17 15:46:05",
+        "docSummary": "1.招标条件本招标项目：软件单元、组装、确认测试系统已由中国航天科技集团有限公司部门批准建设，项目业主为北京精密机电控制设备研究所，建设资金及出资比例其他资金100.0%,招标人为北京精密机电控制设备研究所。项目已具备招标条件，中科信工程咨",
+        "docFileType": "pdf"
+      }
+    ]
+  }
+}

jydocs-pc/src/api/modules/search.js

@@ -0,0 +1,16 @@
+import httpRequest from '@/api'
+import mockRequest from '@/api/mock'
+
+let request = httpRequest
+if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK) {
+  // @ts-ignore
+  request = mockRequest
+}
+
+export function ajaxGetSearch (data) {
+  return request({
+    url: '/search',
+    method: 'post',
+    data
+  })
+}

jydocs-pc/src/components/Search.vue

@@ -50,10 +50,16 @@ export default {
       ]
     }
   },
-  beforeMount() {
+  beforeMount () {
     const qUrl = this.$route.query
-    qUrl && qUrl.text && (this.input = qUrl.text)
     qUrl && qUrl.type && (this.type = qUrl.type)
+    if (qUrl && qUrl.text) {
+      this.input = qUrl.text
+      this.$emit('recovery', {
+        type: this.type,
+        text: this.input
+      })
+    }
   },
   methods: {
     submitSearch () {

jydocs-pc/src/views/Home.vue

@@ -5,47 +5,73 @@
         <search-input @submit="goSubmit"></search-input>
       </div>
 
-      <div class="flex-r-c">
-        <div class="flex-r-c center left">
-          <h5>最新文档</h5>
-          <i class="el-icon-jy-Frame"></i>
-        </div>
-        <div class="flex-r-c center right">
-          <span>查看更多</span>
-          <i class="el-icon-arrow-right"></i>
-        </div>
+      <div class="new-group">
+          <div class="flex-r-c">
+              <div class="title-group flex-r-c center left">
+                  <h5>最新文档</h5>
+                  <i class="el-icon-jy-Frame"></i>
+              </div>
+          </div>
+
+          <div class="new-list-group flex-r-c">
+              <div class="flex-c-c">
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+              </div>
+              <div class="flex-c-c">
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+              </div>
+          </div>
       </div>
 
-      <h3>最新标讯</h3>
-      <div class="new-list-group flex-r-c">
-          <div class="flex-c-c">
-              <list-item></list-item>
-              <list-item></list-item>
-              <list-item></list-item>
-              <list-item></list-item>
-              <list-item></list-item>
+      <div class="hot-down-group">
+          <div class="flex-r-c">
+              <div class="title-group flex-r-c center left">
+                  <h5>热门下载</h5>
+                  <i class="el-icon-jy-Frame-1"></i>
+              </div>
           </div>
-          <div class="flex-c-c">
-              <list-item></list-item>
-              <list-item></list-item>
-              <list-item></list-item>
-              <list-item></list-item>
-              <list-item></list-item>
+
+          <div class="new-list-group flex-r-c">
+              <div class="flex-c-c">
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+              </div>
+              <div class="flex-c-c">
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+                  <list-item></list-item>
+              </div>
           </div>
       </div>
 
-      <h3>精选推荐</h3>
-      <div class="hot-keep-group flex-r-c wrap">
-          <card-item></card-item>
-          <card-item></card-item>
-          <card-item></card-item>
-          <card-item></card-item>
-          <card-item></card-item>
-          <card-item></card-item>
+      <div class="keep-group">
+          <div class="flex-r-c">
+              <div class="title-group flex-r-c center left">
+                  <h5>精选推荐</h5>
+              </div>
+          </div>
+          <div class="hot-keep-group flex-r-c wrap">
+              <card-item></card-item>
+              <card-item></card-item>
+              <card-item></card-item>
+              <card-item></card-item>
+              <card-item></card-item>
+              <card-item></card-item>
+          </div>
       </div>
-
-      <el-button @click="getTest" :loading="fullscreenLoading" type="primary">模拟Ajax</el-button>
-      <el-button  @click="getLoginStatus" type="info" icon="el-icon-jy-search">获取登录状态</el-button>
   </div>
 </template>
 
@@ -69,10 +95,10 @@ export default {
       fullscreenLoading: false
     }
   },
-  beforeCreate: function() {
+  beforeCreate: function () {
     $('body').addClass('view_index')
   },
-  beforeDestroy: function() {
+  beforeDestroy: function () {
     $('body').removeClass('view_index')
   },
   methods: {
@@ -107,6 +133,46 @@ export default {
 <style scoped lang="scss">
     @include diy-icon('search', 24);
     @include diy-icon('Frame', 24);
+    @include diy-icon('Frame-1', 24);
+
+    .keep-group {
+        margin-top: 38px;
+        padding-bottom: 50px;
+    }
+
+    .new-group {
+        margin-top: 54px;
+    }
+
+    .hot-down-group {
+        border-radius: 12px;
+        background: url("~@/assets/images/dateGetBg.png") no-repeat;
+
+        background-size: 100% 100%;
+        width: 100%;
+        height: auto;
+        padding: 24px;
+        padding-bottom: 34px;
+        box-sizing: border-box;
+        margin-top: 40px;
+        .new-list-group {
+            background-color: white;
+            border-radius: 8px;
+        }
+    }
+
+    .title-group {
+        margin-bottom: 16px;
+        h5 {
+            color: #1D1D1D;
+            font-family: Microsoft YaHei;
+            font-size: 18px;
+            line-height: 28px;
+            letter-spacing: 0px;
+            text-align: left;
+            margin-right: 9px;
+        }
+    }
 
     .top-search-group {
       width: 100%;

jydocs-pc/src/views/Search.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="home">
-      <search-input @submit="goSubmit"></search-input>
+      <search-input @submit="goSubmit" @recovery="getTest"></search-input>
+      {{ajaxData}}
       <el-button @click="getTest" :loading="fullscreenLoading" type="primary">模拟Ajax</el-button>
       <el-button  @click="getLoginStatus" type="info">获取登录状态</el-button>
   </div>
 </template>
 
 <script>
-import { ajaxGetTest } from '../api/modules/user'
+import { ajaxGetSearch } from '../api/modules/search'
 import { Button } from 'element-ui'
-import SearchInput from "../components/Search";
+import SearchInput from '../components/Search'
 
 export default {
   name: 'home',
@@ -19,7 +20,9 @@ export default {
   },
   data () {
     return {
-      fullscreenLoading: false
+      fullscreenLoading: false,
+      searchQuery: {},
+      ajaxData: {}
     }
   },
   methods: {
@@ -28,12 +31,21 @@ export default {
         name: 'search',
         query: search
       })
-      console.log(search)
+      this.searchQuery = search
+      this.getTest(search)
     },
-    getTest () {
+    getTest (search) {
       this.fullscreenLoading = true
-      ajaxGetTest().then(res => {
-        console.log(res)
+      ajaxGetSearch({
+        keyWord: search.text,
+        tag: search.type,
+        // tSort时间倒叙 dSort下载倒叙 vSort浏览量倒叙
+        sort: 'tSort',
+        num: 1,
+        size: 10
+      }).then(res => {
+        console.log(res.data)
+        this.ajaxData = res.data
         this.fullscreenLoading = false
       })
     },