You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
4.8 KiB
220 lines
4.8 KiB
<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>
|