|
|
- <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>
|