com.kasite.client.uniapp.patient/pagesPersonal/st1/components/userInfo/userInfo.vue

<template>
	<view :class="['userInfoCard', 'initial', bgClass]">
		<view class="userInfo_box displayFlexRow">
			<view class="userInfo_left_box displayFlexCol">
				<view class="">
					<text>{{ userInfo.memberName }}</text>
					<text>{{ userInfo.sex == '1' ? '男' : userInfo.sex == '2' ? '女' : '未知' }} {{ userInfo.age }}岁</text>
				</view>
				<text v-if="type == 'member'">手机号： {{ userInfo.mobile || "--" }}</text>
				<text class="ellipsis" v-if="type != 'member'">{{ userInfo.cardType == '14' ? "住院号" : "就诊卡" }}
					{{ userInfo.cardNo || "--" }}</text>
			</view>
			<view v-if="showBtn" class="userInfo_right_box displayFlexRow" @click="jumpChoiseVisitingCard">
				<text v-if="type == 'member'">换个就诊人</text>
				<text v-if="userInfo.cardType == '1' && type == 'card'">换个就诊卡</text>
				<text v-if="userInfo.cardType == '14' && type == 'hospital'">换个住院号</text>
				<image class="arrow" :src="iconUrl.icon_rightWhite"></image>
			</view>
		</view>
		<image class="userInfo_bg_icon" :src="iconUrl.userInfo_bg"></image>
	</view>
</template>

<script lang="ts" setup>
import { common } from '@/utils';
import icon from '@/utils/icon';

const props = withDefaults(defineProps<{
    bgClass?: string;
    pageType?: string;
    userInfo?: any;
    showBtn?: boolean;
    type?: string;
}>(), {
    bgClass: 'bgWhite',
    pageType: '1',
    userInfo: () => ({}),
    showBtn: true,
    type: 'card'
});

const iconUrl = ref(icon)

// 选择就诊卡
const jumpChoiseVisitingCard = () => {
    let type = props.type;
    common.goToUrl(`/pagesPersonal/st1/business/patientManagement/selecteCardOrHos/selecteCardOrHos?type=${type}&fromComponent=true`);
}
</script>

<style lang="scss" scoped>
/* 通用 */
.arrow {
	width: 14upx;
	height: 24upx;
	margin-right: 0;
}

.displayFlexRow {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.displayFlexCol {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* 普通 */

.initial.userInfoCard {
	padding: 30upx;
	padding-bottom: 0;
	box-sizing: border-box;
	position: relative;
}

.initial .userInfo_box {
	width: 100%;
	height: 194upx;
	padding: 30upx;
	padding-bottom: 0;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: flex-end;
	position: absolute;
	top: 0;
	left: 0;
}

.initial .userInfo_box text {
	color: white;
}

.initial .userInfo_left_box {
	width: 59%;
	height: 100%;
	font-size: 30upx;
	padding-left: 30upx;
	align-items: flex-start;
}

.initial .userInfo_left_box view {
	margin-bottom: 28upx;
}

.initial .userInfo_left_box view text {
	font-size: 28upx;
	opacity: 0.6;
}

.initial .userInfo_left_box view text:nth-child(1) {
	font-size: 36upx;
	font-weight: bold;
	margin-right: 16upx;
	opacity: 1;
}

.initial .userInfo_right_box {
	width: 35%;
	height: 67%;
}

.initial .userInfo_right_box text {
	font-size: 30upx;
	font-weight: bold;
}

.initial .userInfo_right_box image {
	margin-left: 20upx;
}

.initial .userInfo_bg_icon {
	width: 100%;
	height: 164upx;
}

.bgWhite {
	background: #fff !important;
}

.bgLinGra {
	background: linear-gradient(180deg, #FFFFFF 0%, #F1F1F6 100%) !important;
}
</style>