Vant踩坑之地址列表AddressList +地址编辑AddressEdit

在学校做实习项目的商城用到了，感觉网上搜到的都不是很全所以自己写一份，也方便自己后面使用。后端是我自己拿Nodejs写的接口，使用的时候大家根据自己需求改一下吧。

我自己技术也不是很好，就是发出来给大家参考参考，欢迎指正。

功能包括了添加地址，修改地址，删除地址，保存地址。

vant组件我引入的是全部，按需引入请自行添加引入的代码

Vant踩坑之地址列表AddressList +地址编辑AddressEdit

目录

地址列表

 地址编辑

JS接口

---

地址列表

//地址列表
<template>
  <div>
    <van-nav-bar
      title="确认收货地址"
      placeholder
      fixed
      left-arrow
      @click-left="goBack"
    />
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: sessionStorage.getItem("uname"), //获取用户名
      chosenAddressId: "1",
      list: [],
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onAdd() {
      this.$router.push("/address");
    },
    //点击编辑传地址id给地址编辑，以便地址回显
    onEdit(item, index) {
      let id = this.list[index].id;
      this.$router.push(`address?id=${id}`);
    },
  },
  mounted() {
    //发送请求获取地址
    this.axios.post("/address?uname=" + this.uname).then((res) => {
      this.list = res.data.results;
      //选中地址列表的第一个地址
      if (this.list.length != 0) {
        this.chosenAddressId = this.list[0].id;
      }
      console.log(this.list);
    });
  },
};
</script>

 地址编辑

 需要在控制台引入areaList

npm i @vant/area-data -D

//地址编辑