feat: 文库首页接口联调

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

jydocs-pc/src/api/index.js

@@ -11,6 +11,10 @@ service.interceptors.request.use(config => {
     if (typeof config.data !== 'string') {
       config.data = qs.stringify(config.data)
     }
+    if(config.contentType) {
+      config.headers['Content-Type'] = config.contentType
+      config.data = qs.parse(config.data)
+    }
   }
   // 获取插入token
   return config

jydocs-pc/src/api/mock.js

@@ -4,6 +4,7 @@ files.keys().forEach(key => {
   const tempK = '/' + key.replace(/\$/g, '/').replace(/(\.\/|\.json)/g, '')
   mocks[tempK] = files(key)
 })
+console.log(mocks, 'mocks')
 
 function mock (config) {
   return new Promise(resolve => {

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

@@ -0,0 +1,20 @@
+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 getJyAdListApi (data) {
+  // data = qs.stringify(data)
+  return request({
+    baseURL: 'publicapply',
+    url: '/free/getJyAdList',
+    contentType: 'application/json',
+    method: 'post',
+    data
+  })
+}

jydocs-pc/src/components/doc-item-card/Card.vue

@@ -56,7 +56,7 @@
             v-for="(item, index) in subInfo"
             :key="index"
           >{{ item }}</span>
-          <span class="vip_mark" v-if="productType === 0">会员免费</span>
+          <span class="vip_mark" v-if="productType === 1">会员免费</span>
         </div>
         <div class="c-f-right flex-r-c">
           <slot name="price">

jydocs-pc/src/components/filters-item/SelectCard.vue

@@ -93,7 +93,21 @@
         if (value.length === 1 && value[0] === '全部') {
           this.$emit('input', [])
         } else {
-          this.$emit('input', value)
+          const datas = []
+          this.options.forEach((item) => {
+            value.forEach((val) => {
+              if(this.field) {
+                if(val === item[this.field]) {
+                  datas.push(item)
+                }
+              } else {
+                if(val === item) {
+                  datas.push(item)
+                }
+              }
+            })
+          })
+          this.$emit('input', datas)
         }
       }
     }

jydocs-pc/src/views/Home.vue

@@ -30,6 +30,20 @@
                 </div>
                 <div class="word-file-name">{{ item.title }}</div>
               </div>
+            </div>
+            <!-- 文库会员广告位 -->
+            <div class="word-file-ad">
+              <el-carousel height="80px">
+                <el-carousel-item @click="onDocLink(item)" v-for="(item, index) in jyPcDocMember" :key="index">
+                  <img :src="item.s_pic" :alt="item.s_remark">
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+            <!-- 文库推荐广告位 -->
+            <div class="word-recommend-ad">
+              <div class="word-recommend-ad-list" @click="onDocLink(item)" v-for="(item, index) in jyPcDocRecommend" :key="index">
+                <img :src="item.s_pic" :alt="item.s_remark">
+              </div>
             </div>
               <!-- <div class="flex flex-c-c">
                 <div class="list-item flex-r-c" v-for="item in newList1" :key="item.id" @click="goContent(item)">
@@ -80,8 +94,8 @@
                   </div>
                 </div>
                 <div class="right-info flex-r-c center right">
-                  <i class="el-icon-jy-iconJianYu" />
-                  <span>{{item.money}}</span>
+                  <!-- <i class="el-icon-jy-iconJianYu" />
+                  <span>{{item.money}}</span> -->
                 </div>
               </div>
             </div>
@@ -94,8 +108,8 @@
                   </div>
                 </div>
                 <div class="right-info flex-r-c center right">
-                  <i class="el-icon-jy-iconJianYu" />
-                  <span>{{item.money}}</span>
+                  <!-- <i class="el-icon-jy-iconJianYu" />
+                  <span>{{item.money}}</span> -->
                 </div>
               </div>
             </div>
@@ -118,6 +132,10 @@
                 <div class="flex">
                   <div class="title-text van-multi-ellipsis--l2">{{item.title}}</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 class="flex-c-c info-text">
                   <span v-if="item.contribution">贡献者: {{item.contribution}}</span>
                   <div class="info-text-group flex-r-c center left">
@@ -126,10 +144,6 @@
                     <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>
@@ -138,9 +152,10 @@
 </template>
 
 <script>
-import { Button } from 'element-ui'
+import { Button, Carousel, CarouselItem } from 'element-ui'
 import SearchInput from '../components/Search'
 import { getHomeActivity, getHomeHot, getSearchTag } from '../api/modules/home'
+import { getJyAdListApi } from '../api/modules/publicapply'
 import { getSearch } from '../api/modules/search'
 import { recoveryPageData } from '../utils'
 
@@ -194,14 +209,18 @@ export default {
   name: 'home',
   components: {
     SearchInput,
-    [Button.name]: Button
+    [Button.name]: Button,
+    [Carousel.name]: Carousel,
+    [CarouselItem.name]: CarouselItem
   },
   data () {
     return {
       fullscreenLoading: false,
       pageData: {},
       wordModel: [],
-      wordFileList: []
+      wordFileList: [],
+      jyPcDocRecommend: [], // 文库推荐广告位
+      jyPcDocMember: [] // 文库会员广告位
     }
   },
   created () {
@@ -244,7 +263,9 @@ export default {
         v.active = false
       });
       data.active = true;
-      this.getSearchEvent(data.value)
+      this.getSearchEvent(data.value, (res) => {
+        this.wordFileList = res.data.map((v) => formatData(v))
+      })
       // if(isHover) {
       //   data.active = true;
       //   this.getSearchEvent(data.value)
@@ -260,12 +281,25 @@ export default {
       // }
     },
     // 获取文件列表
-    async getSearchEvent (type) {
-      const _this = this
-      getSearch({tag: type, sort: 'vSort', num: 1, size: 8}).then(data => {
+    async getSearchEvent (type, callBack) {
+      let params = {
+        tag: type,
+        sort: 'vSort',
+        num: 1,
+        size: 8
+      }
+      if(!type) {
+        params = {
+          productType: 2,
+          sort: 'vSort',
+          num: 1,
+          size: 8
+        }
+      }
+      getSearch(params).then(data => {
         const res = data.data
         if(res && res.error_code === 0) {
-          _this.wordFileList = res.data.map((v) => formatData(v))
+          callBack && callBack(res)
         }
       })
     },
@@ -280,19 +314,37 @@ export default {
           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)))
-        }
-      })
+      // 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)))
+      //   }
+      // })
       // 获取文件分类
       getSearchTag().then(data => {
         const res = data.data
         if(res && res.error_code === 0) {
           this.wordModel = res.data.map((item, index) => ({ value: item, active: index === 0 ? true : false }))
-          this.getSearchEvent(this.wordModel[0].value)
+          this.getSearchEvent(this.wordModel[0].value, (res) => {
+            this.wordFileList = res.data.map((v) => formatData(v))
+          })
         }
       })
+      // 获取广告信息
+      getJyAdListApi({ codes: ['jy-pc-docmember', 'jy-pc-doc-recommend'] }).then(res => {
+        const resData = res.data
+        if(resData && resData.error_code === 0) {
+          console.log(resData.data, 'resData')
+          this.jyPcDocRecommend = resData.data['jy-pc-doc-recommend']
+          this.jyPcDocMember = resData.data['jy-pc-docmember']
+        }
+      })
+      this.getSearchEvent('', (res) => {
+        console.log(res, 'res')
+        this.$set(this.pageData, 'keep', res.data.list.map((v) => formatData(v)))
+      })
+    },
+    onDocLink (item) {
+      window.open(item.s_link, '_blank')
     },
     goSubmit (search) {
       if (!search.text.replace(/\s+/g, '')) {
@@ -457,7 +509,7 @@ export default {
 
     .hot-keep-group {
       .card-item {
-        width: 33.33%;
+        width: 279px;
         overflow: hidden;
       }
     }
@@ -591,6 +643,33 @@ export default {
           }
         }
       }
+      .word-file-ad {
+        margin-top: 20px;
+        height: 80px;
+        cursor: pointer;
+        .el-carousel{
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      .word-recommend-ad{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 20px;
+        height: 160px;
+        .word-recommend-ad-list{
+          width: 285px;
+          height: 100%;
+          cursor: pointer;
+          &>img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
       .word-model {
         .word-model-content {
           display: flex;

jydocs-pc/src/views/Search.vue

@@ -5,9 +5,11 @@
       <div class="filter-content">
         <div class="filter-item">
           <select-card
+            field="label"
             labelText="文件格式"
             :options="fileTypeList"
             :single="true"
+            @input="onFilterFormat($event, 'docFileType')"
           ></select-card>
         </div>
         <div class="filter-item">
@@ -16,6 +18,7 @@
             labelText="商品类型"
             :options="productTypeList"
             :single="true"
+            @input="onFilterFormat($event, 'productType')"
           ></select-card>
         </div>
       </div>
@@ -38,7 +41,7 @@
           :title="item.docName"
           :desc="item.docSummary + '...'"
           :docType="item.docFileType"
-          :productType="item.product_type ? 1 : 0"
+          :productType="item.productType"
           :price="item.price"
           :subInfo="calcSubInfo(item)"
           @onClick="toDocDetail(item)"
@@ -87,7 +90,28 @@ export default {
   },
   data () {
     return {
-      fileTypeList: ['doc', 'pdf', 'ppt', 'xls', 'txt'],
+      fileTypeList: [
+        {
+          label: 'doc',
+          value: 1
+        },
+        {
+          label: 'pdf',
+          value: 2
+        },
+        {
+          label: 'ppt',
+          value: 3
+        },
+        {
+          label: 'xls',
+          value: 4
+        },
+        {
+          label: 'txt',
+          value: 5
+        }
+      ],
       productTypeList: [
         {
           label: '会员免费',
@@ -120,7 +144,9 @@ export default {
       ],
       searchQuery: {
         type: '',
-        text: ''
+        text: '',
+        docFileType: 0,
+        productType: 0
       },
       listState: {
         loaded: false, // 是否已经搜索过
@@ -190,18 +216,23 @@ export default {
         return
       }
       this.resetListState()
-      this.getList(search)
+      this.getList()
+    },
+    onFilterFormat (filters, keyName) {
+      let key = filters.length > 0 ? filters[0] : { label: '全部', value: 0 }
+      this.searchQuery[keyName] = key.value
+      this.getList()
     },
-    async getList (search) {
+    async getList () {
       const query = {
         keyWord: this.searchQuery.text.trim().replace(/\s+/g, ' '),
         tag: this.searchQuery.type === '全部' ? '' : this.searchQuery.type,
         sort: this.activeSortList.type,
         num: this.listState.pageNum,
-        size: this.listState.pageSize
+        size: this.listState.pageSize,
+        docFileType: this.searchQuery.docFileType,
+        productType: this.searchQuery.productType
       }
-
-      console.log(query)
       // 设置url
       this.setUrlQuery()
       // 搜索内容去多余的空格并设置