com.kasite.client.uniapp.patient/pagesPatient/st1/business/report/examinationReport/examinationReport.vue

<template>
  <view class="container">
    <view class="title_info" v-if="showCon">
      <view class="public_info_list">
        <view class="public_info_item">
          <view class="public_info_tit">患者姓名</view>
          <view class="public_info_val">{{reportInfo.Name}}</view>
        </view>
        <view class="public_info_item">
          <view class="public_info_tit">体检编号</view>
          <view class="public_info_val">1</view>
        </view>
        <view class="public_info_item">
          <view class="public_info_tit">体检日期</view>
          <view class="public_info_val">{{reportInfo.TjDate}}</view>
        </view>
      </view>
    </view>

    <view class="con_nav">
      <view class="nav_tit" :class="{'colorCustom': index=='1'}" @click="optionsClick('1')">体检总结</view>
      <view class="nav_tit" :class="{'colorCustom': index=='2'}" @click="optionsClick('2')">诊疗建议</view>
      <view class="nav_tit" :class="{'colorCustom': index=='3'}" @click="optionsClick('3')">项目详情</view>
      <view class="nav_tit" :class="{'colorCustom': index=='4'}" @click="optionsClick('4')">温馨提示</view>
    </view>

    <view class="con">
      <!-- 体检总结 Summary -->
      <view class="con_summary" v-if="index=='1'">
        <view class="con_inner">
          <view class="con_summary_item" v-for="(item, ind) in 20" :key="ind">1、高血压</view>
        </view>
      </view>

      <!-- 诊疗建议 Advice -->
      <view class="con_summary" v-if="index=='2'">
        <view class="con_inner">
          <view class="doctor_info border_bottom">
            <view class="info_item">
              <view class="info_item_txt">主检医师：张爱国</view>
              <view class="info_item_txt">日期：2020.06.10</view>
            </view>
            <view class="info_item">
              <view class="info_item_txt">主检医师：陈万金</view>
              <view class="info_item_txt">日期：2020.06.11</view>
            </view>
          </view>

          <view class="article_list">
            <view class="article" v-for="(item, ind) in 4" :key="ind">
              <view class="article_tit">1、血压高</view>
              <view class="article_val">您目前的血压以达到高血压的诊断标准140/90mHg，但偶尔一次血压高，不能诊断高血压，需要您在不同时间内复查3次</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 项目详情 -->
      <view class="con_pro" v-if="index=='3'">
        <view class="scroll_nav">
          <view class="nav_item" :class="{'nav_item_active colorCustom': proSelected.ItemTitle==item.ItemTitle}" v-for="(item, ind) in reportInfo.Data_1" :key="ind" @click="titleClick(item)">{{item.ItemTitle}}</view>
        </view>
        <view class="scroll_con">
          <view class="public_info_list">
            <view class="public_info_item">
              <view class="public_info_tit">报告单号</view>
              <view class="public_info_val">{{queryBean.ReportId}}</view>
            </view>
            <view class="public_info_item">
              <view class="public_info_tit">报告医生</view>
              <view class="public_info_val">{{queryBean.ReportDoctor}}</view>
            </view>
            <!-- <view class="public_info_item">
              <view class="public_info_tit">是否急诊</view>
              <view class="public_info_val">否</view>
            </view> -->
            <view class="public_info_item">
              <view class="public_info_tit">报告时间</view>
              <view class="public_info_val">{{queryBean.SubmissionTime}}</view>
            </view>
            <!-- <view class="public_info_item">
              <view class="public_info_tit">体检小结</view>
              <view class="public_info_val">未见异常</view>
            </view> -->
          </view>

          <view class="tabel" v-if="proSelected.ItemType=='1'">
            <view class="table_box">
              <view class="tr">
                <view class="th name">检测指标</view>
                <view class="th">结果</view>
                <view class="th">状态</view>
                <view class="th value">参考值</view>
                <view class="th">单位</view>
              </view>
              <view class="tr" v-for="(item, key) in proSelected.Data_2" :key="key">
                <view class="td name">{{item.ItemDetailTitle}}</view>
                <view class="td">{{item.ResultVal}}</view>
                <view class="td">{{item.IsNormal}}</view>
                <view class="td value">{{item.ReferenceValues}}</view>
                <view class="td">{{item.Unit}}</view>
              </view>
            </view>
          </view>

          <view class="tabel" v-if="proSelected.ItemType=='2'">
            <view class="table_box">
              <view class="tr ctTh">
                <view class="th">结果</view>
              </view>
              <view class="tr ctTr">
                {{proSelected.DeptAdvice}}
              </view>
              <view class="tr ctTr">
                {{proSelected.Data_2[0].ResultVal}}
              </view>
            </view>
          </view>
        </view>
      </view>


      <!-- 温馨提示 -->
      <view class="con_summary" v-if="index=='4'">
        <view class="con_inner">
          <view class="con_tip_item" v-for="(item, ind) in 4" :key="ind">感谢您对我院体检部的信任，并选择我们作为您体检的医院，配合我们顺利的完成了这次医学体检。由于医疗科学技术对疾病认知的有限及医疗</view>
        </view>
      </view>

    </view>

    <view class="btn_list">
      <view class="btn_item">就诊推荐</view>
      <view class="btn_item btn_item_line">在线解答</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { common } from '@/utils';
import { getReportInfo } from '@/pagesPatient/service/report/index';

const app = getApp();
const showCon = ref(false);
const currentUser = ref<any>({});
const reportInfo = ref<any>({});
const queryBean = ref<any>({});
const index = ref('3'); //1 体检总结  2诊疗建议 3项目详情 4温馨提示
const proSelected = ref<any>({}); //当前选中的项目

onLoad((options: any) => {
  let qBean = options.queryBean ? JSON.parse(options.queryBean) : {};
  currentUser.value = app.globalData.currentUser;
  queryBean.value = qBean;
  main();
});

const main = async () => {
  let queryData = {
    MemberId: currentUser.value.MemberId,
    ReportId: queryBean.value.ReportId,
    ReportType: queryBean.value.ReportType,
    CardNo: currentUser.value.CardNo,
    CardType: '1',
    SampleNo: queryBean.value.SampleNo,
    EventNo: queryBean.value.EventNo,
    Store: {
      cardEncryptionStore: currentUser.value.encryptionStore || '',
      baseMemberEncryptionStore: currentUser.value.baseMemberEncryptionStore
    }
  };
  
  let resp = await getReportInfo(queryData);
  let rInfo = {};
  let pSelected = {};
  
  if (!common.isEmpty(resp)) {
    rInfo = resp[0];
    pSelected = resp[0].Data_1 && resp[0].Data_1.length > 0 ? resp[0].Data_1[0] : {};
  }
  
  reportInfo.value = rInfo;
  showCon.value = true;
  proSelected.value = pSelected;
};

/**
 * 选项点击
 */
const optionsClick = (idx: string) => {
  index.value = idx;
};

/**
 * 项目详情nav点击
 */
const titleClick = (item: any) => {
  proSelected.value = item;
};
</script>

<style>
@import "../../../static/css/box.wxss";

.container {
  background: #fff;
  padding: 375upx 0 156upx; 
}

.public_info_item {
  margin: 30upx 0;
}

.public_info_tit {
  color: #999;
}

.title_info .public_info_tit, .title_info .public_info_val {
  font-size: 30upx;
}

.title_info {
  position: fixed;
  width: 100%;
  top: 0;
}

.con_nav {
  position: fixed;
  width: 100%;
  top: 240upx;
}

.btn_list {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 156upx;
  padding: 24upx 30upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 20upx solid #f2f5f6;
}

.btn_item {
  height: 100%;
  width: 333upx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  border-radius: 50px;
  background-color: #29cf8c;
}

.btn_item_line {
  background-color: #00a2fe;
}

.con_nav {
  height: 135upx;
  display: flex;
  align-items: center;
  border-top: 20upx solid #f2f5f6;
  font-size: 30upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
}

.nav_tit {
  width: 25%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.con_nav .colorCustom::after {
  content: "";
  display: block;
  width: 40upx;
  height: 6upx;
  background: #29cf8c;
  border-radius: 3px;
  overflow: hidden;
  position: absolute;
  bottom: 20upx;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.con {
  height: 100%;
}

.con_summary {
  height: 100%;
  padding: 0 30upx 30upx;
}

.con_inner {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

.con_summary_item {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 64upx;
  word-break: break-all;
}

.doctor_info {
  padding: 20upx 10upx;
  font-size: 28upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
}

.info_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info_item_txt {
  line-height: 48upx;
}

.article_list {
  width: 100%;
  display: inline-block;
}

.article {
  margin: 20upx 0;
}

.article_tit {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 56upx;
}

.article_val {
  font-size: 30upx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666;
  line-height: 56upx;
  word-break: break-all;
}

.con_tip_item {
  font-size: 30upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 48upx;
  margin: 20upx 0;
}

.con_pro {
  height: 100%;
  display: flex;
  align-items: flex-start; 
  overflow: hidden;
}

.con_pro .public_info_item {
  margin: 20upx 0;
}

.scroll_nav, .scroll_con {
  width: 170upx;
  height: 100%;
  background-color: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll_con {
  width: 580upx;
  border-left: 20upx solid #f2f5f6;
  border-top: 20upx solid #f2f5f6;
}

.nav_item {
  position: relative;
}
</style>