receipt-uniapp-240804/pages/search/search.vue

<template>
	<view class="content">
		<view class="title">
			受理凭证查询
		</view>
		<view class="search-bar">
			<view class="search-bar-box">
				<input type="text"
				v-model="userName"
				placeholder="请输入姓名"
				class="search-text"
				focus />
				<button class="search-btn"
				@click="search">搜索</button>
			</view>
		</view>
		
		<!-- <view class="info">
			输入名称，查询驾考受理信息！
		</view> -->
	</view>
</template>

<script>
	import api from '@/plugins/api.js'
	export default {
		data() {
			return {
				userName : '',
				isSearch : false,
			}
		},
		onShow() {
			this.$store.commit('getConfList')
		},
		methods: {
			search(){
				
				if(this.isSearch){
					return
				}
				
				this.isSearch = true
				
				api('getUserInfo', {
					userName : this.userName
				}, res => {
					this.isSearch = false
					if(res.code == 200){
						this.$store.state.info = res.result
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}
				})
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		color: #000;
		line-height: 50rpx;
		padding: 15rpx;
		padding-bottom: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			text-align: center;
			padding: 60rpx 0;
			font-size: 36rpx;
			font-weight: 900;
		}
		
		.info{
			font-size: 26rpx;
			color: #7f7f81;
		}

		// 搜索框
		.search-bar {
			width: 100%;
			height: 100rpx;
			margin-top: 2%;
		}

		.search-bar-box {
			display: flex;
			margin: 0 auto;
			width: 620rpx;
			height: 70rpx;
			border: 5rpx solid #2e64ac;
			border-radius: 50rpx;
			background-color: #fff;
		}

		.search-span {
			width: 100rpx;
			height: 56rpx;
			margin-top: 6rpx;
			margin-left: 30rpx;
		}

		.search-text {
			width: 100%;
			margin-top: 10rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
			color: #7f7f81;
		}

		.search-btn {
			background-color: #2e64ac;
			/* Green */
			color: white;
			text-align: center;
			display: inline-block;
			font-size: 35rpx;
			width: 240rpx;
			height: 70rpx;
			line-height: 65rpx;
			border-radius: 30rpx;
			letter-spacing: 3rpx;
		}

	}
</style>