merchant-app/pages/employee/fundDetails.vue

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

  <checkbox-group @change="checkbox">
    <view class="fund-card"  v-for="(sign, index) in listSign" >
      <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>
            <checkbox v-if="getPayStatus(sign).status == 0" class="checkbox" :value="sign.id" :checked="sign.c"></checkbox>
          </view>

          <view class="fc-line1-right-line2">
            <view>手机：   {{sign.phone}}</view>
            <view>身份证：  {{sign.idCard}}</view>
          </view>
        </view>
      </view>

      <view class="fc-line2">
        <view>
          任务日期：{{task.taskDate}}
        </view>
        <view>
          日结单价：¥{{task.dayPrice}}
        </view>
      </view>

      <view class="fc-line2">
        <view>
          应发金额：¥{{task.dayPrice}}
        </view>
        <view>
          实发金额：¥{{ sign.stEmployeeFundRecord == null ? 0 : sign.stEmployeeFundRecord.realPrice }}
        </view>
      </view>

      <view class="fc-line3">
        {{sign.remark}}
      </view>
      <view class="fc-line4">
        <view class="fx-btn" :class="getPayStatus(sign).status == 0 ? 'btn-status1': 'btn-status2'" @click="faxin(sign)">发薪</view>
      </view>
    </view>


  </checkbox-group>



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

</view>

  
</template>

<script>
	import { getTaskDetails, setSign } from "@/api/employee/task";
	// import { getCodeImg } from '@/api/employee/login'
  export default {
	data() {
		return {
			queryParams: {
				id: null,
			},
            task: {
            },
            listSign:[],
            signInfo: {},
          items: [{"id":1, "checked": false}, {"id":2, "checked": false}, {"id":3, "checked": false}],
		};
	  },
    onLoad: function(options) {
        this.queryParams.id = options.id;
        this.getInfo();

    },

	 methods: {
       getInfo() {
         var that = this;
         getTaskDetails(this.queryParams).then(response => {
           that.task = response.data;
           that.listSign = that.task.listSign;
         });
       },
       allSelect() {
         let checked = !this.listSign[0].c
         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 + " ";
         }
       },
       allPay() {
         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)
           }
         }
       },
       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
          }
          //掉起支付
          console.log("掉起支付" + sign.employeeName)
       }
     }
  }
</script>

<style lang='scss'>
    .fund-details{
       padding: 0rpx 20rpx 0rpx 20rpx;
    }

  .fund-card{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 10rpx;
    .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: 120rpx;
        height: 120rpx;
        font-weight: 650;
        font-size: 38rpx;
        color: #ffffff;
        border-radius: 60rpx;
        background-color: #4ac5f6;
      }
      .fc-line1-right{
        width: 80%;
        margin-left: 20rpx;
        .fc-line1-right-line1{

          display: flex;
          align-items: center;
          .em-name{
            font-size: 38rpx;
            font-weight: 650;
          }
          .pay-status{
            margin-left: 30rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 160rpx;
            height: 50rpx;
            /*font-weight: 650;*/
            font-size: 30rpx;
            border-radius: 10rpx;
          }
          .pay-status0{
            color: #f58c18;
            background-color: #efe1ca;
          }
          .pay-status1{
            color: #55b46a;
            background-color: #e6efca;
          }
          .pay-status2{
            color: #d90101;
            background-color: #c2a4a4;
          }

          .checkbox{
            margin-left: auto;
            transform: scale(0.7);
            width: 50rpx;
            height: 50rpx;
          }
        }
        .fc-line1-right-line2{
          display: flex;
          align-items: center;
          color: #787878;
          margin-top: 10rpx;
          view{
            margin-right: 20rpx;
          }
        }

      }
    }
    .fc-line2{
      margin-top: 15rpx;

      display: flex;
      align-items: center;
      color: #787878;
      view{
        width: 50%;

      }
    }

    .fc-line3{
      color: #908f8f;
      background-color: #efefef;
      margin: 20rpx 0 20rpx 0;
      padding: 20rpx 40rpx 20rpx 40rpx;
      font-size: 24rpx;
    }
    .fc-line4{
      .fx-btn{
        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; /* 推动元素到右边 */
      }
      .btn-status1{
        background-color: #107ff6;
      }
      .btn-status2{
        background-color: #d2d2d2;
      }
    }
  }

    /*<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);
    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>