PropertyApp/pages/user/edit.vue

<template>
	<view >
		<u-toast ref="uToast"/>
		<view class="bg-white" style="padding: 10rpx 30rpx;margin: 20rpx;border-radius: 12rpx;">
			<u-form :label-style="labelStyle"  label-width="180" :model="form" ref="uForm">
				<u-form-item  label="住户姓名" :required="true"><u-input v-model="form.name" placeholder="请输入住户姓名"/></u-form-item>
				<u-form-item  label="性别" :required="true">
					<u-input  type="select" :select-open="sexShow" v-model="sexLabel"  placeholder="请选择性别" @click="sexShow=true"></u-input>
				</u-form-item>
				<u-form-item label="所属小区" :required="true">
					<u-input   v-model="form.residentialName" disabled></u-input>
				</u-form-item>
				<u-form-item label="所属楼栋" :required="true">
					<u-input   v-model="form.buildingName" disabled></u-input>
				</u-form-item>
				<u-form-item label="所属单元" :required="true">
					<u-input   v-model="form.unitName" disabled></u-input>
				</u-form-item>
				<u-form-item label="所属房间" :required="true">
					<u-input   v-model="form.roomName" disabled></u-input>
				</u-form-item>
				<u-form-item label="住户类型" :required="true">
					<u-input  type="select" :select-open="typeShow" v-model="typeLabel"  placeholder="请选择房间" @click="typeShow=true"></u-input>
				</u-form-item>
				<u-form-item label="手机号" :required="true">
					<u-input v-model="form.phone"  placeholder="请填写手机号"></u-input>
				</u-form-item>
				<u-form-item label="证件类型">
					<text>身份证</text>
				</u-form-item>
				<u-form-item label="证件号码">
					<u-input v-model="form.idCard"  placeholder="请填写证件号码" type="idcard"></u-input>
				</u-form-item>
				<u-form-item label="籍贯">
					<u-input v-model="form.nativePlace"  placeholder="请填写籍贯"></u-input>
				</u-form-item>
				<u-form-item  label="备注" label-position="top">
					<u-input type="textarea"  placeholder="请填写备注"  v-model="form.remark" />
				</u-form-item>
			</u-form>
		</view>
		
		<!-- 性别 -->
		<u-select @confirm="sexConfirm" v-model="sexShow" :list="sexList"></u-select>
		<!-- 住户类型 -->
		<u-select @confirm="typeConfirm" v-model="typeShow" :list="typeList"></u-select>
		
		<view @click="confirm" style="display: flex;justify-content: center;">
			<view class="cu-btn bg-blue radius" style="width: 70%;height: 84rpx;margin: 20rpx 0;">
				提交
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			labelStyle:{
				"fontWeight":"600"
			},
			form:{
				type:-1
			},
			// 性别
			sexLabel:'', //回显
			sexShow:false,
			sexList:[
				{
					value: "0",
					label: "未知"
				},
				{
					value:'1',
					label:'男'
				},
				{
					value:'2',
					label:'女'
				},
			],
			
			//住户类型
			typeLabel:'', //回显
			typeShow:false,
			typeList:[
				{
					value:'0',
					label:'业主'
				},
				{
					value:'1',
					label:'成员'
				},
				{
					value:'2',
					label:'租户'
				},
			],
			
		};
	},
	onLoad(options) {
		this.fetchData(options.id)
	},
	methods:{
		fetchData(id){
			this.$api.user.detail({id: id}).then(res=>{
				res = res.data
				//数据
				this.form={
					id:res.id,
					name:res.name,
					residentialName:res.residentialName,
					residentialId:res.residentialId,
					buildingName:res.buildingName,
					buildingId:res.buildingId,
					unitName:res.unitName,
					unitId:res.unitId,
					roomName:res.roomName,
					roomId:res.roomId,
					type:res.type,
					phone:res.phone || '',
					sex:res.sex,
					idCard:res.idCard || '',
					birthPlace:res.birthPlace || '',
					file:res.file || '',
					remark:res.remark || '',
					nativePlace: res.nativePlace
				}
				//性别回显
				this.sexList.forEach(item=>{
					if (item.value==res.sex) {
						this.sexLabel=item.label
					}
				})
				//类型回显
				this.typeList.forEach(item=>{
					if (item.value==res.type) {
						this.typeLabel=item.label
					}
				})
			})
		},
		// 性别
		sexConfirm(e){
			this.sexLabel=e[0].label
			this.form.sex=e[0].value
		},
		//住户类型
		typeConfirm(e){
			this.typeLabel=e[0].label
			this.form.type=e[0].value
		},
		confirm(){
			debugger
			if (this.$isEmpty(this.form.name)) {
				this.$showToast('请输入姓名','error')
				return
			}
			if (this.form.sex == ""||this.form.sex == undefined) {
				this.$showToast('请选择性别',"error")
				return
			}
			if (this.form.type==-1) {
				this.$showToast('请选择住户类型','error')
				return
			}
			if (this.$isEmpty(this.form.phone)) {
				this.$showToast('请填写手机号码','error')
				return
			}
			if (!this.$verify.phone(this.form.phone)) {
				this.$showToast('手机格式不正确','error')
				return
			}
			if (!this.$isEmpty(this.form.idCard)) {
				if (!this.$verify.idCard(this.form.idCard)) {
					this.$showToast('身份证号码不正确','error')
					return
				}
			}
			console.log(this.form);
			this.$api.user.update(this.form).then(res=>{
				if (res.data==true) {
					this.$dialog.showModal('操作成功',false).then(res=>{
						this.$navigateBack()
						uni.navigateTo({
							url:"/pages/user/user"
						})
					})
				}else{
					this.$u.toast(res.msg)
				}
			})
			
		}
	}
};
</script>

<style lang="scss" scoped>

</style>