health-front/pages_order/checkup/checkupBook/apply.vue

<template>
  <view class="page__view">

		<navbar title="检测预约" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#F3F2F7" />

    <view class="main">

      <view class="card">
        <view class="card-header">{{ typeDesc }}</view>
        <view class="flex row">
          <view class="row-label">联系电话</view>
          <view class="row-content">{{ info.phone || '-' }}</view>
        </view>
      </view>

      <view class="card">
        <view class="card-header">预约信息</view>
        <view class="form">
          <uv-form 
            ref="form"
            :model="form"
            errorType="toast"
          >
            <!-- 自采 -->
            <template v-if="type == 1">
              <view class="form-item">
                <uv-form-item prop="addressData" :customStyle="formItemStyle">
                  <view class="form-item-label">寄送地址</view>
                  <view class="form-item-content">
                    <view class="flex row" @click="jumpToSelectAddress">
                      <view v-if="form.addressData" class="text">{{ getAddressDesc(form.addressData) }}</view>
                      <view v-else class="text placeholder">请选择内容</view>
                      <uv-icon name="arrow-right" color="#C6C6C6" size="32rpx"></uv-icon>
                    </view>
                  </view>
                </uv-form-item>
              </view>
            </template>
            <!-- 上门 -->
            <template v-else-if="type == 2">
              <view class="form-item">
                <uv-form-item prop="addressData" :customStyle="formItemStyle">
                  <view class="form-item-label">体检地址</view>
                  <view class="form-item-content">
                    <view class="flex row" @click="jumpToSelectAddress">
                      <view v-if="form.addressData" class="text">{{ getAddressDesc(form.addressData) }}</view>
                      <view v-else class="text placeholder">请选择内容</view>
                      <uv-icon name="arrow-right" color="#C6C6C6" size="32rpx"></uv-icon>
                    </view>
                  </view>
                </uv-form-item>
              </view>
              <view class="form-item">
                <uv-form-item prop="date" :customStyle="formItemStyle">
                  <view class="form-item-label">预约日期</view>
                  <view class="form-item-content">
                    <view class="flex row" @click="openDatePicker">
                      <view v-if="form.date" class="text">{{ $dayjs(form.date).format('YYYY-MM-DD') }}</view>
                      <view v-else class="text placeholder">请选择内容</view>
                      <uv-icon name="arrow-right" color="#C6C6C6" size="32rpx"></uv-icon>
                    </view>
                    <uv-datetime-picker 
                      ref="datetimePicker" 
                      v-model="form.date" 
                      mode="date" 
                      title="预约日期"
                      confirmColor="#7451DE"
                      cancelColor="#8B8B8B"
                      round="32rpx"
                      :minDate="minTime"
                      @confirm="onDateChange"
                    ></uv-datetime-picker>
                  </view>
                </uv-form-item>
              </view>
              <view class="form-item">
                <uv-form-item prop="timeRange" :customStyle="formItemStyle">
                  <view class="form-item-label">预约时段</view>
                  <view class="form-item-content">
                    <view class="flex row" @click="openTimePicker">
                      <view v-if="form.timeRange" class="text">{{ form.timeRange.join('～') }}</view>
                      <view v-else class="text placeholder">请选择内容</view>
                      <uv-icon name="arrow-right" color="#C6C6C6" size="32rpx"></uv-icon>
                    </view>
                    <uv-picker 
                      ref="timeRangePicker" 
                      :columns="timeColumns" 
                      :defaultIndex="[0, 0]"
                      title="预约时段"
                      confirmColor="#7451DE"
                      cancelColor="#8B8B8B"
                      round="32rpx"
                      @change="onTimeRangeColChange"
                      @confirm="onTimeRangeChange"
                    ></uv-picker>
                  </view>
                </uv-form-item>
              </view>
            </template>
            <!-- 到店 -->
            <template v-else-if="type == 3">
              <view class="form-item">
                <uv-form-item prop="addressData" :customStyle="formItemStyle">
                  <view class="form-item-label">预约日期</view>
                  <view class="form-item-content">
                    <view class="flex row" @click="openDatePicker">
                      <view v-if="form.date" class="text">{{ $dayjs(form.date).format('YYYY-MM-DD') }}</view>
                      <view v-else class="text placeholder">请选择内容</view>
                      <uv-icon name="arrow-right" color="#C6C6C6" size="32rpx"></uv-icon>
                    </view>
                    <uv-datetime-picker 
                      ref="datetimePicker" 
                      v-model="form.date" 
                      mode="date" 
                      title="预约日期"
                      confirmColor="#7451DE"
                      cancelColor="#8B8B8B"
                      round="32rpx"
                      :minDate="minTime"
                      @confirm="onDateChange"
                    ></uv-datetime-picker>
                  </view>
                </uv-form-item>
              </view>
              <view class="form-item">
                <uv-form-item prop="timeRange" :customStyle="formItemStyle">
                  <view class="form-item-label">预约时段</view>
                  <view class="form-item-content">
                    <view class="flex row" @click="openTimePicker">
                      <view v-if="form.timeRange" class="text">{{ form.timeRange.join('~') }}</view>
                      <view v-else class="text placeholder">请选择内容</view>
                      <uv-icon name="arrow-right" color="#C6C6C6" size="32rpx"></uv-icon>
                    </view>
                    <uv-picker 
                      ref="timeRangePicker" 
                      :columns="timeColumns" 
                      :defaultIndex="[0, 0]"
                      title="预约时段"
                      confirmColor="#7451DE"
                      cancelColor="#8B8B8B"
                      round="32rpx"
                      @change="onTimeRangeColChange"
                      @confirm="onTimeRangeChange"
                    ></uv-picker>
                  </view>
                </uv-form-item>
              </view>
              <view class="form-item">
                <uv-form-item prop="hospital" :customStyle="formItemStyle">
                  <view class="form-item-label">预约医院</view>
                  <view class="form-item-content">
                    <view class="flex row" @click="openHospitalPicker">
                      <view v-if="form.hospital" class="text">{{ getHospitalDesc(form.hospital) }}</view>
                      <view v-else class="text placeholder">请选择内容</view>
                      <uv-icon name="arrow-right" color="#C6C6C6" size="32rpx"></uv-icon>
                    </view>
                    <uv-picker 
                      ref="hospitalPicker" 
                      :columns="[hospitalOptions]" 
                      keyName="label"
                      title="预约医院"
                      confirmColor="#7451DE"
                      cancelColor="#8B8B8B"
                      round="32rpx"
                      @confirm="onHospitalChange"
                    ></uv-picker>
                  </view>
                </uv-form-item>
              </view>
              <view class="form-item">
                <uv-form-item prop="name" :customStyle="formItemStyle">
                  <view class="form-item-label">姓名</view>
                  <view class="form-item-content input">
                    <formInput v-model="form.name" placeholder="请输入内容"></formInput>
                  </view>
                </uv-form-item>
              </view>
              <view class="form-item">
                <uv-form-item prop="phone" :customStyle="formItemStyle">
                  <view class="form-item-label">联系方式</view>
                  <view class="form-item-content input">
                    <formInput v-model="form.phone" placeholder="请输入内容"></formInput>
                  </view>
                </uv-form-item>
              </view>
            </template>
          </uv-form>
        </view>
      </view>

    </view>
  
    <view class="bottom">
      <button class="btn" @click="onSubmit">提交预约</button>
    </view>

  </view>
</template>

<script>
	import { mapState } from 'vuex'

  import formInput from '@/pages_order/components/formInput.vue'

  const TYPE_AND_DESC_MAPPING = {
    1: '自采',
    2: '上门',
    3: '到店',
  }

  export default {
    components: {
      formInput,
    },
    data() {
      return {
        id: null,
        type: null,
        info: {},
        form: {
          addressData: null,
          date: null,
          timeRange: null,
          hospital: null,
          name: null,
          phone: null,
        },
        formItemStyle: { padding: 0 },
        minTime: new Date().getTime(),
        hours: [],
        timeColumns: [],
        hospitalOptions: []
      }
    },
    computed: {
			...mapState(['configList', 'userInfo', 'payOrderProduct', 'addressInfo']),
      typeDesc() {
        const desc = TYPE_AND_DESC_MAPPING[this.type] || ''

        return `${desc}检测`
      },
    },
    onShow() {
      console.log('onShow')
      console.log('address', this.addressInfo)

      this.form.addressData = this.addressInfo || null
    },
    onLoad(arg) {
      const { id, type } = arg
      this.id = id
      this.type = parseInt(type)
      
      // todo: fetch data

      this.fetchCheckUpPackageInfo()
      this.fetchCheckUpBookInfo()
    },
		onReady() {
      this.setRules()
		},
    onUnload() {
      this.$store.commit('setAddressInfo', null)
    },
    methods: {
      setRules() {
        let rules = {}

        switch(this.type) {
          case 1: // 自采
            rules = {
              'addressData': {
                type: 'object',
                required: true,
                message: '请选择寄送地址',
              },
            }
            break
          case 2: // 上门
            rules = {
              'addressData': {
                type: 'object',
                required: true,
                message: '请选择体检地址',
              },
              'date': {
                type: 'string',
                required: true,
                message: '请选择预约日期',
              },
              'timeRange': {
                type: 'array',
                required: true,
                message: '请选择预约时段',
              },
            }
            this.setTimeColumns()
            break
          case 3: // 到店
            rules = {
              'date': {
                type: 'string',
                required: true,
                message: '请选择预约日期',
              },
              'timeRange': {
                type: 'array',
                required: true,
                message: '请选择预约时段',
              },
              'hospital': {
                type: 'string',
                required: true,
                message: '请选择预约医院',
              },
              'name': {
                type: 'string',
                required: true,
                message: '请输入姓名',
              },
              'phone': {
                type: 'string',
                required: true,
                message: '请输入联系方式',
              },
            }
            this.setTimeColumns()
            this.hospitalOptions = [
              { id: '001', label: '湖南省长沙市湘雅第一医院' },
              { id: '002', label: '湖南省长沙市湘雅第二医院' },
              { id: '003', label: '湖南省长沙市湘雅第三医院' },
              { id: '004', label: '湖南省长沙市湘雅第四医院' },
            ]
            break
          default:
            break
        }

  			this.$refs.form.setRules(rules);
      },
      getAddressDesc(data) {
        if (!data) {
          return ''
        }
        const { area, address } = data

        return `${area.join('')}${address}`
      },
      getHospitalDesc() {

      },
      fixedZero(num) {
        return `${num < 10 ? '0' + num : num}`
      },
      setTimeColumns(date) {
        let currentTime = this.$dayjs()
        let startHour = 8
        let endHour = 22

        if (date && this.$dayjs(date).isSame(currentTime, 'day')) {
          
          let currentHour = currentTime.hour()
          
          console.log('currentHour', currentHour)
          console.log('startHour', startHour)
          console.log('endHour', endHour)
          console.log('date', this.$dayjs(date))
          console.log('currentTime', currentTime)
          console.log('isToday', this.$dayjs(date).isSame(currentTime, 'day'))

          if (currentHour > endHour) {
            this.timeColumns = []
            return
          }

          if (currentHour > startHour) {
            // todo: check
            startHour = currentHour
          }
          
          if (startHour == endHour) {
            this.timeColumns = []
            return
          }
          
        }

        this.hours = new Array(endHour - startHour + 1).fill(startHour).map((val, idx) => val + idx)

        let startCols = this.hours.slice(0, this.hours.length - 1).map(hour => `${this.fixedZero(hour)}:00`)
        let endCols = this.hours.slice(1).map(hour => `${this.fixedZero(hour)}:00`)

        this.timeColumns = [startCols, endCols]
        this.$refs.timeRangePicker.setColumnValues(0, startCols)
        this.$refs.timeRangePicker.setColumnValues(1, endCols)
      },
      openTimePicker() {
        this.$refs.timeRangePicker.open();
      },
      onTimeRangeColChange(e) {
        console.log('onTimeRangeColChange', e)

        if (e.columnIndex == 0) {
          let startIdx = e.indexs[0]
          let endCols = startIdx == this.hours.length - 1 ? [] : this.hours.slice(startIdx + 1).map(hour => `${this.fixedZero(hour)}:00`)

          console.log('endCols', endCols)

          this.timeColumns[1] = endCols
          this.$refs.timeRangePicker.setColumnValues(1, endCols)
        }
      },
      onTimeRangeChange(e) {
        console.log('onTimeRangeChange', e)
        this.form.timeRange = e.value
        const [startTime, endTime] = this.form.timeRange
        let startIdx = startTime ? this.timeColumns[0].findIndex(item => item === startTime) : 0
        let endIdx = endTime ? this.timeColumns[1].findIndex(item => item === endTime) : 0
        console.log('setIndexs', [startIdx, endIdx])
        this.$refs.timeRangePicker.setIndexs([startIdx, endIdx], true);
      },
      openDatePicker() {
        this.$refs.datetimePicker.open();
      },
      onDateChange(e) {
        const date = e.value

        this.setTimeColumns(date)

        const [startTime] = this.form.timeRange || []
        let dateStr = this.$dayjs(date).format('YYYY-MM-DD')

        if (startTime && this.$dayjs(`${dateStr} ${startTime}`).isBefore(this.$dayjs())) {
          this.form.timeRange = null
          this.$refs.datetimePicker.setIndexs([0, 0]);
        }
      },
      openHospitalPicker() {
        this.$refs.hospitalPicker.open();
      },
      onHospitalChange(e) {
        console.log('onHospitalChange', e)
        this.form.hospital = e.value[0].id
        console.log('form.hospital', this.form.hospital)
      },
      getHospitalDesc(id) {
        console.log('getHospitalDesc', id)
        return this.hospitalOptions.find(item => item.id === id)?.label
      },
      fetchCheckUpPackageInfo() {
        // todo: fetch

        this.info = {
          phone: '0745-5982433',
        }
      },
      fetchCheckUpBookInfo() {
        // todo: fetch

        const detail = {
          id: '003',
          url: '',
          title: '孕产妇体检套餐',
          userName: '周小艺',
          phone: '15558661691',
          amount: 688,
          area: ['海南省', '海口市', '秀英区'],
          address: '秀英街道5单元183室',
          hospital: '001',
          createTime: '2025-04-28 08:14',
          appointmentDate: '2025-04-28',
          appointmentTime: ['08:00', '09:00'],
          type: 2,
          status: 2,
        }

        const {
          userName,
          phone,
          area,
          address,
          appointmentDate,
          appointmentTime,
          hospital,
        } = detail

        this.form = {
          addressData: {
            id: '001',
            name: userName,
            phone,
            area,
            address,
          },
          date: appointmentDate,
          timeRange: appointmentTime,
          hospital,
          name: userName,
          phone,
        }
      },
      jumpToSelectAddress() {
        this.$utils.navigateTo('/pages_order/address/addressList')
      },
      async onSubmit() {
        try {
          const res = await this.$refs.form.validate()

          console.log('onSubmit res', res)

          // todo
          
          setTimeout(() => {
            // todo: check
            // this.$utils.navigateBack()

            let id = '001'
            this.$utils.redirectTo(`/pages_order/checkup/checkupBook/detail?id=${id}`)
          }, 800)
          

        } catch (err) {
          console.log('onSubmit err', err)
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  @import './style.scss';

</style>