wxservice-web/src/views/hospital-service/inpatient-service/ZyFeeDetail.vue

<template>
  <window-size>
    <van-cell title="选择日期区间" :value="date" @click="showCalendar = true" />
    <van-calendar
      v-model:show="showCalendar"
      type="range"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="onConfirmDate"
    />
    <van-cell title="花费金额">
      <template #default>
        <span style="color: orangered">￥ {{ totalCost }}</span>
      </template>
    </van-cell>
    <div style="height: 3px"></div>
    <div style="background: white; text-align: center; font-size: 12px; padding: 0 10px">
      <div style="height: 5px"></div>
      <van-row>
        <van-col :span="10">项目名称</van-col>
        <van-col :span="5">单价</van-col>
        <van-col :span="4">数量</van-col>
        <van-col :span="5">金额</van-col>
      </van-row>
      <div style="height: 8px"></div>
      <div :style="scrollStyle">
        <div v-for="(fee, index) in fees.slice(pageSize * (currentPage - 1), pageSize * currentPage)" :key="index">
          <div style="height: 8px"></div>
          <van-row>
            <van-col :span="10">{{ fee.xmmc }}</van-col>
            <van-col :span="5">{{ fee.dj }}</van-col>
            <van-col :span="4">{{ fee.sl }}</van-col>
            <van-col :span="5">{{ fee.je }}</van-col>
          </van-row>
          <div style="height: 8px"></div>
        </div>
      </div>
      <div style="position: absolute; bottom: 0; left: 0; right: 0; background: white">
        <van-pagination
          v-model="currentPage"
          :total-items="fees.length"
          :items-per-page="pageSize"
          force-ellipses
          @change="handleCurrentPageChange"
        />
      </div>
    </div>
  </window-size>
</template>

<script>
import store from '../../../store'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getOneWeekOffset } from '../../../utils/date'
import { getZyFees } from '../../../api/inpatient-service'
export default {
  name: 'ZyFeeDetail',
  setup() {
    const scrollStyle = {
      height: store.state.screenSize.h - 208 + 'px',
      overflowY: 'scroll',
    }
    const router = useRouter()
    const params = router.currentRoute.value.params
    const date = ref('')
    const showCalendar = ref(false)
    const minDate = new Date(2012, 0, 1)
    const maxDate = new Date()
    const fees = ref([])
    const totalCost = ref('')
    const currentPage = ref(1)
    const pageSize = ref(30)
    const handleCurrentPageChange = (val) => {
      currentPage.value = val
    }
    const onConfirmDate = (val) => {
      const [start, end] = val
      showCalendar.value = false
      date.value = `${formatDate(start)} - ${formatDate(end)}`
      params.start = formatDate(start)
      params.end = formatDate(end)
      getZyFees(params).then((res) => {
        fees.value = res.fees
        totalCost.value = res.totalCost
      })
    }
    onMounted(() => {
      const oneWeekOffset = getOneWeekOffset(params.admissDate)
      date.value = oneWeekOffset.start + ' - ' + oneWeekOffset.end
      params.start = oneWeekOffset.start
      params.end = oneWeekOffset.end
      getZyFees(params).then((res) => {
        fees.value = res.fees
        totalCost.value = res.totalCost
      })
    })
    return {
      scrollStyle,
      params,
      date,
      minDate,
      maxDate,
      showCalendar,
      currentPage,
      pageSize,
      handleCurrentPageChange,
      onConfirmDate,
      fees,
      totalCost,
    }
  },
}

function formatDate(date) {
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
}
</script>