vue3_YDHL/pages/patMainPage/patMainPage.vue

<template>
    <view>
		<nav-bar :navbarData="navbarData"></nav-bar>
        <view
            :style="' background-image:url(' + imgDomain + '/images/icon/bg_patients_bg.png)'"
            class="page"
        >
            <view class="main">
                <view class="patinfo">
                    <view class="topinfo">
                        <view class="paticon">
                            <image
                                :src="patInfo.basicInfo.patSexCode === '1' ? imgDomain + '/images/icon/gender-male.png' : imgDomain + '/images/icon/gender-female.png'"
                                class="icon"
                            ></image>
                        </view>
                        <view class="detail">
                            <view class="item">
                                <view class="bedcode">{{ patInfo.admInfo.admBedCode }}</view>
                                <view class="border"></view>
                                <view class="info">{{ patInfo.basicInfo.patName }}</view>
                                <view v-if="patInfo.admInfo.nurseLv === '特级'" class="nurse-lv-css-red">{{ patInfo.admInfo.nurseLv }}</view>
                                <view v-if="patInfo.admInfo.nurseLv === '一级'" class="nurse-lv-css-pink">{{ patInfo.admInfo.nurseLv }}</view>
                                <view v-if="patInfo.admInfo.nurseLv === '二级'" class="nurse-lv-css-blue">{{ patInfo.admInfo.nurseLv }}</view>
                                <view v-if="patInfo.admInfo.nurseLv === '三级'" class="nurse-lv-css-greenyellow">{{ patInfo.admInfo.nurseLv }}</view>
                            </view>
                            <view class="item">
                                <view class="bedcode">{{ patInfo.basicInfo.patSexDesc }}</view>
                                <view class="border"></view>
                                <view class="info">{{ patInfo.basicInfo.patAge }}</view>
                                <view class="border"></view>
                                <view class="info">{{ patInfo.basicInfo.patNo }}</view>
                            </view>
                            <view class="item">
                                <view class="info">入院时间：{{ patInfo.admInfo.admDatetime }}</view>
                            </view>
                        </view>
                        <view class="operation">
                            <image :src="imgDomain + '/images/icon/ydhl_scanBlue.png'" class="custom-icon" @tap="scan" />
                            <!-- <view class="changepat" @tap="changepat">更换患者</view> -->
                        </view>
                    </view>
                    <view class="bottominfo">
                        <view class="feeitem">
                            <view class="top">¥{{ patInfo.admInfo.patBillPatAmt }}</view>
                            <view class="bottom">总费用</view>
                        </view>
                        <view class="feeitem">
                            <view class="top">¥{{ patInfo.admInfo.accDepositIP }}</view>
                            <view class="bottom">预缴定金</view>
                        </view>
                        <view class="feeitem">
                            <view class="top">¥{{ patInfo.admInfo.purposeBlanceIP }}</view>
                            <view class="bottom">余额</view>
                        </view>
                    </view>
                </view>
				<view class="main2">
					<view class="moretitle">
						<view class="title">更多基本信息</view>
						<view class="viewmore" @tap="viewmore">
							<view class="icon">
								{{ moinfoflag ? '收起' : '展开' }}
							</view>
							<view :class="moinfoflag ? 'striangle' : 'ntriangle'"></view>
						</view>
					</view>
					<view v-if="moinfoflag" class="moreinfo">
						<van-row>
							<van-col span="6" class="title">入院诊断：</van-col>
							<van-col span="18" class="value">{{ patInfo.admInfo.admADDDiag }}</van-col>
							<van-col span="6" class="title">电话：</van-col>
							<van-col span="18" class="value">{{ patInfo.basicInfo.patMobile }}</van-col>
							<van-col span="6" class="title">婚姻状况：</van-col>
							<van-col span="18" class="value">{{ patInfo.basicInfo.patMaritalDesc }}</van-col>
							<van-col span="6" class="title">民族：</van-col>
							<van-col span="18" class="value">{{ patInfo.basicInfo.patNationDesc }}</van-col>
							<van-col span="6" class="title">文化程度：</van-col>
							<van-col span="18" class="value">{{ patInfo.basicInfo.patEduDesc }}</van-col>
							<van-col span="6" class="title">职业：</van-col>
							<van-col span="18" class="value">{{ patInfo.basicInfo.patOccupationDesc }}</van-col>
						</van-row>
					</view>
					<view class="nurserecord">
						<view class="toptitle">
							<view class="title">护理记录填写</view>
							<view class="viewmore" @tap="viewnurserecord">
								<view class="icon">
									{{ nurserecordflag ? '收起' : '展开' }}
								</view>
								<view :class="nurserecordflag ? 'striangle' : 'ntriangle'"></view>
							</view>
						</view>
					</view>
					<view v-if="nurserecordflag" class="morenurserecord" :style="{ height: screenHeight-330 + 'px' }">
						<van-row>
							<van-col
								span="8"
								:data-itemdata="item"
								@tap="gotoPage(item)"
								class="function"
								v-for="(item, index) in templateList"
								:key="index"
							>
								<view class="functionitem">
									<view class="functionicon">
										<image :src="imgDomain + '/images/icon/icon_nurse.png'" class="icon"></image>
									</view>
									<view class="functiondesc" :style="`color: ${item.entryedFlag === 'Y' ? '#007AFF' : '#333333'}`">
										{{ item.IEMRTemplateDesc }}
									</view>
								</view>
							</van-col>
						</van-row>
					</view>
				</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { httpconfig } from '../../config/httpconfig';
import { onLoad ,onShow } from '@dcloudio/uni-app';
import { $http } from '../../config/https';
import Util from '../../utils/util.js';
import navBar from '@/pages/components/navbar/index';

// 页面背景样式
let pageback = `
background-size: 100% auto;
background-repeat: no-repeat;
background-image: url(` + httpconfig.imgDomain + `/images/icon/bg_patients_bg.png);
`;

// 响应式数据
const height = ref('');
const navbarData = ref({
  background: '',
  title: '患者主页',
  height: '100',
  bottom: true,
  isGoBack: true,
  isGoHome: true,
  cleanPat: 'Y'
});
const patInfo = ref(uni.getStorageSync('patInfo') || {});
const moinfoflag = ref(false);
const nurserecordflag = ref(true);
const otherfunction = ref(true);
const templateList = ref([]);
const imgDomain = ref(httpconfig.imgDomain);
const screenHeight = ref(0);

// 方法定义
const viewmore = () => {
    moinfoflag.value = !moinfoflag.value;
};

const viewnurserecord = () => {
    nurserecordflag.value = !nurserecordflag.value;
};

const viewotherfunction = () => {
    otherfunction.value = !otherfunction.value;
};

const getTemplateList = () => {
    const patInfoData = uni.getStorageSync('patInfo');
    const userData = uni.getStorageSync('userData');
    const data = {
        params: [
            {
                hospID: userData.hospID,
                admID: patInfoData.admInfo ? patInfoData.admInfo.admID : '',
                useFlag: 'N'
            }
        ]
    };
    
    $http.post('urlDeault',this, {
        code: '10020001',
        data: data,
        success: (res) => {
            templateList.value = res.result.TemplateList;
        }
    });
};

const gotoPage = (e) => {
    const patInfoData = uni.getStorageSync('patInfo');
    if (!patInfoData) {
        uni.showModal({
            title: '提示',
            content: '无患者信息，请先扫描患者腕带或选择患者！！！',
            showCancel: false,
            confirmText: '知道了'
        });
        return;
    }
    const templateID = e.id;
	uni.navigateTo({
		url: `../nurseRecordList/nurseRecordList?templateID=${templateID}&title=${e.IEMRTemplateDesc}列表&single=${e.single}`
	});
};

const changepat = () => {
    uni.navigateTo({
        url: '../wardPatList/wardPatList'
    });
};

const scan = () => {
    uni.scanCode({
        success(res) {
            Util.getPatInfoNew(res.result, (newPatInfo) => {
                patInfo.value = newPatInfo;
                getTemplateList();
            });
        }
    });
};

const onBackPress = () => {
    // 返回事件处理
};

onShow(() => {
  try {
    const pages = getCurrentPages()
    if (pages.length > 0) {
      const currentPage = pages[pages.length - 1]
      const currentRoute = currentPage.route // 当前页面路由
      // 更新全局变量
      if (uni.$appGlobal) {
        uni.$appGlobal.globalData.value.currentRoute = currentRoute
      }
    }
  } catch (err) {
    console.error('更新当前路由失败：', err)
  }
})

onMounted(() => {
	// 获取系统信息
	  const systemInfo = uni.getSystemInfoSync()
	  // 屏幕高度（包含状态栏、导航栏等，即整个屏幕的高度）
	  // screenHeight.value = systemInfo.screenHeight
	  // 可选：获取可使用窗口高度（不含导航栏/底部安全区，适合布局）
	  screenHeight.value = systemInfo.windowHeight
	
    if (!imgDomain.value) {
        imgDomain.value = uni.getStorageSync('appUrlAddress');
    }
    
    patInfo.value = uni.getStorageSync('patInfo') || {};
    getTemplateList();
});

onUnmounted(() => {
    // 页面卸载时执行
});

// 下拉刷新
const onPullDownRefresh = () => {
    // 下拉刷新处理
};

// 上拉触底
const onReachBottom = () => {
    // 上拉触底处理
};

// 分享
const onShareAppMessage = () => {
    // 分享处理
};

// 暴露需要在模板中使用的方法
defineExpose({
    onBackPress,
    onPullDownRefresh,
    onReachBottom,
    onShareAppMessage
});
</script>

<style>
/* 样式部分保持不变 */
.page {
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.main {
    height: calc(100% - 28rpx);
    width: 100%;
    padding-top: 28rpx;
}
.main2{
	overflow: auto;
	height: calc(100% - 28rpx);
}
.patinfo {
    width: calc(100% - 60rpx);
    height: 338rpx;
    background: #fff;
    margin: 0 30rpx;
    border-radius: 8rpx;
    box-shadow: 0px 2px 21px 0px rgba(198, 198, 198, 0.3);
}

.patinfo .topinfo {
    display: flex;
    flex-direction: row;
    width: calc(100% - 22rpx);
    height: 168rpx;
    padding: 0 11rpx;
    border-bottom: 1px dashed #ccc;
}

.topinfo .paticon {
    width: 100rpx;
    height: 100rpx;
    padding: 29rpx 0;
}

.topinfo .detail {
    width: calc(100% - 270rpx);
    padding: 14rpx 10rpx;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

.detail .item {
    display: flex;
    flex-direction: row;
    line-height: 46rpx;
    height: 46rpx;
    width: 100%;
    display: flex;
}

.item .border {
    border: 1rpx solid #e5e5e5;
    margin: 10rpx 10rpx;
    width: 0px;
    height: 28rpx;
    line-height: 46rpx;
}
.item .bedcode {
    width: 60rpx;
}
.item .info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nurse-lv-css-red {
    background-color: red;
    color: #fff;
    border-radius: 4rpx;
    padding: 0rpx 18rpx;
    font-size: 20rpx;
    width: 50rpx;
    margin-left: 20rpx;
}
.nurse-lv-css-pink {
    background-color: pink;
    color: #fff;
    border-radius: 4rpx;
    padding: 0rpx 18rpx;
    font-size: 20rpx;
    width: 50rpx;
    margin-left: 20rpx;
}
.nurse-lv-css-greenyellow {
    background-color: rgb(93, 187, 93);
    color: #fff;
    border-radius: 4rpx;
    padding: 0rpx 18rpx;
    font-size: 20rpx;
    width: 50rpx;
    margin-left: 20rpx;
}
.nurse-lv-css-blue {
    background-color: #007aff;
    color: #fff;
	border-radius: 4rpx;
    padding: 0rpx 18rpx;
    font-size: 20rpx;
    width: 50rpx;
    margin-left: 20rpx;
}

.topinfo .operation {
    width: 160rpx;
    height: 140rpx;
    padding: 14rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.operation .custom-icon {
    width: 60rpx;
    height: 60rpx;
    text-align: right;
}

.operation .changepat {
    width: 150rpx;
    height: 50rpx;
    background: #007aff;
    border-radius: 4px;
    color: #fff;
    line-height: 50rpx;
    border-radius: 8rpx;
    text-align: center;
    margin-top: 20rpx;
    align-self: center;
}

.patinfo .bottominfo {
    display: flex;
    flex-direction: row;
    height: 170rpx;
    width: 100%;
}

.bottominfo .feeitem {
    width: 33.33%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.feeitem .top {
    height: 85rpx;
    line-height: 46rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #007aff;
    padding-top: 50rpx;
}

.feeitem .bottom {
    height: 105rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
}

.paticon .icon {
    width: 100rpx;
    height: 100rpx;
}

.moretitle {
    width: calc(100% - 56rpx);
    margin: 0 28rpx;
    height: 46rpx;
    font-size: 15px;
    border-left: 8rpx solid #007aff;
    font-weight: 400;
    color: #333333;
    line-height: 42rpx;
    margin-top: 44rpx;
    margin-bottom: 24rpx;
}

.nurserecord {
    width: calc(100% - 56rpx);
    margin: 0 28rpx;
    height: 46rpx;
    font-size: 15px;
    border-left: 8rpx solid #007aff;
    font-weight: 400;
    color: #333333;
    line-height: 42rpx;
    margin-top: 44rpx;
    margin-bottom: 24rpx;
}
.morenurserecord {
    margin: 0 28rpx;
    font-size: 15px;
    font-weight: 400;
    color: #333333;
}
.toptitle {
    height: 46rpx;
    margin-bottom: 24rpx;
}

.toptitle .icon {
    float: right;
    padding-left: 14rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #007aff;
}

.toptitle .title {
    font-size: 17px;
    font-weight: bold;
    color: #333333;
    line-height: 23px;
    padding-left: 6rpx;
    float: left;
}

.moretitle .title {
    font-size: 17px;
    font-weight: bold;
    color: #333333;
    line-height: 23px;
    padding-left: 6rpx;
    float: left;
}

.moretitle .title1 {
    font-size: 17px;
    font-weight: 400;
    color: #333333;
    line-height: 23px;
    padding-left: 6rpx;
    padding-bottom: 32rpx;
}

.viewmore {
    float: right;
}

/*倒三角*/
.striangle {
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-top: 8px solid #007aff;
    float: right;
    margin-top: 12rpx;
}

/*正三角*/
.ntriangle {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid #007aff;
    float: right;
    margin-top: 12rpx;
}

.moretitle .icon {
    float: right;
    padding-left: 14rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #007aff;
}

.moreinfo {
    padding: 0 34rpx;
    line-height: 50rpx;
}

.moreinfo .van-col {
    min-height: 50rpx;
}

.moreinfo .title {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
    text-align: right;
}

.moreinfo .value {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    text-align: left;
}

.function {
    height: 160rpx;
}

.function .functionitem {
    width: 100%;
    line-height: 66rpx;
    display: flex;
    flex-direction: column;
    min-height: 160rpx;
    height: 160rpx;
    margin-bottom: 10rpx;
}

.functionitem .functionicon {
    width: 100%;
    height: 66rpx;
    text-align: center;
}

.functionicon .icon {
    width: 60rpx;
    height: 60rpx;
    float: none;
}

.functionitem .functiondesc {
    width: 60%;
    line-height: 40rpx;
    text-align: center;
    font-size: 26rpx;
    font-weight: 400;
    color: #333333;
    padding: 11rpx 20%;
}
</style>