Jingde-town-wechat-uniapp/pages_order/components/address/redactAddress.vue

<template>
	<uv-popup round="40rpx" ref="addressPopup" :customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}">
		<view class="redact-address">
			<view class="redact-address-title">{{title}}</view>

			<uv-form label-width="210rpx" :model="addressDetail" ref="form">
				<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="selectAddr">
							<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>
	</uv-popup>
</template>

<script>
	import Position from '@/utils/position.js'
	export default {
		data() {
			return {
				addressDetail: {}
			}
		},
		props: {
			title: {
				type: String,
				default: '新增地址'
			}
		},
		methods: {
			open(addressDetail) {
				this.addressDetail = addressDetail
				this.$refs.addressPopup.open('bottom')
			},
			close(){
				this.$refs.addressPopup.close()
			},
			//新增和修改地址
			onSubmit() {
				let isOk = this.parameterVerification(this.addressDetail)
				if (isOk && !isOk.auth) {
					return uni.showToast({
						icon: 'none',
						title: isOk.title,
						'zIndex': 10000
					})
				}
				this.$emit('saveOrUpdate', this.addressDetail)
			},
			//验证用户参数合法性
			parameterVerification(addressDetaila) {
				let {
					name,
					phone,
					address,
					addressDetail
				} = addressDetaila
				if (name.trim() == '') {
					return {
						title: '请填写联系人',
						auth: false
					}
				} else if (phone.trim() == '') {
					return {
						title: '请填写手机号',
						auth: false
					}
				} else if (address.trim() == '') {
					return {
						title: '请填写所在地区',
						auth: false
					}
				} else if (addressDetail.trim() == '') {
					return {
						title: '请填写详细地址',
						auth: false
					}
				} else if (phone.trim() != '') {
					if (!this.$utils.verificationPhone(phone)) {
						return {
							title: '手机号格式不合法',
							auth: false
						}
					}
				}
				return {
					title: '验证通过',
					auth: true
				}
			},

			//地图上选择地址
			selectAddr() {
				Position.getLocation(res => {
					Position.selectAddress(res.longitude, res.latitude, success => {
						this.setAddress(success)
					})
				})
			},

			//提取用户选择的地址信息复制给表单数据
			setAddress(res) {
				//经纬度信息
				this.addressDetail.latitude = res.latitude
				this.addressDetail.longitude = res.longitude

				if (!res.address && res.name) { //用户直接选择城市的逻辑
					return this.addressDetail.address = res.name
				}
				if (res.address || res.name) {
					return this.addressDetail.address = res.address + res.name
				}
				this.addressDetail.address = '' //用户啥都没选就点击勾选
			},
		}
	}
</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>