路泰科技体检小程序UI设计新版本
1
wwl
5 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57
pages/tjrecorddetail/tjrecorddetail.vue
@@ -1,366 +1,286 @@
<template>
   <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" />
         </u-cell-group>
      </view>
      <view class="order" v-for="(item,index) in reportlist" :key="index">
         <view class="top">
            <view class="top_one">
               <view>{{item.deptName}}</view>
            </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="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>
    <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>
            <u-cell-group>
                <u-cell title="体检套餐" :value="tjorder.pacName" :border="false" />
                <u-cell title="体检日期" :value="tjorder.createTime" :border="false" />
            </u-cell-group>
        </view>
        <view class="order" v-for="(item,index) in reportlist" :key="index">
            <view class="top">
                <view class="top_one">
                    <view>{{item.deptName}}</view>
                </view>
                <view class="top_two" v-if="item.checkStatus === 0">未体</view>
                <view class="top_two" v-if="item.checkStatus === 1">已检</view>
            </view>
            <u-cell-group>
                <u-cell title="位置" :value="item.officialWeb" :border="false" />
            </u-cell-group>
        </view>
    </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
            },
            tjorder: {
               pacName: "健康体检",
               createTime: "2025-5-6"
            },
export default {
    name: 'App',
    data() {
        return {
            Height: 0,
            reportlist: [],
            customer: {},
            tjorder: {
                pacName: "健康体检",
                createTime: "2025-5-6"
            },
        };
    },
         }
      },
    onLoad(option) {
        let tjNumber = option.tjNumber;
        this.getList(tjNumber);
    },
      //生命周期方法 —— 页面加载时
      onLoad(option) {
         let tjNumber = option.tjNumber;
         // this.getList(tjNumber);
      },
      methods: {
         /** 查询体检报告列表 */
         getList(tjNumber) {
            getPaiDuiList(tjNumber).then((response) => {
               this.reportlist = response.data.depts;
               this.customer = response.data.customer;
               this.tjorder = response.data.tjorder;
            });
         },
    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}`;
        },
         //跳转
         ComparisonReport() {
            uni.navigateTo({
               url: '/pagesA/ComparisonReport/ComparisonReport'
            })
         },
         SearchReport() {
            uni.navigateTo({
               url: '/pagesA/searchReport/searchReport'
            })
         },
      }
   }
        /** 查询体检报告列表 */
        getList(tjNumber) {
            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%, );
   }
    .box {
        width: 100%;
        min-height: 1240rpx;
    }
   .bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      left: 50%;
      transform: translateX(-50%);
      object-fit: cover;
   }
    .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        left: 50%;
        transform: translateX(-50%);
        object-fit: cover;
    }
    .order {
        width: 702rpx;
        background: linear-gradient(90deg, #FFFFFF 0%, #FCFFFE 100%);
        box-shadow: 0rpx 0rpx 12rpx 1rpx rgba(127, 153, 177, 0.14);
        border-radius: 12rpx;
        margin: 16rpx auto;
        padding-bottom: 20rpx;
        overflow: hidden;
    }
   .order {
      width: 702rpx;
      background: linear-gradient(90deg, #FFFFFF 0%, #FCFFFE 100%);
      box-shadow: 0rpx 0rpx 12rpx 1rpx rgba(127, 153, 177, 0.14);
      border-radius: 12rpx;
      margin: 16rpx auto;
      padding-bottom: 20rpx;
      /* 增加底部内边距 */
      overflow: hidden;
      /* 防止阴影溢出 */
   }
    .top {
        height: 86rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .top .top_one {
        display: flex;
        align-items: center;
        margin-left: 20rpx;
    }
    .top .top_one view {
        height: 32rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #373E58;
        margin: 0rpx 20rpx;
        margin-top: - jugando10rpx;
    }
   .top {
      height: 86rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }
    .top .top_one text {
        width: 104rpx;
        height: 26rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
    }
    .top .top_two {
        font-weight: 500;
        font-size: 28rpx;
        color: #419FFD;
        margin-right: 36rpx;
    }
   .top .top_one {
      display: flex;
      align-items: center;
      margin-left: 20rpx;
   }
    .card {
        display: flex;
        align-items: center;
        justify-content: center;
    }
   .top .top_one view {
    .card_sty {
        margin-top: 10px;
        width: 670rpx;
        height: 150rpx;
        border-radius: 8px 8px 8px 8px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
      height: 32rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #373E58;
      margin: 0rpx 20rpx;
      margin-top: -10rpx;
   }
    .card_left {
        width: 120rpx;
        height: 103rpx;
        border-right: 1px solid #ccc;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
   .top .top_one text {
      width: 104rpx;
      height: 26rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
   }
    .card_left_txt1 {
        margin-top: 2px;
        font-size: 14px;
    }
    .card_left_txt2 {
        font-size: 14px;
        color: #838383;
    }
   .top .top_two {
      font-weight: 500;
      font-size: 28rpx;
      color: #419FFD;
      margin-right: 36rpx;
   }
    .card_right {
        display: flex;
    }
   .card {
      display: flex;
      align-items: center;
      justify-content: center;
   }
    .card_right1 {
        margin-top: 5px;
        width: 400rpx;
        height: 103rpx;
        display: flex;
        flex-direction: column;
        padding-top: 15rpx;
        padding-left: 5rpx;
    }
   .card_sty {
      margin-top: 10px;
      width: 670rpx;
      height: 150rpx;
      border-radius: 8px 8px 8px 8px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }
    .card_right_txt1 {
        font-size: 14px;
    }
   .card_left {
      width: 120rpx;
      height: 103rpx;
      border-right: 1px solid #ccc;
      display: flex;
      align-items: center;
      flex-direction: column;
   }
    .card_right_txt2 {
        font-size: 14px;
    }
   .card_left_txt1 {
      margin-top: 2px;
      font-size: 14px;
   }
    .card_right_txt3 {
        font-size: 14px;
    }
   .card_left_txt2 {
      font-size: 14px;
      color: #838383;
   }
    .card_right3 {
        margin-left: 110px;
        width: 50rpx;
        height: 150rpx;
        font-size: 14px;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 0px 8px 8px 0px;
        background-color: #fd8b4d;
    }
   .card_right {
      display: flex;
   }
    .card_right2 {
        margin-left: 110px;
        width: 50rpx;
        height: 150rpx;
        font-size: 14px;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 0px 8px 8px 0px;
        background-color: #8b8b8b;
    }
   .card_right1 {
      margin-top: 5px;
      // margin-left: 10px;
      width: 400rpx;
      height: 103rpx;
      display: flex;
      flex-direction: column;
      padding-top: 15rpx;
      padding-left: 5rpx;
   }
    .card_right_txt4 {
        font-size: 12px;
        color: #fff;
        margin-top: 10px;
    }
   .card_right_txt1 {
      font-size: 14px;
   }
    .warm {
        width: 100%;
        color: LightSlateGray;
        position: absolute;
        left: 5%;
        bottom: 2%;
    }
   .card_right_txt2 {
      font-size: 14px;
   }
    .tj {
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: column;
    }
   .card_right_txt3 {
      font-size: 14px;
   }
    .tj1 {
        width: 80%;
        min-height: 100px;
        margin-top: 20px;
        margin-left: 30px;
    }
   .card_right3 {
      margin-left: 110px;
      width: 50rpx;
      height: 150rpx;
      font-size: 14px;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 0px 8px 8px 0px;
      background-color: #fd8b4d;
   }
    .tj2 {
        margin-bottom: 10px;
    }
   .card_right2 {
      margin-left: 110px;
      width: 50rpx;
      height: 150rpx;
      font-size: 14px;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 0px 8px 8px 0px;
      background-color: #8b8b8b;
   }
   .card_right_txt4 {
      font-size: 12px;
      color: #fff;
      margin-top: 10px;
   }
   .warm {
      width: 100%;
      //height: 0;
      color: LightSlateGray;
      /*开启绝对定位*/
      position: absolute;
      left: 5%;
      bottom: 2%;
   }
   .tj {
      width: 100%;
      height: 200px;
      display: flex;
      flex-direction: column;
   }
   .tj1 {
      width: 80%;
      min-height: 100px;
      margin-top: 20px;
      margin-left: 30px;
   }
   .tj2 {
      margin-bottom: 10px;
   }
   .tj3 {
      margin-bottom: 10px;
   }
    .tj3 {
        margin-bottom: 10px;
    }
</style>