用vant只需几行代码开发用户收货地址管理

解读开源代码 vueMinishop ，来看一下它是如何实现添加收货地址（配送地址）的。

vueMinishop 项目大家可以下载源码来研究下

• GitHub镜像
• 码云镜像

用户收货地址管理的页面是 AddressList.vue

页面显示部分，使用的 vant ，只需要几行代码搞定：

    <van-address-list
      :list="addressList"
      :switchable="topay == '1'"
      @add="onAdd"
      @select="selectItem"
    >
      <template #item-bottom="item">
        <van-button type="danger" size="mini" round @click="deleteAddress(item)">删除</van-button>
      </template>
    </van-address-list>

数据管理直接使用 “api工厂” 的前端大中台，这样子自己也不要去开发接口和后台了，连服务器都省了。
直接调用SDK操作数据即可：

    async getAddressList() {
      const res = await this.$wxapi.queryAddress(getToken())
      if (res.code === 700) {
        this.$toast('暂无收货地址')
        this.addressList = []
        return
      }
      if (res.code === 0) {
        this.addressList = res.data
        this.addressList.forEach(ele => {
          ele.name = ele.linkMan
          ele.tel = ele.mobile
        })
      }
    },

删除收货地址记录：

    async deleteAddress(item) {
      const res = await this.$wxapi.deleteAddress(getToken(), item.id)
      if (res.code === 0) {
        this.$toast('删除成功')
        this.getAddressList()
      } else {
        this.$toast(res.msg)
      }
    },

this.$wxapi 就是 “api工厂” 的 SDK，安装使用教程可以看：

https://www.yuque.com/apifm/nu0f75/gnlgl8