145 lines
2.5 KiB
Vue
145 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view v-if="visible" class="info-window" :style="styleVar">
|
||
|
|
<view class="info-card">
|
||
|
|
<view class="info-card__header">
|
||
|
|
<image src="/static/icon-hospital.svg" class="icon-hospital" />
|
||
|
|
<view class="header-tip">震元堂中医院</view>
|
||
|
|
</view>
|
||
|
|
<view class="info-card__content">
|
||
|
|
<view class="doctor-name"> {{ order.doctorName }}</view>
|
||
|
|
<view v-if="order.doctorTitle" class="doctor-title"> {{ order.doctorTitle }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="info-card__footer">
|
||
|
|
<image src="/static/icon-spin.svg" class="icon-spin" />
|
||
|
|
<view class="wait-tip"> 即将为您提供在线复诊服务...</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { watch } from 'vue';
|
||
|
|
|
||
|
|
const emits = defineEmits(['close'])
|
||
|
|
const props = defineProps({
|
||
|
|
order: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
},
|
||
|
|
elderMode: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
visible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
let timer = null;
|
||
|
|
|
||
|
|
function autoClose() {
|
||
|
|
timer = setTimeout(() => {
|
||
|
|
if (props.visible) {
|
||
|
|
emits('close')
|
||
|
|
}
|
||
|
|
}, 3000)
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(() => props.visible, n => {
|
||
|
|
if (n) {
|
||
|
|
autoClose()
|
||
|
|
} else {
|
||
|
|
clearTimeout(timer)
|
||
|
|
timer = null
|
||
|
|
}
|
||
|
|
}, { immediate: true })
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.info-window {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-card {
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 45%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 640rpx;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-card__header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 40rpx;
|
||
|
|
background: #0074ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-hospital {
|
||
|
|
margin-right: 12rpx;
|
||
|
|
width: 42rpx;
|
||
|
|
height: 42rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-tip {
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-card__content {
|
||
|
|
padding: 40rpx 30rpx;
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doctor-name {
|
||
|
|
font-size: 42rpx;
|
||
|
|
color: #333;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doctor-title {
|
||
|
|
margin-top: 24rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: rgb(107, 114, 128);
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-card__footer {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 40rpx 30rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wait-tip {
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: rgb(107, 114, 128);
|
||
|
|
}
|
||
|
|
.icon-spin{
|
||
|
|
margin-right: 12rpx;
|
||
|
|
width: 42rpx;
|
||
|
|
height: 42rpx;
|
||
|
|
animation: spin 2s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|