yh-uniapp/pages/income/detail.vue

<template>
  <view class="app-container">
    <uni-section title="基本信息">
      <u-cell title="日期">
        <template #value>{{detail.group.date | dv}}</template>
      </u-cell>
      <u-cell title="审核中">
        <template #value>{{detail.group.verifying | fix2 | dv}} 元</template>
      </u-cell>
      <u-cell title="已审核">
        <template #value>{{detail.group.verified | fix2 | dv}} 元</template>
      </u-cell>
    </uni-section>
    <u-gap height="16"/>
    <uni-section title="工资明细" v-if="!isEmpty(detail.list)">
      <u-cell v-for="item of detail.list" :title="item.priceName">
        <template #label>数量：{{item.num | dv}} {{item.priceUnit}}</template>
        <template #value>
          <view class="price">
            <view :style="[{color: ReportStatus.getColor(item.reportStatus)}]">{{ReportStatus.getName(item.reportStatus)}}</view>
            <view>{{item.pricePrice * item.num | fix2 | dv}} 元</view>
          </view>
        </template>
      </u-cell>
    </uni-section>
  </view>
</template>

<script>
import UniSection from "@/components/uni-section/uni-section.vue";
import {detailUserProdByDate} from "@/api/app/userProd";
import {isEmpty} from "@/utils";
import {ReportStatus} from "@/utils/enums";

export default {
  components: {UniSection},
  data() {
    return {
      date: null,
      detail: {
        group: {},
        list: []
      },
      ReportStatus
    };
  },
  onLoad(option) {
    this.date = option.date;
    this.getDetail();
  },
  methods: {
    isEmpty,
    getDetail() {
      this.$modal.loading("加载中");
      detailUserProdByDate(this.date).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.$modal.closeLoading();
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.price {
  text-align: right;
}
</style>