com.kasite.client.uniapp.patient/pagesPatient/st1/components/doctorItemBox/doctorItemBox.vue

<template>
  <view class="doctor_box">
    <!-- 正常排班 -->
    <view class="docotr_item">
      <view class="doctor_item_nav">
        <view class="doctor_item_nav_img">
          <image :src="doctorItem.PhotoUrl || iconUrl.icon_doctor" mode="widthFix"></image>
        </view>
        <view class="doctor_item_nav_tit">
          <view class="doctor_item_nav_subtit">
            <text class="doctor_item_nav_subtit_val">{{doctorItem.DoctorName}}</text>
            <text v-if="doctorItem.DoctorTitle || doctorItem.Title" class="doctor_item_nav_subtit_txt">{{doctorItem.DoctorTitle||doctorItem.Title}}</text>
          </view>
          <view v-if="doctorItem.Spec" class="doctor_item_nav_info">
            {{doctorItem.Spec}}
          </view>
        </view>
      </view>
      <!-- 院区 -->
      <view class="hosList displayFlexRow">
        <hosList :hosId="doctorItem.ChoiceHosId" pageType="noFristAuto" @getHosId="getHosId" style="width: 100%;"></hosList>
      </view>
      <text class="non_schedul_text" v-if="doctorItem.Scheduling && doctorItem.Scheduling.length == 0">暂无排班</text>
      <!-- 排班 -->
      <view class="scheduling_box" v-for="(schedulItem, schedulIndex) in doctorItem.Scheduling" :key="schedulIndex">
        <view class="scheduling_dept_box displayFlexBetween" @click="foldList(schedulIndex)">
          <view class="scheduling_deptName_box displayFlexRow">
            <view class="backgroundCustom "></view>
            <text>{{schedulItem.DeptName}}</text>
          </view>
          <image class="arrow" :class="{ 'transform_rotate_90': schedulItem.Check }" :src="iconUrl.icon_right"></image>
        </view>
        <view class="time_list" v-if="schedulItem.Check">
          <view class="time_item displayFlexCol" :class="{'time_item_stop': (item.IsHalt==7 && item.WaitLeaveCount <= 0) || item.IsHalt==2}" 
                v-for="(item, index) in (schedulItem.showAllSchedu ? schedulItem.Data_1 : schedulItem.Data_1_Diy)" 
                :key="index" 
                @click="toClinic(item, index, schedulItem)">
            <view>{{item.RegDateDiy}}</view>
            <view style="margin-top: 12upx;">{{item.WeekName}} {{item.TimeSliceStr}}</view>
            <image v-if="item.IsHalt==7" class="time_item_img" :src="iconUrl.full2"></image>
            <image v-if="item.IsHalt==2" class="time_item_img" :src="iconUrl.stop"></image>
            <image v-if="item.IsHalt == 7 && item.WaitLeaveCount > 0" class="time_item_img" :src="iconUrl.yyghWait"></image>
          </view>
          <view class="time_item colorCustom" @click.stop="showAll(schedulIndex)" v-if="schedulItem.Data_1 && schedulItem.Data_1.length > 6">
            {{schedulItem.showAllSchedu?'收起':'全部排班'}}
          </view>
        </view>
      </view>
    </view>
  
    <!-- 组 -->
    <view class="docotr_item" v-if="doctorItem.IsGroup" @click="toClinic(null, null, null, 'group')">
      <view>
        <view class="group_title_box">
          <image class="group_top_bg" :src="iconUrl.group_top_bg" mode=""/>
          <image class="recommend_yy" :src="iconUrl.recommend_yy" mode=""/>
        </view>
        <view class="group_content_box displayFlexRow">
          <text>吴赞艺诊疗组</text>
        </view>
      </view>
  
      <text class="non_schedul_text" v-if="doctorItem.Scheduling && doctorItem.Scheduling.length == 0">暂无排班</text>
      <!-- 排班 -->
      <view class="scheduling_box" v-for="(schedulItem, schedulIndex) in doctorItem.Scheduling" :key="schedulIndex">
        <view class="scheduling_dept_box displayFlexBetween" @click.stop="foldList(schedulIndex)">
          <view class="scheduling_deptName_box displayFlexRow">
            <view class="backgroundCustom "></view>
            <text>{{schedulItem.DeptName}}</text>
          </view>
          <image class="arrow" :class="{ 'transform_rotate_90': schedulItem.Check }" :src="iconUrl.icon_right"></image>
        </view>
        <view class="time_list" v-if="schedulItem.Check">
          <view class="time_item displayFlexCol" :class="{'time_item_stop': (item.IsHalt==7 && item.WaitLeaveCount <= 0) || item.IsHalt==2}" 
                v-for="(item, index) in (schedulItem.showAllSchedu ? schedulItem.Data_1 : schedulItem.Data_1_Diy)" 
                :key="index" 
                @click.stop="toClinic(item, index, schedulItem)">
            <view>{{item.RegDateDiy}}</view>
            <view style="margin-top: 12upx;">{{item.WeekName}} {{item.TimeSliceStr}}</view>
            <image v-if="item.IsHalt==7" class="time_item_img" :src="iconUrl.full2"></image>
            <image v-if="item.IsHalt==2" class="time_item_img" :src="iconUrl.stop"></image>
            <image v-if="item.IsHalt == 7 && item.WaitLeaveCount > 0" class="time_item_img" :src="iconUrl.yyghWait"></image>
          </view>
          <view class="time_item colorCustom" @click.stop="showAll(schedulIndex)" v-if="schedulItem.Data_1 && schedulItem.Data_1.length > 6">
            {{schedulItem.showAllSchedu?'收起':'全部排班'}}
          </view>
        </view>
      </view>
    </view>
  </view>
  
  
  <!-- 显示医生详情 -->
  <view class="doctor_info_alert" v-if="doctorAlert">
    <view style="height:100%; ">
      <view class="pop_box box_radius displayFlexRow">
        <text class="tit">{{doctorItem.DoctorName}}</text>
        <image class="arrow_icon" :src="iconUrl.ic_selectiondepartment_search_del" @click="hideDoctorInfo"></image>
      </view>
      <view class="doctor_info_alert_main">
        <view class="doctor_info_item">
          <text>科室：</text>
          <text>{{doctorItem.DeptName}}</text>
        </view>
        <view class="doctor_info_item">
          <text>职称：</text>
          <text>{{doctorItem.Title}}</text>
        </view>
        <view class="doctor_info_item">
          <text>擅长：</text>
          <text>{{doctorItem.Spec}}</text>
        </view>
        <view class="doctor_info_item">
          <text>介绍：</text>
          <text>{{doctorItem.Intro}}</text>
        </view>
      </view>
    </view>
  </view>
  <view class="mask" v-if="doctorAlert" @click="hideDoctorInfo"></view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import common from '@/utils/common';
import icon from '@/utils/icon';
import hosList from '@/pages/st1/components/hosList/hosList.vue';

import { pagesPatientFn } from '@/utils';

const props = defineProps({
  pageType: {
    type: String,
    default: ""
  },
  doctorItem: {
    type: Object,
    default: () => ({})
  },
  querySchData: {
    type: Object,
    default: () => ({})
  },
  tabbarType: {
    type: String,
    default: ""
  },
  groupCode: {
    type: String,
    default: ""
  },
  groupName: {
    type: String,
    default: ""
  },
  groupInfo: {
    type: Object,
    default: () => ({})
  },
  yzTag: {
    type: Boolean,
    default: true
  },
});

const emit = defineEmits(['getHosId']);

const iconUrl = ref(icon)
const doctorAlert = ref(false);
const serviceId = ref('');
const today = ref(common.newDay());

/** 折叠列表 */
const foldList = (childIndex: number) => {
  if (props.doctorItem.Scheduling && props.doctorItem.Scheduling[childIndex]) {
    props.doctorItem.Scheduling[childIndex].Check = !props.doctorItem.Scheduling[childIndex].Check;
  }
};

/** 选中的医院Id */
const getHosId = (e: any) => {
  emit("getHosId", e);
};

/** 点击医生具体排班时间 */
const toClinic = (item: any, index: any, schedulItem: any, tag?: string) => {
  if (tag == "group") {
    let groupInfo = props.doctorItem.GroupInfo;
    let url = `/pagesPatient/st1/business/yygh/PA-yyghDoctorGroup/PA-yyghDoctorGroup?groupInfo=${encodeURIComponent(JSON.stringify(groupInfo))}&hosId=${props.doctorItem.ChoiceHosId}`;
    common.goToUrl(url);
    return;
  }

  // 判断（约满且无候补）或者停诊
  if ((item.IsHalt == 7 && item.WaitLeaveCount <= 0) || item.IsHalt == '2') {
    return;
  }
  
  /**判断有卡无卡 有无就诊人 有无最后操作就诊人的路径跳转处理 */
  pagesPatientFn.handleRouter({ currentTarget: { dataset: { dataitem: item, index: index } } }, 'yyghClinicMsg', serviceId.value, index);
};

/** 点击查看全部排班 */
const showAll = (schedulIndex: number) => {
  if (props.doctorItem.Scheduling && props.doctorItem.Scheduling[schedulIndex]) {
    props.doctorItem.Scheduling[schedulIndex].showAllSchedu = !props.doctorItem.Scheduling[schedulIndex].showAllSchedu;
  }
};

/** 关闭医生详情 */
const hideDoctorInfo = () => {
  doctorAlert.value = false;
};

</script>

<style lang="scss" scoped>
/* 弹性布局-横向 */
.displayFlexRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* 弹性布局-纵向 */
.displayFlexCol {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 弹性布局-横向两端对齐 */
.displayFlexBetween {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* 弹性布局-靠左 */
.displayFlexLeft {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
}

.doctor_item_nav {
  display: flex;
  position: relative;
  padding: 17upx 0;
}

.doctor_item_nav_img {
  width: 88.3upx;
  height: 88.3upx;
  border-radius: 50%;
  margin-right: 25upx;
  overflow: hidden;
}

.doctor_item_nav_tit {
  width: 82%;
}

.doctor_item_nav_subtit_val {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #222326;
  margin-right: 12upx;
}

.doctor_item_nav_subtit_txt {
  height: 36upx;
  line-height: 28upx;
  font-size: 24upx;
  font-family: PingFang SC;
  color: var(--auxiliaryColor);
  padding: 0upx 7upx;
  position: relative;
  display: inline-block;
  background: #FFFBF4;
  border: 1upx solid #FADAB2;
}

.doctor_item_nav_info {
  font-size: 28upx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #62626D;
  line-height: 40upx;
  margin-top: 10upx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 排班 */
.scheduling_dept_box {
  margin: 24upx 0 12upx;
}

.scheduling_deptName_box view {
  width: 14upx;
  height: 14upx;
  border-radius: 14upx;
  margin-right: 20upx;
  background: #3164fe;
}

.scheduling_deptName_box text {
  font-size: 32upx;
  color: #333;
}

.time_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.time_item {
  margin: 23upx 2% 0 0;
  width: 32%;
  height: 110upx;
  line-height: 110upx;
  background: #F1F1F6;
  border-radius: 20upx;
  font-size: 28upx;
  color: #222326;
  text-align: center;
  position: relative;
}
.time_item:nth-child(3n){
  margin-right: 0;
}

.time_item_img {
  width: 61upx;
  height: 54upx;
  position: absolute;
  right: 0;
  top: 0;
}

.time_item_stop view{
  color: #8A8A99;
}

.transform_rotate_90 {
  transform: rotate(90deg) !important;
}

.arrow {
  width: 14upx;
  height: 23upx;
  margin-right: 30upx;
}

.doctor_box {
  width: 100%;
}

.docotr_item {
  width: 100%;
  padding: 30upx;
  box-sizing: border-box;
  margin-bottom: 30upx;
  background: white;
  border-radius: 24upx;
  position: relative;
}

.doctor_info {
  margin-bottom: 15upx;
  justify-content: flex-start;
  align-items: flex-end;
}

.doctor_info text:nth-child(1) {
  font-size: 36upx;
  color: #222326;
  font-weight: bold;
  margin-right: 16upx;
}

.doctor_info text:nth-child(2) {
  height: 40upx;
  line-height: 40upx;
  font-size: 24upx;
  font-family: PingFang SC;
  color: #d18e09;
  padding: 0upx 13upx;
  position: relative;
  display: inline-block;
  background: #FFFBF4;
}

.overdue::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border: solid 1px #e9dab9;
  border-radius: 4px;
  box-sizing: border-box;
}

.non_schedul_text {
  display: block;
  width: 100%;
  padding: 30upx 0;
  box-sizing: border-box;
  font-size: 30upx;
  color: #666;
  text-align: center;
}

.non_schedul {
  padding: 30upx;
  box-sizing: border-box;
  font-size: 30upx;
  color: #999;
}

/* 组 */
.group_title_box {
  width: 100%;
  height: 80upx;
  position: relative;
}

.group_top_bg {
  width: 100%;
  height: 100%;
}

.recommend_yy {
  width: 150upx;
  height: 34upx;
  position: absolute;
  left: 30upx;
  bottom: 14upx;
  z-index: 1;
}

.group_content_box {
  padding: 30upx;
  padding-bottom: 0;
  box-sizing: border-box;
  justify-content: flex-start;
}

.group_content_box text {
  font-size: 30upx;
  font-weight: bold;
}

/* 医生详情框 */
.doctor_info_alert {
  width: 100%;
  height: 75%;
  position: fixed;
  left: 0;
  bottom: 0upx;
  z-index: 26;
  background-color: #fff;
  border-radius: 20upx 20upx 0 0;
}

.doctor_info_alert_main {
  height: 90%;
  padding: 30upx;
  padding-top: 15upx;
  box-sizing: border-box;
  overflow: auto;
}

.pop_box {
  width: 100%;
  height: 10%;
  position: relative;
  background: white;
  padding: 0 30upx;
  position: relative;
}

.pop_box .tit {
  font-size: 36upx;
  font-weight: bold;
}

.pop_box .arrow_icon {
  width: 30upx;
  height: 30upx;
  position: absolute;
  top: 50%;
  right: 40upx;
  margin-top: -15upx;
}

.box_radius {
  border-radius: 20upx 20upx 0 0;
}

.pop-box,
.doctor_info_item text:nth-child(1) {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333;
}

.pop-box .tit {
  display: inline-block;
  width: 100%;
  line-height: 100upx;
  font-size: 36upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.pop-box image {
  width: 30upx;
  height: 30upx;
  position: absolute;
  top: 50%;
  right: 30upx;
  margin-top: -15upx;
}

.doctor_info_item {
  margin-bottom: 30upx;
}

.doctor_info_item text:nth-child(2) {
  font-size: 32upx;
  font-family: PingFang SC;
  color: #666;
  line-height: 48upx;
}

.mask {
  z-index: 25;
}
</style>