88 lines
3.3 KiB
Vue
88 lines
3.3 KiB
Vue
<template>
|
|
<van-popup id="address-form" class="flex flex-col" v-model:show="model" closeable round>
|
|
<h3 class="text-center pt-5 text-base">{{ `${isEdit ? '修改' : '新增'}收货地址` }}</h3>
|
|
<div class="pt-3 flex-1 overflow-y-scroll">
|
|
<van-form @submit="onSubmit">
|
|
<van-cell-group inset>
|
|
<van-field v-model="formData.name" label="名字" placeholder="请输入收货人名称" :rules="[{ required: true, message: '请输入收货人名称' }]" />
|
|
<van-field v-model="formData.mobile" label="手机号" placeholder="请输入收货人手机号" :rules="[{ required: true, message: '请输入收货人手机号' }]" />
|
|
<van-field v-model="formData.area" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区" @click="areaData.show = true" />
|
|
<van-field v-model="formData.addressDetail" rows="3" autosize label="详细地址" type="textarea" placeholder="请输入详细地址" :rules="[{ required: true, message: '请输入详细地址' }]" />
|
|
<van-field name="checkboxGroup" label="" class="py-1!">
|
|
<template #input>
|
|
<van-checkbox-group v-model="formData.default" direction="horizontal">
|
|
<van-checkbox :name="1" shape="square" class="text-xs">默认地址</van-checkbox>
|
|
</van-checkbox-group>
|
|
</template>
|
|
</van-field>
|
|
</van-cell-group>
|
|
<div class="bg-white w-full h-12 p-2 box-border">
|
|
<button class="block w-full h-full border-none theme-bg-color color-white rounded-[.04rem]" native-type="submit">确定</button>
|
|
</div>
|
|
</van-form>
|
|
</div>
|
|
</van-popup>
|
|
<van-popup v-model:show="areaData.show" destroy-on-close position="bottom">
|
|
<van-area :area-list="areaList" :model-value="areaData.pickerValue" @confirm="onSelectArea" @cancel="areaData.show = false" />
|
|
</van-popup>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { areaList } from '@vant/area-data'
|
|
const model = defineModel<boolean>()
|
|
defineProps<{ isEdit: boolean }>()
|
|
const formData = reactive({ name: '', mobile: '', area: '', addressDetail: '', province: '', city: '', region: '', default: [] })
|
|
|
|
const areaData = reactive({ show: false, pickerValue: '' })
|
|
|
|
const onSelectArea = ({ selectedValues, selectedOptions }: { selectedOptions: any; selectedValues: any }) => {
|
|
areaData.pickerValue = selectedValues.length ? selectedValues[selectedValues.length - 1] : ''
|
|
areaData.show = false
|
|
formData.area = selectedOptions.map((item: any) => item.text).join(' ')
|
|
}
|
|
|
|
const onSubmit = () => {
|
|
model.value = false
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
#address-form {
|
|
&.van-popup--bottom.van-popup--round {
|
|
border-radius: 0.12rem 0.12rem 0 0;
|
|
:deep(.van-popup__close-icon) {
|
|
top: 0.1rem;
|
|
font-size: 0.2rem;
|
|
color: #666;
|
|
}
|
|
}
|
|
.van-cell-group--inset {
|
|
margin: 0 0.12rem;
|
|
}
|
|
:deep(.van-cell) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
.van-checkbox__icon {
|
|
height: auto;
|
|
}
|
|
.van-checkbox__icon .van-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 0.04rem;
|
|
}
|
|
.van-checkbox__label {
|
|
margin-left: 0.04rem !important;
|
|
}
|
|
.van-cell__title {
|
|
// width: 0;
|
|
}
|
|
.van-cell__value {
|
|
// flex: none;
|
|
}
|
|
.van-checkbox__label {
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
</style>
|