使用 apifm-wxapi 开发微信小程序之快递/收货地址管理

前言

本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》
《免费注册开通后台，获得专属域名》

本案例中，部分功能，需要用户登录后才能操作，也就是说需要 token 授权，请先了解：

《微信小程序登录获取openid及三方token》

功能介绍

商城类小程序开发必备模块，可让用户填写并管理自己的多个收货地址，方便在下单的时候直接选择某个地址作为订单的配送地址

启用模块

登录 “第一步” 注册的后台，左侧菜单 --> 工厂设置 --> 模块管理

找到并启用下述模块：

收货地址管理

开后该模块后，你将可以在后台管理用户的收货地址：

收货地址管理

apifm-wxapi 方法说明

获取所有的收货地址

WXAPI.queryAddress(token)

添加收货地址

WXAPI.addAddress(Object object)

你也可以结合小程序自带的读取收货地址接口，实现快速添加收货地址功能

更新收货地址

WXAPI.updateAddress(Object object)

获取默认的地址

WXAPI.defaultAddress(token)

读取地址详细

WXAPI.addressDetail(token, id)

删除收货地址

WXAPI.deleteAddress(token, id)

小程序开发

效果截图

收货地址列表

添加收货地址

小程序代码

收货地址管理

<view class="page">
  <view class="page__bd">
    <view wx:for="{{ addressList }}" wx:key="*this" class="weui-panel">
      <view class="weui-panel__hd"> {{ item.linkMan }} </view>
      <view class="weui-panel__bd">
        <view class="weui-media-box weui-media-box_text">
          <view class="weui-media-box__title weui-media-box__title_in-text">
            {{ item.mobile }}
          </view>
          <view class="weui-media-box__desc">
            {{ item.provinceStr }}{{ item.cityStr }}{{ item.areaStr }}{{ item.address }}
          </view>
          <view class="weui-media-box__info" style="margin-top: 0px;">
            <view class="button-sp-area">
              <button class="weui-btn mini-btn" type="default" size="mini" bindtap="addressDetail" data-id="{{ item.id }}">详情</button>
              <button class="weui-btn mini-btn marginL" type="primary" size="mini" bindtap="updateAddress" data-id="{{ item.id }}">编辑</button>

              <button class="weui-btn mini-btn marginL" type="warn" size="mini" bindtap="deleteAddress" data-id="{{ item.id }}">删除</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
<button class="addAddress" type="default" bindtap="addAddress">添加新的收货地址</button>
<button class="addAddress" type="primary" bindtap="defaultAddress">读取默认地址</button>

const WXAPI = require('apifm-wxapi')

Page({
  data: {
    addressList: undefined
  },
  onLoad: function (options) {

  },
  onShow: function () {
    const loginToken = wx.getStorageSync('loginToken')
    if (!loginToken) {
      wx.showToast({
        title: '请先登录',
        icon: 'none'
      })
      this.goRegist()
      return
    }
    WXAPI.queryAddress(loginToken.token).then(res => {
      console.log(res)
      if(res.code == 0){
        this.setData({
          addressList: res.data
        })
      }
    })
  },
  goRegist() {
    wx.navigateTo({
      url: '/pages/auth/index'
    })
  },
  addAddress() {
    wx.navigateTo({
      url: '/pages/shipping-address/add'
    })
  },
  addressDetail(e){
    const id = e.currentTarget.dataset.id
    const loginToken = wx.getStorageSync('loginToken')
    WXAPI.addressDetail(loginToken.token, id).then(res => {
      console.log(res)
      if (res.code == 0) {
        wx.showToast({
          title: '查看控制台',
          icon: 'success'
        })
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  },
  deleteAddress(e){
    const id = e.currentTarget.dataset.id
    const loginToken = wx.getStorageSync('loginToken')
    WXAPI.deleteAddress(loginToken.token, id).then(res => {
      if (res.code == 0) {
        wx.showToast({
          title: '删除成功',
          icon: 'success'
        })
        this.onShow()
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  },
  defaultAddress(){
    const loginToken = wx.getStorageSync('loginToken')
    WXAPI.defaultAddress(loginToken.token).then(res => {
      console.log(res)
      if (res.code == 0) {
        wx.showToast({
          title: '查看控制台',
          icon: 'success'
        })
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  },
  updateAddress(e){
    const id = e.currentTarget.dataset.id
    wx.showToast({
      title: '交给你啦~',
      icon: 'none'
    })
  },
})

添加收货地址

<view class="page">
  <view class="page__bd">
    <form bindsubmit="bindSave" report-submit="true">
      <view class="weui-cells__title">选择</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_select">
          <view class="weui-cell__hd weui-cell__hd_in-select-after">
            <view class="weui-label">省份</view>
          </view>
          <view class="weui-cell__bd">
            <picker bindchange="provinceChange" value="{{pIndex}}" range="{{provinces}}" range-key="name">
              <view class="weui-select weui-select_in-select-after">{{provinces[pIndex].name}}</view>
            </picker>
          </view>
        </view>
        <view wx:if="{{cities}}" class="weui-cell weui-cell_select">
          <view class="weui-cell__hd weui-cell__hd_in-select-after">
            <view class="weui-label">城市</view>
          </view>
          <view class="weui-cell__bd">
            <picker bindchange="cityChange" value="{{cIndex}}" range="{{cities}}" range-key="name">
              <view class="weui-select weui-select_in-select-after">{{cities[cIndex].name}}</view>
            </picker>
          </view>
        </view>
        <view wx:if="{{areas}}" class="weui-cell weui-cell_select">
          <view class="weui-cell__hd weui-cell__hd_in-select-after">
            <view class="weui-label">区县</view>
          </view>
          <view class="weui-cell__bd">
            <picker bindchange="areaChange" value="{{aIndex}}" range="{{areas}}" range-key="name">
              <view class="weui-select weui-select_in-select-after">{{areas[aIndex].name}}</view>
            </picker>
          </view>
        </view>
        <view class="weui-cell ">
          <view class="weui-cell__hd">
            <view class="weui-label">联系人</view>
          </view>
          <view class="weui-cell__bd">
            <input name="linkMan" class="weui-input" placeholder="请输入真实姓名" />
          </view>
        </view>
        <view class="weui-cell ">
          <view class="weui-cell__hd">
            <view class="weui-label">详细地址</view>
          </view>
          <view class="weui-cell__bd">
            <input name="address" class="weui-input" placeholder="请输入真实姓名" />
          </view>
        </view>
        <view class="weui-cell ">
          <view class="weui-cell__hd">
            <view class="weui-label">手机号码</view>
          </view>
          <view class="weui-cell__bd">
            <input name="mobile" class="weui-input" placeholder="请输入真实姓名" />
          </view>
        </view>
        <view class="weui-cell ">
          <view class="weui-cell__hd">
            <view class="weui-label">邮编</view>
          </view>
          <view class="weui-cell__bd">
            <input name="code" class="weui-input" placeholder="请输入真实姓名" />
          </view>
        </view>
      </view>
      <view class="weui-btn-area">
        <button class="weui-btn" type="primary" formType="submit">{{ btnName }}</button>
      </view>
    </form>
  </view>
</view>

const WXAPI = require('apifm-wxapi')

Page({

  data: {
    provinces: undefined,// 省份数据数组
    pIndex: 0,//选择的省下标
    cities: undefined,// 城市数据数组
    cIndex: 0,//选择的市下标
    areas: undefined,// 区县数数组
    aIndex: 0,//选择的区下标

    btnName: '添加收货地址',
  },
  onLoad: function (options) {
    WXAPI.province().then(res => {
      if (res.code == 0) {
        this.setData({
          provinces: res.data,
        })
      }
    })
  },
  provinceChange(e) {
    const index = e.detail.value
    this.setData({
      pIndex: index
    })
    const pid = this.data.provinces[index].id
    WXAPI.nextRegion(pid).then(res => {
      console.log(res)
      if (res.code == 0) {
        this.setData({
          cities: res.data
        })
      }
    })
  },
  cityChange(e) {
    const index = e.detail.value
    this.setData({
      cIndex: index
    })
    const pid = this.data.cities[index].id
    WXAPI.nextRegion(pid).then(res => {
      console.log(res)
      if (res.code == 0) {
        this.setData({
          areas: res.data
        })
      }
    })
  },
  areaChange(e) {
    const index = e.detail.value
    this.setData({
      aIndex: index
    })
    const pid = this.data.areas[index].id
    WXAPI.nextRegion(pid).then(res => {
      console.log(res)
      if (res.code == 0) {
        this.setData({
          streets: res.data
        })
      }
    })
  },
  goRegist() {
    wx.navigateTo({
      url: '/pages/auth/index'
    })
  },
  bindSave(e) {
    const loginToken = wx.getStorageSync('loginToken')
    if (!loginToken) {
      wx.showToast({
        title: '请先登录',
        icon: 'none'
      })
      this.goRegist()
      return
    }
    if (!this.data.cities) {
      wx.showToast({
        title: '请选择城市',
        icon: 'none'
      })
      return
    }
    WXAPI.addAddress({
      token: loginToken.token,
      provinceId: this.data.provinces[this.data.pIndex].id,
      cityId: this.data.cities[this.data.cIndex].id,
      districtId: this.data.areas ? this.data.areas[this.data.aIndex].id : '',
      linkMan: e.detail.value.linkMan,
      address: e.detail.value.address,
      mobile: e.detail.value.mobile,
      code: e.detail.value.code,
    }).then(res => {
      console.log(res)
      if (res.code == 0) {
        wx.showToast({
          title: '添加成功',
          icon: 'success'
        })
        wx.navigateBack()
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  },
})

关于更加详细的参数使用，以及更加高级的进阶使用方法，可以参考api接口文档说明：

《api接口文档》

关于 apifm-wxapi 更多的使用方法：

《apifm-wxapi使用说明》

本案例Demo代码下载：

《apifm-wxapi使用Demo程序》

期待你的进步！
感谢！