merchant-app/pages/fundDetails.vue

<template>
  
  <!-- pages/index/index.wxml -->
<view class="fund-details">


<scroll-view class="fd-list"
             :scroll-top="scrollTop"
             scroll-y="true"
             :refresher-enabled="isOpenRefresh"
             :refresher-triggered="triggered"
             @refresherrefresh="refresh"
             @scrolltoupper="upper"
             @scroll="scroll"
             @scrolltolower="loadMore"
             @refresherpulling="onPulling">

<!--    <checkbox-group class="check-box-group" @change="checkbox">-->
      <view class="fund-card"  v-for="(sign, index) in listSign" >
      <checkbox v-if="getPayStatus(sign).status == 0" class="checkbox" :value="sign.id" :checked="sign.c"></checkbox>
      <view class="fc-line1">
        <view class="fc-head">
          {{sign.employeeName.charAt(0)}}
        </view>
        <view class="fc-line1-right">
          <view class="fc-line1-right-line1">
            <view class="em-name">
              {{sign.employeeName}}
            </view>
            <view :class="'pay-status' + getPayStatus(sign).status" class="pay-status">
              {{getPayStatus(sign).text}}
            </view>

          </view>

          <view class="fc-line1-right-line2">
            <view>手机号：   {{sign.phone}}</view>
            <view>身份证：  {{sign.idCard}}</view>
          </view>
        </view>
        <view class="fc-line1-right-2">
          <view class="amount" :class="'amount-'+getPayStatus(sign).status">{{ sign.stEmployeeFundRecord == null ? 0 : sign.stEmployeeFundRecord.realPrice }}</view>
          <view class="label">应发金额</view>
        </view>
      </view>


      <view class="fc-line2">
        <view class="fc-line2-1"></view>

        <view class="fc-line2-2">

          <view class="fc-line2-2-1">
            <view class="date">
              任务日期：{{task.taskDate}}
            </view>

          </view>

          <view class="fc-line2-2-1">
            <view>
              日结单价：¥{{task.dayPrice}}
            </view>
<!--            <view>-->
<!--              应发金额：¥{{task.dayPrice}}-->
<!--            </view>-->

          </view>
        </view>

        <view class="fc-line2-3">
          <view class="fx-btn" :class="getPayStatus(sign).status == 0 ? 'btn-status1': 'btn-status2'" @click="faxin(sign)"></view>
        </view>
      </view>


      <view class="fc-line3">
        {{sign.remark == null ? "无" : sign.remark}}
      </view>

    </view>


<!--    </checkbox-group>-->
<!--    <view v-if="showLoading" class="load-more">加载中...</view>-->
    <view v-if="showNoMore" class="no-more">没有更多数据了</view>
</scroll-view>



  <view class="fd-bottom">
    <view class="all-select" @click="allSelect">全选</view>
    <view class="all-pay" @click="allPay">批量发薪</view>
  </view>

</view>

  
</template>

<script>
	import { getFxDetails, fx } from "@/api/task";
	// import { getCodeImg } from '@/api/login'
  export default {
	data() {
		return {
			queryParams: {
				id: null,
			},
            task: {
            },
            listSign:[],
            signInfo: {},
            items: [{"id":1, "checked": false}, {"id":2, "checked": false}, {"id":3, "checked": false}],
            checked: false,
            // 是否显示加载更多的loading
            showLoading: false,
            // 是否显示无更多数据提示
            showNoMore: true,
            triggered: false,
            isOpenRefresh: true,
            containerScrollTop: 0,

		};
	  },
    onLoad: function(options) {
        this.queryParams.id = options.id;
        this.getInfo();
    },

	 methods: {

       getInfo() {
         var that = this;
         getFxDetails(this.queryParams).then(response => {
           that.task = response.data;
           that.listSign = that.task.listSign;
           // that.listSign = that.listSign.concat(that.task.listSign);
           that.triggered = false;
         });
       },
       allSelect() {
         let checked = !this.checked
         for (let i = 0; i < this.listSign.length; i++) {
           if (this.getPayStatus(this.listSign[i]).status == 1) {
             continue;
           }
           this.listSign[i].c = checked;
           // this.listSign[i].employeeName = this.listSign[i].employeeName + " ";
         }
         this.checked = checked;
       },
       allPay() {
         let arr = [];
         for (let i = 0; i < this.listSign.length; i++) {
           if (this.getPayStatus(this.listSign[i]).status == 1) {
             continue;
           }
           if (this.listSign[i].c){
             console.log("掉起支付" + this.listSign[i].employeeName)
           }
           arr.push(this.listSign[i].employeeId)
         }

         fx({"taskId": this.task.id, "employeeIds": arr}).then(response => {
           console.log(response)
         });

       },
       getPayStatus(sign) {
         if (sign.stEmployeeFundRecord == null || sign.stEmployeeFundRecord.payStatus == 0) {
           return {"text": "待发放", "status": 0};
         }
         if (sign.stEmployeeFundRecord.payStatus == 1) {
           return {"text": "已发放", "status": 1};
         }
         if (sign.stEmployeeFundRecord.payStatus == 2) {
           return {"text": "发放失败", "status": 2};
         }
         return {"text": "待发放", "status": 0};
       },
       checkbox(e) {
         console.log(e.detail.value); // 输出选中的值
       },
       faxin(sign) {
          if(this.getPayStatus(sign).status == 1){
            return
          }


         fx({"taskId": this.task.id, "employeeIds":[sign.employeeId]}).then(response => {
           console.log(response)
         });

          //掉起支付
         // wx.requestMerchantTransfer({
         //   mchId: '1684628563',
         //   appId: 'wx7bc7df6eb945a84f',
         //   package: 'pages/pay',
         //   success (res) {
         //     console.log("suc", res)
         //   },
         //   fail (res) {
         //     console.log("err", res)
         //   }
         // })
          console.log("掉起支付" + sign.employeeName)
       },


       onPageScroll(e){
         this.containerScrollTop = e.scrollTop
         if (this.containerScrollTop > 0){
           this.isOpenRefresh = false
         }else{
           this.isOpenRefresh = true
         }
       },
       onReachBottom(e){
         console.log("onReachBottom", e)
         // 显示加载更多的loading
         this.showNoMore = true;
         // 请求数据
         // this.getInfo();
       },
       // 刷新函数
       refresh() {
         // 请求数据
         this.triggered = true;
         this.queryParams.pageNum = 1;
         this.getInfo();
       },
       upper(){
         // console.log("upper")
       },
       scroll(e){
         // console.log("scroll", e.detail)
       },
       onPulling(e) {
         // console.log("onpulling", e.detail);
         if (e.detail.dy < 8) return  // 防止上滑页面也触发下拉
         this.triggered = true;
       },
       // 加载更多函数
       loadMore() {
         // console.log("loadMore")
         // 判断是否正在加载更多或已经没有更多数据
         // if (this.showLoading || this.showNoMore) {
         //   return;
         // }
         // // 显示加载更多的loading
         // this.showLoading = true;
         // // 请求数据
         // this.getInfo();
       },

     }
  }
</script>

<style lang='scss'>
  html, body {
    background-color: #ffffff;
    height: 100%;
    width: 100%;
  }

  page{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .load-more, .no-more {
    display: grid;
    place-content: center;
    padding: 10rpx;
    color: #999;
    height: 100rpx;
  }
   .fund-details{
      padding: 1rpx 18rpx 0rpx 18rpx;
      background-image:url('http://8.155.21.176:9000/yonggong/images/bg.png');
      height: 100%;
      background-size: 100% 100%;
     width: 100%;
    }

   .fd-list{
     width: 100%;
     height: calc(100% - 100rpx);
     display: flex;
     justify-content: center;
     .fund-card{
       margin-left: auto;
       margin-right: auto;
       width: 98%;
       margin-top: 20rpx;
       margin-bottom: 20rpx;
       background-color: #ffffff;
       padding: 30rpx;
       border-radius: 22rpx;
       position: relative;
       box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
       .checkbox{
         position: absolute;
         top: 20rpx;
         right: 20rpx;
         transform: scale(0.7);
         width: 50rpx;
         height: 50rpx;
       }
       .fc-line1{
         display: flex;
         align-items: center;
         height: 150rpx;
         border-bottom: 1rpx solid #dbdbdb;
         .fc-head{
           display: flex;
           align-items: center;
           justify-content: center;
           width: 100rpx;
           height: 100rpx;
           font-weight: 650;
           font-size: 43rpx;
           color: #ffffff;
           border-radius: 60rpx;
           background-color: #4ac5f6;
         }
         .fc-line1-right{
           width: 50%;
           margin-left: 20rpx;
           .fc-line1-right-line1{

             display: flex;
             align-items: center;
             .em-name{
               font-size: 38rpx;
               font-weight: 650;
             }
             .pay-status{
               margin-left: 10rpx;
               display: flex;
               align-items: center;
               justify-content: center;
               width: 120rpx;
               height: 38rpx;
               /*font-weight: 650;*/
               font-size: 22rpx;
               border-radius: 30rpx;
               font-weight: 600;
             }
             .pay-status0{
               color: #1a73ce;
               background-color: #e2e9f6;
             }
             .pay-status1{
               color: #212121;
               background-color: #d7d7d7;
             }
             .pay-status2{
               color: #d90101;
               background-color: #c2a4a4;
             }


           }
           .fc-line1-right-line2{
             display: grid;
             color: #787878;
             font-size: 20rpx;
             margin-top: 10rpx;
             view{
               margin-right: 20rpx;
             }
           }

         }
         .fc-line1-right-2{
           width: 150rpx;
           .amount{
             font-size: 50rpx;
             text-align: right;
           }
           .amount-0{
             color: #fa6161;
           }
           .label{
             font-size: 20rpx;
             color: #787878;
             text-align: right;
           }
         }
       }
       .fc-line2{
         margin-top: 15rpx;
         display: flex;
         align-items: center;
         height: 70rpx;
         .fc-line2-1{
           width: 10rpx;
           height: 100%;
           background-image: url("http://8.155.21.176:9000/yonggong/m-images/faxin/leftLine.png");
           background-size: 100% 100%;
         }
         .fc-line2-2{
           width: 60%;
           .fc-line2-2-1{
             width: 100%;
             margin-bottom: 15rpx;
             margin-left: 10rpx;
             display: flex;
             align-items: center;
             color: #3e3e3e;
             font-size: 22rpx;
             view{
               width: 50%;
             }
             .date{
               width: 100%;
             }
           }
           .fc-line2-2-1:last-child {
             margin-bottom: 0rpx;
           }
         }
         .fc-line2-3{
           margin-left: auto; /* 推动元素到右边 */
           .fx-btn{
             margin-left: 8rpx;
             width: 170rpx;
             height: 68rpx;
             display: flex;
             align-items: center;
             justify-content: center;
             background-size: 100% 100%;
           }
           .btn-status1{
             background-image: url("http://8.155.21.176:9000/yonggong/m-images/faxin/fxBtn.png");
           }
           .btn-status2{
             background-image: url("http://8.155.21.176:9000/yonggong/m-images/faxin/fx2.png");
           }
         }
       }

       .fc-line3{
         color: #908f8f;
         background-color: #efefef;
         margin: 20rpx 0 20rpx 0;
         padding: 20rpx 40rpx 20rpx 40rpx;
         font-size: 24rpx;
       }

     }
   }


    /*<view class="fd-bottom">*/
    /*<view class="all-select">全选</view>*/
    /*<view class="all-pay">批量发薪</view>*/
    /*</view>*/
  .fd-bottom{
    background-color: #ffffff;
    width: 100%;
    height: 100rpx;
    position: absolute;
    /*bottom: env(safe-area-inset-bottom);*/
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-items: center;
    padding: 0rpx 70rpx 0rpx 70rpx;
    .all-select{
      width: 50%;
      color: #107ff6;
      font-weight: 650;
      font-size: 30rpx;
      margin-left: 8rpx;
      border-radius: 10rpx;
      width: 200rpx;
      height: 65rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1rpx solid #107ff6;
    }
    .all-pay{
      width: 50%;
      background-color: #107ff6;
      color: #ffffff;
      font-weight: 650;
      font-size: 30rpx;
      margin-left: 8rpx;
      border-radius: 10rpx;
      width: 200rpx;
      height: 65rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto; /* 推动元素到右边 */
    }


  }


</style>