hjt_erdao_WeChatApplet/pages/manage/account/retrieval.vue

<template>
	<view class="main main-bg">
		<view class="header">
			<u-form :model="form" ref="uForm" :rules="rules">
				<u-form-item 
					label="姓名"
					label-width="180" 
					:label-position="labelPosition"
					>
					<u-input 
						v-model="form.veteransName" 
						placeholder-style="color: #2E4F1C;"
						placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item
					label="电话"
					label-width="180" 
					:label-position="labelPosition"
					>
					<view class="form-item">
						<u-input 
							v-model="form.veteransTel" 
							placeholder-style="color: #2E4F1C;"
							placeholder="请输入电话" />
					</view>
				</u-form-item>
				<u-form-item
					label="身份证号"
					label-width="180" 
					:label-position="labelPosition"
					>
					<view class="form-item">
						<u-input 
							v-model="form.veteransIdcard" 
							placeholder-style="color: #2E4F1C;"
							placeholder="请输入身份证号" />
					</view>
				</u-form-item>
				<u-form-item
					label="家庭住址"
					label-width="180" 
					:label-position="labelPosition"
					>
					<view class="form-item">
						<u-input 
							v-model="form.address" 
							placeholder-style="color: #2E4F1C;"
							placeholder="请输入家庭住址" />
					</view>
				</u-form-item>
			</u-form>
			<view @click="submit" class="form-submit">确认</view>
		</view>
		<!-- <view class="footer" v-if="list.length> 0">
			<view class="item" v-for="(item,index) in list" @click="handleMap(item.veteransId)">
				<view class="item-header">
					<view class="font-color2">{{ item.veteransName }}</view>
					<view class="font-color2">{{ item.veteransIdcard ? change(item.veteransIdcard) : '-' }}</view>
				</view>
				<view  class="font-color2">地址: {{ item.address ? item.address : '-' }} </view>
			</view>
		</view>
		<view class="footer" v-else>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import server from "@/api/index";
	export default {
		data() {
			return {
				labelPosition: 'left',
				list: [],
				form: {
					veteransName: '',
					veteransTel: '',
					veteransIdcard: '',
					address: '',
				},
			}
		},
		onLoad() {
		},
		methods:{
			submit() {
				let _this = this;
				console.log(this.form)
				if(this.form.veteransName || this.form.veteransTel || this.form.veteransIdcard || this.form.address){
					uni.navigateTo({
						url: '/pages/manage/account/map?name=' + this.form.veteransName + '&tel=' + this.form.veteransTel + '&idCard=' + this.form.veteransIdcard + '&address=' + this.form.address
					})
				}else{
					_this.$refs.uToast.show({
						title: '请输入查询条件!',
						type: 'default',
					});
				}
				// server.getInfoList(this.form).then(res =>{
				// 	this.list = res
				// })
			},
			// handleMap(id){
			// 	uni.navigateTo({
			// 		url: '/pages/manage/account/map?id=' + id
			// 	})
			// },
			change(name){
				let mystr = name.substring(0,6)+'****'+name.substring(10);
				return mystr
			},
		},
	}
</script>
<style lang="scss" scoped>
	/deep/ .u-list-item{
		margin: 0rpx 0rpx 0rpx 16rpx!important;
	}
	/deep/ .u-icon__icon{
		position: relative;
		// color: #2E4F1C!important;
		// color: #FFFFFF!important;
	}
	/deep/ .u-form-item__message{
		padding-right: 0rpx!important;
		text-align: right;
	}
	/deep/ .u-input__input{
		color: #2E4F1C!important;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: right;
	}
	/deep/ .u-border, .u-border-bottom, .u-border-left, .u-border-right, .u-border-top, .u-border-top-bottom{
		
	}
	/deep/ .u-form-item{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		box-sizing: border-box;
		line-height: 80rpx;
		-webkit-flex-direction: column;
		flex-direction: column;
		background: rgba(46, 79, 28, 0.13);
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		padding-left: 30rpx!important;
		padding-right: 30rpx!important;
	}
	.main{
		width: 100%;
		height: 100vh;
		min-height: 100vh;
		padding: 30rpx 30rpx 30rpx;
		.header{
			width: 100%;
			height: 640rpx;
		}
		// .footer{
		// 	width: 100%;
		// 	height: calc(100% - 640rpx);
		// 	overflow: auto;
		// 	.item{
		// 		width: 100%;
		// 		height: auto;
		// 		margin-bottom: 30rpx;
		// 		padding: 20rpx;
		// 		background: rgba(255,255,255, 1);
		// 		border-radius: 16rpx;
		// 		.item-header{
		// 			display: flex;
		// 			justify-content: space-between;
		// 			padding-bottom: 15rpx;
		// 		}
		// 	}
		// }
		.form-submit{
			margin: 30rpx auto;
			width: 570rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: #2E4F1C;
			border-radius: 49rpx;
			font-size: 36rpx;
			text-align: center;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}	
</style>