houserent-front/pages_subpack/realname/index.vue

<template>
	<view class="se-p-30">
		<uv-form labelPosition="top" :labelWidth="200" :model="form" :rules="rules" ref="form">
			<uv-form-item label="姓名" prop="name" >
				<uv-input v-model="form.name" type="text" placeholder="请输入姓名" customStyle="border-radius: 30px;margin-top:5px;background-color: #ffffff;padding:5px 20px;" border="none"></uv-input>
			</uv-form-item>
			<uv-form-item label="身份证号码" prop="idcard">
				<uv-input v-model="form.idcard" type="text" placeholder="请输入身份证号码" customStyle="border-radius: 30px;margin-top:5px;background-color: #ffffff;padding:5px 20px;" border="none"></uv-input>
			</uv-form-item>
			<uv-form-item label="联系方式" prop="phone">
				<uv-input v-model="form.phone" type="number" placeholder="请输入联系方式" customStyle="border-radius: 30px;margin-top:5px;background-color: #ffffff;padding:5px 20px;" border="none"></uv-input>
			</uv-form-item>
			<uv-form-item>
				<view class="se-flex se-flex-v">
					<text class="se-c-black se-fw-6 se-fs-30">请上传身份证正反面照片</text>
					<text class="se-fs-26 se-mt-10 se-c-text">信息仅用身份核实，上传后可增加曝光机会</text>
				</view>
				<view class="se-my-20 se-p-20 se-flex se-flex-h-sa se-br-10" style="background: #f9f1e9;">
					<image class="se-w-350 se-h-240" src="@/static/image/47719x.png" mode=""></image>
					<view class="se-br-10 se-py-10 se-px-20 se-c-white se-bgc-orange" style="background-color: #FF9F39;">
						点击上传
					</view>
				</view>
				<view class="se-c-text-sub se-ta-c se-fs-24">
					(确保文字清晰、可辨、避免遮挡、不全、反光)
				</view>
				<view class="se-my-20 se-p-20 se-flex se-flex-h-sa se-br-10" style="background: #f9f1e9;">
					<image class="se-w-350 se-h-240" src="@/static/image/47719x.png" mode=""></image>
					<view class="se-br-10 se-py-10 se-px-20 se-c-white se-bgc-orange" style="background-color: #FF9F39;">
						点击上传
					</view>
				</view>
			</uv-form-item>
			<uv-form-item>
				<uv-button type="primary" text="申请" customStyle="margin-top: 10px;border-color: #FF9F39;background-color: #FF9F39;border-radius: 30px;" @click="submit"></uv-button>
			</uv-form-item>
		</uv-form>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				form:{
					name:"",
					idcard:"",
					phone:""
				},
				rules:{
					name:[
						{
							type: 'string',
							required: true,
							message: '请输入姓名',
							trigger: ['blur', 'change']
						}
					],
					idcard:[
						{
							type: 'string',
							required: true,
							message: '请输入身份证号码',
							trigger: ['blur', 'change']
						}
					],
					phone:[
						{
							type: 'string',
							required: true,
							message: '请输入联系方式',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		methods:{
			submit() {
				uni.navigateTo({
					url:"/pages_subpack/successful/index"
				})
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'none',
						title: '校验通过'
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'none',
						title: '校验失败'
					})
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
		
	}
</style>