vue3_YDHL/pages/prescriptionExecute/prescriptionExecute.vue

<template>
  <view>
    <nav-bar :navbarData="navbarData"></nav-bar>
    <view
		v-if="pdaScanStatus === 'N'" 
      :style="'background-image:url(' +imgDomain +'/images/icon/bg_patients_bg.png)'"
      class="page">
      <view class="main">
        <view class="patinfo">
          <view class="topinfo">
            <view class="paticon">
              <image
                :src="
                  patInfo.basicInfo.patSexCode === '1'
                    ? imgDomain + '/images/icon/gender-male.png'
                    : imgDomain + '/images/icon/gender-female.png'"
                class="icon"></image>
            </view>
            <view class="detail">
              <view class="item">
                <view class="bedcode">{{ patInfo.admInfo.admBedCode }}</view>
                <view class="border"></view>
                <view class="info">{{ patInfo.basicInfo.patName }}</view>
                <view
                  v-if="patInfo.admInfo.nurseLv === '特级'"
                  class="nurse-lv-css-red"
                  >{{ patInfo.admInfo.nurseLv }}</view
                >
                <view
                  v-if="patInfo.admInfo.nurseLv === '一级'"
                  class="nurse-lv-css-pink"
                  >{{ patInfo.admInfo.nurseLv }}</view
                >
                <view
                  v-if="patInfo.admInfo.nurseLv === '二级'"
                  class="nurse-lv-css-blue"
                  >{{ patInfo.admInfo.nurseLv }}</view
                >
                <view
                  v-if="patInfo.admInfo.nurseLv === '三级'"
                  class="nurse-lv-css-greenyellow"
                  >{{ patInfo.admInfo.nurseLv }}</view
                >
              </view>
              <view class="item">
                <view class="bedcode">{{ patInfo.basicInfo.patSexDesc }}</view>
                <view class="border"></view>
                <view class="info">{{ patInfo.basicInfo.patAge }}</view>
                <view class="border"></view>
                <view class="info">{{ patInfo.basicInfo.patNo }}</view>
              </view>
              <view class="item">
                <view class="info">入院时间：{{ patInfo.admInfo.admDatetime }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="main2">
		  <view class="tabs">
		      <view class="tab-item" :class="{active:active===0}" @click="active=0">
		        <text :class="{active:active===0}">单据执行</text>
		      </view>
		      <view class="tab-item" :class="{active:active===1}" @click="active=1">
		        <text :class="{active:active===1}">全部医嘱</text>
		      </view>
		      <view class="tab-item" :class="{active:active===2}" @click="active=2">
		        <text :class="{active:active===2}">需处理</text>
		      </view>
		    </view>
		    
		    <view v-show="active===0">
				<DocumentExe :activeTab="active" :patNo="patNo"/>
			</view>
		    <view v-show="active===1 || active===2">
				<OrdersList :activeTab="active" :patNo="patNo"/>
			</view>
        </view>
      </view>
    </view>
	<view v-if="pdaScanStatus === 'Y'" class="main2Scan">
	  <view class="scan-container">
	    <!-- 扫描提示图片 -->
	    <image 
	      class="scan-img" 
	      src="/static/pdaphone.jpeg"
	      mode="widthFix"
	    ></image>
	    <view class="scan-text">请点击PDA侧边按钮扫描患者标识</view>
	  </view>
	</view>
  </view>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { httpconfig } from '../../config/httpconfig';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { $http } from '../../config/https';
  import Util from '../../utils/util.js';
  import navBar from '@/pages/components/navbar/index';
  import DocumentExe from './components/DocumentExe.vue';
  import OrdersList from './components/OrdersList.vue';

  // 响应式数据
  const height = ref('');
  const navbarData = ref({
    background: '',
    title: '医嘱执行',
    height: '100',
    bottom: true,
    isGoBack: true,
    isGoHome: true,
    cleanPat: 'Y',
  });
  const patInfo = ref(uni.getStorageSync('patInfo') || {});
  const patNo = ref('');
  const moinfoflag = ref(false);
  const nurserecordflag = ref(true);
  const otherfunction = ref(true);
  const templateList = ref([]);
  const imgDomain = ref(httpconfig.imgDomain);
  const active = ref(0);
  const pdaScanStatus = ref('Y');	// Y:需要扫码  N：已有患者信息
  const viewotherfunction = () => {
    otherfunction.value = !otherfunction.value;
  };

  onShow(() => {
    try {
      const pages = getCurrentPages();
      if (pages.length > 0) {
        const currentPage = pages[pages.length - 1];
        const currentRoute = currentPage.route; // 当前页面路由
        // 更新全局变量
        if (uni.$appGlobal) {
          uni.$appGlobal.globalData.value.currentRoute = currentRoute;
        }
      }
    } catch (err) {
      console.error('更新当前路由失败：', err);
    }
  });

  onMounted(() => {
    if (!imgDomain.value) {
      imgDomain.value = uni.getStorageSync('appUrlAddress');
    }
    patInfo.value = uni.getStorageSync('patInfo') || {};
	// 注册全局事件
	  uni.$on('callGetPDAScanInfo', (code) => {
	    getPDAScanInfo(code);
	  });
  });

  onUnmounted(() => {
    // 销毁全局事件，避免内存泄漏
    uni.$off('callGetPDAScanInfo');
  });
  
  //暴露给外部函数，获取PDA扫码反馈
  function getPDAScanInfo(code) {
	patNo.value = code;
  	Util.getPatInfoNew(code, (res) => {
  		const newPatInfo = res;
  		if (Object.keys(patInfo.value).length === 0) {
  			patInfo.value = { ...newPatInfo }; // 初始化响应式对象
  		} else {
  			Object.assign(patInfo.value, newPatInfo);
  		}
  		pdaScanStatus.value = 'N';
		active.value = 0;
  	  });
  }
</script>

<style>
  /* 样式部分保持不变 */
  .page {
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .main {
    height: calc(100% - 28rpx);
    width: 100%;
    padding-top: 28rpx;
  }
  
  .main2Scan{
	  /* 淡蓝色边框，宽度1px，线条类型为实线 */
	  border: 1px solid #7cb5ff;
	  /* 边角圆润，数值可根据需求调整 */
	  border-radius: 8px;
	  /* 内部留白，避免内容贴边 */
	  padding: 15px;
	  /* 可选：添加轻微阴影增强层次感 */
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	  margin:10px; /* 与其他元素保持间距，可按需删除 */
  }
  /* 内部容器布局 */
  .scan-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px; /* 图片与文字间距 */
  }
  
  /* 图片样式 */
  .scan-img {
    width: 100%; /* 图片宽度，可按需调整 */
    height: auto;
    opacity: 0.9;
  }
  
  /* 文字样式 - 高亮、放大、闪烁 */
  .scan-text {
    font-size: 20px; /* 大字体 */
    font-weight: bold;
    color: #1890ff; /* 高亮蓝色 */
    text-align: center;
    padding: 10px 15px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.8); /* 白色背景增强对比度 */
    animation: blink 1.5s infinite;
  }
  /* 闪烁动画定义 */
  @keyframes blink {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.6;
      transform: scale(1.05); /* 轻微放大增强闪烁感 */
    }
  }
  
  .main2 {
    overflow: auto;
    min-height: 80vh;
    background-color: #f2f2f2;
  }
  /* 极简样式，仅保留核心视觉区分 */
  .tabs{display:flex;height:88rpx;line-height:88rpx;border-bottom:1px solid #eee;background-color: white;}
  .tab-item{flex:1;text-align:center;}
  /* 选中态样式 */
  .tab-item.active text{color:#1989fa;font-weight:500;}
  /* 加下划线的补充样式 */
  .tab-item{position:relative;}
  .tab-item.active::after{
    content:'';
    position:absolute;
    bottom:0;left:50%;
    transform:translateX(-50%);
    width:300rpx;height:4rpx;
    background:#1989fa;
  }
  .patinfo {
    width: calc(100% - 60rpx);
    background: #fff;
    margin: 0 30rpx;
    border-radius: 8rpx 8rpx 0 0;
    box-shadow: 0px 2px 21px 0px rgba(198, 198, 198, 0.3);
  }

  .patinfo .topinfo {
    display: flex;
    flex-direction: row;
    width: calc(100% - 22rpx);
    padding: 0 11rpx;
  }

  .topinfo .paticon {
    width: 100rpx;
    height: 100rpx;
    padding: 29rpx 0;
  }

  .topinfo .detail {
    width: calc(100%);
    padding: 14rpx 10rpx;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
  }

  .detail .item {
    display: flex;
    flex-direction: row;
    line-height: 46rpx;
    height: 46rpx;
    width: 100%;
    display: flex;
  }

  .item .border {
    border: 1rpx solid #e5e5e5;
    margin: 10rpx 10rpx;
    width: 0px;
    height: 28rpx;
    line-height: 46rpx;
  }
  .item .bedcode {
    width: 60rpx;
  }
  .item .info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nurse-lv-css-red {
    background-color: red;
    color: #fff;
    border-radius: 4rpx;
    padding: 0rpx 18rpx;
    font-size: 20rpx;
    width: 50rpx;
    margin-left: 20rpx;
  }
  .nurse-lv-css-pink {
    background-color: pink;
    color: #fff;
    border-radius: 4rpx;
    padding: 0rpx 18rpx;
    font-size: 20rpx;
    width: 50rpx;
    margin-left: 20rpx;
  }
  .nurse-lv-css-greenyellow {
    background-color: rgb(93, 187, 93);
    color: #fff;
    border-radius: 4rpx;
    padding: 0rpx 18rpx;
    font-size: 20rpx;
    width: 50rpx;
    margin-left: 20rpx;
  }
  .nurse-lv-css-blue {
    background-color: #007aff;
    color: #fff;
    border-radius: 4rpx;
    padding: 0rpx 18rpx;
    font-size: 20rpx;
    width: 50rpx;
    margin-left: 20rpx;
  }
  .paticon .icon {
    width: 100rpx;
    height: 100rpx;
  }
</style>