537 lines
13 KiB
Vue
537 lines
13 KiB
Vue
<template>
|
|
<view>
|
|
<view class="px-24rpx py-20rpx bg-[f2f2f2] min-h-[calc(100vh-230rpx)]">
|
|
<view class="rounded-16rpx bg-#fff pt-24rpx pb-16rpx">
|
|
<view class="flex items-center">
|
|
<view
|
|
class="relative flex-1 flex-col items-center flex"
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
>
|
|
<image
|
|
:src="
|
|
current >= item.id
|
|
? $assets('/step-active.png')
|
|
: $assets('/step.png')
|
|
"
|
|
class="w-76rpx h-76rpx"
|
|
/>
|
|
<text class="text-white absolute top-18rpx z-10 text-28rpx">{{
|
|
item.id
|
|
}}</text>
|
|
<view
|
|
:class="current >= item.id ? 'text-#FF8CA6' : 'text-#999'"
|
|
class="text-24rpx mt-12rpx"
|
|
>{{ item.label }}</view
|
|
>
|
|
<view
|
|
v-if="item.id < list.length"
|
|
:class="current >= item.id ? 'bg-#FF8CA6' : 'bg-#999'"
|
|
class="step-line absolute left-77% top-30% h-4rpx w-46% rounded-md"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
@click="handleShowPicker"
|
|
class="rounded-16rpx bg-#fff pt-24rpx pr-16rpx pl-30rpx pt-36rpx pb-34rpx my-20rpx flex items-center justify-between"
|
|
>
|
|
<text class="text-34rpx font-bold">服务项目</text>
|
|
<u-icon
|
|
:label="typeVal"
|
|
space="20rpx"
|
|
labelColor="#FF8CA6"
|
|
labelSize="28rpx"
|
|
labelPos="left"
|
|
name="arrow-right"
|
|
width="48rpx"
|
|
height="48rpx"
|
|
color="#666"
|
|
bold
|
|
/>
|
|
</view>
|
|
<view class="rounded-16rpx overflow-hidden bg-#fff px-20rpx pb-20rpx">
|
|
<u--form
|
|
labelPosition="left"
|
|
:model="model"
|
|
:rules="rules"
|
|
ref="formRef"
|
|
borderBottom
|
|
errorType="border-bottom"
|
|
labelWidth="auto"
|
|
>
|
|
<u-form-item
|
|
v-for="item in formList"
|
|
:key="item.key"
|
|
:required="item.required"
|
|
:label="item.label"
|
|
:prop="item.key"
|
|
>
|
|
<u--input
|
|
v-if="item.type === 'string'"
|
|
v-model="model[item.key]"
|
|
border="none"
|
|
inputAlign="right"
|
|
:placeholder="item.placeholder"
|
|
:readonly="current > 1"
|
|
maxlength="200"
|
|
/>
|
|
<!-- model[item.key] ? item.type === 'date' ? $u.timeFormat(model[item.key], 'yyyy-mm-dd') : model[item.key] : item.placeholder -->
|
|
<view
|
|
v-else
|
|
@click="item.show = true"
|
|
class="w-full text-right u-line-1 pl-2"
|
|
:class="item.val ? '' : 'text-#C0C4CC'"
|
|
>{{ item.val || item.placeholder }}
|
|
</view>
|
|
</u-form-item>
|
|
</u--form>
|
|
<view
|
|
v-if="[4, 5].includes(curType)"
|
|
class="mt-32rpx mb-10rpx text-28rpx"
|
|
>
|
|
<view
|
|
>{{ curType === 5 ? '挂号' : '取报告' }}凭证<text
|
|
class="u-form-item__body__left__content__required text-#f56c6c ml-4rpx"
|
|
>*</text
|
|
>
|
|
</view>
|
|
<view class="mb-10rpx text-24rpx text-#999"
|
|
>请勿上传与医保卡相关图片</view
|
|
>
|
|
<upload-img
|
|
v-model="fileList"
|
|
disabled
|
|
multiple
|
|
:maxCount="10"
|
|
></upload-img>
|
|
</view>
|
|
<view class="mt-22rpx mb-20rpx text-28rpx">备注</view>
|
|
<u--textarea
|
|
v-model="model.remark"
|
|
placeholder=""
|
|
maxlength="300"
|
|
count
|
|
:autoHeight="false"
|
|
/>
|
|
<view class="text-28rpx mt-20rpx mb-8rpx">注意事项</view>
|
|
<view class="text-24rpx text-#999">
|
|
1. 服务项目为必填项
|
|
<br />
|
|
2. 服务时间为必填项
|
|
<br />
|
|
3. 服务地点为必填项
|
|
<br />
|
|
</view>
|
|
<agreed-comp v-model:agreed="agreed" />
|
|
</view>
|
|
|
|
<u-picker
|
|
:show="show"
|
|
:columns="columns"
|
|
keyName="serveName"
|
|
valueName="id"
|
|
@confirm="onPickerConfirm"
|
|
@cancel="show = false"
|
|
@close="handleShowPicker"
|
|
cancelText="取消"
|
|
confirmColor="#FF8CA6"
|
|
closeOnClickOverlay
|
|
></u-picker>
|
|
<block v-for="item in dateAndSelectFormList" :key="item.key">
|
|
<u-datetime-picker
|
|
v-if="item.type === 'date' || item.type === 'time'"
|
|
v-model="model[item.key]"
|
|
:show="item.show"
|
|
:mode="item.type"
|
|
:minDate="item.type === 'date' ? new Date().getTime() : 0"
|
|
:minHour="item.type === 'time' ? new Date().getHours() : 0"
|
|
:minMinute="item.type === 'time' ? new Date().getMinutes() : 0"
|
|
@confirm="onDatePickerConfirm($event, item)"
|
|
@cancel="item.show = false"
|
|
@close="item.show = false"
|
|
confirmColor="#FF8CA6"
|
|
closeOnClickOverlay
|
|
/>
|
|
<u-picker
|
|
v-if="item.type === 'select'"
|
|
:show="item.show"
|
|
:columns="item.options || columns"
|
|
keyName="label"
|
|
@confirm="onSelectPickerConfirm($event, item)"
|
|
@cancel="item.show = false"
|
|
@close="item.show = false"
|
|
cancelText="取消"
|
|
confirmColor="#FF8CA6"
|
|
closeOnClickOverlay
|
|
></u-picker>
|
|
<u-popup
|
|
v-if="item.type === 'checkbox'"
|
|
class="overflow-hidden"
|
|
:show="item.show"
|
|
round="16rpx"
|
|
@close="item.show = false"
|
|
closeable
|
|
>
|
|
<view class="h-700rpx pt-90rpx relative">
|
|
<view
|
|
class="text-#000 absolute left-50% translate-x-[-50%] top-30rpx"
|
|
>护理项目</view
|
|
>
|
|
<view
|
|
class="h-full w-full overflow-y-auto py-4 px-30rpx rounded-16rpx overflow-hidden"
|
|
>
|
|
<popup-checkbox @change="onCheckboxChange($event, item)" />
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</block>
|
|
</view>
|
|
<button-contact />
|
|
<view
|
|
class="bg-#fff h-150rpx w-full sticky bottom-0 flex justify-between items-center pr-24rpx pl-40rpx pb-48rpx rounded-sm"
|
|
>
|
|
<block v-if="true">
|
|
<view>
|
|
<text class="text-32rpx">￥</text>
|
|
<text class="font-bold text-54rpx">{{
|
|
typeSelItem.price || 198
|
|
}}</text>
|
|
</view>
|
|
<view
|
|
@click="onSubmit"
|
|
class="text-white bg-#FF8CA6 rounded-24rpx w-240rpx h-80rpx text-center leading-80rpx hover:shadow-md"
|
|
>立即下单</view
|
|
>
|
|
</block>
|
|
<view
|
|
v-if="false"
|
|
class="text-white bg-#FF8CA6 rounded-24rpx w-full mx-30rpx h-80rpx text-center leading-80rpx hover:shadow-md"
|
|
>{{ true ? '开始服务' : '订单已完成，提交工作记录' }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRoute } from '@/utils/uni-router'
|
|
|
|
const route = useRoute()
|
|
const instance = getCurrentInstance()
|
|
const { $u, $api, $Router, $Dialog } = instance.proxy
|
|
// 填写订单 在线支付 服务中 服务完成
|
|
const list = ref([
|
|
{ label: '填写订单', id: 1 },
|
|
{ label: '在线支付', id: 2 },
|
|
{ label: '服务中', id: 3 },
|
|
{ label: '服务完成', id: 4 }
|
|
])
|
|
const current = ref(1)
|
|
const show = ref(false)
|
|
const fileList = ref([
|
|
{
|
|
message: '',
|
|
size: 20042,
|
|
// status: 'success',
|
|
thumb: 'http://tmp/Y2K3DucvbS0Aa23b6ba2697baa86a0eb579485736a6a.jpeg',
|
|
type: 'image',
|
|
url: 'https://xjl559.oss-cn-shanghai.aliyuncs.com/2023/12/08/3d4a506c74a145ba_Y2K3DucvbS0Aa23b6ba2697baa86a0eb579485736a6a.jpeg'
|
|
}
|
|
])
|
|
// 半天陪诊 全天陪诊 代办约号 取送报告 代取送药 上门护理
|
|
const columns = reactive([
|
|
[
|
|
{ label: '半天陪诊', id: 1 },
|
|
{ label: '全天陪诊', id: 2 },
|
|
{ label: '代办约号', id: 3 },
|
|
{ label: '取送报告', id: 4 },
|
|
{ label: '代取送药', id: 5 },
|
|
{ label: '上门护理', id: 6 }
|
|
]
|
|
])
|
|
// 就诊医院 请输入, 预约就诊日期 请选择就诊日期,预约就诊时间 请选择就诊时间,就诊人,请填写就诊人,联系人 请填写就诊联系人,联系人手机号 请填写就诊联系人 ,挂号科室
|
|
const formItems = [
|
|
{
|
|
label: '收货地址',
|
|
placeholder: '请输入收货地址',
|
|
key: 'deliveryAddress',
|
|
required: true,
|
|
type: 'string',
|
|
trigger: ['blur', 'change'],
|
|
message: '请填写收货地址',
|
|
show: true,
|
|
cur: [4, 5],
|
|
sort: 1
|
|
},
|
|
{
|
|
label: '就诊医院',
|
|
placeholder: '请输入',
|
|
key: 'hospitalId',
|
|
required: true,
|
|
type: 'select',
|
|
trigger: ['blur', 'change'],
|
|
message: '请填写就诊医院',
|
|
show: false,
|
|
cur: [1, 2, 3, 4, 5],
|
|
sort: 2
|
|
},
|
|
{
|
|
label: '上门护理',
|
|
placeholder: '请选择上门护理类型',
|
|
key: 'hospitalId',
|
|
required: true,
|
|
type: 'checkbox',
|
|
trigger: ['blur', 'change'],
|
|
message: '请选择上门护理类型',
|
|
show: false,
|
|
cur: [6],
|
|
sort: 1
|
|
},
|
|
{
|
|
label: '服务时间',
|
|
placeholder: '请选择服务时间',
|
|
key: 'serviceTime',
|
|
required: true,
|
|
type: 'date',
|
|
trigger: ['blur', 'change'],
|
|
message: '请选择服务时间',
|
|
show: false,
|
|
sort: 3,
|
|
cur: [4, 5]
|
|
},
|
|
{
|
|
label: '报告类型',
|
|
placeholder: '请选择报告类型',
|
|
key: 'reportType',
|
|
required: true,
|
|
type: 'select',
|
|
trigger: ['blur', 'change'],
|
|
message: '请选择报告类型',
|
|
show: false,
|
|
sort: 3,
|
|
cur: [4]
|
|
},
|
|
{
|
|
label: '预约就诊日期',
|
|
placeholder: '请选择就诊日期',
|
|
key: 'clinicDate',
|
|
required: true,
|
|
type: 'date',
|
|
trigger: ['blur', 'change'],
|
|
message: '请选择预约就诊日期',
|
|
show: false,
|
|
sort: 3,
|
|
cur: [1, 2]
|
|
},
|
|
{
|
|
label: '预约就诊时间',
|
|
placeholder: '请选择就诊时间',
|
|
key: 'clinicTime',
|
|
required: true,
|
|
type: 'time',
|
|
message: '请选择预约就诊时间',
|
|
trigger: ['blur', 'change'],
|
|
show: false,
|
|
sort: 4,
|
|
cur: [1, 2]
|
|
},
|
|
{
|
|
label: '上门日期',
|
|
placeholder: '请选择上门日期',
|
|
key: 'visitDate',
|
|
required: true,
|
|
type: 'date',
|
|
trigger: ['blur', 'change'],
|
|
message: '请选择上门日期',
|
|
show: false,
|
|
sort: 3,
|
|
cur: [6]
|
|
},
|
|
{
|
|
label: '上门时间',
|
|
placeholder: '请选择上门时间',
|
|
key: 'visitTime',
|
|
required: true,
|
|
type: 'time',
|
|
message: '请选择上门时间',
|
|
trigger: ['blur', 'change'],
|
|
show: false,
|
|
sort: 4,
|
|
cur: [6]
|
|
},
|
|
{
|
|
label: '就诊人',
|
|
placeholder: '请填写就诊人',
|
|
key: 'clinicPerson',
|
|
required: true,
|
|
type: 'string',
|
|
trigger: ['blur', 'change'],
|
|
message: '请填写就诊人',
|
|
show: true,
|
|
sort: 5,
|
|
cur: [1, 2]
|
|
},
|
|
{
|
|
label: '就诊人',
|
|
placeholder: '请填写就诊人',
|
|
key: 'treatmenter',
|
|
required: true,
|
|
type: 'string',
|
|
trigger: ['blur', 'change'],
|
|
message: '请填写就诊人',
|
|
show: true,
|
|
sort: 5,
|
|
cur: [5]
|
|
},
|
|
{
|
|
label: '联系人',
|
|
placeholder: '请填写联系人',
|
|
key: 'contact',
|
|
required: true,
|
|
type: 'string',
|
|
trigger: ['blur', 'change'],
|
|
message: '请填写联系人',
|
|
show: true,
|
|
sort: 6,
|
|
cur: [1, 2, 6]
|
|
},
|
|
{
|
|
label: '联系人手机号',
|
|
placeholder: '请填写联系人手机号',
|
|
key: 'contactPhone',
|
|
required: true,
|
|
type: 'string',
|
|
trigger: ['blur', 'change'],
|
|
message: '请填写联系人手机号',
|
|
show: true,
|
|
sort: 7,
|
|
cur: [1, 2, 4, 5, 6]
|
|
},
|
|
{
|
|
label: '挂号科室',
|
|
placeholder: '请选择挂号科室',
|
|
key: 'registrationDept',
|
|
required: true,
|
|
type: 'string',
|
|
trigger: ['blur', 'change'],
|
|
message: '请选择挂号科室',
|
|
show: true,
|
|
sort: 8,
|
|
cur: [1, 2]
|
|
}
|
|
// {
|
|
// label: '备注',
|
|
// placeholder: '请输入',
|
|
// key: 'remark',
|
|
// type: 'textarea',
|
|
// required: false,
|
|
// show: true
|
|
// }
|
|
]
|
|
const dateAndSelectFormList = ref()
|
|
const formList = ref()
|
|
const model = ref({})
|
|
const typeSelItem = ref({}) //选择的服务项目
|
|
const curType = ref(route.query.cur ? +route.query.cur : columns[0][0].id)
|
|
const typeVal = ref('')
|
|
const rules = ref({})
|
|
const agreed = ref(true)
|
|
const hospitalList = ref([])
|
|
|
|
const getPzList = async () => {
|
|
const res = await $api.fetchPzServerList()
|
|
columns[0] = res?.page?.list || []
|
|
}
|
|
|
|
const getPzHospitalList = async () => {
|
|
const res = await $api.fetchPzHospitalList()
|
|
hospitalList.value = (res?.page?.list || []).map((item) => ({
|
|
label: item.name,
|
|
id: item.id
|
|
}))
|
|
}
|
|
|
|
getPzList()
|
|
getPzHospitalList()
|
|
|
|
const onSubmit = () => {
|
|
console.log('submit', fileList.value)
|
|
}
|
|
|
|
watchEffect(() => {
|
|
const item = columns[0].find((item) => item.id === curType.value)
|
|
typeVal.value = item?.serveName
|
|
dateAndSelectFormList.value = []
|
|
formList.value = []
|
|
formItems.forEach((item) => {
|
|
const { required, key, message, trigger, type } = item
|
|
if (item.cur.includes(curType.value)) {
|
|
if (item.key === 'hospitalId') item.options = [hospitalList.value]
|
|
formList.value.push(item)
|
|
// if (['date', 'time', 'select'].includes(type)) {
|
|
if (item.type !== 'string') {
|
|
dateAndSelectFormList.value.push(item)
|
|
}
|
|
}
|
|
rules.value[item.key] = { required, message, trigger }
|
|
model.value[key] = ''
|
|
})
|
|
})
|
|
|
|
const handleShowPicker = () => {
|
|
if (current.value > 1) {
|
|
return
|
|
}
|
|
show.value = !show.value
|
|
}
|
|
const onPickerConfirm = ({ value: [val] }) => {
|
|
show.value = false
|
|
typeVal.value = val.serveName
|
|
curType.value = val.id
|
|
typeSelItem.value = val
|
|
}
|
|
// 列表选择器
|
|
const onSelectPickerConfirm = ({ value: [val] } = { value: [] }, item) => {
|
|
item.show = false
|
|
model.value[item.key] = val?.id
|
|
item.val = val?.label
|
|
}
|
|
const onDatePickerConfirm = ({ value }, item) => {
|
|
item.show = false
|
|
if (item.type === 'date') {
|
|
item.val = model.value[item.key] = $u.timeFormat(value, 'yyyy-mm-dd')
|
|
} else item.val = model.value[item.key] = value
|
|
}
|
|
// 护理项目点击
|
|
const onCheckboxChange = (val, item) => {
|
|
model.value[item.key] = val
|
|
item.val = val.join(',')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep {
|
|
.u-form-item__body {
|
|
border-bottom: 2rpx solid #f2f2f2;
|
|
padding: 32rpx 0 !important;
|
|
}
|
|
.u-form-item__body__left__content__required {
|
|
// margin-left: 6rpx;
|
|
font-size: 24rpx !important;
|
|
top: 0rpx !important;
|
|
right: -6rpx !important;
|
|
left: auto !important;
|
|
}
|
|
.u-popup__content {
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
}
|
|
.u-textarea,
|
|
.u-textarea__count {
|
|
background-color: #f2f2f2 !important;
|
|
}
|
|
.u-popup__content {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
</style>
|