路泰科技体检小程序UI设计新版本
1
wwl
5 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57
pagesA/ReportOverview/ReportOverview.vue
@@ -1,374 +1,247 @@
<template>
   <view class="box">
      <view class="page">
         <view class="header">
            <view class="search-bar">
               <view class="search-input">
                  <uni-icons type="search" size="16" color="#999999" />
                  <input type="text" placeholder="搜索报告" placeholder-class="placeholder" />
               </view>
               <text class="search-btn">搜索</text>
            </view>
         </view>
  <view class="box">
    <view class="page">
      <view class="header">
        <view class="search-bar">
          <view class="search-input">
            <uni-icons type="search" size="16" color="#999999" />
            <input type="text" placeholder="搜索报告" placeholder-class="placeholder" />
          </view>
          <text class="search-btn">搜索</text>
        </view>
      </view>
         <scroll-view class="content" scroll-y>
            <view class="report-list">
               <view v-for="(item, index) in reportList" :key="index" class="report-item">
                  <view class="report-header">
                     <view class="user-info">
                        <text class="name">李*蕊</text>
                        <text class="code">体检码:{{ item.code }}</text>
                     </view>
                     <text class="status">已完成</text>
                  </view>
                  <view class="report-info">
                     <text class="age-gender">{{ item.age }}岁 | {{ item.gender }}</text>
                     <text class="date">{{ item.date }}</text>
                  </view>
                  <view class="hospital">
                     <text>泾川县人民医院健康体检中心</text>
                  </view>
               </view>
            </view>
         </scroll-view>
      <scroll-view class="content" scroll-y>
        <view class="report-list">
          <view v-for="(item, index) in reportList" :key="index" class="report-item"  @click="ReportDetails(item.tjNumber)">
            <view class="report-header">
              <view class="user-info">
                <text class="name">{{ item.cusName || '未知姓名' }}</text>
                <text class="code">体检码:{{ item.tjNumber }}</text>
              </view>
              <text class="status">{{item.status}}</text>
            </view>
            <view class="report-info">
              <text class="age-gender">{{ item.age }}岁 | {{ item.cusSex ? '女' : '男' }}</text>
              <text class="date">{{ item.createTime }}</text>
            </view>
            <view class="hospital">
              <text>{{ item.hospital || '泾川县人民医院健康体检中心' }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
         <view class="footer">
            <button class="upload-btn">
               <!-- <uni-icons type="camera-filled" size="16" color="#666666" /> -->
               <text>拍照上传</text>
            </button>
            <button class="compare-btn" type="primary"  @click="ReportDetails()">
               <text >报告对比</text>
            </button>
         </view>
      </view>
      <!-- 查找结果/历史结果 -->
      <!-- <div class="report">
         <view :class="(showType == 0 ? 'active' : 'report_sty')" @tap="switchTab" data-index="0">
            <div>
               <img class="report_img" src="https://ltpeis.xaltjdkj.cn:5502/static/chazhaobaogao.png" alt="">
            </div>
            <div class="report_sty1">
               <span class="report_txt1">历史结果</span>
               <span class="report_txt2">手机号/体检号等绑定结果</span>
            </div>
         </view>
         <view :class="(showType == 1 ? 'active' : 'report_sty')" @tap="switchTab" data-index="1">
            <div @click="ComparisonReport">
               <div>
                  <img class="report_img" src="https://ltpeis.xaltjdkj.cn:5502/static/duibibaogao.png" alt="">
               </div>
               <div class="report_sty1">
                  <span class="report_txt1">对比结果</span>
                  <span class="report_txt2">历史结果数据对比</span>
               </div>
            </div>
         </view>
      </div>
      <!-- 结果卡片 -->
      <!--<view class="padding-l" v-for="(item,index) in reportlist" :key="index">
         <div class="card" @click="ReportDetails(item.report.tjNumber)">
            <div class="card_sty">
               <div class="card_left">
                  <span class="card_left_txt1">{{item.customer.cusName}}</span>
                  <span class="card_left_txt2">{{item.customer.cusSex ? "女" :"男" }}</span>
               </div>
               <div class="card_right">
                  <div class="card_right1">
                     <span class="card_right_txt1">{{item.report.createTime}}</span>
                     <span class="card_right_txt2">泾川县人民医院体检中心</span>
                     <span class="card_right_txt3">体检号:{{item.report.tjNumber}}</span>
                  </div>
                  <div class="card_right2">
                     <span class="card_right_txt4">体</span>
                     <span class="card_right_txt4">检</span>
                     <span class="card_right_txt4">报</span>
                     <span class="card_right_txt4">告</span>
                  </div>
               </div>
            </div>
         </div>
      </view> -->
      <!-- <div class="warm">
         <text>温馨提示:如需下载或打印结果,请使用电脑访问:www.xaltjdkj.com</text>
      </div> -->
   </view>
<!--      <view class="footer">
        <button class="upload-btn">
          <text>拍照上传</text>
        </button>
        <button class="compare-btn" type="primary" @click="ReportDetails()">
          <text>报告对比</text>
        </button>
      </view> -->
    </view>
  </view>
</template>
<script>
   import {
      getReportList,
   } from "@/api/system/report";
   import {
      getWxInfo
   } from '@/api/login'
import { getReportList } from "@/api/system/report";
   export default {
      name: 'App',
      data() {
         return {
            reportList: [{
                  code: '612554755105',
                  age: 35,
                  gender: '女',
                  date: '2025-02-15'
               },
               {
                  code: '612554755105',
                  age: 35,
                  gender: '女',
                  date: '2024-08-21'
               },
               {
                  code: '612554755105',
                  age: 35,
                  gender: '女',
                  date: '2023-05-15'
               },
               {
                  code: '612554755105',
                  age: 35,
                  gender: '女',
                  date: '2022-08-21'
               }
            ]
         }
      },
      //生命周期方法 —— 页面加载时
      onLoad() {
         this.getList();
      },
      methods: {
         /** 查询体检报告列表 */
         getList() {
            //获取登录的用户的手机号 ------待完成
            getWxInfo().then(res => {
               let cusPhone = res.data.phone;
               getReportList(cusPhone).then((response) => {
                  if (response.data) {
                     this.reportlist = response.data;
                     console.log(this.reportlist);
                     this.reportlist.forEach(item => {
                        this.tjNumber = item.report.tjNumber
                     })
                  } else {
                     this.$modal.showToast("还未生成体检报告")
                  }
               });
            })
         },
         switchTab: function(event) {
            this.showType = event.currentTarget.dataset.index;
         },
         //跳转
         ComparisonReport() {
            this.$modal.showToast("该项功能正在建设中")
            // uni.navigateTo({
            //    url: '/pagesA/ComparisonReport/ComparisonReport'
            // })
         },
         ReportDetails(item) {
            let tjNumber = item
            uni.navigateTo({
               url: `/pagesA/ReportDetails/ReportDetails?tjNumber=${tjNumber}`
            })
         }
      }
   }
export default {
  name: 'App',
  data() {
    return {
      reportList: [],
      cusIdCard: '',
    };
  },
  onLoad(options) {
    this.cusIdCard = options.cusIdCard || '';
    if (this.cusIdCard) {
      this.getList();
    } else {
      this.$modal.showToast('缺少身份证号参数');
    }
  },
  methods: {
    /** 查询体检报告列表 */
    getList() {
      getReportList(this.cusIdCard).then((response) => {
        if (response.data) {
          this.reportList = response.data;
          console.log('报告列表:', this.reportList);
        } else {
          this.$modal.showToast('还未生成体检报告');
        }
      }).catch(err => {
        console.error('获取报告列表失败:', err);
        this.$modal.showToast('获取报告列表失败');
      });
    },
    ReportDetails(item) {
       uni.navigateTo({
              url: `/pagesA/ReportDetails/ReportDetails?tjNum=${encodeURIComponent(item)}`
            });
    }
  }
};
</script>
<style lang="scss">
   page {
      height: 100%;
   }
page {
  height: 100%;
}
   .page {
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: #f5f5f5;
   }
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
   .header {
      flex-shrink: 0;
      background-color: #ffffff;
      padding-bottom: 20rpx;
   }
.header {
  flex-shrink: 0;
  background-color: #ffffff;
  padding-bottom: 20rpx;
}
   .nav-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 32rpx;
   }
.search-bar {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  margin-top: 20rpx;
}
   .left {
      display: flex;
      align-items: center;
   }
.search-input {
  flex: 1;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}
   .title {
      margin-left: 16rpx;
      font-size: 16px;
      font-weight: 500;
      color: #333333;
   }
.search-input input {
  flex: 1;
  margin-left: 16rpx;
  font-size: 14px;
}
   .right {
      display: flex;
      align-items: center;
      gap: 32rpx;
   }
.placeholder {
  color: #999999;
}
   .search-bar {
      display: flex;
      align-items: center;
      padding: 0 32rpx;
      margin-top: 20rpx;
   }
.search-btn {
  margin-left: 24rpx;
  color: #007AFF;
  font-size: 14px;
}
   .search-input {
      flex: 1;
      height: 72rpx;
      background: #f5f5f5;
      border-radius: 36rpx;
      display: flex;
      align-items: center;
      padding: 0 24rpx;
   }
.content {
  flex: 1;
  overflow: auto;
}
   .search-input input {
      flex: 1;
      margin-left: 16rpx;
      font-size: 14px;
   }
.report-list {
  padding: 24rpx;
}
   .placeholder {
      color: #999999;
   }
.report-item {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}
   .search-btn {
      margin-left: 24rpx;
      color: #007AFF;
      font-size: 14px;
   }
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}
   .content {
      flex: 1;
      overflow: auto;
   }
.user-info {
  display: flex;
  align-items: center;
}
   .report-list {
      padding: 24rpx;
   }
.name {
  font-size: 16px;
  color: #333333;
  font-weight: 500;
}
   .report-item {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 32rpx;
      margin-bottom: 24rpx;
   }
.code {
  margin-left: 24rpx;
  font-size: 14px;
  color: #3DA1FE;
}
   .report-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
   }
.status {
  font-size: 14px;
  color: #999999;
}
   .user-info {
      display: flex;
      align-items: center;
   }
.report-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  border-top: 1px solid #F5F5F5;
}
   .name {
      font-size: 16px;
      color: #333333;
      font-weight: 500;
   }
.age-gender {
  font-size: 14px;
  color: #666666;
}
   .code {
      margin-left: 24rpx;
      font-size: 14px;
      color: #3DA1FE;
   }
.date {
  font-size: 14px;
  color: #666666;
}
   .status {
      font-size: 14px;
      color: #999999;
   }
.hospital {
  font-size: 14px;
  color: #666666;
}
   .report-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;
         border-top: 1px solid #F5F5F5;
   }
.footer {
  flex-shrink: 0;
  display: flex;
  padding: 32rpx;
  gap: 24rpx;
  background: #ffffff;
}
   .age-gender {
      font-size: 14px;
      color: #666666;
   }
.upload-btn {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border: none;
}
   .date {
      font-size: 14px;
      color: #666666;
   }
.upload-btn text {
  margin-left: 8rpx;
  font-size: 14px;
  color: #666666;
}
   .hospital {
      font-size: 14px;
      color: #666666;
   }
.compare-btn {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #419FFD !important;
  border: none;
}
   .footer {
      flex-shrink: 0;
      display: flex;
      padding: 32rpx;
      gap: 24rpx;
      background: #ffffff;
   }
   .upload-btn {
      flex: 1;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      border: none;
   }
   .upload-btn text {
      margin-left: 8rpx;
      font-size: 14px;
      color: #666666;
   }
   .compare-btn {
      flex: 1;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #419FFD !important;
      border: none;
   }
   .compare-btn text {
      font-size: 14px;
      color: #ffffff;
   }
.compare-btn text {
  font-size: 14px;
  color: #ffffff;
}
</style>