drink-answer-wechat-uniapp-24-9-2/pages_order/components/address/redactAddress.vue

<template>
	<view class="redact-address">
			<view class="redact-address-title">{{title}}</view>
			
			<uv-form label-width="210rpx"
			:model="addressDetail"
			ref="form" :rules="rules">
				<!-- <uv-field v-model="addressDetail.name" name="联系人" label="联系人" placeholder="请输入联系人姓名"
					:rules="[{ required: true, message: '请填写联系人' }]" />
					
				<uv-field v-model="addressDetail.phone" name="手机号" label="手机号" placeholder="请输入手机号"
					:rules="[{ required: true, message: '请填写手机号' }]" />
					
				<uv-field @click="$emit('clickAddressIcon')" v-model="addressDetail.address" name="所在地区" label="所在地区" placeholder="选择省市区街道"
					:rules="[{ required: true, message: '请选择省市区街道' }]">
					<template #right-icon>
						<image @click.stop="$emit('clickAddressIcon')" src="../static/address/selectIcon.png" mode="aspectFit"></image>定位
					</template>
				</uv-field>
				
				<uv-field v-model="addressDetail.addressDetail" name="详细地址" label="详细地址" placeholder="小区楼栋、门牌号、村等"
					:rules="[{ required: true, message: '请填写详细地址' }]" /> -->
					
				<uv-form-item label="联系人" 
				prop="name" 
				>
					<uv-input v-model="addressDetail.name" 
					placeholder="请输入联系人姓名"
					border="none">
					</uv-input>
				</uv-form-item>
				
				<uv-form-item label="手机号"
				prop="phone" 
				>
					<uv-input v-model="addressDetail.phone" 
					placeholder="请输入手机号"
					border="none">
					</uv-input>
				</uv-form-item>
				
				<uv-form-item label="所在地区"
				prop="address" 
				>
					<uv-input 
					v-model="addressDetail.address" 
					placeholder="请选择所在地区"
					border="none">
					</uv-input>
					<template #right>
						<view style="padding-right: 40rpx;color: #FBAB32;"
						@click.stop="$emit('clickAddressIcon')">
							<image
							src="../../static/address/selectIcon.png" 
							mode="aspectFit"></image>定位
						</view>
					</template>
				</uv-form-item>
				
				<uv-form-item label="详细地址"
				prop="addressDetail" 
				>
					<uv-input v-model="addressDetail.addressDetail" 
					placeholder="请输入详细地址"
					border="none">
					</uv-input>
				</uv-form-item>
			</uv-form>
			
			<view @click="onSubmit" class="save">{{ addressDetail.id ? '修改地址' : '新增地址'}}</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'addressDetail': {
						type: 'string',
						max: 50,
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		props : {
			addressDetail : {
				type : Object,
				default : function(){ return {} }
			},
			title : {
				type : String,
				default : '新增地址'
			}
		},
		methods: {
			//新增和修改地址
			onSubmit() {
				
				this.$refs.form.validate().then(res => {
					console.log(res);
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败'
					})
				})
				// this.$emit('saveOrUpdate', this.addressDetail)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.redact-address {
		box-sizing: border-box;

		.redact-address-title {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #333333;
			font-weight: 600;
		}

		.save {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90%;
			height: 80rpx;
			border-radius: 40rpx;
			color: white;
			font-size: 28rpx;
			margin: 0rpx auto;
			background: $uni-color;
			margin-top: 150rpx;
		}

		image {
			width: 25rpx;
			height: 25rpx;
		}


		//修改组件默认样式
		.uv-form {
			padding: 30rpx 0rpx;
		}

		&::v-deep .uv-cell {
			padding: 0rpx 0rpx;
			font-size: 26rpx;

			&::after {
				border: none !important;
			}

			.uv-field__label {
				display: flex;
				align-items: center;
				height: 80rpx;

			}

			.uv-field__control,
			.uv-field__right-icon {
				height: 80rpx;
				font-size: 26rpx;
				border-bottom: 2rpx solid #cbc8c8;
			}

			.uv-field__right-icon {
				display: flex;
				align-items: center;
				height: 78rpx;
				color: #5FCC9F;
			}

			.uv-cell__value {
				height: 120rpx;
			}

		}

		&::v-deep .uv-field__error-message {
			color: #5AC796;
			font-size: 20rpx;
			margin-top: 10rpx;
		}
	}
</style>