update

App.vue

@@ -16,7 +16,7 @@
 			...mapActions(['memberLogin','getLoginCode']),
 			...mapMutations(['setVisitChannels']),
 		},
-		 onLaunch:  function(options) {
+		 onLaunch:  async function(options) {
 			uni.getSystemInfo({
 				success: function(e) {
 					// #ifndef MP
@@ -43,9 +43,9 @@
 			let _this = this
        console.log('app',this.user.WeChat_MiniProToken)
 			if (this.user.WeChat_MiniProToken) {
-				this.memberLogin() // 获取用户数据
+				await this.memberLogin() // 获取用户数据
 			} else {
-				this.getLoginCode()
+        await this.getLoginCode()
 			}
 
 			this.setVisitChannels(options.scene)

pages.json

@@ -93,7 +93,7 @@
                     "style":
                     {
                         "enablePullDownRefresh": true,
-                        "navigationBarTitleText": "结算审批"
+                        "navigationStyle": "custom"
                     }
                 },
                 {

pages/settlementApproval/index.vue

@@ -1,27 +1,63 @@
 <template>
-  <scroll-view class="main">
+  <view class="newMain">
-    <view class="topBox">
+<!--    :style="{height: menu.bottom + 97 + 'px'}"-->
-      <view class="top">
+    <view class="header" >
+      <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"/>
+            <view class="nameBox">
               <span class="service">{{ selectServiceList[selectIndex].label }}</span>
+              <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
+            </view>
+          </view>
         </picker>
-        <span class="time" @click="handleChangeSelect({id:3})">{{`${$moment(startDate).format('YYYY/MM')}-${$moment(endDate).format('YYYY/MM')}`}}</span>
       </view>
 
+      <view class="timeBox">
+        <picker class="timeSelect" mode="date" fields="month" :value="$moment(startDate).format('YYYY-MM')"
+                :start="'2023-01-01'" :end="end" @change="handleGetStartTime">
+          <span class="monthNumber">{{ startMonth || ''  }}</span>
+          <span class="monthUnit">月</span>
+          <span class="year">/{{ startYear || '' }}</span>
+          <image class="bottomArrow" src="/static/images/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">
+          <span class="monthNumber">{{ endMonth || ''  }}</span>
+          <span class="monthUnit">月</span>
+          <span class="year">/{{ endYear || '' }}</span>
+          <image class="bottomArrow" src="/static/images/settlementApproval/bottomArrow.png"/>
+        </picker>
+      </view>
 
-
+      <view class="TabsBox">
-      <view class="topFilterBox">
+        <view class="tabItemList">
-        <view class="filterItem" v-for="(item,index) in menuList" :key="index" @click="handleChangeSelect(item)">
+          <view :class="selectFilter===4?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:4})">
-          <view class="imgIcon" :style="selectFilter===item.id ? 'background:#f0f7fe;' : 'background:#f6f7f8;'">
+            全部
-            <image class="img" :src="item.id===selectFilter?item.active: item.src"/>
           </view>
-          <view class="filterLabel" :style="selectFilter===item.id ? 'color:#5B96E9' :'color:#808D97'">{{item.name}}
+          <view :class="selectFilter===0?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:0})">
+            待结算
+          </view>
+          <view :class="selectFilter===2?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:2})">
+            审批中
+          </view>
+          <view :class="selectFilter===1?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:1})">
+            已结算
           </view>
         </view>
+        <view class="otherItem">
+          <image class="filterIcon" src="/static/images/settlementApproval/filter.png"/>
+          类型
         </view>
       </view>
 
+    </view>
 
+      <scroll-view class="contentBox" :scroll-y="true">
         <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':''}">
             <div class="content-index">{{index+1}}</div>
@@ -82,6 +118,7 @@
           </view>
         </UniPop>
       </scroll-view>
+  </view>
 </template>
 <script>
 import {
@@ -95,28 +132,6 @@ import moment from "moment";
     components: {UniPop},
     data() {
       return {
-        menuList: [
-          { //列表头部菜单选项标签
-            name: '全部',
-            src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifq.png',
-            active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifqz.png',
-            id: 4
-          }, {
-            name: '待结算',
-            src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenp.png',
-            active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenpz.png',
-            id: "0,2"
-          }, {
-            name: '已结算',
-            src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichl.png',
-            active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichlz.png',
-            id: 1
-          }, {
-            name: '更多筛选',
-            src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shaix.png',
-            active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shaixz.png',
-            id: 3
-          } ],
         selectFilter: 4,
         dataList: [],
         selectServiceList:[],// 这个用户可以选择的服务区
@@ -124,34 +139,50 @@ import moment from "moment";
         selectServiceId:'',// 选择的服务区
         showPop: false,// 显示更多筛选
         startDate:'',// 开始时间
+        startMonth:'',// 开始时间的月份
+        startYear:'',// 开始时间的年份
         endDate:'',// 结束时间
+        endMonth:'',// 结束时间的月份
+        endYear:'',// 结束时间的年份
         start:'',// 限制的开始时间
         end:'',// 限制的结束时间
         SettlementType: 0,// 结算模式
         PageIndex: 1,// 默认的页数
         isEnd: false,// 判断是否到底了
         useInfo:{},// 用户详情
+        menu:{}
       }
     },
-    computed: { //监听属性 类似于data概念
+    // computed: { //监听属性 类似于data概念
-      ...mapState({
+    //   ...mapState({
-        user: (state) => {
+    //     user: (state) => {
-          return state.userData
+    //       return state.userData
-        },
+    //     },
-      }),
+    //   }),
-    },
+    // },
     async onLoad(){
+      this.menu = uni.getMenuButtonBoundingClientRect()
+      console.log('this.menu',this.menu)
+
+
       let userInfo = uni.getStorageSync('vuex')
       userInfo = JSON.parse(userInfo)
+      console.log('userInfo',userInfo)
       this.useInfo = JSON.parse(JSON.stringify(userInfo))
       console.log('this.useInfo',this.useInfo)
+      console.log('Store.state.userData',Store.state.userData)
 
       await this.getSeverpart()
 
 
       this.startDate = this.$moment().startOf('year').format('YYYY-MM')
+      this.startMonth = this.$moment(this.startDate).format('MM')
+      this.startYear = this.$moment(this.startDate).format('YYYY')
+
+
       this.endDate = this.$moment().subtract(1,'months').format('YYYY-MM')
-      console.log('Store.state.userData',Store.state.userData)
+      this.endMonth = this.$moment(this.endDate).format('MM')
+      this.endYear = this.$moment(this.endDate).format('YYYY')
       // this.selectServiceList = Store.state.userData.serverPartList
       // if(this.selectServiceList[0].value==='424'){
       //   let list = []
@@ -186,9 +217,12 @@ import moment from "moment";
       }
     },
     methods:{
+      // 返回按钮
+      handleBack(){
+        this.$util.toNextRoute('navigateBack',{ delta: 1})
+      },
       // 拿到服务区列表
       async getSeverpart(){
-        console.log('this.user',this.user)
         const req = {
           UserIdEncrypted: this.useInfo.userData.UserIdEncrypted
         }
@@ -277,10 +311,14 @@ import moment from "moment";
       handleGetStartTime(e){
         this.start = e.detail.value
         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')
       },
       // 改变结束时间
       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')
       },
       handleChangeSettlementType(e){
         this.SettlementType = e
@@ -351,70 +389,171 @@ import moment from "moment";
 </script>
 
 <style scoped lang="scss">
-.main{
+.newMain{
   width: 100%;
-  min-height: 100vh;
+  max-height: 100vh;
   box-sizing: border-box;
-  .topBox{
+  background: #F3F3F3;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .header{
     width: 100%;
+    background: linear-gradient( 180deg, #FFF2E8 0%, #FFFFFF 100%);
     box-sizing: border-box;
-    padding: 24rpx 16rpx;
+    padding: 0 32rpx;
+    .arrowBox{
+      width: 100%;
+      display: flex;
+      align-items: center;
+      .img{
+        width: 48rpx;
+        height: 48rpx;
+      }
+      .selectServiceBox{
+        margin-left: 16rpx;
+        display: flex;
+        align-items: center;
+        .serviceIcon{
+          width: 80rpx;
+          height: 80rpx;
+          position: relative;
+          z-index: 2;
+        }
+        .nameBox{
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 600;
+          font-size: 28rpx;
+          color: #160002;
+          line-height: 40rpx;
+          text-align: left;
+          font-style: normal;
+          padding: 12rpx 34rpx 12rpx 48rpx;
+          display: inline-block;
+          border-top-right-radius: 200rpx;
+          border-bottom-right-radius:  200rpx;
           background: #fff;
-    .top{
+          transform: translateX(-20px);
+          .moreIcon{
+            width: 24rpx;
+            height: 24rpx;
+            margin-left: 14rpx;
+          }
+        }
+      }
+    }
+    .timeBox{
+      margin-top: 24rpx;
+      display: flex;
+      align-items: center;
+      .timeSelect{
+        display: flex;
+        align-items: center;
+        .monthNumber{
+          font-size: 56rpx;
+          font-weight: bold;
+        }
+        .monthUnit{
+          margin-left: 4rpx;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 28rpx;
+          color: #242729;
+        }
+        .year{
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 28rpx;
+          color: #786B6C;
+          line-height: 32rpx;
+          text-align: left;
+          font-style: normal;
+          margin-left: 8rpx;
+        }
+        .bottomArrow{
+          width: 32rpx;
+          height: 32rpx;
+          margin-left: 8rpx;
+        }
+      }
+    }
+
+    .TabsBox{
+      width: 100%;
+      margin-top: 32rpx;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      .tabItemList{
+        width: calc(100% - 192rpx);
         display: flex;
         align-items: center;
         justify-content: space-between;
-      margin-bottom: 16rpx;
+        height: 62rpx;
-      .service{
+        .tabItem{
-        font-size: 24rpx;
+          display: inline-block;
-        color: #010101;
+          font-family: PingFangSC, PingFang SC;
-        border-radius: 24rpx;
+          font-weight: 400;
-        padding: 4rpx 16rpx;
+          font-size: 28rpx;
-        background-color: #DEDEDE;
+          height: 62rpx;
-        text-align: center;
+          color: #242729;
+          line-height: 40rpx;
+          text-align: left;
+          font-style: normal;
         }
-      .time{
+        .selectTabItem{
-        font-size: 24rpx;
+          font-family: PingFangSC, PingFang SC;
-        color: #010101;
+          font-weight: 500;
-        border-radius: 24rpx;
+          font-size: 28rpx;
-        padding: 4rpx 16rpx;
+          color: #FD7F21;
-        background-color: #DEDEDE;
+          line-height: 40rpx;
-        text-align: center;
+          text-align: left;
+          font-style: normal;
+          position: relative;
         }
-    }
+        .selectTabItem:after{
-
+          content:'';
-    .topFilterBox{
+          height: 6rpx;
+          position: absolute;
           width: 100%;
-      display: flex;
+          left: 0;bottom: 0;
+          background: #FD7F21;
+        }
+      }
+      .otherItem{
+        width: 192rpx;
+        height: 62rpx;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #786B6C;
+        line-height: 40rpx;
+        text-align: left;
+        font-style: normal;
+        position: relative;
         box-sizing: border-box;
-      .filterItem{
+        padding-left: 60rpx;
-        width: 25%;
         display: flex;
-        flex-direction: column;
+        .filterIcon{
-        align-items: center;
+          width: 32rpx;
-        .imgIcon{
+          height: 32rpx;
-          height: 37px;
+          margin-right: 4rpx;
-          width: 37px;
+          margin-top: 4rpx;
-          border-radius: 50%;
+        }
-          overflow: hidden;
+      }
-          margin-bottom: 16rpx;
+      .otherItem:before{
-          padding: 9px;
+        content:'';
-          box-sizing: border-box;
+        width: 1px;
+        background: #E4E4E4;
+        position: absolute;
+        top: 0;left: 0;
+      }
+    }
+  }
 
-          .img{
+    .contentBox{
       width: 100%;
       height: 100%;
-          }
-        }
-        .filterLabel{
-          font-size: 24rpx;
-          text-align: center;
-          color: #808D97;
-        }
-      }
-    }
-  }
-
       .dataList{
         width: 100%;
         box-sizing: border-box;
@@ -508,7 +647,7 @@ import moment from "moment";
           }
         }
       }
-
+    }
   .uniPopup{
     width: 100%;
     height: 400px;

store/store.js

@@ -75,19 +75,19 @@ const actions = {
 			commit('setUserTodoList', res.Data)
 		})
 	},
-	memberLogin({ dispatch, state,commit},_code) {
+	async memberLogin({ dispatch, state,commit},_code) {
 		let _user = state.userData
 		request.$get('WeChat_Login',{
 		// request.$webGet('WebAPI_Push/WeChat/Login',{
 			WeChat_Code: _code || '',
 
-		}).then(data=>{
+		}).then( async data=>{
 			console.log('memberLogin',data)
 			if (data.Result_Code === 100) {
 				  let user = data.Result_Data
 				  if (user.Membership_Id) {
 					commit('setUser', user)
-					dispatch('updateUser',data.Result_Data)
+					await dispatch('updateUser',data.Result_Data)
 					// _this.addUserBehavior(1002) // 记录用户行为
 				  }else{
 					  commit('setUser', user)