用u-view写的uni-app常用的表单形式精品分析

首先我们看效果图

<template>
	<view class="container">
		<view class="header ">
			<view class="box">
				<label>姓名</label>
				<text class="color">*</text>
			</view>
			<view class="u-input">
				<input type="text" placeholder="请输入姓名" maxlength="10" placeholder-style="color: #B1B1B1" />
			</view>
		</view>
		<view class="header ">
			<view class="box">
				<label>身份证号</label>
				<text class="color">*</text>
			</view>
			<view class="u-input">
				<input type="text" placeholder="请输入身份证号" maxlength="18" placeholder-style="color: #B1B1B1" />
			</view>
		</view>
		<view class="header ">
			<view class="box">
				<label>手机号</label>
				<text class="color">*</text>
			</view>
			<view class="u-input">
				<input type="text" placeholder="请输入手机号" maxlength="11" placeholder-style="color: #B1B1B1" />
			</view>
		</view>
		<view class="header ">
			<view class="box">
				<label>所在地区</label>
				<text class="color">*</text>
			</view>
			<view class="city" @click="show = true">
				<!-- 通过判断address里面是否有值来判定显示和隐藏 -->
				<text  v-if="address===''?true:false">请选择所在地区</text>
				<text style="color:#333333">{{address}}</text>
				<u-picker v-model="show" mode="region" @confirm="confirm"></u-picker>
			</view>
			<view class="row">
				<image src="../../static/rightrow.png" mode=""></image>
			</view>
		</view>
		<view class="header ">
			<view class="box">
				<label>经营地址</label>
				<text class="color">*</text>
			</view>
			<view class="u-input">
				<input type="text" placeholder="请输入经营地址" placeholder-style="color: #B1B1B1" />
			</view>
		</view>
		<view class="header ">
			<view class="box">
				<label>位置</label>
				<text class="color">*</text>
			</view>
			<view class="u-input">
				<input type="text" placeholder="请选择" />
			</view>
			<view class="row">
				<image src="../../static/rightrow.png" mode=""></image>
			</view>
		</view>
		<view class="header ">
			<view class="box">
				<label>推荐人手机号</label>
			</view>
			<view class="u-input">
				<input type="text" placeholder="请输入推荐人手机号" maxlength="11" placeholder-style="color: #B1B1B1" />
			</view>
		</view>
		<view class="apply">
			<view class="toapply">
				申请成为商户
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				address:'',
			}
		},
		methods: {
			confirm(e) {
				// 点击后获取省市区展现到页面
				this. address=`${e.province.label+e.city.label+e.area.label}`	
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 120rpx;
		padding: 0 32rpx;
		display: flex;
		flex-direction: row;

		.city {
			flex: 1;
			height: 100%;
			line-height: 120rpx;
			text-align: right;
			color: #B1B1B1;
			border-bottom: 1rpx solid #E4E4E4;
		}

		.row {
			position: relative;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			width: 24rpx;
			height: 24rpx;
			font-size: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.box {
			width: 180rpx;
			height: 100%;
			border-bottom: 1rpx solid #E4E4E4;
			line-height: 120rpx;

			label {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 42px;
			}

			.color {
				color: #FC5C56;
			}
		}

		.u-input {
			border-bottom: 1rpx solid #E4E4E4;
			color: #333333;
			flex: 1;
			line-height: 120rpx;
			text-align: right;

			input {
				width: 100%;
				height: 100%;
			}

		}
	}

	.apply {
		width: 100%;
		margin-top: 49rpx;
		height: 90rpx;
		padding: 0 33rpx;
		text-align: center;

		.toapply {
			width: 100%;
			height: 100%;
			background-color: green;
			line-height: 90rpx;
			background-color: #337DFF;
			font-size: 36prx;
			border-radius: 45rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>