update

pages.json

@@ -92,7 +92,6 @@
                     "path": "index",
                     "style":
                     {
-                        "enablePullDownRefresh": true,
                         "navigationStyle": "custom"
                     }
                 },
@@ -100,6 +99,7 @@
                     "path": "detail",
                     "style":
                     {
+                        "navigationStyle": "custom",
                         "navigationBarTitleText": "结算审批"
                     }
                 },

pages/settlementApproval/index.vue

@@ -1,13 +1,13 @@
 <template>
   <view class="newMain">
-<!--    :style="{height: menu.bottom + 97 + 'px'}"-->
+
-    <view class="header" >
+    <view :class="showPop?'header headerBoxShow':'header'" :style="{height: menu.bottom + 92 + 'px'}">
       <view class="arrowBox" :style="{paddingTop: menu.top + 'px',height: menu.height + 'px'}">
         <image @click="handleBack" class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"/>
 
         <picker :value="selectServiceId" :range="selectServiceList" @change="handleChangeService" range-key="label">
           <view class="selectServiceBox">
-            <image class="serviceIcon" src="/static/images/settlementApproval/serviceIcon.png"/>
+            <image class="serviceIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/serviceIcon.png"/>
             <view class="nameBox">
               <span class="service">{{ selectServiceList[selectIndex].label }}</span>
               <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
@@ -22,15 +22,15 @@
           <span class="monthNumber">{{ startMonth || ''  }}</span>
           <span class="monthUnit">月</span>
           <span class="year">/{{ startYear || '' }}</span>
-          <image class="bottomArrow" src="/static/images/settlementApproval/bottomArrow.png"/>
+          <image class="bottomArrow" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/bottomArrow.png"/>
         </picker>
         <span style="margin: 0 16rpx">-</span>
         <picker class="timeSelect" mode="date" fields="month" :value="$moment(endDate).format('YYYY-MM')"
-                :start="'2023-01-01'" :end="end" @change="handleGetStartTime">
+                :start="'2023-01-01'" :end="end" @change="handleGetEndTime">
           <span class="monthNumber">{{ endMonth || ''  }}</span>
           <span class="monthUnit">月</span>
           <span class="year">/{{ endYear || '' }}</span>
-          <image class="bottomArrow" src="/static/images/settlementApproval/bottomArrow.png"/>
+          <image class="bottomArrow" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/bottomArrow.png"/>
         </picker>
       </view>
 
@@ -49,17 +49,24 @@
             已结算
           </view>
         </view>
-        <view class="otherItem">
+        <view class="otherItem" @click="handleChangeSelect">
-          <image class="filterIcon" src="/static/images/settlementApproval/filter.png"/>
+          <image class="filterIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/filter.png"/>
           类型
         </view>
       </view>
 
     </view>
 
-      <scroll-view class="contentBox" :scroll-y="true">
+      <scroll-view class="contentBox" :scroll-y="true" :style="{height: `calc(100vh - ${menu.bottom + 92}px)`}"
+                   @scrolltolower="handleScrollBottom"
+                   refresher-enabled="true" :refresher-triggered="isRefreshing"
+                   @refresherrefresh="handleRefresherRefresh">
+<!--                   @refresherpulling="handleRefresherPulling"-->
+<!--                   @refresherrestore="handleRefresherRestore"-->
+<!--                   @refresherabort="handleRefresherAbort"-->
+
         <view class="dataList">
-          <view class="dataItem" v-for="(item,index) in dataList" :key="index" @click="handleGoDetail(item)" :style="{boxShadow: item.SETTLEMENT_STATE===0 || item.SETTLEMENT_STATE===2?'0 0px 6rpx #f9b297':''}">
+          <view class="dataItem" v-for="(item,index) in dataList" :key="index" @click="handleGoDetail(item)" :style="{boxShadow: item.SETTLEMENT_STATE===0 || item.SETTLEMENT_STATE===2?'0 0px 6rpx #f9b297':'',marginTop: index===0?'0px':''}">
             <div class="content-index">{{index+1}}</div>
             <view class="itemRow" >
               <view class="projectName">{{ item.BUSINESSPROJECT_NAME }}</view>
@@ -89,35 +96,44 @@
         <view class="load-more" v-if="dataList.length>0">
           <text>{{!isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
         </view>
-        <UniPop :show="showPop" @hidePopup="closePop" type="bottom" @touchmove.prevent round="true">
-          <view class="uniPopup">
-            <view class="uniPopupTop">
-              <text class="uniPopupTitle">筛选</text>
-              <image @click="closePop" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
-            </view>
-
-            <view class="filterBox">
-              <view class="filterTitle">统计时间</view>
-              <view class="filterTimeBox">
-                <picker class="timeSelect" mode="date" fields="month" :value="$moment(startDate).format('YYYY-MM')" :start="'2023-01-01'" :end="end" @change="handleGetStartTime">{{startDate}}</picker>
-                <span class="timeSelect" style="margin: 0 4rpx">-</span>
-                <picker class="timeSelect" mode="date" fields="month" :value="$moment(endDate).format('YYYY-MM')" :start="start" :end="end" @change="handleGetEndTime">{{endDate}}</picker>
-              </view>
-            </view>
-
-            <view class="filterBox" style="margin-top: 48rpx">
-              <view class="filterTitle">结算类型</view>
-              <view class="filterItemList">
-                <view :class="SettlementType===0?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(0)">全部</view>
-                <view :class="SettlementType===1?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(1)">年度</view>
-                <view :class="SettlementType===2?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(2)">月度</view>
-              </view>
-            </view>
-
-            <view class="button" @click="handleSubmit">查询</view>
-          </view>
-        </UniPop>
       </scroll-view>
+
+    <view class="meng" v-if="showPop" :style="{height: `calc(100vh - ${menu.bottom + 92}px)`,top: menu.bottom + 92 + 'px'}" @click="closePop">
+      <view class="filterBox">
+        <view class="filterBox2">
+          <view class="filterTitle">结算类型</view>
+          <view class="filterItemList">
+            <view :class="SettlementType===0?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(0)">全部</view>
+            <view :class="SettlementType===1?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(1)">年度</view>
+            <view :class="SettlementType===2?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(2)">月度</view>
+          </view>
+        </view>
+        <view style="display: flex;justify-content: center">
+          <view class="button" @click.stop="handleSubmit">查询</view>
+        </view>
+      </view>
+    </view>
+
+
+
+      <UniPop v-if="false" :show="showPop" @hidePopup="closePop" type="top" @touchmove.prevent>
+        <view class="uniPopup">
+          <!--            <view class="uniPopupTop">-->
+          <!--              <text class="uniPopupTitle">筛选</text>-->
+          <!--              <image @click="closePop" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>-->
+          <!--            </view>-->
+
+          <!--            <view class="filterBox">-->
+          <!--              <view class="filterTitle">统计时间</view>-->
+          <!--              <view class="filterTimeBox">-->
+          <!--                <picker class="timeSelect" mode="date" fields="month" :value="$moment(startDate).format('YYYY-MM')" :start="'2023-01-01'" :end="end" @change="handleGetStartTime">{{startDate}}</picker>-->
+          <!--                <span class="timeSelect" style="margin: 0 4rpx">-</span>-->
+          <!--                <picker class="timeSelect" mode="date" fields="month" :value="$moment(endDate).format('YYYY-MM')" :start="start" :end="end" @change="handleGetEndTime">{{endDate}}</picker>-->
+          <!--              </view>-->
+          <!--            </view>-->
+
+        </view>
+      </UniPop>
   </view>
 </template>
 <script>
@@ -150,7 +166,8 @@ import moment from "moment";
         PageIndex: 1,// 默认的页数
         isEnd: false,// 判断是否到底了
         useInfo:{},// 用户详情
-        menu:{}
+        menu:{},
+        isRefreshing: false,// 判断是不是在下拉刷新
       }
     },
     // computed: { //监听属性 类似于data概念
@@ -217,6 +234,22 @@ import moment from "moment";
       }
     },
     methods:{
+      async handleRefresherRefresh(){
+        this.PageIndex = 1
+        this.isEnd = false
+        this.dataList = []
+        this.isRefreshing = true
+        await this.handleGetPageData()
+        this.isRefreshing = false
+      },
+      // 滚动到底部
+      handleScrollBottom(){
+        console.log('1111')
+        if(!this.isEnd){
+          this.PageIndex = this.PageIndex + 1
+          this.handleGetPageData()
+        }
+      },
       // 返回按钮
       handleBack(){
         this.$util.toNextRoute('navigateBack',{ delta: 1})
@@ -283,14 +316,8 @@ import moment from "moment";
         uni.hideLoading()
       },
       // 改变筛选条件
-      handleChangeSelect(obj){
+      handleChangeSelect(){
-        // 当为3时 就是点击了更多筛选
+        this.showPop = true
-        if(Number(obj.id)===3){
-          this.showPop = true
-        }else{
-          this.selectFilter = obj.id
-          this.handleGetPageData()
-        }
         this.isEnd = false
         this.PageIndex = 1
       },
@@ -313,12 +340,14 @@ import moment from "moment";
         this.startDate = moment(e.detail.value).format('YYYY-MM')
         this.startMonth = this.$moment(this.startDate).format('MM')
         this.startYear = this.$moment(this.startDate).format('YYYY')
+        this.handleGetPageData()
       },
       // 改变结束时间
       handleGetEndTime(e){
         this.endDate = moment(e.detail.value).format('YYYY-MM')
         this.endMonth = this.$moment(this.endDate).format('MM')
         this.endYear = this.$moment(this.endDate).format('YYYY')
+        this.handleGetPageData()
       },
       handleChangeSettlementType(e){
         this.SettlementType = e
@@ -366,24 +395,24 @@ import moment from "moment";
         uni.hideLoading()
       },
       // 下拉刷新
-      onPullDownRefresh(){
+      // onPullDownRefresh(){
-        console.log('1111')
+      //   console.log('1111')
-        this.PageIndex = 1
+      //   this.PageIndex = 1
-        this.isEnd = false
+      //   this.isEnd = false
-        this.dataList = []
+      //   this.dataList = []
-        this.handleGetPageData()
+      //   this.handleGetPageData()
-        setTimeout(function() {
+      //   setTimeout(function() {
-          uni.stopPullDownRefresh()
+      //     uni.stopPullDownRefresh()
-        }, 1000)
+      //   }, 1000)
-      },
+      // },
       // 滚动到底部
-      onReachBottom(){
+      // onReachBottom(){
-        console.log('1111')
+      //   console.log('1111')
-        if(!this.isEnd){
+      //   if(!this.isEnd){
-          this.PageIndex = this.PageIndex + 1
+      //     this.PageIndex = this.PageIndex + 1
-          this.handleGetPageData()
+      //     this.handleGetPageData()
-        }
+      //   }
-      }
+      // }
     }
   }
 </script>
@@ -399,9 +428,13 @@ import moment from "moment";
   justify-content: space-between;
   .header{
     width: 100%;
-    background: linear-gradient( 180deg, #FFF2E8 0%, #FFFFFF 100%);
+    background-image: url("https://eshangtech.com/ShopICO/yxcl/settlementApproval/pageBg.png");
+    background-repeat: no-repeat;
+    background-size: cover;
     box-sizing: border-box;
     padding: 0 32rpx;
+    z-index: 4;
+    position: relative;
     .arrowBox{
       width: 100%;
       display: flex;
@@ -443,7 +476,8 @@ import moment from "moment";
       }
     }
     .timeBox{
-      margin-top: 24rpx;
+      height: 32px;
+      margin-top: 12px;
       display: flex;
       align-items: center;
       .timeSelect{
@@ -480,16 +514,18 @@ import moment from "moment";
 
     .TabsBox{
       width: 100%;
-      margin-top: 32rpx;
+      height: 32px;
+      margin-top: 16px;
       box-sizing: border-box;
       display: flex;
       align-items: center;
       .tabItemList{
-        width: calc(100% - 192rpx);
+        width: calc(100% - 140rpx);
         display: flex;
         align-items: center;
         justify-content: space-between;
         height: 62rpx;
+        margin-right: 30rpx;
         .tabItem{
           display: inline-block;
           font-family: PingFangSC, PingFang SC;
@@ -521,7 +557,7 @@ import moment from "moment";
         }
       }
       .otherItem{
-        width: 192rpx;
+        width: 110rpx;
         height: 62rpx;
         font-family: PingFangSC, PingFang SC;
         font-weight: 400;
@@ -532,8 +568,9 @@ import moment from "moment";
         font-style: normal;
         position: relative;
         box-sizing: border-box;
-        padding-left: 60rpx;
         display: flex;
+        justify-content: flex-end;
+        padding-left: 10rpx;
         .filterIcon{
           width: 32rpx;
           height: 32rpx;
@@ -544,20 +581,26 @@ import moment from "moment";
       .otherItem:before{
         content:'';
         width: 1px;
+        height: 36rpx;
         background: #E4E4E4;
         position: absolute;
         top: 0;left: 0;
       }
     }
   }
+  .headerBoxShow{
+    box-shadow: 0rpx 60rpx 160rpx 0rpx rgba(94,43,1,0.08);
+  }
 
     .contentBox{
       width: 100%;
       height: 100%;
+      background-color: #f3f3f3;
       .dataList{
         width: 100%;
+        height: 100%;
         box-sizing: border-box;
-        padding: 0 24rpx;
+        padding: 24rpx 24rpx 0;
         .dataItem{
           width: 100%;
           box-sizing: border-box;
@@ -648,9 +691,87 @@ import moment from "moment";
         }
       }
     }
+  .meng{
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    .filterBox{
+      width: 100%;
+      background: #FFFFFF;
+      border-radius: 0rpx 0rpx 16rpx 16rpx;
+      padding: 48rpx 32rpx 24rpx ;
+      box-sizing: border-box;
+      .filterBox2{
+        .filterTitle{
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 600;
+          font-size: 28rpx;
+          color: #212226;
+          line-height: 40rpx;
+          text-align: left;
+          font-style: normal;
+        }
+        .filterTimeBox{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 24rpx;
+          .timeSelect{
+            width: calc((100% - 20px)/2);
+          }
+        }
+        .filterItemList{
+          margin: 24rpx;
+          display: flex;
+          flex-wrap: wrap;
+          .filterItem{
+            width: calc((100% - 32rpx)/3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 16rpx;
+            margin-bottom: 16rpx;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 28rpx;
+            color: #160002;
+            line-height: 40rpx;
+            text-align: right;
+            font-style: normal;
+            background: #F5F5F5;
+            border-radius: 8rpx;
+            padding: 12rpx 0;
+          }
+          .filterItem:nth-child(3){
+            margin-right: 0;
+          }
+          .selectFilterItem{
+            color: #2363FF;
+            background: #ECF2FF;
+          }
+        }
+      }
+      .button{
+        background: #FA8B39;
+        border-radius: 8rpx;
+        width: calc(100% - 64rpx);
+        height: 88rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        font-size: 32rpx;
+        color: #FFFFFF;
+        line-height: 44rpx;
+        text-align: left;
+        font-style: normal;
+      }
+    }
+  }
   .uniPopup{
     width: 100%;
-    height: 400px;
+    height: 150px;
     box-sizing: border-box;
     padding: 32rpx;
     .uniPopupTop{
@@ -724,7 +845,7 @@ import moment from "moment";
       }
     }
     .button{
-      background: #2363FF;
+      background: #FA8B39;
       border-radius: 8rpx;
       width: calc(100% - 64rpx);
       height: 88rpx;
@@ -732,16 +853,12 @@ import moment from "moment";
       align-items: center;
       justify-content: center;
       font-family: PingFangSC, PingFang SC;
-      font-weight: 400;
+      font-weight: 600;
       font-size: 32rpx;
       color: #FFFFFF;
       line-height: 44rpx;
       text-align: left;
       font-style: normal;
-      position: fixed;
-      bottom: 32rpx;
-      left: 50%;
-      transform: translateX(-50%);
     }
   }
 }