路泰科技体检小程序UI设计新版本
1
wwl
5 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57
pagesA/ReportDetails/ReportDetails.vue
@@ -1,410 +1,315 @@
<template>
   <view class="container">
      <scroll-view class="report-list" scroll-y>
         <view v-for="(item, index) in reportList" :key="index" class="report-item">
            <view class="report-content">
               <view class="report-left">
                  <view class="user-info">
                     <uni-icons type="wallet" size="20" color="#3498db" />
                     <view class="report-date">{{ item.date }}</view>
                  </view>
                  <view class="report-right">
                     <uni-icons  :type="item.selected ? 'checkbox-filled' : 'circle'"
                        size="20" :color="item.selected ? '#47a0fc' : '#999999'"
                        @click="toggleSelect(index)"></uni-icons>
                     <!-- <u-checkbox-group>
                           <u-checkbox v-model="checked" shape="circle"></u-checkbox>
                        </u-checkbox-group> -->
                  </view>
               </view>
               <view class="report-middle">
                  <view class="report-info">
                     <text class="report-name">{{ item.name }}</text>
                     <text class="report-age">{{ item.age }}岁</text>
                     <text class="report-gender">{{ item.gender }}</text>
                  </view>
                  <view class="report-hospital">{{ item.hospital }}</view>
               </view>
            </view>
         </view>
      </scroll-view>
  <view class="box">
    <!-- 顶部固定栏 -->
    <view class="Fixed">
      <view class="Fixed_left">
        <view class="Fixed_left_txt">体检报告</view>
      </view>
    </view>
      <!-- 提示信息 -->
      <view class="tip-text">
         提示:最多可对比5份体检报告
      </view>
    <!-- 基本健康数据 -->
    <div class="data">
      <div class="data_left">
        <img v-if="customer.cusSex==0" class="data_img" src="https://ltpeis.xaltjdkj.cn:5502/static/4.png" alt="">
        <img v-else class="data_img" src="https://ltpeis.xaltjdkj.cn:5502/static/5.png" alt="">
        <div class="data_left_sty1">
          <span class="data_left_txt1">{{customer.cusName}}</span>
          <div class="data_left_sty">
            <span class="data_left_txt2">{{customer.cusBrithday}}</span>
          </div>
          <span class="data_left_txt2">{{customer.cusSex == "1" ? "女" :"男" }}</span>
        </div>
      </div>
      <div class="data_right" v-if="jicuList.length >= 1">
        <span class="data_right_txt1">基本健康数据</span>
        <div class="data_right_sty">
          <span class="data_right_txt2">身高(cm)</span>
          <span class="data_right_txt3">{{jicuList[0].shenggao || ""}}</span>
        </div>
        <div class="data_right_sty">
          <span class="data_right_txt2">体重(kg)</span>
          <span class="data_right_txt3">{{jicuList[0].tizhong || ""}}</span>
        </div>
        <div class="data_right_sty">
          <span class="data_right_txt4">体重指数</span>
          <span class="data_right_txt5">{{jicuList[0].tizhongzhishu || ""}}</span>
        </div>
        <div class="data_right_sty">
          <span class="data_right_txt2">收缩压(mmHg)</span>
          <span class="data_right_txt3">{{jicuList[0].shousuoya || ""}}</span>
        </div>
        <div class="data_right_sty">
          <span class="data_right_txt2">舒张压(mmHg)</span>
          <span class="data_right_txt3">{{jicuList[0].shuzhangya || ""}}</span>
        </div>
      </div>
    </div>
      <!-- 底部按钮 -->
      <view class="bottom-button">
         <button class="compare-button" @click="handleCompare">
            报告对比
         </button>
      </view>
   </view>
    <!-- 总检建议 -->
    <div class="bottom">
      <uni-collapse class="bottom_sty">
        <uni-collapse-item title="总检建议" thumb="https://ltpeis.xaltjdkj.cn:5502/static/baogao.png">
          <view class="content" style="margin-left:15px;">
            <text class="text">{{checkAdvice}}</text>
          </view>
        </uni-collapse-item>
      </uni-collapse>
      <div class="bottom_sty">
        <view class="content">
          <text class="text">检验结果</text>
        </view>
      </div>
      <uni-collapse class="bottom_sty">
        <uni-collapse-item :title="item.parent" thumb="https://ltpeis.xaltjdkj.cn:5502/static/baogao.png"
          v-for="(item, index) in alist1" :key="index">
          <view class="content" v-for="(son, aindex) in item.sons" :key="aindex"
            style="margin-left:15px; display: flex;">
            <text style="margin-left: 5px; width: 40%;">{{son.proName}}</text>
            <view style="margin-left: 5px; width: 40%;">
              <text>{{son.proResult}}</text>
            </view>
            <view style="margin-left: 5px; width: 40%;">
              <text>{{son.proAdvice}}</text>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
      <div class="bottom_sty" v-if="alistss.length">
        <view class="content">
          <text class="text">检查</text>
        </view>
      </div>
      <uni-collapse class="bottom_sty">
        <uni-collapse-item :title="item.parent" thumb="https://ltpeis.xaltjdkj.cn:5502/static/baogao.png"
          v-for="(item, index) in alistss" :key="index">
          <view class="content" v-for="(son, aindex) in item.sons" :key="aindex"
            style="margin-left:15px; display: flex; flex-direction: column;">
            <text style="margin-left: 5px;">检查所见:{{son.yxbx}}</text>
            <text style="margin-left: 5px;">检查提示:{{son.yxzd}}</text>
            <text style="margin-left: 5px;">主检医师:{{son.shysxm}}</text>
          </view>
        </uni-collapse-item>
      </uni-collapse>
      <div class="bottom_sty">
        <view class="content">
          <span class="text1">报告阅读说明</span>
          <div>
            <span class="text2">1.以上报告结果,仅针对本次检查、检验样本负责。本报告不能用于二次会诊、用药、或其他任何医学判断目的的使用。如您有不适症状,或需要医疗服务,请及时到医院就医并遵医嘱。</span>
            <span class="text3">查看更多</span>
            <img class="img" src="https://ltpeis.xaltjdkj.cn:5502/static/youjiantou1.png" alt="">
          </div>
          <div>
            <span class="text2">如需了解更多关于检测方法和检测结果参考值得信息,</span>
            <span class="text3">请点这里</span>
            <img class="img" src="https://ltpeis.xaltjdkj.cn:5502/static/youjiantou1.png" alt="">
          </div>
        </view>
      </div>
    </div>
  </view>
</template>
<script>
   import {
      getReportByTjNumber,
      getShenGaoTiZhong,
      getdownloadReport,
      getHyReportByTjNumber,
      getJcReportByTjNumber
   } from "@/api/system/report";
import { getShenGaoTiZhong1, getreportData } from "@/api/system/report";
   export default {
      components: {},
      data() {
         return {
            checked: "",
            reportList: [{
                  date: '2025-02-15',
                  name: '李*蕊',
                  age: 35,
                  gender: '女',
                  hospital: '泾川县人民医院健康体检中心',
                  selected: true
               },
               {
                  date: '2024-08-21',
                  name: '李*蕊',
                  age: 35,
                  gender: '女',
                  hospital: '泾川县人民医院健康体检中心',
                  selected: false
               },
               {
                  date: '2023-05-15',
                  name: '李*蕊',
                  age: 35,
                  gender: '女',
                  hospital: '泾川县人民医院健康体检中心',
                  selected: false
               },
               {
                  date: '2022-08-21',
                  name: '李*蕊',
                  age: 35,
                  gender: '女',
                  hospital: '泾川县人民医院健康体检中心',
                  selected: false
               },
               {
                  date: '2023-05-15',
                  name: '李*蕊',
                  age: 35,
                  gender: '女',
                  hospital: '泾川县人民医院健康体检中心',
                  selected: false
               },
               {
                  date: '2022-08-21',
                  name: '李*蕊',
                  age: 35,
                  gender: '女',
                  hospital: '泾川县人民医院健康体检中心',
                  selected: false
               }
            ]
         }
      },
      //生命周期方法 —— 页面加载时
      onLoad(options) {
         // this.tjNumber = options.tjNumber
         // this.getOrderDetailList();
         // this.getjichu();
      },
      methods: {
         // download() {
         //    this.$modal.showToast('下载中...')
         //    let tjNumber = this.tjNumber;
         //    downloadReport(tjNumber).then((response) => {});
         //    this.$modal.showToast('下载成功')
         // },
         toggleSelect(index) {
            // const selectedCount = index
            const selectedCount = this.reportList.filter(item => item.selected).length;
            // console.log(selectedCount)
            if (!this.reportList[index].selected && selectedCount >= 5) {
               uni.showToast({
                  title: '最多只能选择5份报告',
                  icon: 'none'
               });
               return;
            }
            if (this.reportList[index].selected == true) {
               this.reportList[index].selected = false
            } else {
               return this.reportList[index].selected = true
            }
            // this.reportList.value[index].selected = !this.reportList.value[index].selected;
         },
         handleCompare() {
            const selectedReports = this.reportList.filter(item => item.selected);
            if (selectedReports.length < 2) {
               uni.showToast({
                  title: '请至少选择2份报告进行对比',
                  icon: 'none'
               });
               return;
            }
         },
         getOrderDetailList() {
            uni.showLoading({
               title: '请稍等!'
            })
            let tjNumber = this.tjNumber;
            getReportByTjNumber(tjNumber).then((response) => {
               uni.hideLoading()
               this.alist = response.data.list;
               this.zjadvice = response.data.inspectionAdvice;
               if (response.data.inspectionAdvice == null) {
                  this.zjadvice = "无"
               }
               this.yclist = response.data.tjAbnormal;
               this.customer = response.data.customter;
            });
            getHyReportByTjNumber(tjNumber).then(res => {
               this.alist1 = res.data;
            })
            getJcReportByTjNumber(tjNumber).then(res => {
               this.alistss = res.data;
            })
         },
         getjichu() {
            let tjNumber = this.tjNumber;
            getShenGaoTiZhong(tjNumber).then(res => {
               this.jicuList = res.data;
            })
         },
         add() {
            if (this.content.length > 35) {
               this.content = ''
            } else {
               this.content = ''
            }
            // TODO 小程序中不支持自动更新 ,需要手动resize 更新组件高度
            // #ifdef MP
            this.$nextTick(() => {
               this.$refs.collapse.resize()
            })
            // #endif
         },
         onClick(e) {
            uni.showToast({
               title: '列表被点击'
            })
         },
         getDownload() {
            const tjNumber = this.tjNumber;
            // const tjNumber = "10001240222083729"
            // const flag = false;
            // getPdf(tjNumber, flag).then((res) => {
            // const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器
            // fs.writeFile({
            //    filePath: wx.env.USER_DATA_PATH +
            //       "/报告.pdf", // wx.env.USER_DATA_PATH 指定临时文件存入的路径,后面字符串自定义
            //    data: res,
            //    encoding: "binary", //二进制流文件必须是 binary
            //    success(res) {
            //       wx.openDocument({ // 打开文档
            //          filePath: wx.env.USER_DATA_PATH + "/报告.pdf", //拿上面存入的文件路径
            //          showMenu: true, // 显示右上角菜单
            //           fileType: "pdf",
            //          success: function(res) {
            //             setTimeout(() => {
            //                wx.hideLoading()
            //             }, 500)
            //          }
            //       })
            //    }
            // })
            // })
            getdownloadReport(tjNumber).then(res => {
               if (res.data.flag == "1") {
                  let url = res.data.url
                  uni.navigateTo({
                     url: `/pagesA/report/report?url=${url}`
                  })
               } else if (res.data.flag == "0") {
                  wx.downloadFile({
                     url: res.data.url, //pdf地址 例如:http://**.*****.***/ceshi/demo.pdf
                     filePath: wx.env.USER_DATA_PATH + "/" + "报告" +
                        ".pdf", //wx.env.USER_DATA_PATH 文件系统中的用户目录路径 filepath可有可无
                     success(res) {
                        if (res.statusCode === 200) {
                           const tempFilePath = res.filePath //返回的文件临时地址,用于后面打开本地预览所用
                           wx.openDocument({
                              filePath: tempFilePath,
                              showMenu: true,
                              fileType: "pdf",
                              success: function(res) {}
                           })
                        } else {
                           showAutoError("协议打开失败,请重新打开");
                        }
                     },
                     fail(res) {
                        showAutoError("协议下载失败")
                     }
                  })
               }
            })
         },
         change(e) {
            console.log(e);
         }
      }
   }
export default {
  data() {
    return {
      jicuList: [],
      customer: '',
      alist1: [],
      alistss: [],
      checkAdvice: "",
      tjNumber: ""
    };
  },
  onLoad(options) {
    console.log('ReportDetails onLoad options:', options);
    this.tjNumber = options.tjNum || '';
    if (this.tjNumber) {
      this.getOrderDetailList();
      this.getjichu();
    } else {
      uni.showToast({
        title: '缺少体检码参数',
        icon: 'none'
      });
    }
  },
  methods: {
    getOrderDetailList() {
      uni.showLoading({ title: '请稍等!' });
      getreportData({ tjNum: this.tjNumber }).then(res => {
        uni.hideLoading();
        this.alist1 = res.data;
        const uniqueAdvices = [...new Set(res.data.map(item => item.checkAdvice).filter(Boolean))];
        this.checkAdvice = uniqueAdvices.join("");
      }).catch(err => {
        uni.hideLoading();
        console.error('获取报告数据失败:', err);
        uni.showToast({
          title: '获取报告数据失败',
          icon: 'none'
        });
      });
    },
    getjichu() {
      getShenGaoTiZhong1(this.tjNumber).then(res => {
        if (res.data) {
          this.jicuList = res.data;
          // 假设 customer 数据从 res.data 中获取,或者需要单独 API 调用
          this.customer = res.data[0]?.customer || { cusName: '', cusBrithday: '', cusSex: '' };
        }
      }).catch(err => {
        console.error('获取基础数据失败:', err);
        uni.showToast({
          title: '获取基础数据失败',
          icon: 'none'
        });
      });
    }
  }
}
</script>
<style lang="scss">
   page {
      height: 100%;
.box {
  width: 100%;
  background: linear-gradient(180deg, #fd8b4d 50%, #fdb753);
}
      background-color: #f5f5f5;
   }
.Fixed {
  width: 100%;
  height: 80rpx;
  background-color: #fd8b4d;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
   .container {
      display: flex;
      flex-direction: column;
      height: 100%;
      background-color: #f5f5f5;
   }
.Fixed_left_txt {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
   .nav-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
      height: 88rpx;
      background-color: #ffffff;
      border-bottom: 1px solid #eeeeee;
   }
.data {
  display: flex;
  justify-content: space-around;
  padding-top: 102rpx;
  margin-bottom: 40rpx;
}
   .nav-left {
      display: flex;
      align-items: center;
   }
.data_left {
  width: 316rpx;
  height: 700rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
   .back-icon {
      margin-right: 20rpx;
   }
.data_img {
  width: 316rpx;
  height: 600rpx;
}
   .nav-title {
      font-size: 16px;
      color: #333333;
      font-weight: 500;
   }
.data_left_sty1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
   .nav-right {
      display: flex;
      align-items: center;
   }
.data_left_txt1 {
  font-size: 20px;
  color: #fff;
}
   .divider {
      width: 1px;
      height: 20rpx;
      background-color: #e5e5e5;
      margin: 0 20rpx;
   }
.data_left_sty {
  width: 180rpx;
  height: 50rpx;
  background-color: #f99235;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
   .report-list {
      flex: 1;
      overflow: auto;
      padding: 30rpx;
   }
.data_left_txt2 {
  font-size: 14px;
  color: #fff;
}
   .report-item {
      background-color: #ffffff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
   }
.data_right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 316rpx;
  height: 700rpx;
  background-color: #fff;
  border-radius: 20px;
}
   .report-content {
      // display: flex;
      align-items: center;
      padding: 30rpx;
   }
.data_right_txt1 {
  font-size: 18px;
}
   .report-left {
   display: flex;
   justify-content: space-between;
   align-items: center;
      // margin-right: 20rpx;
   }
   .user-info {
      width: 90%;
      display: flex;
      align-items: center;
   }
.data_right_sty {
  width: 316rpx;
  display: flex;
  justify-content: space-around;
}
//    .report-right {
// flex: 1;
// float: right;
//    }
.data_right_txt2 {
  font-size: 14px;
}
   .report-middle {
      flex: 1;
      background-color: #F9FBFC;
   }
.data_right_txt3 {
  font-weight: 600;
}
   .report-date {
      font-size: 16px;
      color: #333333;
      margin-bottom: 16rpx;
      font-weight: 500;
      padding-left: 20rpx;
   }
.data_right_txt4 {
  color: #f23f45;
  font-size: 14px;
}
   .report-info {
      margin-bottom: 12rpx;
   }
.data_right_txt5 {
  color: #f23f45;
  font-weight: 600;
}
   .report-name {
      font-size: 14px;
      color: #666666;
      margin-right: 20rpx;
   }
.bottom {
  background-color: #ffffff;
}
   .report-age {
      font-size: 14px;
      color: #666666;
      margin-right: 20rpx;
   }
.content {
  padding: 8px;
}
   .report-gender {
      font-size: 14px;
      color: #666666;
   }
.text1 {
  font-size: 14px;
  font-weight: 600;
}
   .report-hospital {
      font-size: 14px;
      color: #999999;
   }
.text2 {
  font-size: 12px;
  color: #8a8a8a;
}
   .tip-text {
      padding: 20rpx 30rpx;
      font-size: 14px;
      color: #ff9900;
   }
.text3 {
  font-size: 12px;
  color: #1d6ebf;
}
   .bottom-button {
      padding: 30rpx;
      background-color: #ffffff;
   }
   .compare-button {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background-color: #419FFD;
      color: #ffffff;
      font-size: 16px;
      // border-radius: 44rpx;
   }
.img {
  width: 10px;
  height: 10px;
}
</style>