hldy_xcx/pages/oldmanindex/input.vue

<template>
	<div class="container">
		<view class="title-back">
			<view class="left-father" @click="goBack">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
			</view>
		</view>
		<view class="input-content">
			<view style="display: flex;width: 100%;">
				<view class="blue-shu"></view>
				<view class="blue-font">
					绑定护理单元
				</view>

			</view>
			<view class="saomiao">
				<image class="left-img" src="https://www.focusnu.com/media/directive/index/click.png" />
				<input class="saoma-input" type="number" :password="false" v-model="uuid" placeholder="请手动录入NUID" />
				<image v-show="uuid" class="right-img" src="https://www.focusnu.com/media/directive/index/x.png"
					@click="uuid=''" />
				<view class="blue-button" @click="search">
					确定
				</view>
			</view>
		</view>
		<view class="white-content" v-if="item.nuId">
			<view class="white-title">
				NUID:{{ item.nuId }}
			</view>
			<view class="white-second">
				{{ item.departName }}
			</view>
			<view class="white-center">
				{{ item.nuName }}
				<!-- <image class="center-img" src="https://www.focusnu.com/media/directive/index/sheying.png" /> -->
			</view>
			<view style="display: flex;width: 85%;position: absolute;bottom: 0rpx;">
				<view class="finish-button" v-if="item.nuCanUse==0" @click="goToPay">
					绑定护理单元
				</view>
				<view class="white-button" v-else>
					{{ item.msg }}
				</view>
			</view>
		</view>
	</div>
</template>

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

	const uuid = ref("");

	const goBack = () => {
		uni.navigateBack()
	}
	const item = ref({});

	function isAtLeastTenChars(str) {
		return str.length >= 10;
	}

	const search = () => {
		if (isAtLeastTenChars(uuid.value)) {
			getOrgNuId(uuid.value).then(res0 => {
				if (res0.result) {
					item.value = res0.result
				} else {
					uni.showToast({
						title: '该护理单元不存在',
						icon: 'none', // 不显示对勾图标
						duration: 2000
					});
				}
			})
		} else {
			uni.showToast({
				title: '该护理单元不存在',
				icon: 'none', // 不显示对勾图标
				duration: 2000
			});
		}
	}
	onLoad(() => {
		// item.value = JSON.parse(options.element)
		// console.log("AAAA",JSON.parse(options.element))
	})
	const goToPay = () => {
		uni.setStorageSync('payaccount', item.value);
		uni.navigateTo({
			url: '/pages/oldmanindex/protocol'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: #F7F7F7;
		position: relative;

		.title-back {
			margin-top: 100rpx;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

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

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

			}
		}

		.input-content {
			width: 94%;
			margin-left: 3%;
			height: 300rpx;
			border-radius: 40rpx;
			background-color: #fff;
			position: relative;
			padding: 50rpx;
		}

		.white-content {
			width: 94%;
			margin-left: 3%;
			height: 450rpx;
			border-radius: 50rpx;
			background-color: #fff;
			position: relative;
			padding: 50rpx;
			margin-top: 20rpx;

			.white-title {
				font-size: 32rpx;
			}

			.white-second {
				font-size: 28rpx;
				color: #999999;
				margin-top: 10rpx;
			}

			.white-center {
				margin-top: 50rpx;
				font-size: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 600;

				.center-img {
					width: 45rpx;
					height: 35rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.finish-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60%;
		height: 90rpx;
		margin: 0rpx auto;
		margin-bottom: 50rpx;
		margin-top: 20rpx;
		color: #fff;
		background: linear-gradient(to left, #00C9FF, #0076FF);
		border-radius: 35rpx;
		font-size: 33rpx;
	}

	.white-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60%;
		height: 90rpx;
		margin: 0rpx auto;
		margin-bottom: 50rpx;
		margin-top: 20rpx;
		background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
		border-radius: 35rpx;
		font-size: 33rpx;
	}

	.blue-shu {
		width: 17rpx;
		height: 35rpx;
		border-radius: 17rpx;
		background: linear-gradient(to right, #00C9FF, #0076FF);
		// margin-left: 40rpx;
		margin-right: 20rpx;
	}

	.blue-font {
		font-size: 30rpx;
		color: black;
	}

	.saomiao {
		display: flex;
		background-color: #F2F2F2;
		position: relative;
		border-radius: 30rpx;
		margin-top: 50rpx;
		margin-right: 50rpx;
		width: 450rpx;

		.saoma-input {
			// background-color: #fff;
			width: 550rpx;
			height: 90rpx;
			border-radius: 30rpx;
			padding-left: 100rpx;
			z-index: 1;
		}

		.left-img {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 50%;
			left: 30rpx;
			transform: translateY(-50%);
			z-index: 2;
		}

		.right-img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
			z-index: 2;
		}
	}

	.blue-button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: -180rpx;
		// margin-top: 20rpx;
		// margin-left: 30rpx;
		width: 150rpx;
		height: 80rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
	}
</style>