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.
137 lines
3.0 KiB
137 lines
3.0 KiB
<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 v-if="configList.open_address == 1">
|
|
<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: linear-gradient(180deg, #6FDFBE, #5AC796);
|
|
}
|
|
|
|
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: #5FCC9F;
|
|
}
|
|
|
|
.van-cell__value {
|
|
height: 120rpx;
|
|
}
|
|
|
|
}
|
|
|
|
&::v-deep .van-field__error-message {
|
|
color: #5AC796;
|
|
font-size: 20rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
</style>
|