finance/pages/application-details.vue

<template>
<div>
  <!-- 导航栏 -->
  <NuxtLink to="Initiate-application">
      <van-nav-bar
      title="申请详情"
      left-arrow
      @click-left="onClickLeft"
    />
  </NuxtLink>

  <!-- 审核结果 -->
  <div class="bg-white px-3">
    <div class="text-gray-500 font-semibold px-1 py-3">审核结果</div>
    <div v-for="item in checkerList" class="flex py-3 px-4 text-gray-400 text-base justify-between">
      <div>
          <div>{{item.name}}</div>
          <div class="text-sm pt-1">{{item.advice}}</div>
          <div class="text-sm pt-1">{{item.checkedTime}}</div>
      </div>
      <div class="text-center">
          <div :class="item.status === '1' ? 'text-green-500' : item.status === '2' ? 'text-red-500' : ''">
            {{item.status === '1' ? '已通过' : item.status === '2' ? '已驳回' : '待审批'}}
          </div>
          <div v-if="item.score>0" class="mt-1">
            <van-circle
              v-model:current-rate="item.score"
              :rate="item.score"
              :speed="100"
              :text="item.score"
              class="w-12"
              color="#ff6700"
              :stroke-width="100"
            />
          </div>
      </div>
    </div>
  </div>
  <!-- 发票信息 -->
  <div class="bg-white px-3">
    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">发票信息</div>
    <div v-for="item in billList" class="flex py-2 px-4 text-gray-400 text-base justify-between">
        <div>{{item.name}}</div>
        <div>{{item.value}}</div>
    </div>
  </div>
  <!-- 其他信息 -->
  <div class="bg-white px-3">
    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">其他信息</div>
    <div v-for="item in otherData" class="flex py-2 px-4 text-gray-400 text-base justify-between">
        <div>{{item.name}}</div>
        <div>{{item.value}}</div>
    </div>
  </div>
  <!-- 提交人信息 -->
  <div class="bg-white px-3">
    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">提交人信息</div>
    <div v-for="item in submitter" class="flex py-2 px-4 text-gray-400 text-base justify-between">
        <div>{{item.name}}</div>
        <div>{{item.value}}</div>
    </div>
  </div>
</div>
</template>

<script setup>
// 审核人数据
const checkerList = ref([
  {
    name: "冯教授",
    advice: "",
    checkedTime: "",
    status: "0",
  },
  {
    name: "薇薇安",
    advice: "很棒!",
    checkedTime: "12/18 14:55",
    status: "1",
    score:100
  },
  {
    name: "小明",
    advice: "很棒!",
    checkedTime: "12/18 14:55",
    status: "1",
    score:80
  }
])
// 发票信息数据
const billList = ref([
  {
    name: "发票代码",
    value: "4154153125646",
  },
  {
    name: "发票号码",
    value: "545648789",
  },
  {
    name: "合计金额(元)",
    value: "40",
  },
  {
    name: "税额(元)",
    value: "2",
  },
  {
    name: "开票日期",
    value: "2022年1月2日",
  },
  {
    name: "备注",
    value: "业务支出",
  },
])
// 其他信息数据
const otherData = ref([
  {
    name: "申请类型",
    value: "项目申请"
  },
  {
    name: "所属项目",
    value: "PT项目"
  },
  {
    name: "所属任务",
    value: "财务条界面设计"
  },
  {
    name: "类目",
    value: "报销"
  },
  {
    name: "名目",
    value: "业务招待费"
  },
])
// 提交人数据
const submitter = ref([
  {
    name:'姓名',
    value:'黛西'
  },
  {
    name:'部门',
    value:'软件部'
  },
  {
    name:'提交时间',
    value:'2021/12/29 13:22'
  },
])

function onClickLeft(){
  console.log("上一页")
}
</script>

<style lang="less" scoped>
.van-circle{
  width: 2.5rem !important;
  height: 2.5rem !important;
}

</style>