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

<template>
  <view class="initial signInfo">
    <view class='content'>
      <view class='publicInfo'>
        <view class="publicInfo_item displayFlexLeft">
          <view class="publicInfo_tit">就诊科室</view>
          <view class="publicInfo_val">{{queueInfo.DeptName}}</view>
        </view>
        <view class="publicInfo_item displayFlexLeft">
          <view class="publicInfo_tit">就诊医生</view>
          <view class="publicInfo_val">{{queueInfo.DoctorName}}</view>
        </view>
        <view class="publicInfo_item displayFlexLeft">
          <view class="publicInfo_tit">就诊人</view>
          <view class="publicInfo_val">{{queueInfo.PatientName}}</view>
        </view>
        <view class="publicInfo_item displayFlexLeft">
          <view class="publicInfo_tit">就诊卡号</view>
          <view class="publicInfo_val">{{queueInfo.CardNo}}</view>
        </view>
        <view class="publicInfo_item displayFlexLeft" v-if="queueInfo.SourceType!='006' && queueInfo.Location">
          <view class="publicInfo_tit">就诊位置</view>
          <view class="publicInfo_val">{{queueInfo.SourceType=='006'?'互联网科室': queueInfo.Location || "--"}}</view>
        </view>
        <view class="publicInfo_item displayFlexLeft">
          <view class="publicInfo_tit">候诊号序</view>
          <view class="publicInfo_val">
            第<text class='num'>{{queueInfo.No}}</text> 号
              <block v-if="queueInfo.NextNo != '-1'">
                还需等待<text style='color:#FF3434'>{{queueInfo.WaitNum}}</text>人
              </block>
          </view>
        </view>
      </view>
    </view>
    <!-- 智能提醒 -->
    <view class="wait_open border_top" v-if="isShowInte">
      <view class="open_top displayFlexRow">
        <view class="tips_box displayFlexCol">
          <text class="tips_title">智能提醒</text>
          <view class="tips_box" v-if="switchType">
            <text>当就诊号序到第</text>
            <text class="red">{{queueInfo.No-queueInfo.ReMindNo}}</text>
            <text>号时，进行提醒</text>
          </view>
        </view>
        <view style='float:right'>
          <switch :checked="switchType" color="var(--dominantColor)" @change="switchChange"></switch>
        </view>
      </view>
    </view>
  </view>
  <!-- 候诊智能提醒 -->
  <view class="public_dialog" v-if="showModel">
    <view class="dialog_inner">
      <view class="dialog_tit">智能提醒</view>
      <view class="dialog_subtit">请选择需要提早几号进行提醒</view>
      <view class="number_list">
        <view class="num_item" :class="{'backgroundCustom': index+1==showIndex}" v-for="(item, index) in (queueInfo.No>=8?8:queueInfo.No)" :key="index" @click="numberClick(index)">
          <input class="number_input" disabled :value="index+1" maxlength="1" type="number"></input>
        </view>
      </view>
      <view class="public_tip">友情提示：医生看诊一个患者平均花费 5 分钟，建议 提早 5 号进行提醒</view>
  
      <view class="btn_list border_top">
        <view class="btn_item border_right flexCenter" @click="btnClick()">取消</view>
        <view class="btn_item colorCustom flexCenter" @click="btnClick('confirm')">确定</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps, watch, onMounted } from 'vue';
import common from '@/utils/common';
import icon from '@/utils/icon';
import * as queue from '@/pagesPatient/service/queue/index';

const props = defineProps({
  ifGetQueueInfo: {
    type: Boolean,
    default: false
  },
  orderInfo: {
    type: Object,
    default: () => ({})
  },
  currentUser: {
    type: Object,
    default: () => ({})
  },
  isShowInte: {
    type: Boolean,
    default: true
  },
});

const iconUrl = ref(icon)
const queueInfo = ref<any>({});
const showIndex = ref(1);
const switchType = ref(false);
const showModel = ref(false);

watch(() => props.orderInfo, (newVal) => {
  let bool = newVal.IfMsg == '1' ? true : false;
  queueInfo.value = newVal;
  switchType.value = bool;
}, { deep: true });

onMounted(() => {
  if (props.ifGetQueueInfo) {
    getQueueInfo();
  } else {
    let bool = props.orderInfo.IfMsg == '1' ? true : false;
    queueInfo.value = props.orderInfo;
    switchType.value = bool;
  }
});

const getQueueInfo = async () => {
  let app = getApp();
  let data = {
    HosId: app.globalData.districtId || app.globalData.hosId,
    HisOrderId: props.orderInfo.HisOrderId,
    QueryId: props.orderInfo.QueryId || '',
  };
  let res = await queue.getQueueInfo(data);
  if (common.isNotEmpty(res)) {
    let bool = res[0].IfMsg == '1' ? true : false;
    queueInfo.value = res[0];
    switchType.value = bool;
  }
};

const switchChange = async (e: any) => {
  showModel.value = e.detail.value;
  switchType.value = e.detail.value;
  
  if (!e.detail.value && queueInfo.value.IfMsg == 1) {
    /**关闭 */
    let resp = await setReMindNo('0');
    if (!common.isEmpty(resp)) {
      common.showModal('已关闭智能提醒');
    }
  }
};

const numberClick = (index: number) => {
  showIndex.value = index + 1;
};

const btnClick = async (type?: string) => {
  if (type == 'confirm') {
    /**确定 */
    let resp = await setReMindNo('1');
    if (!common.isEmpty(resp)) {
      showModel.value = false;
      common.showModal('智能提醒已开启', () => {
        getQueueInfo();
      });
    } 
  } else {
    /**取消 */
    showModel.value = false;
    switchType.value = false;
  }
};

const setReMindNo = async (ifMsg: string) => {
  let currentUser = props.currentUser;
  let queryData = {
    ...queueInfo.value,
    ReMindNo: showIndex.value,
    IfMsg: ifMsg,
    PatientName: currentUser.memberName,
    Store: {
      cardEncryptionStore: currentUser.encryptionStore || '',
      baseMemberEncryptionStore: currentUser.baseMemberEncryptionStore
    },
  };
  let resp = await queue.setReMindNo(queryData);
  return resp;
};

</script>

<style lang="scss" scoped>
/* 标准 */
.initial .publicInfo {
  border-radius: 10upx;
  overflow: hidden;
  background: white;
  font-size: 32upx;
  color: #333;
}

.initial .publicInfo_item {
  margin-bottom: 28upx;
}
.initial .publicInfo_tit {
  color: #999;
  width: 150upx;
  white-space: nowrap;
}
.initial .publicInfo_val{
  margin-left: 64upx;
}
.initial .num {
  color: #c9595b;
}

/* 智能提醒 */

.initial .wait_open {
  background: #fff;
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.initial .wait_open .open_top {
  padding-top: 30upx;
  font-size: 32upx;
  justify-content: space-between;
}

.initial .tips_box {
  margin-top: 10upx;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.initial .tips_box .tips_title {
  font-size: 30upx;
  color: #333;
  font-weight: bold;
}

.initial .tips_box text {
  font-size: 24upx;
  color: #999;
}

/* 签到弹框 */

.dialog_inner {
  width: 600upx;
  background: rgba(255, 255, 255, 1);
  border-radius: 24upx;
}

.dialog_tit {
  font-size: 36upx;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  padding: 50upx 30upx;
  text-align: center;
}

.dialog_subtit {
  font-size: 30upx;
  padding: 0 30upx;
  line-height: 44upx;
}

.font_color {
  color: #fa4844;
}

.number_list {
  display: inline-flex;
  width: 100%;
  flex-wrap: wrap;
}

.num_item {
  width: 100upx;
  height: 120upx;
  line-height: 120upx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 4upx;
  margin-top: 40upx;
  margin-left: 40upx;
}

.number_list .backgroundCustom .number_input{
  color: #fff; 
}
.number_input {
  font-size: 60upx;
  font-family: Arial;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  text-align: center;
  width: 100%;
  height: 100%;
}

.btn_list {
  height: 96upx;
  display: flex;
  align-items: center;
}

.btn_item {
  width: 50%;
  font-size: 32upx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(85, 85, 85, 1);
  height: 100%;
}

/* Helper classes assumed from global or context */
.displayFlexLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.displayFlexRow {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.displayFlexCol {
  display: flex;
  flex-direction: column;
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.border_top {
  border-top: 1upx solid #e5e5e5;
}

.border_bottom {
  border-bottom: 1upx solid #e5e5e5;
}

.border_right {
  border-right: 1upx solid #e5e5e5;
}

.public_dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.public_tip {
  font-size: 24upx;
  color: #999;
  padding: 20upx 30upx;
}
</style>