wxservice-web/src/views/hospital-service/appointment/SelectDoctorAndDate.vue

<template>
  <window-size>
    <van-notice-bar
      v-show="data.doctorSources.length > 0"
      left-icon="warning-o"
      text="挂号后，号源仅就诊当天有效，逾时失效！"
    />
    <van-grid direction="horizontal" :column-num="7">
      <van-grid-item v-for="item in data.oneWeekText" :key="item" :text="'周' + item" />
    </van-grid>
    <van-grid direction="horizontal" :column-num="7">
      <van-grid-item v-for="(item, index) in data.nextSevenDate" :key="index">
        <van-badge :content="hasSource(index)" :color="badgeColor(index)">
          <van-button
            :disabled="disabledBtn(index)"
            :type="getType(index)"
            size="small"
            round
            @click="handleClickDate(index, false)"
            >{{ item.date }}</van-button
          >
        </van-badge>
      </van-grid-item>
    </van-grid>
    <div style="height: 5px"></div>
    <van-tag type="primary" plain style="margin-left: 5px">{{ selectDate }}</van-tag>
    <div style="height: 5px"></div>
    <div v-for="(item, index) in data.doctorSources" :key="index">
      <van-cell center :title="item.doctorName + ' | ' + item.chargeType" is-link @click="toDoctorArangement(item)">
        <template #icon>
          <van-image
            style="width: 44.11px; height: 60.36px"
            round
            fit="cover"
            :src="'data:image/png;base64,' + item.portrait"
          />&nbsp;
        </template>
        <template #label>
          <div :style="labelStyle" v-show="item.introduction">{{ item.introduction }}</div>
        </template>
        <template #default>
          <span v-html="hasLeftNum(item.leftNum)"></span>
        </template>
      </van-cell>
    </div>
    <van-empty :image="empty" description="暂未获取到医生数据" v-show="data.doctorSources.length === 0" />
  </window-size>
</template>

<script>
import empty from '../../../assets/empty.png'
import { useRouter } from 'vue-router'
import { getOneWeekText, getNextSevenDate } from '../../../utils/date'
import { onMounted, reactive, ref } from 'vue'
import { getSourcesByDate, getDoctorSources } from '../../../api/appointment'
import Cookies from 'js-cookie'
import store from '../../../store'
import { Toast } from 'vant'
export default {
  name: 'SelectDoctorAndDate',
  setup() {
    const windowSize = store.state.windowSize
    const labelStyle = {
      width: windowSize.w - 100 + 'px',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
    }
    const router = useRouter()
    const deptCode = router.currentRoute.value.params.deptCode
    const selectDate = ref('')
    const data = reactive({
      currentIndex: 0,
      oneWeekText: getOneWeekText(),
      nextSevenDate: getNextSevenDate(),
      nextSevenDaySources: new Array(7).fill({}),
      doctorSources: [],
      dateSelected: '',
    })
    const getType = (index) => {
      return index === data.currentIndex ? 'primary' : 'default'
    }
    const hasSource = (index) => {
      return data.nextSevenDaySources[index] === 1 ? '有' : '无'
    }
    const badgeColor = (index) => {
      return data.nextSevenDaySources[index] === 1 ? 'green' : 'red'
    }
    const disabledBtn = (index) => {
      return data.nextSevenDaySources[index] === 0
    }
    const hasLeftNum = (val) => {
      const yes = '<span style="font-size: 12px;color:green">有号</span>'
      const no = '<span style="font-size: 12px;color:red">无号</span>'
      return val > 0 ? yes : no
    }
    const handleClickDate = (index, isFromMounted) => {
      data.currentIndex = index
      data.dateSelected = data.nextSevenDate[index].fullDate
      Cookies.set('week', '星期' + data.oneWeekText[index])
      localStorage.week = '星期' + data.oneWeekText[index]
      const param = {
        date: data.dateSelected,
        deptCode: deptCode,
      }
      selectDate.value = param.date
      getDoctorSources(param)
        .then((res) => {
          data.doctorSources = res
        })
        .catch(() => {
          data.doctorSources = []
          if (isFromMounted && index < 6) {
            handleClickDate(++index, isFromMounted)
          }
        })
    }
    const toDoctorArangement = (val) => {
      if (val.leftNum === 0) {
        Toast.fail(val.doctorName + '医生已无号')
      } else {
        const to = '/doctorArrangement/' + data.dateSelected + '/' + deptCode + '/' + val.doctorCode
        router.push(to)
      }
    }
    onMounted(() => {
      const param = {
        start: data.nextSevenDate[0].fullDate,
        end: data.nextSevenDate[6].fullDate,
        dept: deptCode,
      }
      getSourcesByDate(param).then((res) => {
        data.nextSevenDaySources = res
        handleClickDate(0, true)
      })
    })
    return {
      empty,
      selectDate,
      deptCode,
      getOneWeekText,
      handleClickDate,
      getType,
      data,
      hasSource,
      disabledBtn,
      badgeColor,
      hasLeftNum,
      labelStyle,
      toDoctorArangement,
    }
  },
}
</script>