invoice_fill_h5/src/pages/index.vue

<template>
  <div class="body">
    <div class="bottombox">
      <van-button
        round
        :style="{ width: '40vw', margin: 'auto' }"
        type="primary"
        @click="goForm"
      >
        立即填写
      </van-button>
      <van-button
        round
        :style="{ width: '40vw', margin: 'auto' }"
        type="primary"
        @click="goRecord"
      >
        填写记录
      </van-button>
      <van-button
        round
        class="mybutton"
        :style="{ width: '40vw', margin: 'auto' }"
        type="primary"
        @click="goPromulgate"
      >
        信息公示
      </van-button>
    </div>
    <div>
      {{
        formData.data.status == 1
          ? "该班次将于2022年10月5日截止"
          : "该班次已截止如有问题请联系报销助理"
      }}
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router'
import { getInvoiceFill } from '@/services/invoice'

const router = useRouter();
const formData = reactive({
  data: {
    //班级名称
    invoiceId: 'e288229edfd3cdd2eaac125b65eca10e',
    endDate: undefined,
    name: undefined,
    status: 1
  }
})

const goForm = () => {
  router.push({ name: 'invoice.fill', 
  params: { 
    invoiceId: formData.data.invoiceId,
    invoiceName: formData.data.name,
    endDate:formData.data.endDate,
    status:formData.data.status
  } })
}
const goRecord = () => {
  router.push({ name: 'invoice.records'})
}
const goPromulgate = () => {
  router.push({ name: 'invoice.promulgate'})
}
onMounted(() => {
  getInvoiceFill(formData.data.invoiceId).then(res => {
    formData.data = res
  }).catch(err => {
    console.log(err)
  })
})
</script>
<style lang="less" scoped>
.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 80vh;
  padding-top: 10vh;
  .bottombox {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50vh;
  }
}
</style>