vue实现默认地址功能
实现默认地址功能的步骤
在Vue中实现默认地址功能，通常涉及前端界面交互、状态管理以及与后端API的通信。以下是具体实现方法：
数据结构设计
地址数据通常包含以下字段：
address: {
id: Number,
name: String,
phone: String,
address: String,
isDefault: Boolean
}前端界面实现
创建地址选择组件，展示地址列表并提供默认地址切换功能：
<template>
<div v-for="item in addressList" :key="item.id">
<input
type="radio"
v-model="defaultAddress"
:value="item.id"
@change="setDefaultAddress(item.id)"
>
{{ item.address }}
</div>
</template>状态管理
使用Vuex或Pinia管理地址状态：
const addressStore = defineStore('address', {
state: () => ({
addressList: [],
defaultAddressId: null
}),
actions: {
async setDefaultAddress(id) {
await api.setDefaultAddress(id)
this.defaultAddressId = id
}
}
})API交互
创建与后端交互的方法：
const addressApi = {
getAddressList() {
return axios.get('/api/address')
},
setDefaultAddress(id) {
return axios.put(`/api/address/${id}/default`)
}
}默认地址标识
在地址列表中突出显示默认地址：
<template>
<div
v-for="item in addressList"
:key="item.id"
:class="{ 'default-address': item.isDefault }"
>
{{ item.address }}
<span v-if="item.isDefault">(默认地址)</span>
</div>
</template>
<style>
.default-address {
border: 2px solid #42b983;
}
</style>初始化加载
在组件挂载时加载地址数据：
import { onMounted, ref } from 'vue'
const addressList = ref([])
const defaultAddress = ref(null)
onMounted(async () => {
const res = await addressApi.getAddressList()
addressList.value = res.data
defaultAddress.value = res.data.find(item => item.isDefault)?.id
})表单验证
添加新地址时验证必填字段：
const rules = {
name: [{ required: true, message: '请输入收货人姓名' }],
phone: [
{ required: true, message: '请输入手机号' },
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
],
address: [{ required: true, message: '请输入详细地址' }]
}以上方法涵盖了Vue实现默认地址功能的主要方面，包括数据管理、界面展示、状态变更和API交互。根据实际项目需求，可以对这些方法进行调整和扩展。
