jsm-mall-h5-front/src/packageMine/pages/repairSettle/list.vue

<template>
  <view class="s_page">
    <view class="nav-con">
      <view :class="currentTab === 1 ? 'current' : ''" class="item" @click="changeTabs(1)"><text>日报</text></view>
      <view :class="currentTab === 2 ? 'current' : ''" class="item" @click="changeTabs(2)"><text>月报</text></view>
    </view>

    <view class="date-container" v-if="currentTab === 1">
      <view class="date" @tap="isShowDatePicker = true">
        <picker
          class="picker"
          mode="date"
          :value="currentDate"
          start="1900-01-01"
          end="2400-12-31"
          @change="changeDate"
        >
          <view class="text">{{ currentDate }}</view>
        </picker>
        <image src="/static/images/calendar.png" mode=""></image>
      </view>
    </view>
    <view class="date-container" v-if="currentTab === 2">
      <view class="date" @tap="isShowDatePicker = true">
        <picker
          class="picker"
          mode="date"
          :value="currentDate"
          start="1900-01-01"
          end="2400-12-31"
          @change="changeDate"
          fields="month"
        >
          <view class="text">{{ currentDate }}</view>
        </picker>
        <image src="/static/images/calendar.png" mode=""></image>
      </view>
    </view>

    <view class="list-container" v-if="currentTab === 1">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap.stop="toDetailed(1, item.salaryNo)">
        <view class="date" v-if="item.issueTime">
          {{ Number(item.issueTime.slice(5, 7)) }}月{{ Number(item.issueTime.slice(8, 10)) }}日</view
        >
        <view class="main">
          <view class="row">
            <text class="label">工资条编号</text>
            <text class="value">{{ item.salaryNo }}</text>
          </view>
          <view class="row">
            <text class="label">发放月份</text>
            <text class="value">{{ item.issueMonth }}</text>
          </view>
          <view class="row">
            <text class="label">发放时间</text>
            <text class="value">{{ item.issueTime }}</text>
          </view>
          <view class="row">
            <text class="label">维修结算费用</text>
            <text class="value">{{ item.repairTotalAmount }}</text>
          </view>
          <view class="row">
            <text class="label">工伤、残保费用扣除</text>
            <text class="value">{{ item.totalEmpCost }}</text>
          </view>
          <view class="row">
            <text class="label">暂扣款10%</text>
            <text class="value">{{ item.withholdCost }}</text>
          </view>
          <view class="row">
            <text class="label">需扣回费用</text>
            <text class="value">{{ item.reduceCost }}</text>
          </view>
          <view class="row">
            <text class="label">增减费用</text>
            <text class="value">{{ item.inCrDecrCost }}</text>
          </view>
          <view class="row">
            <text class="label">应发费用</text>
            <text class="value">{{ item.issueCost }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="list-container" v-if="currentTab === 2">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap.stop="toDetailed(2, item.summaryBatchNo)">
        <view class="date" v-if="item.issueTime">
          {{ Number(item.issueTime.slice(0, 4)) }}年{{ Number(item.issueTime.slice(5, 7)) }}月</view
        >
        <view class="main">
          <view class="row">
            <text class="label">维修结算费用总额</text>
            <text class="value">{{ item.repairTotalAmount }}</text>
          </view>
          <view class="row">
            <text class="label">需扣回费用</text>
            <text class="value">{{ item.shouldReduceCost }}</text>
          </view>
          <view class="row">
            <text class="label">增减费用</text>
            <text class="value">{{ item.incrDecrCost }}</text>
          </view>
          <view class="row">
            <text class="label">月度计税费用总额</text>
            <text class="value">{{ item.taxToatalCost }}</text>
          </view>
          <view class="row">
            <text class="label">工伤保险</text>
            <text class="value">{{ item.shouldEmpInsuranceCost }}</text>
          </view>
          <view class="row">
            <text class="label">残保金</text>
            <text class="value">{{ item.shouldResidualInsuranceCost }}</text>
          </view>
          <view class="row">
            <text class="label">服务费</text>
            <text class="value">{{ item.serviceCost }}</text>
          </view>
          <view class="row">
            <text class="label">个税金额</text>
            <text class="value">{{ item.incomeCost }}</text>
          </view>
          <view class="row">
            <text class="label">应发工资总额</text>
            <text class="value">{{ item.issueCost }}</text>
          </view>
          <view class="row">
            <text class="label">日结累计已发</text>
            <text class="value">{{ item.dailySendCost }}</text>
          </view>
          <view class="row">
            <text class="label">月度实发工资</text>
            <text class="value">{{ item.monthSendCost }}</text>
          </view>
        </view>
      </view>
    </view>

    <view v-if="dataList.length <= 0" class="no-text">
      <image src="/static/images/no-data.png"></image>
      <view class="texts">暂无数据</view>
    </view>
  </view>
</template>

<script>
import {
  getUserInfo,
} from '@/common/utils/util'
export default {
  data() {
    return {
      dataList: [],
      currentTab: 1,
      isShowDatePicker: false,
      currentDate: '请选择日期'
    }
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.getList()
  },

  async onLoad() {
    this.getList()
  },

  methods: {
    // 获取列表
    async getList() {
      this.$api.get(this.currentTab === 1 ? '/daily/mywallet/issue/list' : '/daily/mywallet/issue/monthlist',{
        workerNumber: await getUserInfo().workerNumber,
        date: this.currentDate == '请选择日期' ? '' : this.currentDate,
        install: false
      })
        .then(res => {
          this.dataList = res.data
        })
        .finally(() => {
          uni.stopPullDownRefresh()
        })
    },

    toDetailed(type, No) {
      if (type === 1) {
        uni.navigateTo({
          url: '/packageMine/pages/repairSettle/detailed?salaryNo=' + No + '&type=' + type
        })
      } else {
        uni.navigateTo({
          url: '/packageMine/pages/repairSettle/detailed?summaryBatchNo=' + No + '&type=' + type
        })
      }
    },

    // 切换tab
    changeTabs(value) {
      this.currentTab = value
      this.currentDate = '请选择日期'
      this.getList()
    },

    // 切换日期
    changeDate(e) {
      this.currentDate = e.detail.value
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.s_page {
  .nav-con {
    @include flex_abs;

    .item {
      @include flex_abc;
      width: 50%;
      height: 80rpx;
      font-size: 32rpx;
      color: #666666;

      text {
        @include flex_abc;
        width: 150rpx;
        height: 80rpx;
        border-bottom: 2px solid #f7f7f7;
      }

      &.current {
        color: #6da7ff;

        text {
          border-bottom: 2px solid #6da7ff;
        }
      }
    }
  }
}

.date-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 80rpx;
  padding: 0 30rpx;

  .date {
    height: 48rpx;
    background: #ffffff;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;

    .picker {
      width: 150rpx;
    }

    .text {
      font-size: 24rpx;
      color: #666666;
    }

    image {
      width: 28rpx;
      height: 30rpx;
      display: block;
    }
  }
}

.list-container {
  padding: 0 30rpx 30rpx;

  .item {
    margin-top: 20rpx;

    .date {
      font-size: 30rpx;
      color: #666666;
      margin-bottom: 10rpx;
    }

    .main {
      color: #666666;
      background: #ffffff;
      padding: 15rpx 30rpx;
      border-radius: 20rpx;

      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60rpx;

        .label {
          font-size: 28rpx;
          color: #666666;
        }

        .value {
          font-size: 28rpx;
          color: #333333;

          &.orange {
            color: #e95505;
          }
        }
      }
    }
  }
}

.no-text {
  height: 100%;
  width: 100%;
  margin-top: 50rpx;
  text-align: center;

  image {
    width: 450rpx;
    height: 250rpx;
    margin-bottom: 40rpx;
  }

  .texts {
    color: #cccccc;
    font-size: 28rpx;
  }
}
</style>