boss/pages/main/index/work_bill.vue

<template>
  <div v-if="bill">
    <el-card class="box-card">
      <div slot="header" class="header clearfix">
        <span>工资账单明细</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="module-title">企业方 {{bill.enterprise.nickname}}（{{bill.enterprise.uid}}）</div>
          <div class="module-content">
            <div>实际费用：￥{{(bill.order.real_amount/100).toFixed(2)}}</div>
            <div>开发款项：￥{{bill.hire.price}}</div>
            <div>平台服务费：￥{{bill.hire.service_fee}}</div>
            <div>应缴税费：￥{{bill.hire.tax_fee}}</div>
            <div>直通车抵扣：￥{{bill.hire.fast_hire_fee}}</div>
            <div>托管金额：￥{{(bill.order.real_amount/100).toFixed(2)}}</div>
<!--            <div>差价：￥1070.00（含税￥70.00）</div>-->
<!--            <div>退款：￥0（含税￥70.00）</div>-->
          </div>
        </el-col>
        <el-col :span="12">
          <div class="module-title">{{bill.developer.nickname}}（{{bill.developer.uid}})</div>
          <div class="module-content">
            <div>实际费用：{{bill.hire.price}}</div>
            <div>开发款项：￥{{bill.hire.price}}</div>
            <div>平台服务费：￥0</div>
            <div>应交税费：￥0</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="module-title">工资明细</div>
          <div class="module-content">
            <div>工作日薪：￥{{bill.hire.daily_price}}/天</div>
            <div>工作周期：{{bill.hire.start_date}} 至 {{bill.hire.end_date}}（10小时）</div>
            <div>正式工资：￥{{bill.hire.daily_price}}（10小时）</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="module-title">账单信息</div>
          <div class="module-content">
            <div>创建时间：{{bill.hire.create_time}}</div>
            <div>托管时间：{{bill.hire.pay_time}}</div>
<!--            <div>结薪时间：2019/09/24  15:05:20</div>-->
<!--            <div>关联订单：雇佣款_1231  雇佣补差价_1231</div>-->
            <div>费率明细：企业方：实际服务费率{{Math.round(Number(100*(bill.hire.service_fee/bill.hire.price)))}}%；</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
      bill:null
    }
  },
  mounted(){
    this.getBill();
  },
  methods:{
    async getBill(){
      const data=await this.$post("/api/admin/hire/detail", { id: this.$route.query.id })
      this.bill=data.data;
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
  width: 100%;
}

.header {
  font-size: 24px;
  color: #222222;
  font-weight: 600;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-col {
  padding-top: 20px;
  padding-bottom: 20px;
}

.module-title {
  font-weight: bold;
}

.module-content {
  margin-top: 17px;
  margin-left: 14px;
}
</style>