jwyu 2 년 전
부모
커밋
16744a4fa4
2개의 변경된 파일99개의 추가작업 그리고 14개의 파일을 삭제
  1. 8 0
      api/report.js
  2. 91 14
      pages-report/reportList.vue

+ 8 - 0
api/report.js

@@ -126,4 +126,12 @@ export const apiGoodsPermissionList=params=>{
  */
 export const apiReportListForVariety=params=>{
     return httpGet('/report/variety/list',params)
+}
+
+/**
+ * 获取列表类型报告中的子目录数据
+ * @param classify_id
+ */
+export const apiReportClassifyMenuList=params=>{
+    return httpGet('/classify/menu/list',params)
 }

+ 91 - 14
pages-report/reportList.vue

@@ -1,20 +1,34 @@
 <template>
   <view class="report-list-page">
-    <van-sticky style="background: #fff">
+    <view class="top-filter-box">
       <view class="flex search-wrap">
-        <view style="flex: 1" @click="goSearch" >
+        <view style="flex: 1">
         <searchBox 
           placeholder="请输入报告标题或关键字" 
           :hasRightBtn="false" 
-          :disabled="true"
+          :disabled="false"
+          @change="onChange"
+          @search="onSearch"
         ></searchBox>
         </view>
-        <view class="filter-box" @click="showFilter=true" v-if="classifyList.length>0">
+        <!-- <view class="filter-box" @click="showFilter=true" v-if="classifyList.length>0">
           <image src="./static/filter-icon.png" mode="aspectFill"></image>
           <text>筛选</text>
-        </view>
+        </view> -->
+      </view>
+      <view class="tabs-box" v-if="classifyMenuList.length>0">
+        <text 
+          :class="['sub-nav-item',0===selectClassifyMenu?'active':'']" 
+          @click="handleSelectMenu({menu_id:0,menu_name:'全部'})"
+        >全部</text>
+        <text 
+          :class="['sub-nav-item',item.menu_id===selectClassifyMenu?'active':'']" 
+          v-for="item in classifyMenuList" 
+          :key="item.menu_id"
+          @click="handleSelectMenu(item)"
+        >{{item.menu_name}}</text>
       </view>
-    </van-sticky>
+    </view>
     <view class="report-empty-box" v-if="finished&&list.length==0">
       <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
       <view>{{searchVal?'找不到对应报告,试试别的搜索词吧':'暂无报告'}}</view>
@@ -75,7 +89,7 @@
 import searchBox from "./components/searchBox.vue";
 import audioBox from './components/audioBox.vue'
 import sharePoster from '@/components/sharePoster/sharePoster.vue'
-import {apiReportList,apiSubClassifyList} from '@/api/report'
+import {apiReportList,apiSubClassifyList,apiReportClassifyMenuList} from '@/api/report'
 import {apiGetSceneToParams} from '@/api/common'
 const dayjs=require('@/utils/dayjs.min')
 export default {
@@ -141,7 +155,10 @@ export default {
       list:[],
       finished:false,
       page:1,
-      pageSize:20
+      pageSize:20,
+
+      classifyMenuList:[],
+      selectClassifyMenu:0,
     };
   },
   onLoad(options) {
@@ -153,7 +170,8 @@ export default {
       // 设置title
       uni.setNavigationBarTitle({ title: decodeURIComponent(options.classifyName) })
       this.getList()
-      this.getClassifyList()
+      // this.getClassifyList()
+      this.getClassifyMenuList()
     }
     
   },
@@ -162,7 +180,8 @@ export default {
     this.list=[]
     this.finished=false
     this.getList()
-    this.getClassifyList()
+    // this.getClassifyList()
+    this.getClassifyMenuList()
     setTimeout(() => {
       uni.stopPullDownRefresh()
     }, 1500);
@@ -186,7 +205,8 @@ export default {
         this.classifyName=decodeURIComponent(obj.classifyName)
         uni.setNavigationBarTitle({ title: decodeURIComponent(obj.classifyName) })
         this.getList()
-        this.getClassifyList()
+        // this.getClassifyList()
+        this.getClassifyMenuList()
       }
     },
 
@@ -195,6 +215,7 @@ export default {
       const res=await apiReportList({
         classify_id_first:Number(this.classifyId),
         classify_id_second:Number(this.selectSecClassifyId),
+        classify_menu_id:Number(this.selectClassifyMenu),
         key_word:this.searchVal,
         current_index:this.page,
         page_size:this.pageSize
@@ -208,7 +229,23 @@ export default {
       }
     },
 
-    //分类数据
+    // 获取子目录
+    async getClassifyMenuList(){
+      const res=await apiReportClassifyMenuList({classify_id:Number(this.classifyId)})
+      if(res.code===200){
+        this.classifyMenuList=res.data
+      }
+    },
+    handleSelectMenu(item){
+      this.selectClassifyMenu=item.menu_id
+      this.searchVal=''
+      this.page=1
+      this.finished=false
+      this.list=[]
+      this.getList()
+    },
+
+    //分类数据(需求修改 不要这种筛选了 换成后台配置的子目录去筛选)
     async getClassifyList(){
       const res=await apiSubClassifyList({classify_id_first:Number(this.classifyId)})
       if(res.code===200){
@@ -285,9 +322,49 @@ page{
 }
 </style>
 <style lang="scss" scoped>
+.top-filter-box{
+  background-color: white;
+  box-shadow: 0px 4rpx 4rpx 0px rgba(198,198,198,0.2500);
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 99;
+  .tabs-box{
+        overflow-x: auto;
+        white-space: nowrap;
+        padding: 0 34rpx 16rpx 34rpx;
+        &::-webkit-scrollbar{
+            width: 0;
+            height: 0;
+            display: none;
+        }
+        .sub-nav-item{
+            display: inline-block;
+            position: relative;
+            margin-right: 50rpx;
+            font-size: 28rpx;
+            color: #666;
+            position: relative;
+            &.active{
+                color: #E3B377;
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 54rpx;
+                    height: 4rpx;
+                    background-color: #E3B377;
+                    position: absolute;
+                    bottom: -16rpx;
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+            }
+        }
+    }
+}
 .search-wrap {
   background-color: #fff;
-  padding: 30rpx 34rpx;
+  padding: 30rpx 34rpx 16rpx 34rpx;
   align-items: center;
   .filter-box {
     margin-left: 20rpx;
@@ -304,7 +381,7 @@ page{
   }
 }
 .report-list-wrap {
-  padding: 0 34rpx;
+  padding: 34rpx 34rpx 0 34rpx;
   .item{
     margin-bottom: 30rpx;
     position: relative;