invoice_fill_h5/src/pages/index.vue

<template>
  <div class="body">
    <div class="bottombox">
      <van-button
        round
        :style="{ width: '40vw', margin: 'auto' }"
        :disabled="!invoiceId"
        type="primary"
        @click="goForm"
      >
        立即填写
      </van-button>
      <van-button
        round
        class="mybutton"
        :style="{ width: '40vw', margin: 'auto' }"
        :disabled="!invoiceId"
        type="primary"
        @click="goPromulgate"
      >
        信息公示
      </van-button>
      <van-button
        round
        :style="{ width: '40vw', margin: 'auto' }"
        type="primary"
        @click="goRecord"
      >
        填写记录
      </van-button>
    </div>
    <div>
      {{tipText}}
    </div>
  </div>
</template>

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

const router = useRouter();
const route = useRoute();
const { invoiceId } = route.query

const formData = reactive({})

const tipText = computed(() => {
  if (!invoiceId) return '请扫码访问此页面';
  const finished = formData.status === 2 || (formData.endDate ? dayjs().isAfter(dayjs(formData.endDate)) : false)
  return finished ? '该班次已截止如有问题请联系报销助理' : `该班次将于 ${dayjs(formData.endDate).format('YYYY年MM月DD日')} 截止`
})

const goForm = () => {
  router.push({ name: 'invoice.fill', query: route.query })
}

const goRecord = () => {
  router.push({ name: 'invoice.history', query: route.query })
}
const goPromulgate = () => {
  router.push({ name: 'publicity.list', query: route.query })
}

onMounted(() => {
  getInvoiceFill(invoiceId).then(res => {
    Object.assign(formData, 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>