<template> <view class="changeHospital" v-show="disjunctor"> <view class="changeHospital__wrap"> <view class="changeHospital__header" v-if="title"> {{ title }} </view> <view class="changeHospital__article"> <text v-if="icon" class="changeHospital__icon icon_transport" :class="[ 'changeHospital__icon--' + icon, { 'transport-duigou': icon === 'success' }, { 'transport-shibai': icon === 'error' }, { 'transport-wenhao': icon === 'warn' }, ]"></text> <view v-if="content" class="changeHospital__content" v-html="content"></view> <view class="uni-list-cell" v-show="remove"> <view class="uni-list-cell-left"> 移除原因: </view> <view class="uni-list-cell-db-text"> <radio-group @change="radioChange"> <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in removeReasons" :key="item.value"> <view> <radio :value="item.value" :checked="index === current" /> </view> <view>{{item.name}}</view> </label> </radio-group> </view> </view> <view class="uni-list-cell" v-show="current === 1 || !remove"> <view class="uni-list-cell-left"> 预约时间: </view> <view class="uni-list-cell-db-text"> <uni-datetime-picker v-model="yyTime" returnType="date" :start="startTimestamp" /> </view> </view> </view> <view class="changeHospital__footer"> <view v-if="operate.ok" class="changeHospital__ok" @click="ok" hover-class="seimin-btn-hover"> {{ operate.ok || "" }} </view> <view v-if="operate.cancel" class="changeHospital__cancel" @click="cancel" hover-class="seimin-btn-hover"> {{ operate.cancel || "" }} </view> </view> </view> </view> </template> <script> import { post } from "../../http/http.js"; export default { data() { return { startTimestamp: Date.now(), removeReasons: [{ value: '1', name: '检查已做', }, { value: '2', name: '修改检查时间', }, ], current: -1, userData: null, hosId: null, timer: null, yyTime: '', //预约时间 }; }, watch: { disjunctor(newValue) { console.log(newValue) if(newValue){ this.startTimestamp = Date.now(); this.current = -1; this.yyTime = ''; } if (newValue && this.operate.know == "知道了") { this.time = 5; this.timer = setInterval(() => { this.time--; if (this.time <= 0) { clearInterval(this.timer); this.know(); } }, 1000); } }, }, props: { // 是否移除检查 remove: { type: Boolean, default: false, }, // 显示隐藏 disjunctor: { type: Boolean, default: false, }, // 标题 title: { type: String, default: "提示", }, // 图标 icon: { type: String, default: "success", }, // 内容 content: { type: String, default: "", }, // 操作按钮文字 operate: { type: Object, default: () => { return { ok: "确认", cancel: "取消", }; }, }, name: { type: String, default: '交接人' } }, methods: { radioChange: function(evt) { this.yyTime = ''; this.startTimestamp = Date.now(); for (let i = 0; i < this.removeReasons.length; i++) { if (this.removeReasons[i].value === evt.detail.value) { this.current = i; break; } } }, // 确定 ok() { let e = {}; if (this.current > -1) { e.value = this.removeReasons[this.current].value; } if (this.yyTime) { e.yyTime = this.yyTime.Format("yyyy-MM-dd hh:mm:ss"); } this.$emit("ok", e); }, // 取消 cancel() { this.$emit("cancel"); }, }, created() { this.hosId = uni.getStorageSync('userData').user.currentHospital.id; } }; </script> <style lang="less" scoped> .changeHospital { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.2); z-index: 999; .uni-list-cell { width: 95%; display: flex; flex-direction: row; // justify-content: space-evenly; align-items: center; text-align: center; margin-top: 32rpx; .uni-list-cell-left { flex: 2; font-size: 32rpx; color: #666; } .uni-list-cell-db { border: 1px solid #e5e9ed; background-color: #fff; padding: 16rpx 0; flex: 5; } .uni-list-cell-db-text { flex: 5; text-align: left; } } .changeHospital__wrap { width: 90vw; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 12rpx; color: #666; .changeHospital__header { font-size: 36rpx; color: #000; height: 84rpx; display: flex; justify-content: center; align-items: center; } .changeHospital__article { width: 90%; margin: 0 auto 25rpx; padding: 48rpx 0; background-color: rgb(249, 250, 251); border: 2rpx solid rgb(229, 233, 237); border-radius: 12rpx; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; &.p0 { padding: 0; } .changeHospital__icon { font-size: 138rpx; margin-bottom: 32rpx; &.changeHospital__icon--success { color: rgb(52, 179, 73); } &.changeHospital__icon--warn { color: rgb(245, 165, 35); } &.changeHospital__icon--error { color: rgb(255, 58, 82); } } .changeHospital__content { font-size: 36rpx; } .changeHospital__info { font-size: 32rpx; color: rgb(102, 102, 102); } .specialCloseFlag { width: 90%; height: 100%; padding: 16rpx; } .radio-wrap { .radio-item { margin-top: 16rpx; /deep/ .uni-radio-input-checked { background-color: #49b856 !important; border-color: #49b856 !important; } } } } .changeHospital__footer { box-sizing: border-box; height: 100rpx; border-top: 2rpx solid rgb(229, 233, 237); display: flex; align-items: center; view { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36rpx; color: rgb(102, 102, 102); position: relative; &:nth-of-type(2)::before { content: ""; position: absolute; left: 0; bottom: 0; width: 2rpx; height: 87rpx; background-color: rgb(229, 233, 237); } } .changeHospital__ok { flex: 1; color: rgb(73, 184, 86); } .changeHospital__cancel { flex: 1; } .changeHospital__know { flex: 1; color: rgb(73, 184, 86); } } } } </style>