hldy_xcx/pages/login/threeselectone.vue

<template>
	<view class="login-container">
		<image class="photo-imge" src="https://www.focusnu.com/media/directive/index/indexgif.gif" mode="widthFix"
			lazy-load="false" />
		<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}" v-if="back">
			<view class="left-father" @click="goBack">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
			</view>
		</view>
		<view :style="{height:`${uni.getStorageSync('moveHeight') + 30}px`}" v-if="back"></view>
		<view class="card" :style="back?{marginTop:`100rpx`}:{marginTop:`400rpx`} " @click="oldmanhowtojump">
			<view class="card-left">
				<view class="card-weight">
					长者入住
				</view>
				<view class="card-text">
					护理单元日常护理涵盖生活照料、健康监测、康复护理及心理关怀，为长者提供贴心照护服务。
				</view>
				<view style="display: flex;">
					<view class="white-button">
						长者进入
					</view>
				</view>
			</view>
			<view class="card-right">
				<image class="right-imge" src="https://www.focusnu.com/media/directive/login/old.png" />
			</view>
		</view>
		<view class="card" @click="yuangonghowtojump">
			<view class="card-left">
				<view class="card-weight">
					员工入驻
				</view>
				<view class="card-text">
					护理员严格按标准流程，定时为失能长者开展床旁照护，用专业与温情守护长者生活与健康。
				</view>
				<view style="display: flex;">
					<view class="white-button">
						员工进入
					</view>
				</view>
			</view>
			<view class="card-right">
				<image class="right-imge" src="https://www.focusnu.com/media/directive/login/yuangong.png" />
			</view>
		</view>
		<view class="card" style="height: 340rpx;" @click="jigouhowtojump">
			<view class="card-left">
				<view class="card-weight">
					机构加盟
				</view>
				<view class="card-text">
					加盟我们，共享银发经济红利！依托成熟运营体系，标准化服务流程降低人力成本及管理开支，背靠品牌资源，助力企业快速实现营收增长。
				</view>
				<view style="display: flex;">
					<view class="white-button">
						进入机构
					</view>
				</view>

			</view>
			<view class="card-right">
				<image class="right-imge" src="https://www.focusnu.com/media/directive/login/gongsi.png"
					@click="ceshi" />
			</view>
		</view>
		<view class="card" @click="supplierhowtojump">
			<view class="card-left">
				<view class="card-weight">
					供应商入驻
				</view>
				<view class="card-text">
					欢迎优质护理机构与我们合作，共同为长者提供安全、专业、温暖的护理服务。支持线上展示、服务预约、结算对接与质检监管。
				</view>
				<view style="display: flex;">
					<view class="white-button">
						供应商进入
					</view>
				</view>
			</view>
			<view class="card-right">
				<image class="right-imge" src="https://www.focusnu.com/media/directive/login/supplier.png" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		changePerson
	} from '@/api/loginApi.js'

	const itemTarget = ref(0);
	const fontArray = ["护理院日常护理涵盖生活照料、健康监测、康复护理及心理关怀，为长者提供贴心照护。", "护理员日常为长者提供饮食起居照料、协助康复训练监测健康状况，陪伴交流并做好环境清洁。",
		"护理员日常为长者提供饮食起居照料、协助康复训练监测健康状况，陪伴交流并做好环境清洁。"
	]
	const jigouhowtojump = () => {
		changePerson(3).then(res => {
			if (res.success) {
				jumpToindex()
			}
		})
	}

	const yuangonghowtojump = () => {
		changePerson(2).then(res => {
			if (res.success) {
				jumpToYuangongindex()
			}
		})
	}
	
	const supplierhowtojump = () => {
		
		changePerson(4).then(res => {
			if (res.success) {
				jumpTosupplierindex()
			}
		})
	}
	const jumpTosupplierindex = () => {
		uni.reLaunch({
			url: `/pages/supplierindex/index`
		});
	}
	const changePhoto = (index) => {
		itemTarget.value = index;
	}
	const goBack = () => {
		uni.navigateBack()
	}
	const ceshi = () => {
		// uni.navigateTo({
		// 	url: `/pages/login/index`
		// });
	}

	const jumpToindex = () => {
		uni.reLaunch({
			url: `/pages/index/index`
		});
	}
	const jumpToYuangongindex = () => {
		uni.reLaunch({
			url: `/pages/yuangongindex/index`
		});
	}
	const oldmanhowtojump = () => {
		changePerson(1).then(res => {
			if (res.success) {
				uni.reLaunch({
					url: `/pages/oldmanindex/index`
				});
			}
		})

	}
	const gotowork = (number) => {
		uni.navigateTo({
			url: `/pages/login/workjoin?type=${number}`
		});
	}

	const phone = ref("")

	const back = ref(false)
	onLoad((param) => {
		if(param?.back){
			back.value=true
		}
		phone.value = uni.getStorageSync('tel');
	})
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: rgb(239, 241, 252);
		position: relative;

		.photo-imge {
			position: absolute;
			top: 0rpx;
			left: 0;
			width: 100%;
			height: 1100rpx;

		}

		.old-imge {
			position: absolute;
			right: 30rpx;
			top: 400rpx;
			width: 400rpx;
			height: 400rpx;
		}
	}

	.card {
		z-index: 1;
		margin-top: 30rpx;
		width: 92%;
		margin-left: 4%;
		height: 300rpx;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		position: relative;

		.card-left {
			height: 100%;
			width: 80%;
			padding-left: 50rpx;
			padding-right: 20rpx;

			.card-weight {
				font-size: 32rpx;
				font-weight: 600;
				margin-top: 35rpx;
				margin-bottom: 10rpx;
			}

			.card-text {
				color: #999999;
				font-size: 25rpx;

			}


		}

		.card-right {
			height: 100%;
			width: 20%;

			.right-imge {
				width: 100rpx;
				height: 100rpx;
				margin-top: 50rpx;
				margin-left: 5rpx;
			}
		}
	}

	.title-back {
		background-color: #F7F7F7;
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #cbd1d2;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.left-father {
		display: flex;
		align-items: center;
		z-index: 1;

		.back-img {
			width: 45rpx;
			height: 40rpx;
			margin-left: 40rpx;
			margin-right: 15rpx;
		}
	}

	.white-button {
		position: absolute;
		bottom: 35rpx;
		right: 35rpx;
		width: 180rpx;
		height: 65rpx;
		margin-top: 15rpx;
		background-color: #f6f6f6;
		border-radius: 30rpx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>