微信小程序商城开发之实现用户收货地址管理页面的代码-猿码集

1. 前言

随着微信小程序的普及，越来越多的商家选择在微信平台上进行商品销售。在微信小程序商城开发中，用户收货地址管理是一个必不可少的功能，本文将分享实现用户收货地址管理页面的代码。

2. 页面设计

在微信小程序中，用户收货地址管理页面的设计如下图所示：

2.1 页面布局

页面主要分为三个部分：

收货地址列表

底部按钮区域

新增收货地址按钮

其中，收货地址列表根据用户已有的收货地址进行展示，包括每个收货地址的详细信息和编辑删除按钮。

底部按钮区域包括设为默认地址和删除按钮。

新增收货地址按钮跳转到添加新地址页面。

2.2 页面交互

收货地址列表中每个收货地址的编辑按钮和删除按钮实现了相应的交互效果：

编辑按钮：进入编辑页面

删除按钮：弹出确认弹窗，用户点击确定即可删除该收货地址

在底部按钮区域中，用户可点击设为默认地址设置默认收货地址，并点击删除按钮删除当前地址。

3. 页面实现

3.1 页面布局

收货地址列表主要使用scroll-view组件进行实现：


// index.wxml
<scroll-view class="address-list" scroll-y="{{true}}">
  <view class="address-item" wx:for="{{addresses}}" wx:key="id">
    <view class="item-row">
      <view class="item-name">{{item.name}}</view>
      <view class="item-phone">{{item.phone}}</view>
    </view>
    <view class="item-row">
      <view class="item-address">{{item.address}}</view>
    </view>
    <view class="item-row">
      <navigator url="/pages/edit/edit?id={{item.id}}" class="edit-button">编辑</navigator>
      <view class="delete-button" data-id="{{item.id}}" bindtap="deleteAddress">删除</view>
    </view>
  </view>
</scroll-view>

底部按钮区域使用fixed进行布局：


// index.wxml
<view class="bottom-button">
  <view class="button-item">
    <switch class="default-switch" checked="{{defaultAddress}}" bindchange="setDefaultAddress" />
    <view class="default-text">设为默认地址</view>
  </view>
  <view class="button-item">
    <view class="delete-text" bindtap="deleteAddress" >删除</view>
  </view>
</view>

新增收货地址按钮使用navigator进行跳转：


// index.wxml
<navigator url="/pages/edit/edit" class="add-button">新增收货地址</navigator>

3.2 页面逻辑

在收货地址管理页面的逻辑实现中，主要包括以下几个部分：

3.2.1 获取收货地址列表

首先，我们需要从后端获取用户的收货地址列表。在小程序中，我们可以使用wx.request发起网络请求。


// index.js
Page({
  data: {
    addresses: [] // 收货地址列表
  },
  onLoad: function () {
    this.getAddressList();
  },
  getAddressList: function () {
    var that = this;
    wx.request({
      url: '后端接口地址',
      data: {
        user_id: '用户id'
      },
      success: function (res) {
        that.setData({
          addresses: res.data
        });
      }
    });
  }
});

在onLoad生命周期函数中调用getAddressList方法获取收货地址列表。

3.2.2 设为默认地址

当用户点击设为默认地址按钮时，我们需要将该地址设为默认地址，并更新页面上的列表和默认地址开关状态：


// index.js
setDefaultAddress: function (e) {
  var id = e.currentTarget.dataset.id;
  var that = this;
  wx.request({
    url: '后端接口地址',
    data: {
      user_id: '用户id',
      address_id: id
    },
    success: function (res) {
      // 更新页面上的列表和默认地址开关状态
      that.getAddressList();
      that.setData({
        defaultAddress: true
      });
    }
  });
}

3.2.3 删除收货地址

当用户点击删除按钮时，我们需要弹出确认弹窗，用户点击确定后才能删除收货地址。


// index.js
deleteAddress: function (e) {
  var id = e.currentTarget.dataset.id;
  var that = this;
  wx.showModal({
    title: '提示',
    content: '确认要删除该收货地址吗？',
    success: function (res) {
      if (res.confirm) {
        wx.request({
          url: '后端接口地址',
          data: {
            user_id: '用户id',
            address_id: id
          },
          success: function () {
            that.getAddressList();
          }
        });
      }
    }
  });
}

当用户点击确定后，我们向后端发送请求，删除该收货地址，并更新页面上的列表。

3.2.4 编辑收货地址

当用户点击编辑按钮时，我们需要跳转到编辑页面，并传递收货地址的id作为参数：


// index.wxml
<navigator url="/pages/edit/edit?id={{item.id}}" class="edit-button">编辑</navigator>

在编辑页面中，我们需要根据id获取该收货地址信息，并填充到表单中，用户编辑完成后进行保存。

4. 总结

本文介绍了微信小程序商城开发中实现用户收货地址管理页面的代码，并详细说明了页面设计和逻辑实现。希望对小程序商城开发者有所帮助。

微信小程序商城开发之实现用户收货地址管理页面的代码