door-uniapp-240802/service-uniapp-client/components/address/redactAddress.vue

<template>
	<view class="redact-address">
		<template #default>
			<view class="redact-address-title">{{title}}</view>
			
			<van-form label-width="110rpx" ref="form">
				<van-cell-group inset>
					<van-field v-model="addressDetail.name" name="联系人" label="联系人" placeholder="请输入联系人姓名"
						:rules="[{ required: true, message: '请填写联系人' }]" />
						
					<van-field v-model="addressDetail.phone" name="手机号" label="手机号" placeholder="请输入手机号"
						:rules="[{ required: true, message: '请填写手机号' }]" />
						
					<van-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/position-icon.png" mode="aspectFit"></image>定位
						</template>
					</van-field>
					
					<van-field v-model="addressDetail.addressDetail" name="详细地址" label="详细地址" placeholder="小区楼栋、门牌号、村等"
						:rules="[{ required: true, message: '请填写详细地址' }]" />
						
				</van-cell-group>
			</van-form>
			
			<view @click="onSubmit" class="save">{{ addressDetail.id ? '修改地址' : '新增地址'}}</view>
			
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props : {
			addressDetail : {
				type : Object,
				default : function(){ return {} }
			},
			title : {
				type : String,
				default : '新增地址'
			}
		},
		methods: {
			//新增和修改地址
			onSubmit() {
				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: #F7AEB6;
		}

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


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

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

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

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

			}

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

			.van-field__right-icon {
				display: flex;
				align-items: center;
				height: 78rpx;
				color: #EF8C94;
			}

			.van-cell__value {
				height: 120rpx;
			}

		}

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