LuanPingXianYY/滦平县报告对比/pages/main/home/home.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年4月5日 09:56:26
	 */
	import {
		ref
	} from 'vue'
	import {
		ReportListAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const $props = defineProps({
		hospital: {
			type: String,
			default: ''
		},
	});
	const id_number = ref('')
	const phone=ref('')
	const GetReportList = async () => {
		uni.showLoading({
			title:'加载中...'
		})
		const data={
			id_number:id_number.value,
			phone:phone.value
		}
		console.log(data)
		const response = await ReportListAction(data)
		uni.hideLoading()
		$response(response, () => { 
			if( response.data.list?.length>0){
				uni.navigateTo({
					url: `/pages/main/list/list?hospital=4&id_number=${id_number.value}&phone=${phone.value}`
				})
			}else{
				uni.$lu.toast("暂无报告");
			}
		})
	}
	const toPage = () => {
		if(id_number.value.length===0 || phone.value.length===0){
			uni.$lu.toast("请输入身份证和电话");
			return false;
		}
	 
		GetReportList()
	}
	onShow(()=>{
		uni.navigateTo({
			url: `/pages/main/home/home?hospital=4`
		})
	})
</script>
<template>
	<view style=" background-color: #fff;height: 100vh;"  class="gradient-box gradient-2">
	<!-- 	<view class="title_wrapper">身份证号</view>
		<view class="input_wrapper">
			<input type="text" v-model="id_number">
		</view>
		<view class="title_wrapper" style="margin-top: 10rpx;">手机号</view>
		<view class="input_wrapper">
			<input type="tel" v-model="phone">
		</view>
		<view @click="toPage()" class="top_button_wrapper top_button1_wrapper">
			<view class="top_button_icon_wrapper">
				<image :src="$image('/storage/assets/report/home/报告对比@2x.png')"></image>
			</view>
			<view class="top_button_text_wrapper">查看报告</view>
		</view> -->
		<view style="height: 5%;"> </view>
		<view style="display: flex;justify-content: center; margin-bottom: -30rpx;">
			<image src="../../../static/yy_logo.png" mode="aspectFit"></image>
		</view>
		<view class="info">
			<view class="tip">请输入您的身份证和电话号码</view>
			<view class="label">身份证</view>
			<view>
				<input v-model="id_number" placeholder="请输入身份证" />
			</view>
		
			<view class="label">电话</view>
			<view>
				<input v-model="phone" placeholder="请输入电话" />
			</view>
		
			<view @click="toPage()" class="top_button_wrapper top_button1_wrapper">
				<view class="top_button_icon_wrapper">
					<image :src="$image('/storage/assets/report/home/报告对比@2x.png')"></image>
				</view>
				<view class="top_button_text_wrapper">查看报告</view>
			</view>
		</view>
		<view class="decor decor-1 circle"></view>
		<view class="decor decor-2 square"></view>
	</view>
</template>
<style scoped>
	 .gradient-box {
	            height: 250px;
	            border-radius: 12px;
	            position: relative;
	            overflow: hidden;
	            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	        }
	.decor {
	            
	            opacity: 0.15;
	        }
	 .gradient-2 {
		  background: radial-gradient(at top right, #94f0e6, #cce5e5, #d5f0f0);
	            /* background: linear-gradient(to right, #94f0e6 0%, #d5f0f0 100%); */
	            
	        }
	        
	        .gradient-2 .decor-1 {
	            width: 200px;
	            height: 200px;
	            top: -80px;
	            right: -50px;
	            background: #fff;
	        }
	        
	        .gradient-2 .decor-2 {
	            width: 120px;
	            height: 120px;
	            top: 200px;
	            left: 100px;
	            background: #fff;
	        }
			.circle {
			            border-radius: 50%;
			        }
			        
			        .square {
			            transform: rotate(45deg);
			        }
	
	.title_wrapper {
		font-size: 30rpx;
		margin: 60rpx 40rpx 20rpx;
	}

	.input_wrapper input {
		width: 600rpx;
		height: 84rpx;
		line-height: 84rpx;
		font-size: 40rpx;
		text-align: center;
	}

	.input_wrapper {
		padding: 0 30rpx;
		width: 600rpx;
		height: 84rpx;
		border-radius: 8rpx;
		align-items: center;
		margin: 20rpx auto 0;
		background: #ffffff;
		border: 1px solid #16C5A9;
	}

	.top_button_text_wrapper {
		font-size: 32rpx;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 1;
		margin-left: 18rpx;
	}

	.top_button_icon_wrapper image {
		width: 68rpx;
		height: 68rpx;
		display: block;
	}

	.top_button_icon_wrapper {
		width: 68rpx;
		height: 68rpx;
	}

	.top_button1_wrapper {
		background: #16C5A9;
	}

	.top_button_wrapper {
		width: 310rpx;
		height: 84rpx;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40rpx auto 0;
	}

	.top_button_group_wrapper {
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tip {
		font-size: 28rpx;
		color: #33cdc9;
		font-weight: 500;
	}
	.info {
		border: 1px solid #c5f0f9;
		border-radius: 30rpx;
		background-color: #fff;
		padding: 40rpx 40rpx;
		margin: 0rpx 20rpx;
		 
	
	}
	
	.info input {
		border-bottom: 1rpx solid #33cdc9;
		padding: 10rpx;
		
	}
	
	.info .label {
		font-size: 33rpx;
		color: #3f3f3f;
		font-weight: 700;
		margin: 30rpx auto 10rpx auto;
	}
	
	.button {
		width: 100%;
		background-color: #33cdc9;
		border: 0rpx;
		margin-top: 40rpx;
	}
</style>