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.
206 lines
4.5 KiB
206 lines
4.5 KiB
<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>
|