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

<template>
  <view>
    <healthCardQueryComp
      :env="healthCardData.env"
      :hospitalId="healthCardData.hospitalId"
      :channel="healthCardData.channel"
      :openId="healthCardData.openId"
      :scene="healthCardData.scene"
      :healthCardId="healthCardData.healthCardId"
      :pos="healthCardData.pos"
      v-if="healthCardData.healthCardId != ''"
    ></healthCardQueryComp>
    <view class="container">
      <view class="bg_gary"></view>
      <view class="time_box">
        <view class="time_box_list">
          <text>患者姓名</text>
          <view class="nameTel">
            <text>{{currentUser.memberName}}</text>
            <text class="user_info_text border_color border_left"></text>
            <text class="user_info_text">{{currentUser.sex=='1'?'男':(currentUser.sex=='2'?'女':'未知')}}</text>
            <text class="user_info_text border_color border_left"></text>
            <text class="user_info_text">{{currentUser.age}}岁</text>
          </view>
        </view>
        <view class="time_box_list">
          <text>{{currentUser.cardType == "1"? "就诊卡" : "住院号"}}</text>
          <text class="bor_bottom">{{currentUser.cardNo}}</text>
        </view>
        <view class="time_box_list">
          <text>报告单号</text>
          <text>{{queryBean.ReportId==''?currentUser.applyNo:queryBean.ReportId}}</text>
        </view>
        <view class="time_box_list" v-if="!reportInfo.YyxUrl || reportInfo.YyxUrl.length == 0">
          <text>审核医生</text>
          <text>{{reportInfo.Checker}}</text>
        </view>
        <view class="time_box_list" v-if="!reportInfo.YyxUrl || reportInfo.YyxUrl.length == 0">
          <text>审核时间</text>
          <text>{{reportInfo.SubmissionTime}}</text>
        </view>
        <text @click="showPhoto" v-if="pageConfig.showCloudFilm" class="view_cloud_film_btn clickBtn">查看云胶片</text>
      </view>
      <view class="bg_gary"></view>
      <view class="inspect_info" v-if="queryBean.ReportType == 2">
        <view class="report_info" v-if="!reportInfo.YyxUrl || reportInfo.YyxUrl.length == 0">
          <text>检查所见</text>
          <text class="report_text">{{reportInfo.CheckToSee?reportInfo.CheckToSee:'无'}}</text>
        </view>
        <view class="report_info" v-if="!reportInfo.YyxUrl || reportInfo.YyxUrl.length == 0">
          <text>检查结果</text>
          <text class="report_text">{{reportInfo.ClinicalDiagnosis?reportInfo.ClinicalDiagnosis:'无'}}</text>
        </view>
        <!-- 报告单（图片） -->
        <view v-if="reportInfo.YyxUrl && reportInfo.YyxUrl.length > 0">
          <swiper :indicator-dots="indicatorDots">
              <block v-for="(item, index) in reportInfo.YyxUrl" :key="index">
                <swiper-item>
                  <image class="report_img" :src="item" :data-img="item" :data-index="index" @click="preview(index)"></image>
                </swiper-item>
              </block>
            </swiper>
        </view>
      </view>
    </view>
  </view>
</template>

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

const app = getApp();
const store = useStore();

const currentUser = ref<any>({});
const queryBean = ref<any>({});
const reportInfo = ref<any>({});
const showCon = ref(false);
const pageConfig = ref<any>({});
const indicatorDots = ref(true);

const healthCardData = ref({
  env: 'prod',
  // 0101081检查 0101082检验
  scene: '0101081',
  hospitalId: '39880',
  healthCardId: '',
  channel: '0402',
  pos: 'bottom',
  openId: store.state.openid || uni.getStorageSync("openid")
});

onLoad((options: any) => {
  let pConfig = common.deepCopy(app.globalData.config.pageConfiguration.inspectTestReportDetails_config);
  let qBean = options.queryBean ? JSON.parse(options.queryBean) : {};
  
  currentUser.value = app.globalData.currentUser;
  queryBean.value = qBean;
  pageConfig.value = pConfig;
  
  uni.setNavigationBarTitle({
    title: `检查报告单(${qBean.ItemName || ''})`,
  });
  
  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);
  
  if (!common.isEmpty(resp)) {
    for (let i = 0; i < resp.length; i++) {
      if (resp[i].YyxUrl) {
        let imgArr = resp[i].YyxUrl.split(",");
        for (let j = 0; j < imgArr.length; j++) {
          // 若图片更新后，地址不变，wx.previewImage打开图片有缓存，需要加上时间戳
          imgArr[j] = imgArr[j] + "?time=" + Date.now();
        }
        resp[i].YyxUrl = imgArr;
      } else {
        resp[i].YyxUrl = [];
      }
    }
  }
  
  reportInfo.value = !common.isEmpty(resp) ? resp[0] : {};
  showCon.value = !common.isEmpty(resp);
  
  let resp2 = await getHealthCard({ memberId: currentUser.value.memberId });
  if (!common.isEmpty(resp2)) {
    healthCardData.value.healthCardId = resp2[0].cardNo;
  }
};

/**
 * 查看云胶片
 */
const showPhoto = () => {
  uni.previewImage({
    urls: reportInfo.value.YyxUrl,
    current: reportInfo.value.YyxUrl[0]
  });
};

const preview = (index: number) => {
  uni.previewImage({
    current: reportInfo.value.YyxUrl[index], // 当前显示图片的http链接
    urls: reportInfo.value.YyxUrl // 需要预览的图片http链接列表
  });
};
</script>

<style>
.container {
  /* padding-top: 20upx; */
  background: white;
}
.bg_gary {
  width: 100%;
  height: 20upx;
  background: #f1f1f6;
}
.time_box {
  width: 100%;
  background: white;
  padding: 26upx 0 0 30upx;
  /* margin-top: 20upx; */
  /* position: fixed; */
  overflow: auto;
}
.time_box_list {
  margin-bottom: 24upx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.time_box_list:nth-last-child(2) {
  margin-top: 24upx;
}
.time_box_list text:nth-child(1){
  width: 31%;
  display: inline-block;
  font-size: 28upx;
  color: #999;
}
.time_box_list text:nth-child(2){
  width: 69%;
  font-size: 28upx;
  color: #333;
}
.nameTel {
  display: inline-block;
}
.nameTel text:nth-child(1) {
  width: auto !important;
  font-size: 28upx;
  color: #333;
  margin-right: 16upx;
}
.user_info_text {
  font-size: 28upx;
  color: #333;
}
.border_color {
  width: 1px;
  height: 20upx;
}
.nameTel text:nth-child(3) {
  font-size: 28upx;
  padding: 0 16upx;
}
.nameTel text:nth-child(5) {
  font-size: 28upx;
  padding-left: 16upx;
}
.bor_bottom {
  padding-bottom: 36upx;
  display: inline-block;
}
.view_cloud_film_btn {
  width: 188upx;
  line-height: 60upx;
  text-align: center;
  display: inline-block;
  font-size: 28upx;
  color: var(--dominantColor);
  border-radius: 60upx;
  position: absolute;
  top: 98upx;
  right: 60upx;
  z-index: 50;
}
/* .clickBtn {
  position: relative;
  z-index: 10;
} */
.clickBtn::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 var(--dominantColor);
  border-radius: 66px;
  box-sizing:border-box;
}
.inspect_info {
  width: 100%;
  padding: 30upx;
  box-sizing: border-box;
  background: white;
  /* position: fixed;
  top: 430upx;
  bottom: 0; */
  overflow: auto;
}
.report_info {
  margin-bottom: 30upx;
}
.report_info text:nth-child(1){
  display: block;
  font-size: 32upx;
  font-weight: bold;
}
.report_text {
  font-size: 30upx;
  color: #333;
  line-height: 45upx;
  margin-top: 20upx;
  display: block;
}
.paddingNone {
  padding: 0;
}
.tableBox {
  width: 100%;
  background: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.tableBox view {
  width: 20%;
  text-align: center;
  font-size: 28upx;
  color: #666;
  padding: 36upx 15upx;
  box-sizing: border-box;
}
.tableBox view:nth-child(1) {
  width: 27%;
}
.tableBox view:nth-child(2) {
  width: 16%;
}
.tableBox view:nth-child(3) {
  width: 16%;
}
.tableBox view:nth-child(4) {
  width: 25%;
}
.tableBox view:nth-child(5) {
  width: 16%;
}
.tableBox view:nth-child(5n) {
  border-right: none;
}
.textInfo {
  word-wrap: break-word;
  word-break: normal;
  padding: 0 10upx;
}
.tableCentent {
  line-height: 120upx;
}
.tableCentent text {
  color: #333 !important;
  height: 100%;
  display: inline-block;
}
.border_left::before {
  height: 70% !important;
  top: 7upx !important;
}

.report_img {
  width: 100%;
  margin-top: 30upx;
}
</style>