houserent-front/pages_subpack/broker-apply/index.vue

<template>
	<view class="se-p-40 se-bgc-white">
		<uv-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="60" labelStyle="font-size:26rpx;">
			<uv-form-item label="姓名" prop="name" >
				<uv-input v-model="form.name" type="text" placeholder="请输入请输入真实姓名" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
			</uv-form-item>
			<uv-form-item label="手机号" prop="phone">
				<uv-input v-model="form.phone" type="text" placeholder="请输入手机号码" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
			</uv-form-item>
			<uv-form-item label="从业年限" prop="seniority">
				<uv-input v-model="form.seniority" type="text" placeholder="请输入从业年限" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
			</uv-form-item>
			<uv-form-item label="标签" prop="tag">
				<uv-input v-model="form.tag" type="text" placeholder="多个标签用空格隔开" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
			</uv-form-item>
			<uv-form-item label="主营地区" prop="address" @click="handleAreaChange()">
				<uv-input v-model="form.address" @click="handleAreaChange()" disabled disabledColor="#ffffff" placeholder="请选择所在地区" border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="所属门店" prop="shop" @click="handleshopChange()">
				<uv-input v-model="form.shop" @click="handleshopChange()" disabled disabledColor="#ffffff" placeholder="请选择所属门店" border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			
			<uv-form-item label="头像" labelWidth="250" prop="isheadImg" labelPosition="top">
				<uv-upload customStyle="margin-top:20rpx;" :fileList="form.headImgList" @afterRead="afterheadImgRead" @delete="deleteOwnershipPic" name="1"
					multiple :maxCount="10"></uv-upload>
			</uv-form-item>
			<uv-form-item label="身份证,工作证件" labelWidth="250" prop="isPicList" labelPosition="top">
				<uv-upload customStyle="margin-top:20rpx;" :fileList="form.picList" @afterRead="afterRead" @delete="deletePic" name="1"
					multiple :maxCount="10"></uv-upload>
			</uv-form-item>
			<uv-form-item  labelPosition="top">
				<uv-checkbox-group  @change="checkboxChange" v-model="checked">
					<uv-checkbox name="1" activeColor="#FF9F39" label-size="12" shape="circle" label="我已经阅读并了解"></uv-checkbox>
					<text class="se-c-orange" @click="open()">《经纪人申请协议》</text>
				</uv-checkbox-group>
			</uv-form-item>
			<uv-form-item>
				<uv-button type="primary" text="申请成为经纪人" customStyle="margin-top: 30px;border:1rpx solid #FF9F39;background-color: #FF9F39;border-radius: 30px;" @click="submit"></uv-button>
			</uv-form-item>
		</uv-form>
		<!-- 地址 -->
		<citySelect ref="citySelectRef" :zIndex="0" @city-change="handleCityChange"></citySelect>
		<uv-popup ref="popup" :round="20"  mode="center" bg-color="transparent" :close-on-click-overlay="false">
			<view class="se-w-600  se-bgc-white se-br-40 se-p-40">
				<!-- <view class="se-flex se-flex-h-c">
					<image class="se-a-80" src="@/static/image/6588.png" mode=""></image>
				</view> -->
				<view class="se-flex se-flex-h-c se-fs-34 se-fw-6 se-c-black se-mt-40">
					经纪人申请协议
				</view>
				<view class="se-lh-40 se-mt-40 se-fs-24 se-c-99">
					<text>请您务必审慎阅读、充分理解用户协议和隐私政策各条款，包括但不限于用户注意事项、用户行为规范以及为了向你提供服务而收集、使用、存储你个人信息的情况等。你可阅读</text>
					<text class="se-c-black se-fw-6" @click="handleOpenPrivacyContract()">《租房小程序用户服务协议》</text>
					<text>和</text>
					<text class="se-c-black se-fw-6" @click="handleOpenPrivacyContract()">《租房小程序平台隐私权政策》</text>
					<text>了解详细信息。如你同意，请点击下方按钮开始接受我们的服务。</text>
				</view>
				<view class="se-flex se-flex-h-sb se-mt-40">
					<view @click="onCancel" class="se-br-20 se-flex-1 se-flex-h-c se-h-80 se-lh-80 se-ta-c se-fs-32 se-c-66 se-bgc-f5">
						<text>不同意</text>
					</view>
					<view @click="onAgree" class="se-br-20 se-ml-20 se-flex-1 se-flex-h-c se-h-80 se-lh-80 se-ta-c se-fs-32 se-c-white se-bgc-orange">
						<text class="se-ml-10">同意</text>
					</view>
				</view>
			</view>
			</uv-popup>
	</view>
</template>

<script>
	import citySelect from "@/components/cityselect/index.vue"
	export default{
		components:{
			citySelect
		},
		data(){
			return{
				checked:[],
				form:{
					title:"",//姓名
					phone:"",//手机号
					seniority:"",//从业年限
					tag:"",//标签
					address:"",//所属位置
					shop:"",//门店
					isheadImg:"",
					headImgList:[],
					isPicList:"",
					picList:[],
				},
				rules:{
					title:[
						{
							type: 'string',
							required: true,
							message: '请输入姓名',
							trigger: ['blur', 'change']
						}
					],
					phone:[
						{
							type: 'string',
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						}
					],
					seniority:[
						{
							type: 'string',
							required: true,
							message: '请输入从业年限',
							trigger: ['blur', 'change']
						}
					],
					tag:[
						{
							type: 'string',
							required: true,
							message: '请输入标签',
							trigger: ['blur', 'change']
						}
					],
					address:[
						{
							type: 'string',
							required: true,
							message: '请输入所在地区',
							trigger: ['blur', 'change']
						}
					],
					shop:[
						{
							type: 'string',
							required: true,
							message: '请输入所属门店',
							trigger: ['blur', 'change']
						}
					],
					
					isheadImg:[
						{
							type: 'string',
							required: true,
							message: '请选择头像',
							trigger: ['blur', 'change']
						}
					],
					isPicList:[
						{
							type: 'string',
							required: true,
							message: '请选择身份证，工作证件',
							trigger: ['blur', 'change']
						}
					],
				}
			}
		},
		watch: {
			'form.headImgList'(newValue, oldValue) {
			    if (newValue.length > 0) {
			    	this.form.isheadImg = '有'
			    } else {
			    	this.form.isheadImg = ''
			    }
			},
			'form.picList'(newValue, oldValue) {
			    if (newValue.length > 0) {
			    	this.form.isPicList = '有'
			    } else {
			    	this.form.isPicList = ''
			    }
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods:{
			open(){
				this.$refs.popup.open();
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			onCancel(){
				this.$refs.popup.close();
				this.checked=[];
			},
			onAgree(){
				this.$refs.popup.close();
				this.checked=['1'];
			},
			deletePic(event) {
				this.form.picList.splice(event.index, 1)
			},
			async afterRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.picList.push({
							url
						})
					})
				})
			},
			deleteOwnershipPic(event) {
				this.form.headImgList.splice(event.index, 1)
			},
			async afterheadImgRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.headImgList.push({
							url
						})
					})
				})
			},
			handleAreaChange(){
				this.$refs.citySelectRef.open()
			},
			handleCityChange(e) {
				this.form.address = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			submit() {
				if(this.checked.length==0){
					return uni.showToast({
						icon: "none",
						title: "请勾选隐私协议"
					})
				}
				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>