Merge remote-tracking branch 'origin/master'

.gitignore

@@ -27,4 +27,5 @@ yarn-error.log*
 *.rar
 *.zip
 *.7z
-.vscode
+.vscode
+jydocs-mobile/page_docs_app

README.md

@@ -12,6 +12,11 @@
 
 ##### 1.web用xweb框架
 
+```
+3.11 部署目录 
+移动端 /opt/nginx/nginx/html/page_docs_app/
+PC端 /opt/nginx/nginx/html/page_docs/
+```
 
 #### 移动端
 
@@ -70,5 +75,17 @@
 3. 访问`/swordfish/frontPage/docs/sess/index`
 
 ##### 部署
-> 待确认
+```
+# 剑鱼文库 前端配置
+location ^~/page_docs {
+    if ($uri ~ \.html$) {
+		add_header         Pragma   no-cache;
+        add_header         Expires  0;
+        add_header         Cache-Control no-cache,no-store,must-revalidate;
+    }
+    root /opt/nginx/nginx/html/;
+    index index.html;
+    try_files $uri $uri/ /page_docs/index.html;
+}
+```
 

jydocs-mobile/.env.production

@@ -1,3 +1,3 @@
 NODE_ENV=production
-VUE_APP_BASE_API = ''
-BASE_URL = '/page_partner/'
+VUE_APP_BASE_API='/jydocs/'
+BASE_URL = '/page_docs_app/'

jydocs-mobile/src/api/ajax.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import qs from 'qs'
 import { Toast } from 'vant'
 
 // 配置api地址
@@ -13,6 +14,11 @@ const $ajax = axios.create({
 $ajax.interceptors.request.use(config => {
   // 在请求发送之前做一些事
   console.log('--发送之前--', config)
+  if (config.method === 'post' || config.method === 'POST') {
+    if (typeof config.data !== 'string') {
+      config.data = qs.stringify(config.data)
+    }
+  }
   // 获取插入token
   return config
 }, function (error) {

jydocs-mobile/src/api/main.ts

@@ -1,7 +1,8 @@
-import $request from '@/api/index'
 import qs from 'qs'
 
-export function getHome (data: any) {
+import $request from '@/api/index'
+
+export function getHomeHot (data: any) {
   return $request({
     url: '/topList',
     method: 'post',
@@ -9,12 +10,20 @@ export function getHome (data: any) {
   })
 }
 
+export function getHomeActivity (data: any) {
+  return $request({
+    url: '/activityList',
+    method: 'post',
+    data: data
+  })
+}
+
 export function getCashOutInfo (data: any) {
   data = qs.stringify(data)
   return $request({
-    url: '/distribution/cashout/lastMsg',
-    method: 'get',
-    params: data
+    url: '/buy',
+    method: 'post',
+    data: data
   })
 }
 
@@ -26,3 +35,23 @@ export function submitCashOutInfo (data: any) {
     data
   })
 }
+
+export function getDetails (data: any) {
+  console.log(data)
+  // data = qs.stringify(data)
+  return $request({
+    url: '/detail',
+    method: 'post',
+    data
+  })
+}
+
+// 文库购买
+export function getDocPay (data: any) {
+  //   data = qs.stringify(data)
+  return $request({
+    url: '/user/buy',
+    method: 'post',
+    params: data
+  })
+}

jydocs-mobile/src/api/mock.ts

@@ -15,6 +15,7 @@ function mock (config: APIStructure) {
       const result = {
         data: mocks[config.url]
       }
+      console.log('[debug]当前mock', result.data)
       Toast.clear()
       try {
         if (result.data.error_msg) {

jydocs-mobile/src/api/mock/activityList.json

@@ -3,7 +3,21 @@
   "error_msg": "",
   "data": [
     {
-      "docId": "NyfuxSR0iUPobdFzNV2y",
+      "docId": "NyfuxSR0iUPobdFzNV2y3",
+      "activityId": 3,
+      "docTitle": "1111",
+      "docSummary": "1111",
+      "docImg": "1111",
+      "price": 11,
+      "costPrice": 11,
+      "docFileSize": 666666666,
+      "docPageSize": 777,
+      "downTimes":5,
+      "sourceUserId":"剑鱼测试",
+      "docFileType": "ppt"
+    },
+    {
+      "docId": "NyfuxSR0iUPobdFzNV2y2",
       "activityId": 3,
       "docTitle": "1111",
       "docSummary": "1111",
@@ -14,6 +28,20 @@
       "docPageSize": 777,
       "downTimes":5,
       "sourceUserId":""
+    },
+    {
+      "docId": "NyfuxSR0iUPobdFzNV2y1",
+      "activityId": 3,
+      "docTitle": "1111",
+      "docSummary": "1111",
+      "docImg": "1111",
+      "price": 11,
+      "costPrice": 11,
+      "docFileSize": 666,
+      "docPageSize": 777,
+      "downTimes":5,
+      "sourceUserId":"",
+      "docFileType": "pdf"
     }
   ]
 }

jydocs-mobile/src/api/mock/detail.json

@@ -5,7 +5,9 @@
     "status": 1,
     "detail": {
       "docId": "RJ82241sM3DyHwrupW7w",
+      "total": 10,
       "docName": "软件单元、组装、确认测试系统-中标候选人公示",
+      "docList": "各有关单位：为深化招投标领域“放管服”改革、优化营商环境、解决招投标市场存在的突出问题、促进经济高质量发展，2019年9月30日，住建部发布《关于进一步加强房屋建筑和市政基础设施工程招标投标监管的指导意见（征求意见稿）》，2019年12月3日国家发展改革委牵头会同有关部门起草了《中华人民共和国招标投标法（修订草案公开征求意见稿）》。对促进招标投标市场的规范具有引领和示范作用。但是，当前招投标活动中依然存在招标人主体责任缺失，串通投标、弄虚作假违法违规问题。随后财政部相继公布了《政府采购信息发布管理办法》、《政府购买服务管理办法》，为规范政府购买服务行为，促进转变政府职能，改善公共服务供给，推进相关企业采购的专业化和规范化，促进采购过程依法合规是招标投标市场使用国有资金招标采购的重要主体。 为帮助相关单位及时掌握招标采购相关最新文件要求，解决日常招标采购活动中热点、难点问题，解决在招标采购执行中的困惑，进一步提升采购工作的专业化水平。根据当下疫情防控环境，贯彻习近平总书记关于疫情防控工作的重",
       "price": 359,
       "docFileSize": 387,
       "docPageSize": 5,

jydocs-mobile/src/api/mock/topList.json

@@ -3,7 +3,7 @@
   "error_msg": "",
   "data":  [
     {
-      "docId": "RJ82241sM3DyHwrupW7w",
+      "docId": "RJ82241sM3DyHwrupW7w5",
       "docName": "软件单元、组装、确认测试系统-中标候选人公示",
       "price": 359,
       "docFileSize": 387,
@@ -13,7 +13,7 @@
       "docFileType": "其他"
     },
     {
-      "docId": "PImyRKyNohbocfUbhIef",
+      "docId": "PImyRKyNohbocfUbhIef4",
       "docName": "北京精密机电控制设备研究所软件单元、组装、确认测试系统",
       "price": 193,
       "docFileSize": 164,
@@ -21,6 +21,36 @@
       "uploadDate": "2021-03-17 15:46:05",
       "docSummary": "1.招标条件本招标项目：软件单元、组装、确认测试系统已由中国航天科技集团有限公司部门批准建设，项目业主为北京精密机电控制设备研究所，建设资金及出资比例其他资金100.0%,招标人为北京精密机电控制设备研究所。项目已具备招标条件，中科信工程咨",
       "docFileType": "pdf"
+    },
+    {
+      "docId": "PImyRKyNohbocfUbhIef3",
+      "docName": "北京精密机电控制设备研究所软件单元、组装、确认测试系统",
+      "price": 193,
+      "docFileSize": 164,
+      "docPageSize": 3,
+      "uploadDate": "2021-03-17 15:46:05",
+      "docSummary": "1.招标条件本招标项目：软件单元、组装、确认测试系统已由中国航天科技集团有限公司部门批准建设，项目业主为北京精密机电控制设备研究所，建设资金及出资比例其他资金100.0%,招标人为北京精密机电控制设备研究所。项目已具备招标条件，中科信工程咨",
+      "docFileType": "word"
+    },
+    {
+      "docId": "PImyRKyNohbocfUbhIef2",
+      "docName": "北京精密机电控制设备研究所软件单元、组装、确认测试系统",
+      "price": 193,
+      "docFileSize": 164,
+      "docPageSize": 3,
+      "uploadDate": "2021-03-17 15:46:05",
+      "docSummary": "1.招标条件本招标项目：软件单元、组装、确认测试系统已由中国航天科技集团有限公司部门批准建设，项目业主为北京精密机电控制设备研究所，建设资金及出资比例其他资金100.0%,招标人为北京精密机电控制设备研究所。项目已具备招标条件，中科信工程咨",
+      "docFileType": "ppt"
+    },
+    {
+      "docId": "PImyRKyNohbocfUbhIef1",
+      "docName": "北京精密机电控制设备研究所软件单元、组装、确认测试系统",
+      "price": 193,
+      "docFileSize": 164,
+      "docPageSize": 3,
+      "uploadDate": "2021-03-17 15:46:05",
+      "docSummary": "1.招标条件本招标项目：软件单元、组装、确认测试系统已由中国航天科技集团有限公司部门批准建设，项目业主为北京精密机电控制设备研究所，建设资金及出资比例其他资金100.0%,招标人为北京精密机电控制设备研究所。项目已具备招标条件，中科信工程咨",
+      "docFileType": "excel"
     }
   ]
 }

jydocs-mobile/src/components/Recharge.vue

@@ -28,7 +28,7 @@
             </div>
         </div>
         <div class="recharge_footer">
-                <button class="j-button-cancel btn_active">取消</button>
+                <button class="j-button-cancel btn_active" @click="closePopup()">取消</button>
                 <button class="j-button-sure btn_active">去充值</button>
         </div>
     </van-popup>
@@ -51,7 +51,7 @@ import { Icon, Popup, Sticky } from 'vant'
     }
   })
 export default class extends Vue {
-    show = true
+    show = false
     closePopup () {
       this.show = false
     }

jydocs-mobile/src/components/RechargeHave.vue

@@ -46,7 +46,7 @@
                 <van-checkbox v-model="checked" checked-color="#2ABED1" >我已阅读，理解并接受<a href="javascript:;" class="clause" @click="clause()">《剑鱼伙伴服务条款》</a></van-checkbox>
             </div>
             <div class="apply_footer">
-                <button class="j-button-cancel btn_active">取消</button>
+                <button class="j-button-cancel btn_active" @click="closePopup()">取消</button>
                 <button class="j-button-sure btn_active" :disabled="!this.checked" @click="exchange()">去充值</button>
             </div>
         </div>
@@ -70,7 +70,7 @@ import { Icon, Popup, Checkbox } from 'vant'
     }
   })
 export default class extends Vue {
-    show = true
+    show = false
     checked = false
     closePopup () {
       this.show = false

jydocs-mobile/src/router/modules/main.ts

@@ -24,7 +24,7 @@ export default [
     }
   },
   {
-    path: '/details',
+    path: '/details/:id',
     name: 'details',
     component: () => import(/* webpackChunkName: "test" */ '@/views/details/details.vue'),
     meta: {

jydocs-mobile/src/store/modules/main.ts

@@ -1,63 +1,163 @@
+import { StoreOptions } from 'vuex'
+import Vue from 'vue'
 import {
-  getHome,
+  getHomeHot,
+  getHomeActivity,
   getCashOutInfo,
-  submitCashOutInfo
+  submitCashOutInfo,
+  getDocPay,
+  getDetails
 } from '@/api/main'
 
-export default {
+interface InterfaceStore<S> extends StoreOptions<S> {
+  namespaced?: boolean;
+}
+type APIStructure = Record<string, any>;
+type modulesOption = InterfaceStore<any>;
+
+function recoveryPageData (key: string, defaultValues = {}) {
+  return sessionStorage.getItem(key) ? JSON.parse(sessionStorage.getItem(key) || '') : defaultValues
+}
+function checkType (type: string | number) {
+  let typeStr = ''
+  switch (type) {
+    case 1: {
+      typeStr = 'word'
+      break
+    }
+    case 2: {
+      typeStr = 'pdf'
+      break
+    }
+    case 3: {
+      typeStr = 'excel'
+      break
+    }
+    case 4: {
+      typeStr = 'ppt'
+      break
+    }
+    case 'doc': {
+      typeStr = 'word'
+      break
+    }
+    case 'xls': {
+      typeStr = 'excel'
+      break
+    }
+  }
+  return typeStr
+}
+function formatData (v: APIStructure) {
+  return {
+    img: v?.docImg,
+    type: checkType(v?.docFileType),
+    id: v.docId,
+    title: v?.docName || v?.docTitle,
+    money: v.price,
+    size: v?.docFileSize,
+    page: v?.docPageSize,
+    down: v?.downTimes,
+    contribution: v?.sourceUserId
+  }
+}
+
+const modulesOption: modulesOption = {
   namespaced: true,
   state: {
     // 提现页面数据缓存(用于跳出页面返回时恢复)
-    cashOutInfo: sessionStorage.getItem('partner-cashout') ? JSON.parse(sessionStorage.getItem('partner-cashout') || '') : {},
-    cashOutSuccess: sessionStorage.getItem('partner-cashout-success') ? JSON.parse(sessionStorage.getItem('partner-cashout-success') || '') : {}
+    cashOutInfo: recoveryPageData('partner-cashout'),
+    cashOutSuccess: recoveryPageData('partner-cashout-success'),
+    homePageData: recoveryPageData('jy-docs-home-page')
   },
   mutations: {
     // 保存提现页面数据
-    saveCashOutInfo (state: any, data: any) {
+    saveCashOutInfo (state, data) {
       for (const key in data) {
         state.cashOutInfo[key] = data[key]
       }
       sessionStorage.setItem('partner-cashout', JSON.stringify(data))
     },
     // 清除提现页面数据
-    clearCashOutInfo (state: any) {
+    clearCashOutInfo (state) {
       state.cashOutInfo = {}
       sessionStorage.setItem('partner-cashout', JSON.stringify({}))
     },
     // 保存提现成功数据
-    saveCashOutSuccessInfo (state: any, data: any) {
+    saveCashOutSuccessInfo (state, data) {
       for (const key in data) {
         state.cashOutSuccess[key] = data[key]
       }
       sessionStorage.setItem('partner-cashout-success', JSON.stringify(data))
     },
     // 清除提现成功数据
-    clearCashOutSuccessInfo (state: any) {
+    clearCashOutSuccessInfo (state) {
       state.cashOutSuccess = {}
       sessionStorage.setItem('partner-cashout-success', JSON.stringify({}))
+    },
+    // 保存首页数据
+    saveHomeData (state, data) {
+      for (const key in data) {
+        Vue.set(state.homePageData, key, data[key])
+      }
+      sessionStorage.setItem('jy-docs-home-page', JSON.stringify(state.homePageData))
     }
   },
   actions: {
-    async getHome (state: any, data: any) {
+    // 首页数据
+    async getHome (state) {
+      getHomeHot({ sign: 'new', num: 5 }).then((res: APIStructure) => {
+        if (!res.data.error_msg.length) {
+          state.commit('saveHomeData', {
+            new: res.data.data.map((v: APIStructure) => formatData(v))
+          })
+        }
+      })
+      getHomeHot({ sign: 'hot', num: 5 }).then((res: APIStructure) => {
+        if (!res.data.error_msg.length) {
+          state.commit('saveHomeData', {
+            hot: res.data.data.map((v: APIStructure) => formatData(v))
+          })
+        }
+      })
+      getHomeActivity({ code: 3, size: 3, num: 1 }).then((res: APIStructure) => {
+        if (!res.data.error_msg.length) {
+          state.commit('saveHomeData', {
+            keep: res.data.data.map((v: APIStructure) => formatData(v))
+          })
+        }
+      })
+    },
+    // 文库购买
+    async getDocPay (state, data) {
       try {
-        const res = await getHome(data)
+        const res = await getDocPay(data)
         return res.data
       } catch (error) {}
     },
     // 提现查询
-    async getCashOutInfo (state: any, data: any) {
+    async getCashOutInfo (state, data) {
       try {
         const res = await getCashOutInfo(data)
         return res.data
       } catch (error) {}
     },
     // 提现提交
-    async submitCashOutInfo (state: any, data: any) {
+    async submitCashOutInfo (state, data) {
       try {
         const res = await submitCashOutInfo(data)
         return res.data
       } catch (error) {}
+    },
+    // 详情
+    async getDetails (state, data) {
+      try {
+        const res = await getDetails(data)
+        console.log(res)
+        return res.data
+      } catch (error) {}
     }
   },
   getters: {}
 }
+export default modulesOption

jydocs-mobile/src/utils/globalFilters.ts

@@ -7,10 +7,13 @@ import {
   formatPrice,
   fen2Yuan,
   addSpaceForBank,
-  addConfusionForBank
+  addConfusionForBank,
+  formatSize
 } from './globalFunctions'
 
 // 注册全局过滤器
+// 文件大小格式化
+Vue.filter('sizeFormatter', formatSize)
 // 时间格式化（同时间格式化函数）
 Vue.filter('dateFormatter', dateFormatter)
 // 时间戳转换 多少秒、多少分、多少小时前、多少天前  超出10天显示年月日

jydocs-mobile/src/utils/globalFunctions.ts

@@ -312,6 +312,16 @@ export function removeSpace (str: string) {
   return str.replace(/\s+/g, '')
 }
 
+// 文件大小格式化
+export function formatSize (size: string | number, pointLength: number, units: Array<string>) {
+  size = Number(size)
+  let unit: string | undefined = ''
+  units = units || ['B', 'K', 'M', 'G', 'TB']
+  while ((unit = units.shift()) && size > 1024) {
+    size = size / 1024
+  }
+  return (unit === 'B' ? size : size.toFixed(pointLength === undefined ? 2 : pointLength)) + (unit || '')
+}
 /**
  * 通用关键字高亮替换
  * @param {String} value 要高亮的字符串

jydocs-mobile/src/views/Home.vue

@@ -7,7 +7,8 @@
         <h5>最新文档</h5>
       </div>
       <div class="list-group flex-c-c">
-        <div class="list-item flex-r-c" v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
+        <van-skeleton class="van-loading-skeleton line-style" :row="5" :loading="showLoading.new">
+          <div class="list-item flex-r-c" v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
           <div class="flex flex-r-c center left">
             <van-icon :name="'diy-' + item.type" />
             <div class="flex">
@@ -19,6 +20,7 @@
             <span>{{item.money}}</span>
           </div>
         </div>
+        </van-skeleton>
       </div>
     </div>
     <div class="hot-group base-group">
@@ -27,7 +29,8 @@
         <h5>热门下载</h5>
       </div>
       <div class="list-group flex-c-c">
-        <div class="list-item flex-r-c" v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
+        <van-skeleton class="van-loading-skeleton line-style" :row="5" :loading="showLoading.hot">
+          <div class="list-item flex-r-c" v-for="item in pageData.hot" :key="item.id" @click="goContent(item)">
           <div class="flex flex-r-c center left">
             <van-icon :name="'diy-' + item.type" />
             <div class="flex">
@@ -39,6 +42,7 @@
             <span>{{item.money}}</span>
           </div>
         </div>
+        </van-skeleton>
       </div>
     </div>
     <div class="keep-group base-group">
@@ -47,7 +51,11 @@
         <h5>精选推荐</h5>
       </div>
       <div class="list-group card-group flex-c-c">
-        <div class="card-item flex-r-c"  v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
+        <van-skeleton avatar avatar-shape="square" class="van-loading-skeleton card-style"
+            :row="4"
+            :row-width="rowWidth"
+            :loading="showLoading.keep">
+          <div class="card-item flex-r-c"  v-for="item in pageData.keep" :key="item.id" @click="goContent(item)">
           <div class="mini-img-group">
             <img :src="item.img" alt="">
             <van-icon :name="'diy-' + item.type" />
@@ -57,8 +65,12 @@
               <div class="title-text van-multi-ellipsis--l2">{{item.title}}</div>
             </div>
             <div class="flex-c-c info-text">
-              <span>贡献者: dshasjhd</span>
-              <span>贡献者: dshasjhd | dshasjhd | 200k</span>
+              <span v-if="item.contribution">贡献者: {{item.contribution}}</span>
+              <div class="info-text-group flex-r-c center left">
+                <span v-if="item.down">{{item.down}}次下载</span>
+                <span v-if="item.page">共{{item.page}}页</span>
+                <span v-if="item.size">{{item.size | sizeFormatter}}</span>
+              </div>
             </div>
             <div class="money-group flex-r-c center left">
               <van-icon class="s20" name="diy-iconJianYu" />
@@ -66,6 +78,7 @@
             </div>
           </div>
         </div>
+        </van-skeleton>
       </div>
     </div>
   </div>
@@ -74,19 +87,20 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import Search from '@/components/Search.vue'
-// import { Cell, CellGroup, Icon, Dialog, Toast } from 'vant'
-import { Icon } from 'vant'
-import { mapActions } from 'vuex'
-  // import { MixinTop } from '@/utils/mixin-top'
+import { Icon, Skeleton } from 'vant'
+import { mapActions, mapState } from 'vuex'
   @Component({
     name: 'home',
-    // mixins: [MixinTop],
     components: {
-      // [Cell.name]: Cell,
-      // [CellGroup.name]: CellGroup,
       [Icon.name]: Icon,
+      [Skeleton.name]: Skeleton,
       Search
     },
+    computed: {
+      ...mapState('main', {
+        pageData: (state: any) => state.homePageData
+      })
+    },
     methods: {
       ...mapActions({
         ajaxData: 'main/getHome'
@@ -95,52 +109,20 @@ import { mapActions } from 'vuex'
   })
 
 export default class extends Vue {
-    pageData: any = {}
     ajaxData: any
+    pageData: any
+    rowWidth = ['100%', '20%', '40%', '15%']
 
     created () {
-      console.log('111')
-      this.ajaxData().then((res: any) => {
-        console.log(res)
-      })
-      this.pageData = {
-        new: [
-          {
-            img: require('@/assets/images/bgApp.png'),
-            type: 'pdf',
-            id: '1',
-            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
-            money: 200000
-          },
-          {
-            type: 'excel',
-            img: require('@/assets/images/bgApp.png'),
-            id: '2',
-            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
-            money: 200
-          },
-          {
-            type: 'word',
-            img: require('@/assets/images/bgApp.png'),
-            id: '3',
-            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
-            money: 200
-          },
-          {
-            type: 'ppt',
-            img: require('@/assets/images/bgApp.png'),
-            id: '4',
-            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
-            money: 200
-          },
-          {
-            type: 'other',
-            img: require('@/assets/images/bgApp.png'),
-            id: '5',
-            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
-            money: 200
-          }
-        ]
+      this.ajaxData()
+    }
+
+    get showLoading () {
+      const s = this.pageData
+      return {
+        new: !s?.new,
+        hot: !s?.hot,
+        keep: !s?.keep
       }
     }
 
@@ -151,7 +133,12 @@ export default class extends Vue {
     }
 
     goContent (item: any) {
-      console.log(item)
+      this.$router.push({
+        name: 'details',
+        params: {
+          id: item.id
+        }
+      })
     }
 }
 </script>
@@ -161,6 +148,21 @@ export default class extends Vue {
   padding-bottom: 40px;
   box-sizing: border-box;
 
+  ::v-deep .van-loading-skeleton {
+    &.line-style {
+      .van-skeleton__row {
+        width: 100% !important;
+        height: 28px;
+      }
+    }
+    &.card-style {
+      .van-skeleton__avatar {
+        width: 100px !important;
+        height: 124px !important;
+      }
+    }
+  }
+
   @include diy-icon('iconJianYu', 16, 16);
 
   .van-icon-diy-iconJianYu.s20 {
@@ -176,11 +178,6 @@ export default class extends Vue {
   .base-group {
     padding: 4px 19px 4px 16px;
     box-sizing: border-box;
-
-    &.new-group {
-      margin-top: $topSearchHeight;
-    }
-
     .list-group {
       border-radius: 8px;
       background: #FFFFFF;
@@ -205,6 +202,7 @@ export default class extends Vue {
         }
       }
       .card-item {
+        justify-content: flex-start;
         padding: 8px 16px 12px 0;
         box-sizing: border-box;
         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -234,6 +232,20 @@ export default class extends Vue {
             bottom: 0;
           }
         }
+        .info-text-group {
+          span {
+            display: inline-block;
+            &:last-child {
+              &::after {
+                content: unset;
+              }
+            }
+            &::after {
+              content: "|";
+              padding: 0 8px;
+            }
+          }
+        }
         .info-text {
           color: #9B9CA3;
           font-family: PingFang SC;

jydocs-mobile/src/views/details/details.vue

@@ -2,72 +2,211 @@
     <div class="details-p">
         <div class="tops">
             <h3>
-                <i class="el-icon-jy-word"></i>
-                优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料
+                <van-icon class="word01" name="diy-word" />
+                {{detailData.docName}}
             </h3>
         </div>
-
+        <div class="middles">
+            <h3>摘要</h3>
+            <p>{{detailData.docSummary}}</p>
+            <div class="continue">全文共18页，<span>继续阅读<van-icon name="arrow-down" size="18" /></span></div>
+        </div>
+        <div class="botts">
+            <div class="cont-page">
+                优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。
+            </div>
+        </div>
         <van-goods-action>
             <van-goods-action-icon class="no-icon">
                 <template #default>
-                    <p style="color:#2ABED1;font-size: 12px;line-height: 18px;">剑鱼币</p>
-                    <p style="color:#2ABED1;font-size: 18px;line-height: 26px;">500</p>
+                    <p class="p1">剑鱼币</p>
+                    <p class="p2">500</p>
                 </template>
             </van-goods-action-icon>
-            <van-goods-action-icon icon="cart-o" text="购物车" />
-            <van-goods-action-icon icon="shop-o" text="店铺" />
-            <van-goods-action-button
-                type="danger"
-                text="立即购买"
-            />
+            <van-goods-action-icon icon="diy-jubao" text="投诉举报" @click="jubaod" />
+            <van-goods-action-icon :icon="collectd?'diy-weiguanzhu':'diy-guanzhu'" text="收藏" @click="canged" />
+            <van-goods-action-button text="下载文档" @click="uploaded" />
         </van-goods-action>
+        <!-- 充值 -->
+        <recharge ref="charge"></recharge>
+        <!-- 购买 -->
+        <purchase ref="buys"></purchase>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
+import { mapActions } from 'vuex'
+import { Icon, Toast, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
+import Recharge from '@/components/Recharge.vue'
+import Purchase from '@/components/RechargeHave.vue'
 @Component({
   name: 'details-p',
   components: {
+    [Icon.name]: Icon,
     [GoodsAction.name]: GoodsAction,
     [GoodsActionIcon.name]: GoodsActionIcon,
-    [GoodsActionButton.name]: GoodsActionButton
+    [GoodsActionButton.name]: GoodsActionButton,
+    Recharge,
+    Purchase
+  },
+  methods: {
+    ...mapActions({
+      getDetails: 'main/getDetails'
+    })
   }
 })
 export default class extends Vue {
+  getDetails: any
+  detailData: any = []
+  collectd = true
+  nums = 1
+  created () {
+    this.onList()
+  }
+
+  onList () {
+    this.getDetails({ docId: '111' }).then((res: any) => {
+      console.log(res.data)
+      this.detailData = res.data.detail
+    })
+  }
+
+  jubaod () {
+    Toast({
+      duration: 3500,
+      message: '如果您发现此内容有侵权行为，请联系客服400-108-6670进行投诉'
+    })
+  }
 
+  canged () {
+    this.collectd = !this.collectd
+  }
+
+  uploaded () {
+    if (this.nums === 0) {
+      ;(this.$refs.charge as any).show = true
+    } else {
+      ;(this.$refs.buys as any).show = true
+    }
+  }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@include diy-icon('word', 24, 24);
+@include diy-icon('jubao', 20, 20);
+@include diy-icon('weiguanzhu', 20, 20);
+@include diy-icon('guanzhu', 20, 20);
 .details-p {
+    display: flex;
+    flex-direction: column;
     .tops {
+        display: flex;
         background: #fff;
-        padding: 32px 40px;
-        border-radius: 4px;
+        padding: 24px 16px;
         h3 {
             display: flex;
-            align-items: center;
-            color: #1d1d1d;
+            flex-direction: initial;
+            color: #171826;
             font-weight: 500;
-            font-size: 24px;
-            line-height: 36px;
-            i {
+            font-size: 20px;
+            line-height: 30px;
+            .word01 {
+                display: inline-table;
+                width: 26px;
+                height: 24px;
                 margin-right: 8px;
             }
         }
     }
+    .middles {
+        padding: 16px;
+        background: #fff;
+        margin: 8px 0;
+        h3 {
+            font-size: 16px;
+            line-height: 24px;
+            font-weight: 500;
+            color: #171826;
+        }
+        p {
+            color: #5F5E64;
+            font-size: 14px;
+            line-height: 20px;
+            margin-top: 8px;
+        }
+        .continue {
+            color: #5F5E64;
+            font-size: 14px;
+            line-height: 20px;
+            text-align: center;
+            margin-top: 32px;
+            span {
+                display: inline-flex;
+                align-items: center;
+                color: #2ABED1;
+                cursor: pointer;
+                i {
+                    margin-left: 4px;
+                }
+            }
+        }
+    }
+    .botts {
+        padding: 16px 24px;
+        background: #fff;
+        .cont-page {
+            height: 900px;
+        }
+    }
     .van-goods-action {
-        height: 56px;
-        padding: 0 16px;
+        // height: 56px;
+        padding: 8px 16px;
+        box-shadow: 0px -2px 8px 0px #eee;
+        display: flex;
+        justify-content: space-between;
         .no-icon {
+            p {
+                color:#2ABED1;
+            }
+            .p1 {
+                font-size: 12px;
+                line-height: 18px;
+            }
+            .p2 {
+                font-size: 18px;
+                line-height: 26px;
+            }
             .van-icon {
                 display: none!important;
             }
         }
-        .van-button {
-            padding: 8px 50px;
+        .van-goods-action-icon:not(.no-icon) {
+            font-size: 10px;
+            color: #5F5E64;
+        }
+        .van-goods-action-button--first {
+            margin-left: 0;
+        }
+        .van-goods-action-button--last {
+            margin-right: 0;
+        }
+        .van-goods-action-button {
+            flex: none;
+        }
+        .van-button--large {
+            width: 165px;
+            height: 40px;
+        }
+        ::v-deep .van-button--default {
+            background-color: #2ABED1;
+            .van-button__content {
+                .van-button__text {
+                    color: #fff;
+                    font-size: 16px;
+                }
+            }
         }
     }
 }

jydocs-mobile/src/views/purchase/purchase.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="docs_phone">
         <van-cell-group>
-          <van-field v-model="tel" type="tel" label="手机号码" placeholder="请输入手机号码" />
+          <van-field v-model="tel" type="number" label="手机号码" placeholder="请输入手机号码" />
         </van-cell-group>
       </div>
     </div>
@@ -41,41 +41,40 @@
         <button class="apply_button" :disabled="!this.checked" @click="exchange()">确定兑换</button>
       </div>
     </div>
-    <RechargeHave></RechargeHave>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Checkbox, CheckboxGroup, Field, CellGroup } from 'vant'
-import { mapActions, mapMutations } from 'vuex'
-import RechargeHave from '../../components/RechargeHave.vue'
+import { mapActions } from 'vuex'
+import { getDocPay } from '../../api/main'
 @Component({
   name: 'purchase-page',
   components: {
-    RechargeHave,
     [Checkbox.name]: Checkbox,
     [CheckboxGroup.name]: CheckboxGroup,
     [Field.name]: Field,
     [CellGroup.name]: CellGroup
   },
   methods: {
-    ...mapMutations({
-      saveLogout: 'logout/setLogout'
-    }),
     ...mapActions({
-      sureLogout: 'logout/sureLogout'
+      getDocPay: 'main/getDocPay'
     })
   }
 })
 export default class extends Vue {
-  protected sureLogout!: any
-  protected saveLogout!: any
+  // protected getDocPay!: any
   checked = false
-  tel = 1
+  tel = ''
   $router: any
+
+  // 确定兑换
   exchange () {
-    this.$router.push('/purchasesuccess')
+    getDocPay({ docId: 'RJ82241sM3DyHwrupW7w', phone: '18439509554' }).then((res: any) => {
+      console.log(res)
+    })
+    // this.$router.push('/purchasesuccess')
   }
 
   // 剑鱼标讯服务条款

jydocs-mobile/src/views/purchase/purchasesuccess.vue

@@ -27,7 +27,6 @@
             <div class="infor_value">6489798765465465</div>
           </div>
         </div>
-      <SharePopup></SharePopup>
       </div>
     </div>
     <div class="j-footer apply_footer">
@@ -39,16 +38,12 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 // import { mapState } from 'vuex'
-import { fen2Yuan } from '../../utils/globalFunctions'
-import SharePopup from '../../components/SharePopup.vue'
 
 @Component({
   name: 'test',
   components: {
-    SharePopup
   },
   methods: {
-    fen2Yuan
   },
   computed: {
     // ...mapState('logout', {

jydocs-mobile/vue.config.js

@@ -39,7 +39,7 @@ module.exports = {
   publicPath: process.env.BASE_URL,
   parallel: false,
   productionSourceMap: false,
-  outputDir: 'page_partner',
+  outputDir: 'page_docs_app',
   devServer: {
     port: '8080',
     open: false,

jydocs-pc/.env.development

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

jydocs-pc/src/api/index.js

@@ -1,8 +1,24 @@
 import axios from 'axios'
+import qs from 'qs'
 
 console.log('[debug]当前环境:', process.env)
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API
 })
 
+service.interceptors.request.use(config => {
+  // 在请求发送之前做一些事
+  if (config.method === 'post' || config.method === 'POST') {
+    if (typeof config.data !== 'string') {
+      config.data = qs.stringify(config.data)
+    }
+  }
+  // 获取插入token
+  return config
+}, function (error) {
+  // 当出现请求错误是做一些事
+  console.log('--请求超时--', error)
+  return Promise.reject(error)
+})
+
 export default service

jydocs-pc/src/api/mock.js

@@ -13,6 +13,7 @@ function mock (config) {
       }
       // Toast.clear()
       try {
+        console.log('[debug]当前mock', result.data)
         if (!result.data.error_msg) {
           // Toast(result.data.msg)
         }

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

@@ -3,17 +3,82 @@
   "error_msg": "",
   "data": [
     {
-      "docId": "NyfuxSR0iUPobdFzNV2y",
+      "docId": "001671fe-8890-11eb-8699-0050568f51e7",
       "activityId": 3,
-      "docTitle": "1111",
-      "docSummary": "1111",
-      "docImg": "1111",
-      "price": 11,
-      "costPrice": 11,
-      "docFileSize": 666,
-      "docPageSize": 777,
-      "downTimes":5,
-      "sourceUserId":""
+      "docTitle": "蚌埠市城市管理条例",
+      "docSummary": "  安徽省人民代表大会常务委员会关于批准 《蚌埠市城市管理条例》的决议  （2017 年 7 月 28 日安徽省第十二届人民代表大会 常务委员会第三十九次会议通过）  安徽省第十二届人民代表大会常务委员会第三十九次会议审查了《蚌埠市城市管理条例》，决定予以批准，由蚌埠市人民代表大会常务委员会公布施行。   — 1 —  蚌埠市城市管理条例  （2017 年 6 月 27 日蚌埠市第十五届人民代表大会常务委员会第四十一次会议通过  2017 年 7 月 28 日安徽省第十二届人民代表大会常务委员会第三十九次会议批准）  第一章  总  则  第一条  为了规范城市管理，提升城市公共服务水平，建设文明和谐、生态宜居城市，根据有关法律、行政法规，结合本市实际，制定本条例。 第二条  本条例适用于本市区和怀远县、五河县、固镇县实施城市化管理区域内的城市管理活动。 实施城市化管理区域，是指城镇行政区域内实际已成片开发建设，市政公用设施和公共设施基本完备的区域，其范围由市、县人民政府在本条例施行之日向社会公布，以后每两年公布一次。 第三条  城市管理坚持以人为本、服务优先、疏管结合、权责一致、公众",
+      "docImg": "https://jydocs-previewimg.oss-cn-beijing.aliyuncs.com/ffec815e-888f-11eb-abba-000060546592.png",
+      "price": 692,
+      "costPrice": 692,
+      "downTimes": 647,
+      "docFileSize": 58368,
+      "docPageSize": 15,
+      "docFileType": 1
+    },
+    {
+      "docId": "001d00e2-887b-11eb-8699-0050568f51e7",
+      "activityId": 3,
+      "docTitle": "淮安市市容管理条例",
+      "docSummary": "   淮安市容管理条例  （2018 年 10 月 30 日淮安市第八届人民代表大会常务委员会第十七次会议通过  2018 年 1 月 23 日江苏省第十三届人民代表大会常务委员会第六次会议批准）  目  录 第一章  总则 第二章  建（构）筑物外立面管理 第三章  户外广告与店招标牌管理 第四章  城市道路与车辆管理 第五章  农贸市场与临时经营场点管理 第六章  垃圾与扬尘管理 第七章  责任区制度与监督管理 第八章  附则  第一章  总则  第一条  为了加强市容管理，创造整洁、优美、文明、宜居的城市环境，根据有关法律、法规，结合本市实际，制定本条例。 ─  1 ─    第二条  本市区、县城以及实施城市化管理的其他区域的市容管理活动适用本条例。实施城市化管理的其他区域由市、县（区）人民政府划定，并向社会公布。 本条例所称市容管理，包括对建（构）筑物外立面、户外广告与店招标牌、城市道路与车辆、农贸市场与临时经营场点、垃圾与扬尘、市容责任区等进行的管理。 第三条  市容管理坚持统一领导、分级负责、条块结合、属地管理、公众参与、社会监督相结合的原则。 第四条  市、县（区）人民",
+      "docImg": "https://jydocs-previewimg.oss-cn-beijing.aliyuncs.com/ffeccf6e-887a-11eb-a33e-000060544256.png",
+      "price": 852,
+      "costPrice": 852,
+      "downTimes": 948,
+      "docFileSize": 72192,
+      "docPageSize": 24,
+      "docFileType": 1
+    },
+    {
+      "docId": "0025722a-886e-11eb-8699-0050568f51e7",
+      "activityId": 3,
+      "docTitle": "大连市华侨权益保护条例",
+      "docSummary": "  大连市华侨权益保护条例  （2019 年 4 月 26 日大连市第十六届人民代表大会常务委员会第十一次会议通过 2019 年 5 月 30 日辽宁省第十三届人民代表大会常务委员会第十一次会议批准）  第一条 为了保护华侨合法权益，发挥华侨在本市经济社会发展中的作用，根据宪法和有关法律、法规，结合本市实际，制定本条例。 第二条 本市行政区域内华侨合法权益的保护，适用本条例。 本条例所称华侨,是指定居在国外的中国公民。华侨身份的认定，由市及区（市）县侨务主管部门按照国家有关规定执行。 第三条 华侨权益保护应当遵循平等保护的原则。华侨享有宪法和法律规定的公民权利，并履行宪法和法律规定的公民义务。 第四条 本市应当加强对华侨权益保护工作的领导，建立健全华侨权益保障工作协调机制，制定华侨权益保护政策措施。 市及区（市）县侨务主管部门负责本行政区域内华侨权益保护的指导、协调、监督工作，加强对华侨权益保护有关法律法规和政策的宣传。  —１— 市及区（市）县人民政府有关部门按照各自职责，做好与华侨权益保护有关的工作。 第五条 市及区（市）县归国华侨联合会应当宣传贯彻法律法规和侨务政策，反映华侨的意",
+      "docImg": "https://jydocs-previewimg.oss-cn-beijing.aliyuncs.com/000217a6-886e-11eb-a042-000060542c87.png",
+      "price": 608,
+      "costPrice": 608,
+      "downTimes": 44,
+      "docFileSize": 29696,
+      "docPageSize": 8,
+      "docFileType": 1
+    },
+    {
+      "docId": "0027f45e-885b-11eb-8699-0050568f51e7",
+      "activityId": 3,
+      "docTitle": "三亚市人民代表大会常务委员会关于授权大社区综合服务中心行使有关行政管理权限的决定",
+      "docSummary": "三亚市人民代表大会常务委员会 关于授权大社区综合服务中心行使有关 行政管理权限的决定  （2020 年 4 月 29 日三亚市第七届人民代表大会常务委员会第三十九次会议通过 2020 年 6 月 16 日海南省第六届人民代表大会常务委员会第二十次会议批准）  为了探索建立适应城乡社区治理需要的体制机制，服务海南自由贸易港建设，根据有关法律法规，结合三亚市实际，三亚市人民代表大会常务委员会作出如下决定： 一、市、区人民政府及其有关部门可以依照本决定将本级有关城乡社区治理的管理权限授权或者委托依法设立的大社区综合服务中心行使，具体事项由市人民政府确定。 二、对授权或者委托行使的管理权限事项，市、区人民政府及其有关部门应当加强对大社区综合服务中心的业务培训指导，强化事中事后监管，做到放管结合。承接的大社区综合服务中心应当建立承接管理权限的有效机制，做到规范有序，确保严格依法行使职权。对实践证明不宜授权或者委托行使的，市、区人民政府及其有关部门应当及时收回相关管理权限。市人民政府根据本决定制定具体实施办法。 三、本决定自公布之日起施行。 - 1 -  ",
+      "docImg": "https://jydocs-previewimg.oss-cn-beijing.aliyuncs.com/fffda776-885a-11eb-82d9-000060540ca6.png",
+      "price": 514,
+      "costPrice": 514,
+      "downTimes": 35,
+      "docFileSize": 20923,
+      "docPageSize": 1,
+      "docFileType": 1
+    },
+    {
+      "docId": "0036daac-87be-11eb-8af9-0050568f51e7",
+      "activityId": 3,
+      "docTitle": "中华人民共和国电子签名法",
+      "docSummary": "   中华人民共和国电子签名法  （204 年 8 月 28 日第十届全国人民代表大会常务委员会第十一次会议通过 根据2015 年4 月 24 日第十二届全国人民代表大会常务委员会第十四次会议《关于修改\u003c中华人民共和国电力法\u003e等六部法律的决定》修正）  目  录   第一章 总则   第二章 数据电文   第三章 电子签名与认证   第四章 法律责任   第五章 附则  第一章 总则    第一条 为了规范电子签名行为，确立电子签名的法律效力，维护有关各方的合法权益，制定本法。   第二条 本法所称电子签名，是指数据电文中以电子形式所含、所附用于识别签名人身份并表明签名人认可其中内容的数据。  —1—    本法所称数据电文，是指以电子、光学、磁或者类似手段生成、发送、接收或者储存的信息。   第三条 民事活动中的合同或者其他文件、单证等文书，当事人可以约定使用或者不使用电子签名、数据电文。   当事人约定使用电子签名、数据电文的文书，不得仅因为其采用电子签名、数据电文的形式而否定其法律效力。   前款规定不适用下列文书:   （一）涉及婚姻、收养、继承等人身关系的；   （二）涉及土",
+      "docImg": "https://jydocs-previewimg.oss-cn-beijing.aliyuncs.com/000ce4ca-87be-11eb-b6d7-00006053053f.png",
+      "price": 632,
+      "costPrice": 632,
+      "downTimes": 404,
+      "docFileSize": 29869,
+      "docPageSize": 10,
+      "docFileType": 1
+    },
+    {
+      "docId": "00395c6c-8874-11eb-8699-0050568f51e7",
+      "activityId": 3,
+      "docTitle": "中华人民共和国招标投标法实施条例",
+      "docSummary": "中华人民共和国招标投标法实施条例  (201 年12 月20 日中华人民共和国务院令第613 号公布 根据 2017 年 3 月 1 日《国务院关于修改和废止部分行政法规的决定》第一次修订 根据 2018 年 3 月 19 日《国务院关于修改和废止部分行政法规的决定》第二次修订 根据 2019 年 3 月 2 日《国务院关于修改部分行政法规的决定》第三次修订) 第一章 总则 第一条 为了规范招标投标活动，根据《中华人民共和国招标投标法》(以下简称招标投标法)，制定本条例。 第二条 招标投标法第三条所称工程建设项目，是指工程以及与工程建设有关的货物、服务。 前款所称工程，是指建设工程，包括建筑物和构筑物的新建、改建、扩建及其相关的装修、拆除、修缮等；所称与工程建设有关的货物，是指构成工程不可分割的组成部分，且为实现工程基本功能所必需的设备、材料等；所称与工程建设有关的服务，是指为完成工程所需的勘察、设计、监理等服务。 第三条 依法必须进行招标的工程建设项目的具体范围和规模标准，由国务院发展改革部门会同国务院有关部门制订，报 - 1 - 国务院批准后公布施行。 第四条 国务院发展改革部门指",
+      "docImg": "https://jydocs-previewimg.oss-cn-beijing.aliyuncs.com/00027ad0-8874-11eb-87e9-000060543698.png",
+      "price": 876,
+      "costPrice": 876,
+      "downTimes": 919,
+      "docFileSize": 36855,
+      "docPageSize": 28,
+      "docFileType": 1
     }
   ]
 }

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

@@ -1,26 +1,126 @@
 {
   "error_code": 0,
   "error_msg": "",
-  "data":  [
-    {
-      "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"
+  "data": [
+    {
+      "docId": "4e9cf3a8-8853-11eb-8699-0050568f51e7",
+      "docName": "白山市燃放烟花爆竹管理条例",
+      "price": 556,
+      "docFileSize": 32256,
+      "docPageSize": 4,
+      "downTimes": 999,
+      "viewTimes": 2286,
+      "uploadDate": "2021-03-19 09:34:55",
+      "docSummary": "   白山市燃放烟花爆竹管理条例  （2020 年 8 月 25 日白山市第八届人民代表大会常务委员会第三十一次 会议通过 2020 年 9 月 29 日吉林省第十三届人民代表大会常务委员会 第二十四次会议批准）  第一条 为了加强燃放烟花爆竹管理，减少大气、噪声和环境卫生等污染，保障公共安全和人身财产安全，根据国务院《烟花爆竹安全管理条例》等法律法规，结合实际，制定本条例。 第二条 浑江区、江源区城市中心区内燃放烟花爆竹及其相关管理活动，适用本条例。城市中心区具体范围由市人民政府确定并公布。 各县（市）可以参照本条例的规定执行。 依法应当由公安机关许可举办的焰火晚会、其他大型焰火燃放活动，不受本条例第七条、第八条限制。 第三条 燃放烟花爆竹管理，应当坚持禁限结合、安全环保的原则。 第四条 本条例由市人民政府组织实施。 公安机关负责烟花爆竹的公共安全管理，查处违法燃放烟花爆竹的行为。其他有关部门应当按照各自职责，做好燃放烟花爆  - 1 -   竹监督管理工作。 乡（镇）人民政府、街道办事处应当做好本行政区域内燃放烟花爆竹管理工作。 城市居民委员会、村民委员会、物业服务企业等应当协助做",
+      "docFileType": "doc"
+    },
+    {
+      "docId": "4f6c00ba-8882-11eb-8699-0050568f51e7",
+      "docName": "福建省人民代表大会常务委员会关于深入学习宣传和贯彻实施《中华人民共和国宪法》的决定",
+      "price": 607,
+      "docFileSize": 28653,
+      "docPageSize": 7,
+      "downTimes": 999,
+      "viewTimes": 620,
+      "uploadDate": "2021-03-19 15:11:22",
+      "docSummary": " 福建省人民代表大会常务委员会 关于深入学习宣传和贯彻实施 《中华人民共和国宪法》的决定 （2018 年 7 月 26 日福建省第十三届人民代表大会 常务委员会第四次会议通过）  第十三届全国人民代表大会第一次会议通过《中华人民共和国宪法修正案》，这是国家政治生活中的一件大事。为了在全省进一步加强宪法的学习宣传，保证宪法的全面贯彻实施，特作如下决定： 一、树立宪法意识，充分认识深入学习宣传和贯彻实施宪法的重大意义 宪法是国家的根本法，是治国安邦的总章程，是全面依法治国的总依据。我国现行宪法是符合国情、符合时代发展要求的好宪法。这次宪法修改，确立了习近平新时代中国特色社会主义思想在国家政治和社会生活中的指导地位，这是党和国家从新时代坚持和发展中国特色社会主义全局和战略高度作出的重大决策，是推动全面依法治国、推进国家治理体系和治理能力现代化的重大举措，必将对党和国家事业产生极为广泛深刻持久的影响。深入学习宣传和贯彻实施宪法，对于深入学习贯彻习近平新时代中国特色社会主义思想和党的十九大精神，尤其是习近平总书记关— 1 —  于宪法的重要论述精神，对于进一步动员全省人民在以习近平同志为核心的党",
+      "docFileType": "doc"
+    },
+    {
+      "docId": "0902e60a-87c6-11eb-a27b-0050568f51e7",
+      "docName": "中华人民共和国慈善法",
+      "price": 868,
+      "docFileSize": 37798,
+      "docPageSize": 26,
+      "downTimes": 998,
+      "viewTimes": 231,
+      "uploadDate": "2021-03-18 16:43:39",
+      "docSummary": "   中华人民共和国慈善法  （2016 年 3 月 16 日第十二届全国人民代表大会第四次会议通过）  目  录   第一章 总则   第二章 慈善组织   第三章 慈善募捐   第四章 慈善捐赠   第五章 慈善信托   第六章 慈善财产   第七章 慈善服务   第八章 信息公开   第九章 促进措施   第十章 监督管理   第十一章 法律责任   第十二章 附则  第一章 总则  —1—     第一条 为了发展慈善事业，弘扬慈善文化，规范慈善活动，保护慈善组织、捐赠人、志愿者、受益人等慈善活动参与者的合法权益，促进社会进步，共享发展成果，制定本法。   第二条 自然人、法人和其他组织开展慈善活动以及与慈善有关的活动，适用本法。其他法律有特别规定的，依照其规定。   第三条 本法所称慈善活动，是指自然人、法人和其他组织以捐赠财产或者提供服务等方式，自愿开展的下列公益活动:   （一）扶贫、济困；   （二）扶老、救孤、恤病、助残、优抚；   （三）救助自然灾害、事故灾难和公共卫生事件等突发事件造成的损害；   （四）促进教育、科学、文化、卫生、体育等事业的发展；   （五）防",
+      "docFileType": "doc"
+    },
+    {
+      "docId": "a0b0fc32-8873-11eb-8699-0050568f51e7",
+      "docName": "宁夏回族自治区环境教育条例",
+      "price": 620,
+      "docFileSize": 25166,
+      "docPageSize": 10,
+      "downTimes": 998,
+      "viewTimes": 2110,
+      "uploadDate": "2021-03-19 13:26:16",
+      "docSummary": "  宁夏回族自治区环境教育条例    （201 年 12 月 1 日宁夏回族自治区第十届人民代表大会常务委员会第二十七次会议通过 根据 2019 年 3 月26 日宁夏回族自治区第十二届人民代表大会常务委员会第十一次会议《关于修改〈宁夏回族自治区商品交易市场管理条例〉等 18 件地方性法规的决定》修正）  目  录 第一章 总则 第二章 组织管理 第三章 学校环境教育 第四章 社会环境教育 第五章 保障与监督   第六章 附则  第一章 总则    第一条  为了加强环境保护宣传和普及环境教育，增强公民环境保护意识，推进生态文明建设，根据有关法律、法规，结合自治区实际，制定本条例。   第二条  自治区行政区域内的国家机关、企业、事业单位、 - 1 - 社会团体和其他组织，以及对有接受教育能力的公民，开展环境教育活动，适用本条例。   第三条  本条例所称环境教育，是指以环境意识、环境道德、环境法制、环境科普知识为主要内容,培养环境保护技能、树立环境价值观的教育活动。   第四条  普及和加强环境教育是全社会的共同责任。   环境教育的对象是有接受教育能力的公民。重点是国家机关工作人员",
+      "docFileType": "doc"
+    },
+    {
+      "docId": "81fa20c6-884f-11eb-a809-0050568f51e7",
+      "docName": "无锡市不动产登记条例",
+      "price": 768,
+      "docFileSize": 115840,
+      "docPageSize": 21,
+      "downTimes": 998,
+      "viewTimes": 2412,
+      "uploadDate": "2021-03-19 09:07:43",
+      "docSummary": "   无锡市不动产登记条例  （2018 年 4 月 26 日无锡市第十六届人民代表大会常务委员会第九次会议通过  2018 年 5 月 31 日江苏省第十三届人民代表大会常务委员会第三次会议批准  根据2020 年 8 月 27 日无锡市第十六届人民代表大会常务委员会第三十二次会议通过，2020 年 9 月 25 日江苏省第十三届人民代表大会常务委员会第十八次会议批准的《无锡市人民代表大会常务委员会关于修改〈无锡市不动产登记条例〉的决定》修正）  目  录 第一章  总则 第二章  一般规定 第三章  不动产权利登记     第一节  国有建设用地使用权和房屋等建筑物、构筑             物所有权登记   第二节  集体土地所有权和集体建设用地使用权及房             屋等建筑物、构筑物所有权登记   第三节  宅基地使用权和房屋等建筑物、构筑物所有             权登记 ─  1 ─       第四节  土地承包经营权登记   第五节  地役权登记   第六节  抵押权登记 第四章  其他登记   第一节  预告登记   第二节  更正登记   第三",
+      "docFileType": "doc"
+    },
+    {
+      "docId": "593bbfa-8866-11eb-8699-0050568f51e7",
+      "docName": "福州市烟花爆竹销售和燃放管理办法",
+      "price": 594,
+      "docFileSize": 39995,
+      "docPageSize": 7,
+      "downTimes": 998,
+      "viewTimes": 289,
+      "uploadDate": "2021-03-19 11:54:15",
+      "docSummary": "          福州市烟花爆竹销售和燃放管理办法 （2019 年 6 月 27 日福州市第十五届人民 代表大会 常务委员会第二十次会议通过   2019 年 9 月 26 日福建省第十三届人民代表大会 常务委员会第十二次会议批准）  第一条 为了加强烟花爆竹销售和燃放管理，减少环境污染，保障公共安全和人身、财产安全，减少环境污染，根据国务院《烟花爆竹安全管理条例》和有关法律、法规，结合本市实际，制定本办法。 第二条 本市行政区域内烟花爆竹的销售和燃放管理，适用本办法。 第三条 本市烟花爆竹的销售和燃放实行严格管理、综合治理的原则，遵守安全环保、文明节俭的要求。 鼓励移风易俗，倡导经营、使用电子鞭炮、礼花筒等安全、环保的替代品。 第四条 市、县（市、区）人民政府应当加强对烟花爆竹销售和燃放管理工作的领导，建立烟花爆竹销售和燃放综合管理协调机制，统筹协调烟花爆竹销售和燃放管理工作中的重大事项。  — 1 — 应急管理部门负责烟花爆竹销售的管理；公安机关负责烟花爆竹燃放的公共安全管理。 生态环境、市场监督管理、城市管理、民政、住房保障和房产管理、供销等部门按照各自职责，做好烟花爆竹销售和",
+      "docFileType": "doc"
+    },
+    {
+      "docId": "04dfec-885c-11eb-8699-0050568f51e7",
+      "docName": "广西壮族自治区优化营商环境条例",
+      "price": 965,
+      "docFileSize": 40828,
+      "docPageSize": 31,
+      "downTimes": 998,
+      "viewTimes": 2671,
+      "uploadDate": "2021-03-19 10:42:24",
+      "docSummary": " 广西壮族自治区优化营商环境条例  （2020 年 5 月 19 日广西壮族自治区第十三届 人民代表大会常务委员会第十五次会议通过）  目    录 第一章  总则 第二章  市场环境 第三章  政务服务 第四章  监管执法 第五章  法治保障 第六章  附则  第一章 总则    第一条 为了持续优化营商环境，激发市场主体活力，推动经济社会高质量发展，根据国务院《优化营商环境条例》，结合本自治区实际，制定本条例。   第二条  本条例所称营商环境是指企业以及其他从事生产经营活动的组织和个人（以下统称市场主体）在市场准入、生产经营、市场退出等市场经济活动中涉及的体制机制性因素和条件。 1    第三条  优化营商环境应当遵循市场化、法治化、国际化原则，坚持各类市场主体权利平等、机会平等、规则平等，以市场主体需求为导向，以政府职能转变为核心，全面深化“放管服”改革，践行“有事必应、无事不扰”的服务理念，持续对标国际国内先进水平，打造贸易投资便利、行政效率高效、政务服务规范、法治体系完善的国内一流营商环境，为各类市场主体投资兴业营造稳定、公平、透明、可预期的发展环境。   第四条  各级人",
+      "docFileType": "doc"
+    },
+    {
+      "docId": "6c74914e-8879-11eb-8699-0050568f51e7",
+      "docName": "大同市御河流域生态保护条例",
+      "price": 601,
+      "docFileSize": 19337,
+      "docPageSize": 8,
+      "downTimes": 997,
+      "viewTimes": 2500,
+      "uploadDate": "2021-03-19 14:07:46",
+      "docSummary": "  大同市御河流域生态保护条例  （2018 年 8 月 29 日大同市第十五届人民代表大会常务 委员会第十六次会议通过   2018 年 1 月 30 日山西省 第十三届人民代表大会常务委员会第七次会议批准）  目  录 第一章  总则 第二章  生态修复 第三章  生态保护 第四章  法律责任 第五章  附则  第一章  总  则  第一条  为了加强御河流域生态保护，规范流域开发、利用、治理等活动，保障御河流域生态良好，促进全市经济和社会可持续发展，根据《中华人民共和国水法》《中华人民共和国环境保护法》等法律法规，结合本市实际，制定本条例。 第二条  本条例所称御河流域，是御河干流和支流汇水面积内的水域和陆域，以及跨流域向御河补水的水源和输水—1— 工程沿线管理范围。 第三条  在御河流域本市管辖范围从事规划建设、资源开发、生产生活、生态保护和监督管理等有关活动，应当遵守本条例。 第四条  御河流域生态保护应当坚持统一规划、保护优先、因地制宜、科学修复的原则。 第五条  市、县（区）人民政府应当加强御河流域生态保护的领导，实行河长制，建立流域生态保护工作联席会议制度，协调解决流域",
+      "docFileType": "doc"
+    },
+    {
+      "docId": "20559ad4-885f-11eb-8699-0050568f51e7",
+      "docName": "山东省养老服务条例",
+      "price": 794,
+      "docFileSize": 33579,
+      "docPageSize": 21,
+      "downTimes": 997,
+      "viewTimes": 2834,
+      "uploadDate": "2021-03-19 10:59:31",
+      "docSummary": "  山东省养老服务条例  （2020 年 3 月 26 日山东省第十三届人民代表大会常务   委员会第十八次会议通过）  目  录     第一章  总则     第二章  养老服务设施规划和建设     第三章  居家社区养老服务     第四章  机构养老服务     第五章  医养康养结合服务     第六章  扶持保障措施     第七章  监督管理     第八章  法律责任     第九章  附则             第一章 总则  第一条 为了积极应对人口老龄化，健全养老服务体系，满足老年人多样化、多层次养老服务需求，促进养老服务健康发展，根据《中华人民共和国老年人权益保障法》等法律、行政法规， - 1 - 结合本省实际，制定本条例。 第二条 本条例适用于本省行政区域内养老服务及其监督管理活动。 本条例所称养老服务，是指在家庭成员承担赡养、扶养义务的基础上，由政府和社会为老年人提供的生活照料、医疗保健、康复护理、文体娱乐、精神慰藉、紧急救援、临终关怀等服务。 第三条 养老服务是社会公共服务体系的重要组成部分，养老服务发展应当与经济社会发展水平相适应，坚持政府主导、社会",
+      "docFileType": "doc"
+    },
+    {
+      "docId": "3d888586-87be-11eb-8af9-0050568f51e7",
+      "docName": "中华人民共和国农村土地承包法",
+      "price": 702,
+      "docFileSize": 31192,
+      "docPageSize": 15,
+      "downTimes": 997,
+      "viewTimes": 310,
+      "uploadDate": "2021-03-18 15:47:51",
+      "docSummary": "   中华人民共和国农村土地承包法  （202 年 8 月 29 日第九届全国人民代表大会常务委员会第二十九次会议通过 根据209 年 8 月27 日第十一届全国人民代表大会常务委员会第十次会议《关于修改部分法律的决定》修正）  目  录   第一章 总则   第二章 家庭承包     第一节 发包方和承包方的权利和义务     第二节 承包的原则和程序     第三节 承包期限和承包合同     第四节 土地承包经营权的保护     第五节 土地承包经营权的流转   第三章 其他方式的承包   第四章 争议的解决和法律责任   第五章 附则  第一章 总则  —1—     第一条 为稳定和完善以家庭承包经营为基础、统分结合的双层经营体制，赋予农民长期而有保障的土地使用权，维护农村土地承包当事人的合法权益，促进农业、农村经济发展和农村社会稳定，根据宪法，制定本法。   第二条 本法所称农村土地，是指农民集体所有和国家所有依法由农民集体使用的耕地、林地、草地，以及其他依法用于农业的土地。   第三条 国家实行农村土地承包经营制度。 农村土地承包采取农村集体经济组织内部的家庭承包方式，不",
+      "docFileType": "doc"
     }
   ]
 }

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

@@ -0,0 +1,26 @@
+import httpRequest from '@/api'
+import mockRequest from '@/api/mock'
+import qs from 'qs'
+
+let request = httpRequest
+if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true') {
+  // @ts-ignore
+  request = mockRequest
+}
+
+export function getHomeHot (data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/topList',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getHomeActivity (data) {
+  return request({
+    url: '/activityList',
+    method: 'post',
+    data: data
+  })
+}

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

@@ -2,7 +2,7 @@ import httpRequest from '@/api'
 import mockRequest from '@/api/mock'
 
 let request = httpRequest
-if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK) {
+if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true') {
   // @ts-ignore
   request = mockRequest
 }

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

@@ -2,7 +2,7 @@ import httpRequest from '@/api'
 import mockRequest from '@/api/mock'
 
 let request = httpRequest
-if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK) {
+if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true') {
   // @ts-ignore
   request = mockRequest
 }

jydocs-pc/src/utils/globalFilters.js

@@ -7,10 +7,12 @@ import {
   formatPrice,
   fen2Yuan,
   addSpaceForBank,
-  addConfusionForBank
+  addConfusionForBank,
+  formatSize
 } from './globalFunctions'
 
 // 注册全局过滤器
+Vue.filter('sizeFormatter', formatSize)
 // 时间格式化（同时间格式化函数）
 Vue.filter('dateFormatter', dateFormatter)
 // 时间戳转换 多少秒、多少分、多少小时前、多少天前  超出10天显示年月日

jydocs-pc/src/utils/globalFunctions.js

@@ -226,6 +226,16 @@ export function dateFromNow (timestamp) {
   return td
 }
 
+// 文件大小格式化
+export function formatSize (size, pointLength, units) {
+  size = Number(size)
+  let unit = ''
+  units = units || ['B', 'K', 'M', 'G', 'TB']
+  while ((unit = units.shift()) && size > 1024) {
+    size = size / 1024
+  }
+  return (unit === 'B' ? size : size.toFixed(pointLength === undefined ? 2 : pointLength)) + (unit || '')
+}
 /**
  * 通用关键字高亮替换
  * @param {String} value 要高亮的字符串

jydocs-pc/src/views/Content.vue

@@ -313,7 +313,7 @@ export default {
           flex-direction: column;
           .page {
               .head-tip {
-                  width: 840px;
+                  width: 920px;
                   height: 42px;
                   background: #fcfcfc;
                   // filter:alpha(opacity=80); //IE

jydocs-pc/src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="pages--home">
       <div class="top-search-group flex-c-c center">
         <h5>剑鱼文库，最实用的招投标资料库</h5>
         <search-input @submit="goSubmit"></search-input>
@@ -14,19 +14,33 @@
           </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 class="flex flex-c-c">
+                <div class="list-item flex-r-c" v-for="item in newList1" :key="item.id" @click="goContent(item)">
+                  <div class="flex flex-r-c center left">
+                    <i :class="'el-icon-jy-' + item.type" />
+                    <div class="flex">
+                      <div class="van-ellipsis">{{item.title}}</div>
+                    </div>
+                  </div>
+                  <div class="right-info flex-r-c center right">
+                    <i class="el-icon-jy-iconJianYu" />
+                    <span>{{item.money}}</span>
+                  </div>
+                </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="flex flex-c-c">
+                <div class="list-item flex-r-c" v-for="item in newList2" :key="item.id" @click="goContent(item)">
+                  <div class="flex flex-r-c center left">
+                    <i :class="'el-icon-jy-' + item.type" />
+                    <div class="flex">
+                      <div class="van-ellipsis">{{item.title}}</div>
+                    </div>
+                  </div>
+                  <div class="right-info flex-r-c center right">
+                    <i class="el-icon-jy-iconJianYu" />
+                    <span>{{item.money}}</span>
+                  </div>
+                </div>
               </div>
           </div>
       </div>
@@ -40,20 +54,34 @@
           </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 class="flex flex-c-c">
+              <div class="list-item flex-r-c" v-for="item in hotList1" :key="item.id" @click="goContent(item)">
+                <div class="flex flex-r-c center left">
+                  <i :class="'el-icon-jy-' + item.type" />
+                  <div class="flex">
+                    <div class="van-ellipsis">{{item.title}}</div>
+                  </div>
+                </div>
+                <div class="right-info flex-r-c center right">
+                  <i class="el-icon-jy-iconJianYu" />
+                  <span>{{item.money}}</span>
+                </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>
+            <div class="flex flex-c-c">
+              <div class="list-item flex-r-c" v-for="item in hotList2" :key="item.id" @click="goContent(item)">
+                <div class="flex flex-r-c center left">
+                  <i :class="'el-icon-jy-' + item.type" />
+                  <div class="flex">
+                    <div class="van-ellipsis">{{item.title}}</div>
+                  </div>
+                </div>
+                <div class="right-info flex-r-c center right">
+                  <i class="el-icon-jy-iconJianYu" />
+                  <span>{{item.money}}</span>
+                </div>
               </div>
+            </div>
           </div>
       </div>
 
@@ -64,12 +92,29 @@
               </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 class="card-item flex-r-c"  v-for="item in pageData.keep" :key="item.id" @click="goContent(item)">
+              <div class="mini-img-group">
+                <img :src="item.img" alt="">
+                <i :class="'el-icon-jy-' + item.type" />
+              </div>
+              <div class="flex-c-c">
+                <div class="flex">
+                  <div class="title-text van-multi-ellipsis--l2">{{item.title}}</div>
+                </div>
+                <div class="flex-c-c info-text">
+                  <span v-if="item.contribution">贡献者: {{item.contribution}}</span>
+                  <div class="info-text-group flex-r-c center left">
+                    <span v-if="item.down">{{item.down}}次下载</span>
+                    <span v-if="item.page">共{{item.page}}页</span>
+                    <span v-if="item.size">{{item.size | sizeFormatter}}</span>
+                  </div>
+                </div>
+                <div class="money-group flex-r-c center left">
+                  <i class="el-icon-jy-iconJianYu s20" />
+                  <span class="red-text">{{item.money}}</span>
+                </div>
+              </div>
+            </div>
           </div>
       </div>
   </div>
@@ -79,27 +124,119 @@
 import { ajaxGetTest } from '../api/modules/user'
 import { Button } from 'element-ui'
 import SearchInput from '../components/Search'
-import ListItem from '../components/ListItem'
+import { getHomeActivity, getHomeHot } from '../api/modules/home'
+function recoveryPageData (key, defaultValues = {}) {
+  return sessionStorage.getItem(key) ? JSON.parse(sessionStorage.getItem(key) || '') : defaultValues
+}
+
+function checkType (type) {
+  let typeStr = ''
+  switch (type) {
+    case 1: {
+      typeStr = 'word'
+      break
+    }
+    case 2: {
+      typeStr = 'pdf'
+      break
+    }
+    case 3: {
+      typeStr = 'excel'
+      break
+    }
+    case 4: {
+      typeStr = 'ppt'
+      break
+    }
+    case 'doc': {
+      typeStr = 'word'
+      break
+    }
+    case 'xls': {
+      typeStr = 'excel'
+      break
+    }
+  }
+  return typeStr
+}
+
+function formatData (v) {
+  return {
+    img: v?.docImg,
+    type: checkType(v?.docFileType),
+    id: v.docId,
+    title: v?.docName || v?.docTitle,
+    money: v.price,
+    size: v?.docFileSize,
+    page: v?.docPageSize,
+    down: v?.downTimes,
+    contribution: v?.sourceUserId
+  }
+}
 
 export default {
   name: 'home',
   components: {
-    ListItem,
     SearchInput,
     [Button.name]: Button
   },
   data () {
     return {
-      fullscreenLoading: false
+      fullscreenLoading: false,
+      pageData: {}
     }
   },
+  created () {
+    this.pageData = recoveryPageData('jy-docs-home-page-pc')
+    this.getHome()
+  },
   beforeCreate: function () {
     $('body').addClass('view_index')
   },
   beforeDestroy: function () {
     $('body').removeClass('view_index')
+    sessionStorage.setItem('jy-docs-home-page-pc', JSON.stringify(this.pageData))
+  },
+  computed: {
+    newList1 () {
+      return this.pageData?.new && this.pageData?.new.slice(0, 5)
+    },
+    newList2 () {
+      return this.pageData?.new && this.pageData?.new.slice(5,)
+    },
+    hotList1 () {
+      return this.pageData?.hot && this.pageData?.hot.slice(0, 5)
+    },
+    hotList2 () {
+      return this.pageData?.hot && this.pageData?.hot.slice(5,)
+    }
   },
   methods: {
+    goContent (item) {
+      this.$router.push({
+        name: 'content',
+        params: {
+          id: item.id
+        }
+      })
+    },
+    async getHome () {
+      getHomeHot({ sign: 'new', num: 10 }).then(res => {
+        if (!res.data.error_msg.length) {
+          this.$set(this.pageData, 'new', res.data.data.map((v) => formatData(v)))
+        }
+      })
+      getHomeHot({ sign: 'hot', num: 10 }).then(res => {
+        if (!res.data.error_msg.length) {
+          this.$set(this.pageData, 'hot', res.data.data.map((v) => formatData(v)))
+        }
+      })
+      getHomeActivity({ code: 3, size: 6, num: 1 }).then(res => {
+        if (!res.data.error_msg.length) {
+          this.$set(this.pageData, 'keep', res.data.data.map((v) => formatData(v)))
+        }
+      })
+    },
     goSubmit (search) {
       this.$router.push({
         name: 'search',
@@ -124,11 +261,144 @@ export default {
     .page-container {
       background-image: url("~@/assets/images/wenkuBanner.png");
       background-repeat: no-repeat;
+      background-color: #fff;
     }
   }
-
 </style>
 <style scoped lang="scss">
+  .pages--home {
+    padding-bottom: 40px;
+    box-sizing: border-box;
+
+    @include diy-icon('iconJianYu', 24, 24);
+
+    @include diy-icon('pdf', 24);
+    @include diy-icon('word', 24);
+    @include diy-icon('excel', 24);
+    @include diy-icon('ppt', 24);
+
+    .list-item {
+      cursor: pointer;
+      padding: 18px 0;
+      box-sizing: border-box;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      &:hover {
+        background: #F5F6F7;
+      }
+      &:last-child {
+        border-bottom-color: transparent;
+      }
+
+      i {
+        flex-shrink: 0;
+        margin-right: 4px;
+      }
+      .flex {
+        min-width: 0;
+      }
+      .right-info {
+        margin-left: 4px;
+        flex-shrink: 0;
+        color: #1D1D1D;
+        font-family: Microsoft YaHei;
+        font-size: 16px;
+        letter-spacing: 0px;
+        text-align: right;
+      }
+    }
+    .card-item {
+      cursor: pointer;
+      justify-content: flex-start;
+      padding: 8px 16px 12px 0;
+      box-sizing: border-box;
+
+      &:hover {
+        background: #F5F6F7;
+      }
+
+      .money-group {
+        margin-top: 8px;
+      }
+      .mini-img-group {
+        flex-shrink: 0;
+        position: relative;
+        border-radius: 4px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        width: 100px;
+        height: 124px;
+        margin-right: 12px;
+        overflow: hidden;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        i {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+        }
+      }
+      .info-text-group {
+        span {
+          display: inline-block;
+          &:last-child {
+            &::after {
+              content: unset;
+            }
+          }
+          &::after {
+            content: "|";
+            padding: 0 8px;
+          }
+        }
+      }
+      .info-text {
+        color: #9B9CA3;
+        font-family: PingFang SC;
+        font-size: 12px;
+        line-height: 18px;
+        letter-spacing: 0px;
+        text-align: left;
+      }
+      .red-text {
+        color: #FB483D;
+        font-family: PingFang SC;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0px;
+        text-align: left;
+      }
+      .title-text {
+        color: #171826;
+        font-family: PingFang SC;
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0px;
+        text-align: left;
+      }
+    }
+
+    .van-ellipsis {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .van-multi-ellipsis--l2 {
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .hot-keep-group {
+      .card-item {
+        width: 33.33%;
+      }
+    }
+
+  }
     @include diy-icon('search', 24);
     @include diy-icon('Frame', 24);
     @include diy-icon('Frame-1', 24);
@@ -140,6 +410,14 @@ export default {
 
     .new-group {
         margin-top: 54px;
+      .flex-c-c {
+        padding-right: 24px;
+        box-sizing: border-box;
+        & + .flex-c-c {
+          padding-right: 0;
+          padding-left: 24px;
+        }
+      }
     }
 
     .hot-down-group {
@@ -156,6 +434,10 @@ export default {
         .new-list-group {
             background-color: white;
             border-radius: 8px;
+          .flex-c-c {
+            padding: 20px;
+            box-sizing: border-box;
+          }
         }
     }
 
@@ -187,9 +469,8 @@ export default {
     }
 
     .new-list-group {
-        .flex-c-c {
-            padding: 20px;
-            box-sizing: border-box;
+        > .flex {
+          max-width: 50%;
         }
     }
 </style>