301 lines
6.8 KiB
Vue
301 lines
6.8 KiB
Vue
<template>
|
|
<el-row :gutter="20" class="info">
|
|
<el-col :span="5">
|
|
<!-- Doctor Image -->
|
|
<el-image :src="state.info.img" fit="contain" class="doctor-image" />
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<!-- Doctor Name and Graduation School -->
|
|
<h1 class="doctor-name">{{ state.info.userName }} ({{ state.info.graduationSchool }})</h1>
|
|
<!-- Introduction and Details -->
|
|
<div class="introduction" v-if="state.info.position">
|
|
<span class="label">职称:</span> {{ state.info.position }}
|
|
</div>
|
|
<div class="introduction" v-if="state.info.specialty">
|
|
<span class="label">专业领域: </span>{{ state.info.specialty }}
|
|
</div>
|
|
<div class="introduction" v-if="state.info.phone">
|
|
<span class="label">联系电话: </span>{{ state.info.phone }}
|
|
</div>
|
|
<div class="introduction" v-if="state.info.yearsExperience">
|
|
<span class="label">临床经验: </span>{{ state.info.yearsExperience }}年
|
|
</div>
|
|
<div class="introduction" v-if="state.info.yearsExperience">
|
|
<span class="label">挂号费用: </span><span style="color: #FF0000">{{ state.info.amount }}</span>元
|
|
</div>
|
|
|
|
<!-- Doctor Introduction -->
|
|
<div class="tag">
|
|
<span class="label">简介: {{ state.info.intro }}</span>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="operate">
|
|
|
|
<el-button type="primary" @click="handleBuy" class="action-button">预约挂号</el-button>
|
|
<el-button type="primary" @click="dialogVisible = true" class="action-button">电话联系</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- Drawer for Purchase -->
|
|
<el-drawer
|
|
v-model="buyDrawer"
|
|
title="预约"
|
|
size="50%">
|
|
<el-form ref="formRef"
|
|
:model="state.buyForm"
|
|
label-width="auto"
|
|
label-position="top">
|
|
<el-form-item label="医生姓名">
|
|
<el-input disabled v-model="state.buyForm.userName" />
|
|
</el-form-item>
|
|
<el-form-item label="医生联系电话">
|
|
<el-input disabled v-model="state.buyForm.phone" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="年龄">
|
|
<el-input v-model="state.buyForm.age" placeholder="请输入年龄" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="预约时间"
|
|
prop="appointmentTime"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
message: '请选择预约时间',
|
|
trigger: 'blur',
|
|
}
|
|
]">
|
|
<el-date-picker
|
|
v-model="state.buyForm.appointmentTime"
|
|
type="datetime"
|
|
placeholder="请选择"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
:disabled-date="disabledDate"
|
|
:disabled-time="disabledTime"
|
|
:style="{ width: '100%' }"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="支付金额">
|
|
<el-link type="danger">{{ state.buyForm.amount }} 元</el-link>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="患者备注">
|
|
<el-input v-model="state.buyForm.remark" :rows="2"
|
|
type="textarea" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="buySubmitForm(formRef)">立即预约</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-drawer>
|
|
|
|
<el-dialog
|
|
v-model="dialogVisible"
|
|
title="电话联系"
|
|
width="500"
|
|
>
|
|
<span>{{ state.info.phone }}</span>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" @click="dialogVisible = false">
|
|
确定
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
import { reactive } from 'vue'
|
|
import type { FormInstance } from 'element-plus'
|
|
const dialogVisible = ref(false)
|
|
const buyDrawer = ref(false)
|
|
const formRef = ref<FormInstance>()
|
|
|
|
import { useRoute } from 'vue-router'
|
|
const route = useRoute()
|
|
const itemId:number = route.params.id
|
|
const state = reactive(<any>{
|
|
info: {},
|
|
buyForm: {
|
|
id: null,
|
|
title: '',
|
|
appointmentTime: 1,
|
|
total: 0
|
|
}
|
|
})
|
|
|
|
// 深度监听 route.params.id
|
|
watch(() => route.params.id,
|
|
(newId) => {
|
|
window.location.href = `/info/${newId}`
|
|
},
|
|
{ deep: true }
|
|
)
|
|
/**
|
|
* 跳转
|
|
*/
|
|
const to = (id:number) => {
|
|
router.push(`/medic/${id}`)
|
|
}
|
|
function init() {
|
|
frontRequest.get(`/api/doctors/${itemId}`).then(response => {
|
|
state.info = response.data
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
init()
|
|
})
|
|
|
|
// Function to disable dates before today
|
|
const disabledDate = (current) => {
|
|
// Disable previous dates (cannot select yesterday or earlier)
|
|
return current && current < new Date().setHours(0, 0, 0, 0)
|
|
}
|
|
|
|
// Function to disable times outside 8:00 AM to 5:00 PM
|
|
const disabledTime = () => {
|
|
return {
|
|
// Disable hours before 8 AM or after 5 PM
|
|
disabledHours: () => {
|
|
let hours = []
|
|
for (let i = 0; i < 8; i++) hours.push(i) // Disable hours before 8
|
|
for (let i = 18; i < 24; i++) hours.push(i) // Disable hours after 5
|
|
return hours
|
|
},
|
|
// Disable minutes and seconds (optional, can be modified to your needs)
|
|
disabledMinutes: (hour) => {
|
|
if (hour < 8 || hour > 17) return [] // Disable minutes for disabled hours
|
|
return []
|
|
},
|
|
disabledSeconds: () => {
|
|
return [] // Optionally disable seconds (if you want precision control)
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 预约按钮提交
|
|
* @param formEl
|
|
*/
|
|
const buySubmitForm = (formEl: FormInstance | undefined) => {
|
|
state.buyForm.itemId = itemId
|
|
if (!formEl) return
|
|
formEl.validate((valid) => {
|
|
if (valid) {
|
|
delete state.buyForm.id
|
|
state.buyForm.pay = "save"
|
|
// frontRequest.get('/api/alipay/pay',{params: state.buyForm, responseType: 'text/html'}).then(res => {
|
|
// // 3. 在新窗口打开支付页面
|
|
// const newWindow = window.open('', '_blank');
|
|
// newWindow.document.write(res);
|
|
// })
|
|
frontRequest.post('api/order', state.buyForm).then(res => {
|
|
router.push("/order")
|
|
})
|
|
}
|
|
})
|
|
}
|
|
/**
|
|
* 预约按钮
|
|
*/
|
|
const handleBuy = () => {
|
|
buyDrawer.value = true
|
|
state.buyForm = state.info
|
|
|
|
console.log( state.buyForm)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.info {
|
|
background-color: #f5f8fa;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.doctor-image {
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.doctor-name {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: #2d3748;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.introduction {
|
|
font-size: 16px;
|
|
color: #555;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.introduction .label {
|
|
font-weight: 700;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.tag {
|
|
margin-top: 20px;
|
|
font-size: 16px;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.operate {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.action-button {
|
|
width: 150px;
|
|
padding: 12px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.el-drawer {
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.el-drawer__header {
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.el-input,
|
|
.el-input-number {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
border-radius: 6px;
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
|
|
.el-button:hover {
|
|
background-color: #2563eb;
|
|
}
|
|
</style>
|
|
|