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

本篇文章给大家带来的内容是关于微信小程序商城开发之实现用户收货地址管理页面的代码 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

看效果

开发计划

1、布局收货地址列表和新增收货地址页面

2、实现省市县三级联动功能

3、使用缓存管理数据

一、收货地址列表管理

addressList.wxml

<scroll-view class="scroll" scroll-y="true">
  <view wx:for="{{addressList}}">
    <view class="product-name-wrap">
      <view class="ui-list-item-info">{{item.consignee}}
        <text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text> {{item.mobile}}
      </view>
      <view class="ui-list-item-address">
        {{item.address}}
      </view>
      <view class="ui-list-item-time">
        <p>{{item.transportDay}}</p>
        <p class="ui-list-item-del" data-id="{{index}}" bindtap="delAddress">删除</p>
      </view>
      <view class="separate"></view>
    </view>
  </view>
</scroll-view>
<view class="add-address" bindtap="addAddress">
  <image class="add-img"  src="../../images/add.png"></image>新增地址
</view>

addressList.wxss

page{  
  display: flex;  
  flex-direction: column;  
  height: 100%;  
}  
.product-name-wrap{
  margin: 0px 10px;
  font-size: 14px;
  color: #404040;
}
.ui-list-item-info{
  margin: 5px 0px;
}
.ui-list-item-address{
  color: #585c64;
}
.ui-list-item-time{
  margin: 5px 0px;
}
.ui-list-item-del{
  position: absolute;
  right: 10px;
  color: #585c64;
}
/* 分割线 */
.separate {
  margin: 5px 0px;
  height: 2rpx;
  background-color: #f2f2f2;
}
.add-address{
  margin: 0 auto;
  margin-top: 30px;
  width: 150px;
  height: 35px;
  border: 1px #000 solid;
  line-height: 35px;
  text-align: center;
  color: #000;
  border-radius: 5rpx;
      display: block;
}
.add-img{
  margin-right: 15rpx;
  width: 15px;
  height: 15px;
}

addressList.json

{
  "navigationBarTitleText": "管理地址"
}

addressList.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    addressList:[]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var arr = wx.getStorageSync('addressList') || [];
    console.info("缓存数据：" + arr);
    // 更新数据  
    this.setData({
      addressList: arr
    });
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.onLoad();
  },
  addAddress:function(){
    wx.navigateTo({ url: '../address/address' });
  },
  /* 删除item */
  delAddress: function (e) {
    this.data.addressList.splice(e.target.id.substring(3), 1);
    // 更新data数据对象  
    if (this.data.addressList.length > 0) {
      this.setData({
        addressList: this.data.addressList
      })
      wx.setStorageSync('addressList', this.data.addressList);
    } else {
      this.setData({
        addressList: this.data.addressList
      })
      wx.setStorageSync('addressList', []);
    }
  }
})

二、新增收货信息

address.wxml

<form bindsubmit="saveAddress">
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">收货人</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input" name="consignee" placeholder="请输入收货人真实姓名" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">手机号</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input" name="mobile" placeholder="请输入收货人手机号" />
      </view>
    </view>
    <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="bindTransportDayChange" value="{{transportIndex}}" range="{{transportValues}}">
          <view class="weui-select weui-select_in-select-after">{{transportValues[transportIndex]}}</view>
          <input name="transportDay" hidden="true" value="{{transportValues[transportIndex]}}" />
        </picker>
      </view>
    </view>
  </view>
  <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="bindProvinceNameChange" value="{{provinceIndex}}" range="{{provinceNames}}">
          <view class="weui-select weui-select_in-select-after">{{provinceNames[provinceIndex]}}</view>
          <input name="provinceName" hidden="true" value="{{provinceNames[provinceIndex]}}" />
        </picker>
      </view>
    </view>
    <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="bindCityNameChange" value="{{cityIndex}}"range="{{cityNames}}">
          <view class="weui-select weui-select_in-select-after"name="city_name">{{cityNames[cityIndex]}}</view>
 
          <input name="cityName" hidden="true" value="{{cityNames[cityIndex]}}" />
        </picker>
      </view>
    </view>
    <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="bindCountyNameChange" value="{{countyIndex}}"range="{{countyNames}}">
          <view class="weui-select weui-select_in-select-after">{{countyNames[countyIndex]}}</view>
          <input name="countyName" hidden="true" value="{{countyNames[countyIndex]}}" />
        </picker>
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">详细地址</view>
      </view>
      <vie