路泰科技体检小程序UI设计新版本
1
wwl
6 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57
pages/tjrecorddetail/tjrecorddetail.vue
@@ -2,16 +2,12 @@
   <view class="box">
      <image class="bg-image" src="/static/images/tabbar/loginbg.png" mode="scaleToFill"></image>
      <view class="order">
         <view class="top">
            <view class="top_one">
               <view>{{customer.cusName }}</view>
               <text>{{customer.cusSex===1 ? "女" :"男" }}</text>
            </view>
            <!-- <view class="top_two" v-if="item.checkStatus === 0">未体</view>
                  <view class="top_two" v-if="item.checkStatus === 1">已检</view> -->
         </view>
         <!-- <view style="border-top: 1rpx solid #EBEEF2; width: 95%; margin: 0 auto;"></view> -->
         <u-cell-group>
            <u-cell title="体检套餐" :value="tjorder.pacName" :border="false" />
            <u-cell title="体检日期" :value="tjorder.createTime" :border="false" />
@@ -26,148 +22,83 @@
            <view class="top_two" v-if="item.checkStatus === 0">未体</view>
            <view class="top_two" v-if="item.checkStatus === 1">已检</view>
         </view>
         <!-- <view style="border-top: 1rpx solid #EBEEF2; width: 95%; margin: 0 auto;"></view> -->
         <u-cell-group >
                     <u-cell title="位置" :value="item.officialWeb" :border="false" />
         </u-cell-group>
      </view>
      <!-- <view class="tj" style="height: 260rpx;">
         <view class="tj1">
            <view class="tj2">
               <span style="font-size: 28px;margin-right: 5px;">{{customer.cusName}}</span>
               <span style="font-size: 14px;">{{customer.cusSex===1 ? "女" :"男"}}</span>
            </view>
            <view class="tj3">
               <span>体检套餐:{{tjorder.pacName}}</span>
            </view>
            <view class="tj4">
               <span>体检日期:{{tjorder.createTime}}</span>
            </view>
         </view>
      </view> -->
      <!-- 报告卡片 -->
      <!-- <view class="padding-l" v-for="(item,index) in reportlist" :key="index">
         <div class="card">
            <div class="card_sty"> -->
      <!-- <div class="card_left">
                  <span class="card_left_txt1">{{item.checkStatus}}</span>
                  <span class="card_left_txt2">{{item.deptName }}</span>
               </div> -->
      <!--       <div class="card_right">
                  <div class="card_right1">
                     <span class="card_right_txt1"></span>
                     <span class="card_right_txt2">{{item.deptName}}</span>
                     <span class="card_right_txt3">位置:{{item.officialWeb}}</span>
                  </div>
                  <div class="card_right3" v-if="item.checkStatus === 0">
                     <span class="card_right_txt4">未</span>
                     <span class="card_right_txt4">检</span>
                  </div>
                  <div class="card_right2" v-else-if="item.checkStatus === 1">
                     <span class="card_right_txt4">已</span>
                     <span class="card_right_txt4">检</span>
                  </div> -->
      <!-- <div class="card_right2" v-else-if="item.checkStatus === 2">
                     <span class="card_right_txt4">弃</span>
                     <span class="card_right_txt4">检</span>
                  </div>
                  <div class="card_right2" v-else-if="item.checkStatus === 3">
                     <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>
</template>
<script>
   import {
      getTiJianList,
      getPaiDuiList
   } from "@/api/system/tjrecord";
import { getPaiDuiList } from "@/api/system/tjrecord";
   export default {
      name: 'App',
      data() {
         return {
            Height: 0,
            reportlist: [{
                  checkStatus: 0,
                  officialWeb: "二楼",
                  deptName: "内科",
               },
               {
                  checkStatus: 1,
                  officialWeb: "二楼",
                  deptName: "外科",
               },
               {
                  checkStatus: 0,
                  officialWeb: "二楼",
                  deptName: "眼科",
               }
            ],
            customer: {
               cusName: "秦羡",
               cusSex: 1
            },
            reportlist: [],
            customer: {},
            tjorder: {
               pacName: "健康体检",
               createTime: "2025-5-6"
            },
         }
        };
      },
      //生命周期方法 —— 页面加载时
      onLoad(option) {
         let tjNumber = option.tjNumber;
         // this.getList(tjNumber);
        this.getList(tjNumber);
      },
      methods: {
        // 日期格式化函数
        formatDate(dateStr) {
            const date = new Date(dateStr);
            if (isNaN(date.getTime())) {
                return dateStr; // 如果日期无效,返回原始字符串
            }
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
         /** 查询体检报告列表 */
         getList(tjNumber) {
            getPaiDuiList(tjNumber).then((response) => {
               this.reportlist = response.data.depts;
               this.customer = response.data.customer;
               this.tjorder = response.data.tjorder;
            getPaiDuiList({
                tjNumber: tjNumber
            }).then((response) => {
                this.reportlist = response.data.reportlist;
                this.customer.cusSex = response.data.cusSex;
                this.customer.cusName = response.data.cusName;
                this.tjorder.pacName = response.data.pacName;
                // 格式化日期
                this.tjorder.createTime = this.formatDate(response.data.createTime);
            });
         },
         //跳转
         ComparisonReport() {
            uni.navigateTo({
               url: '/pagesA/ComparisonReport/ComparisonReport'
            })
            });
         },
         SearchReport() {
            uni.navigateTo({
               url: '/pagesA/searchReport/searchReport'
            })
            });
         },
      }
   }
};
</script>
<style lang="scss">
   .box {
      width: 100%;
      min-height: 1240rpx;
      // background: linear-gradient(180deg, #fd8b4d, #f4f8f7, #f7f7f7 100%, );
   }
   .bg-image {
@@ -182,7 +113,6 @@
      object-fit: cover;
   }
   .order {
      width: 702rpx;
      background: linear-gradient(90deg, #FFFFFF 0%, #FCFFFE 100%);
@@ -190,12 +120,8 @@
      border-radius: 12rpx;
      margin: 16rpx auto;
      padding-bottom: 20rpx;
      /* 增加底部内边距 */
      overflow: hidden;
      /* 防止阴影溢出 */
   }
   .top {
      height: 86rpx;
@@ -204,7 +130,6 @@
      justify-content: space-between;
   }
   .top .top_one {
      display: flex;
      align-items: center;
@@ -212,13 +137,12 @@
   }
   .top .top_one view {
      height: 32rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #373E58;
      margin: 0rpx 20rpx;
      margin-top: -10rpx;
        margin-top: - jugando10rpx;
   }
   .top .top_one text {
@@ -228,7 +152,6 @@
      font-size: 26rpx;
      color: #999999;
   }
   .top .top_two {
      font-weight: 500;
@@ -279,7 +202,6 @@
   .card_right1 {
      margin-top: 5px;
      // margin-left: 10px;
      width: 400rpx;
      height: 103rpx;
      display: flex;
@@ -334,9 +256,7 @@
   .warm {
      width: 100%;
      //height: 0;
      color: LightSlateGray;
      /*开启绝对定位*/
      position: absolute;
      left: 5%;
      bottom: 2%;