boss/pages/main/index/wage_details.vue

<template>
  <div class="ui inline form" id="wage-details">
    <h3>工资账单明细</h3>
    <div class="center1" style="padding:0 10px" v-if="item">
      <h4>
        【
        <a href="#" @click="goDetail">{{item.job.title_count}}</a>
        】{{item.time.month}}工资账单
        <span class="ui horizontal label">{{item.statusName}}</span>
        <span class="ui horizontal label" v-if="item.is_use_deposit=='1'">使用押金结算</span>
      </h4>

      <div class="hr" style="margin: 18px 0 10px"></div>
      <div style="display: flex">
        <div class="center1-1" style="flex: 1">
          <p class="font18 color0">
            <span class="font-weight">企业方</span>
            （{{item.company_info.nickname}}）
          </p>
          <p class="font15 color2">
            <label class="label">实际费用</label>
            <b class="font24 color1">
              <span>￥</span>
              {{item.company.company_total_price}}
            </b>
            <img
              src="@/assets/img/vip_icon_com.png"
              height="16"
              width="16"
              valign="middle"
              v-show="item.rate.company_service_fee_rate_reduce>0"
            >
          </p>
          <p class="font15 color2">
            <label class="label">本月工资</label>
            <b class="font16 color0">￥{{item.salary.base_salary}}</b>
          </p>
          <p class="font15 color2">
            <label class="label">平台服务费</label>
            <b class="font16 color0">￥{{item.company.company_service_fee}}</b>
          </p>
          <p class="font15 color2">
            <label class="label">应缴税费</label>
            <b class="font16 color0">￥{{item.company.company_tax}}</b>
          </p>
          <p class="font15 color2">
            <label class="label">托管押金</label>
            <b class="font16 color0">￥{{item.company.company_deposit_fee}}</b>
          </p>
          <p class="font15 color2">
            <label class="label">意向金抵扣</label>
            <b
              class="font16 color0"
            >￥{{item.company.company_earnest_cash>0?-item.company.company_earnest_cash:0}}</b>
          </p>
          <p class="font12 color2">
            <label class="label">托管金额</label>
            <span class>￥{{item.company.company_pay}}</span>
          </p>
          <div v-if="item.salary.return_money!=0">
            <p class="font12 color2">
              <label class="label">退还金额</label>
              <span class>￥{{item.salary.return_money}}</span>
            </p>
          </div>
        </div>

        <div
          class="center1-1"
          style="flex: 1;border-left: 1px solid rgba(0,0,0,.06);padding-left: 10px"
        >
          <p class="font18 color0">
            <span class="font-weight">开发者</span>
            （{{item.developer_info.nickname}}）
          </p>
          <p class="font15 color2">
            <label class="label">实际工资</label>
            <b class="font24 color1">
              <span>￥</span>
              {{item.developer.person_price}}
            </b>
            <img
              src="@/assets/img/vip_icon.png"
              height="16"
              width="16"
              valign="middle"
              v-show="item.rate.person_service_fee_rate_reduce>0"
            >
          </p>
          <p class="font15 color2">
            <label class="label">本月工资</label>
            <b class="font16 color0">￥{{item.salary.base_salary}}</b>
          </p>
          <p class="font15 color2">
            <label class="label">平台服务费</label>
            <b
              class="font16 color0"
            >￥{{item.developer.person_service_fee>0?-item.developer.person_service_fee:0}}</b>
          </p>
          <p class="font15 color2">
            <label class="label">应缴税费</label>
            <b
              class="font16 color0"
            >￥{{item.developer.person_total_tax>0?-item.developer.person_total_tax:0}}</b>
          </p>
        </div>
      </div>

      <div class="hr" style="margin: 18px 0 10px"></div>

      <p class="font13 color0 font-weight">本月工资明细（合计￥{{item.salary.base_salary}}）</p>
      <p class="font12 color2">
        <label class="label">每月薪资：</label>
        ￥{{item.salary.job_salary}} /月
      </p>
      <p class="font12 color2">
        <label class="label">工作周期：</label>
        {{item.time.start_time | dateFormat('YYYY-MM-DD')}} 至
        {{item.time.end_time | dateFormat('YYYY-MM-DD')}} （{{item.days}}天）
      </p>

      <span v-if="item.normal_days>0">
        <p class="font12 color2">
          <label class="label">正式工资：</label>
          ￥{{item.salary.normal_salary}}（{{item.normal_days}}天）
        </p>
      </span>
      <span v-if="item.probation_days>0">
        <p class="font12 color2">
          <label class="label">试用工资：</label>
          ￥{{item.salary.probation_salary}}（{{item.probation_days}}天，按月工资{{item.rate.probation_rate}}%结算）
        </p>
      </span>

      <p class="font12 color2">
        <label class="label">结算比例：</label>
        {{item.work_hour.work_rate}}%（工作工时：{{item.work_hour.worked_hours}}/{{item.work_hour.should_work_hours}}）
      </p>
      <div v-if="item.salary.deduction_fee!=0">
        <p class="font12 color2">
          <label class="label">扣减工资：</label>
          ￥-{{item.salary.deduction_fee}}
        </p>
      </div>

      <div class="hr" style="margin: 18px 0 10px"></div>

      <p class="font13 color0 font-weight" style="margin-top: 20px">账单信息</p>
      <p class="font12 color2">
        <label class="label">创建时间：</label>
        {{item.time.create_time | dateFormat}}
      </p>
      <p class="font12 color2">
        <label class="label">托管时间：</label>
        <span v-if="item.status>=1">{{item.time.pay_time | dateFormat}}</span>
        <span v-else>--</span>
      </p>
      <p class="font12 color2">
        <label class="label">发薪时间：</label>
        <span v-if="item.status>=4">{{item.time.send_salary_time | dateFormat}}</span>
        <span v-else>--</span>
      </p>
      <p class="font12 color2">
        <label class="label">备注说明：</label>
        {{item.remark || '无'}}
      </p>
      <p class="font12 color2">
        <label class="label">费率明细：</label>
        企业方：实际服务费率{{item.rate.company_service_fee_rate}}%(会员减免{{item.rate.company_service_fee_rate_reduce}}%)，税率{{item.rate.company_tax_rate}}%；
        开发者：实际服务费率{{item.rate.person_service_fee_rate}}%(会员减免{{item.rate.person_service_fee_rate_reduce}}%)，税率{{item.rate.person_total_rate}}%；
      </p>
    </div>
  </div>
</template>

<script>
// 现在环境是线上还是测试, 默认线上
let env = ''

export default {
  data() {
    return {
      job_id: '',
      period_id: '',
      item: null,
    }
  },
  filters: {
    /**
     * 格式化日期
     */
    dateFormat(val) {
      return new Date(Number(val) * 1000).toLocaleDateString()
    }
  },
  mounted() {
    this.job_id = this.$route.query.job_id
    this.period_id = this.$route.query.period_id
    this.getData()
  },
  methods: {
    goDetail() {
      return '/rooter/cloudjobitem/'+item.job_id
    },
    /**
     * 获取数据
     */
    async getData(i) {
      let res = await this.$post('/api/admin/job/get_job_period_detail', {
        job_id: this.job_id,
        period_id: this.period_id,
        is_cal_workrate: 1
      })
      if(!res.data) return
      this.item = res.data
    },
  }
}
</script>

<style scoped>
.font-weight,
.font24 {
  font-weight: 600;
}
p {
  margin-bottom: 0;
}
.color0 {
  color: #222;
}
.color1 {
  color: #308eff;
}
.color2 {
  color: #999;
}
.font12 {
  font-size: 12px;
}
.font15 {
  font-size: 15px;
}
.font16 {
  font-size: 16px;
}
.font13 {
  font-size: 13px;
}
.font24 {
  font-size: 24px;
}
.center1 {
  padding: 10px;
  background-color: #fff;
}
.center1 p {
  line-height: 21px;
}
.center1 .center1-1 p {
  line-height: 30px;
}
.center2 {
  padding: 20px 10px;
  background-repeat: no-repeat;
  background-position: top;
}
.center2 p {
  line-height: 23px;
}
.hr {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.06);
}
</style>