前言

1、单位名称的意思指在机关、团体、法人、企业等非自然人的实体或其下属部门工作的地方的名称。

2、寄件地址的意思指居住地的详细地址，包括省、市、县、乡和镇及街道（门牌号）、邮编。国内地址多由省（市自治区）名、市（县区）名、乡镇（街道）名、门牌号码、企事业单位名等几部分组成。由于拼写起来很长，为醒目起见，各个层次之间可以用逗号（，）隔开。扩展资料《快递暂行条例》中规定：第二十二条　寄件人交寄快件，应当如实提供以下事项：（一）寄件人姓名、地址、联系电话；（二）收件人姓名（名称）、地址、联系电话；（三）寄递物品的名称、性质、数量。除信件和已签订安全协议用户交寄的快件外，经营快递业务的企业收寄快件，应当对寄件人身份进行查验，并登记身份信息，但不得在快递运单上记录除姓名（名称）、地址、联系电话以外的用户身份信息。

在电商系统中，收货地址是必不可少的功能，没有收货地址用户在下单就没法收到货，而且一个用户会有多个收货地址，比如寄给自己，或者寄给别人。一搬在收货地址选择中会有个默认收货地址以防止每次下单都要选择地址。

一、收货地址功能实现

// miniprogram/pages/address-list/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    radio: 0,
    selectedAddressId: 0,
    addressList: [],
    slideButtons: [{
      type: 'warn',
      text: '删除'
    }]
  },
  //选择地址
  async onSlideButtonTap(e) {
    // e.detail.index是选择按钮的序号
    let id = e.currentTarget.dataset.id 
    console.log('slide button tap', e.detail, id)

    let res = await wx.wxp.request4({
      url:`http://localhost:3000/user/my/address/${id}`,
      method:'delete'
    })
    console.log(res);
    if (res && res.data.msg == 'ok'){
      // 处理本地数据
      let addressList = this.data.addressList
      for(let j=0;j<addressList.length;j++){
        if (addressList[j].id == id){
          addressList.splice(j, 1)
          break
        }
      }
      this.setData({
        addressList
      })
    }
  },
  //获取微信收获地址
  getAddressFromWeixin(e) {
    if (wx.canIUse('chooseAddress.success.userName')) {
      wx.chooseAddress({
        success: async (res) => {
          console.log(res);
          let addressList = this.data.addressList

          let addressContained = addressList.find(item => item.telNumber == res.telNumber)
          if (addressContained) {
            this.setData({
              selectedAddressId: addressContained.id
            })
            return
          }

          let data = {
            // id: addressList.length,
            userName: res.userName,
            telNumber: res.telNumber,
            region: [res.provinceName, res.cityName, res.countyName],
            detailInfo: res.detailInfo
          }
          let res1 = await wx.wxp.request4({
            url: 'http://localhost:3000/user/my/address',
            method:'post',
            data
          })
          console.log(res1);
          if (res1.data.msg == 'ok'){
            let item = res1.data.data 
            addressList.push(item)
            this.setData({
              addressList,
              selectedAddressId:item.id
            })
          }else{
            wx.showToast({
              title: '添加不成功，是不是添加过了？',
            })
          }
        },
      })
    }
  },
  //确认收货地址返回
  confirm(e){
    let selectedAddressId = this.data.selectedAddressId
    let addressList = this.data.addressList
    let item = addressList.find(item=>item.id == selectedAddressId)
    let opener = this.getOpenerEventChannel()
    opener.emit('selectAddress', item)
    wx.navigateBack({
      delta: 1,
    })
  },
  // 编辑回来回调这个方法
  onSavedAddress(address) {
    // console.log(address);
    let addressList = this.data.addressList
    let hasExist = addressList.some((item,index)=>{
      if (item.id == address.id){
        addressList[index] = address
        return true 
      }
      return false 
    })
    if (!hasExist){
      addressList.push(address)
    }

    this.setData({
      addressList,
      selectedAddressId: address.id
    })
  },
  //跳转到新增地址界面
  navigateToNewAddressPage(e) {
    wx.navigateTo({
      url: '/pages/new-address/index',
      success:(res)=>{
        res.eventChannel.on("savedNewAddress", this.onSavedAddress)
      }
    })
  },
  /**
   * 选择收获地址
   * @param {*} e 
   */
  onChange(event) {
    this.setData({
      selectedAddressId: event.detail,
    });
  },
  /**
   * 编辑收获地址
   * @param {*} e 
   */
  edit(e){
    console.log(e.currentTarget.dataset.id);
    let id = e.currentTarget.dataset.id
    let addressList = this.data.addressList
    let address = addressList.find(item=>item.id == id)
    wx.navigateTo({
      url: '/pages/new-address/index',
      success:(res)=>{
        res.eventChannel.emit('editAddress', address)
        res.eventChannel.on('savedNewAddress', this.onSavedAddress)
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    let res = await wx.wxp.request4({
      url: 'http://localhost:3000/user/my/address',
      method:'get'
    })
    let addressList = res.data.data 
    let selectedAddressId = addressList[0].id
    this.setData({
      addressList,
      selectedAddressId
    })
  },
})

{
  "usingComponents": {
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-icon": "@vant/weapp/icon/index",
    "van-radio": "@vant/weapp/radio/index",
    "van-radio-group": "@vant/weapp/radio-group/index",
    "van-button": "@vant/weapp/button/index",
    "mp-slideview": "weui-miniprogram/slideview/slideview"
  }
}

<!--miniprogram/pages/address-list/index.wxml-->
<!-- <text>miniprogram/pages/address-list/index.wxml</text> -->
<wxs module="fn">
  module.exports = {
    // 将数组合并为字符串
    join: function (arr) {
      return arr.join('')
    }
  }
</wxs>
<van-cell-group>
  <van-cell bind:click="getAddressFromWeixin" title="获取微信收货地址" is-link>
    <van-icon slot="icon" color="green" name="chat-o" style="margin-right:10px;" />
  </van-cell>
</van-cell-group>

<van-radio-group value="{{ selectedAddressId }}" bind:change="onChange">
  <van-cell-group title=" ">
    <block wx:for="{{addressList}}" wx:key="id">
      <mp-slideview data-id="{{item.id}}" buttons="{{slideButtons}}" bindbuttontap="onSlideButtonTap">
        <van-cell use-label-slot>
          <view slot="icon" class="vertical-align" style="margin-right:10px">
            <van-radio icon-size="16px" name="{{item.id}}"></van-radio>
          </view>
          <view slot="title">
            <view class="van-cell-text">{{item.userName}}，{{item.telNumber}}</view>
          </view>
          <view slot="label">
            <view class="van-cell-text">收货地址：{{fn.join(item.region)}}{{item.detailInfo}}</view>
          </view>
          <van-icon data-id="{{item.id}}" bind:click="edit" slot="right-icon" name="edit" />

        </van-cell>
      </mp-slideview>
    </block>
  </van-cell-group>
</van-radio-group>

<view class="address-btns">
  <van-button bind:click="confirm" type="default" size="large">选择</van-button>
  <van-button custom-class="new-address" bind:click="navigateToNewAddressPage" type="primary" size="large">新增收货地址
  </van-button>
</view>

/* miniprogram/pages/address-list/index.wxss */
.vertical-align{
  display: flex;align-items: center;
}
.add-button{
  width:100%;
  position: fixed !important;
  bottom: 0;
}
page{
  height: 100%;
}

.address-btns{
  position: fixed !important;
  width: 690rpx;
  bottom: 0;
  margin: 30rpx;
}
.new-address{
  margin-top: 30rpx;
}

二、效果