TALL-MUI-4/plugins/p-finance/p-finance.vue

<!-- 财务条内置组件 -->
<template>
  <view class="finance-wrap" v-if="data" @click="openFinance">
    <!-- 预算和奖金 -->
    <view class="finance-row">
      <view class="finance-item" :style="{ width: `${(data.budget * 100) / (data.budget + data.bonus)}%`, 'background-color': '#93C5FD' }">
        预算{{ data.budget / 100 }}
      </view>
      <view class="finance-item" :style="{ width: `${(data.bonus * 100) / (data.budget + data.bonus)}%`, 'background-color': '#12c77e' }">
        奖金{{ data.bonus / 100 }}
      </view>
    </view>
    <!-- 项目采购日常采购 -->
    <view class="finance-row">
      <view
        class="finance-item"
        :style="{ width: `${(data.projectExpend * 100) / (data.projectExpend + data.dailyExpend)}%`, 'background-color': '#FBBF24' }"
      >
        项目采购{{ data.dailyExpend / 100 }}
      </view>
      <view
        class="finance-item"
        :style="{ width: `${(data.dailyExpend * 100) / (data.projectExpend + data.dailyExpend)}%`, 'background-color': '#a1fd93' }"
      >
        日常采购{{ data.dailyExpend / 100 }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, inject } from 'vue';

const task = inject('task');
const data = ref(null);

// 查询任务上的财务条数据
async function getFinanceByTaskData() {
  try {
    console.log('task: ', task);
    const detailId = task.detailId;
    data.value = await uni.$u.api.getFinanceByTask(detailId);
  } catch (error) {
    console.log('getFinanceByTaskData error: ', error);
  }
}

getFinanceByTaskData();

// 打开详情页
function openFinance() {
  // DEBUG: 假数据 换成财务条详情页的地址
  uni.$ui.openDetail({ url: 'http://www.baidu.com', name: '财务' });
}
</script>

<style lang="scss" scoped>
.finance-wrap {
  .finance-row {
    display: flex;

    .finance-item {
      margin: 3rpx 5rpx;
      font-size: 12px;
      text-align: center;
      border-radius: 8rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow-x: visible;
    }
  }
}
</style>