這篇文章主要介紹微信小程序商城開發(fā)之怎么實(shí)現(xiàn)用戶收貨地址管理頁面，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是專業(yè)的保亭黎族網(wǎng)站建設(shè)公司，保亭黎族接單;提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行保亭黎族網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

看效果

開發(fā)計(jì)劃

1、布局收貨地址列表和新增收貨地址頁面

2、實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)功能

3、使用緩存管理數(shù)據(jù)

一、收貨地址列表管理

addressList.wxml

  
    
      {{item.consignee}}
           {{item.mobile}}
      
      
        {{item.address}}
      
      
        
{{item.transportDay}}
        刪除

      
      
    
  


  新增地址

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({
 
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    addressList:[]
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    var arr = wx.getStorageSync('addressList') || [];
    console.info("緩存數(shù)據(jù)：" + arr);
    // 更新數(shù)據(jù)  
    this.setData({
      addressList: arr
    });
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  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數(shù)據(jù)對象  
    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

  
    
      
        收貨人
      
      
        
      
    
    
      
        手機(jī)號(hào)
      
      
        
      
    
    
      
        收貨時(shí)間
      
      
        
          {{transportValues[transportIndex]}}
          
        
      
    
  
  
  
    
      
        省份
      
      
        
          {{provinceNames[provinceIndex]}}
          
        
      
    
    
      
        城市
      
      
        
          {{cityNames[cityIndex]}}
 
          
        
      
    
    
      
        區(qū)縣
      
      
        
          {{countyNames[countyIndex]}}
          
        
      
    
    
      
        詳細(xì)地址
      
      
        
      
    
  
  保存

address.wxss

@import '../../utils/weui.wxss';
 
.weui-cells:before{
  top:0;
  border-top:1rpx solid white;
  }
.weui-cell{
  line-height: 3.5rem;
}
.weui-cells:after{
  bottom:0;border-bottom:1rpx solid white
}
 
.weui-btn{
  width: 80%;
}

address.json

{
  "navigationBarTitleText": "添加收貨地址"
}

address.js

var area = require('../../utils/area.js');
var areaInfo = []; //所有省市區(qū)縣數(shù)據(jù)
var provinces = []; //省
var provinceNames = []; //省名稱
var citys = []; //城市
var cityNames = []; //城市名稱
var countys = []; //區(qū)縣
var countyNames = []; //區(qū)縣名稱
var value = [0, 0, 0]; //數(shù)據(jù)位置下標(biāo)
var addressList = null;
Page({
 
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    transportValues: ["收貨時(shí)間不限", "周六日/節(jié)假日收貨", "周一至周五收貨"],
    transportIndex: 0,
    provinceIndex: 0, //省份
    cityIndex: 0, //城市
    countyIndex: 0, //區(qū)縣
  },
 
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function() {
    var that = this;
    area.getAreaInfo(function(arr) {
      areaInfo = arr;
      //獲取省份數(shù)據(jù)
      that.getProvinceData();
    });
  },
  // 獲取省份數(shù)據(jù)
  getProvinceData: function() {
    var that = this;
    var s;
    provinces = [];
    provinceNames = [];
    var num = 0;
    for (var i = 0; i < areaInfo.length; i++) {
      s = areaInfo[i];
      if (s.di == "00" && s.xian == "00") {
        provinces[num] = s;
        provinceNames[num] = s.name;
        num++;
      }
    }
    that.setData({
      provinceNames: provinceNames
    })
 
    that.getCityArr();
    that.getCountyInfo();
  },
 
  // 獲取城市數(shù)據(jù)
  getCityArr: function(count = 0) {
    var c;
    citys = [];
    cityNames = [];
    var num = 0;
    for (var i = 0; i < areaInfo.length; i++) {
      c = areaInfo[i];
      if (c.xian == "00" && c.sheng == provinces[count].sheng && c.di != "00") {
        citys[num] = c;
        cityNames[num] = c.name;
        num++;
      }
    }
    if (citys.length == 0) {
      citys[0] = {
        name: ''
      };
      cityNames[0] = {
        name: ''
      };
    }
    var that = this;
    that.setData({
      citys: citys,
      cityNames: cityNames
    })
    console.log('cityNames:' + cityNames);
    that.getCountyInfo(count, 0);
  },
 
  // 獲取區(qū)縣數(shù)據(jù)
  getCountyInfo: function(column0 = 0, column1 = 0) {
    var c;
    countys = [];
    countyNames = [];
    var num = 0;
    for (var i = 0; i < areaInfo.length; i++) {
      c = areaInfo[i];
      if (c.xian != "00" && c.sheng == provinces[column0].sheng && c.di == citys[column1].di) {
        countys[num] = c;
        countyNames[num] = c.name;
        num++;
      }
    }
    if (countys.length == 0) {
      countys[0] = {
        name: ''
      };
      countyNames[0] = {
        name: ''
      };
    }
    console.log('countyNames:' + countyNames);
    var that = this;
    // value = [column0, column1, 0];
 
    that.setData({
      countys: countys,
      countyNames: countyNames,
      // value: value,
    })
  },
 
  bindTransportDayChange: function(e) {
    console.log('picker country 發(fā)生選擇改變，攜帶值為', e.detail.value);
    this.setData({
      transportIndex: e.detail.value
    })
  },
 
  bindProvinceNameChange: function(e) {
    var that = this;
    console.log('picker province 發(fā)生選擇改變，攜帶值為', e.detail.value);
    var val = e.detail.value
    that.getCityArr(val); //獲取地級(jí)市數(shù)據(jù)
    that.getCountyInfo(val, 0); //獲取區(qū)縣數(shù)據(jù)
 
    value = [val, 0, 0];
    this.setData({
      provinceIndex: e.detail.value,
      cityIndex: 0,
      countyIndex: 0,
      value: value
    })
 
  },
 
  bindCityNameChange: function(e) {
    var that = this;
    console.log('picker city 發(fā)生選擇改變，攜帶值為', e.detail.value);
 
    var val = e.detail.value
    that.getCountyInfo(value[0], val); //獲取區(qū)縣數(shù)據(jù)
    value = [value[0], val, 0];
    this.setData({
      cityIndex: e.detail.value,
      countyIndex: 0,
      value: value
    })
  },
 
  bindCountyNameChange: function(e) {
    var that = this;
    console.log('picker county 發(fā)生選擇改變，攜帶值為', e.detail.value);
    this.setData({
      countyIndex: e.detail.value
    })
  },
 
  saveAddress: function(e) {
    var consignee = e.detail.value.consignee;
    var mobile = e.detail.value.mobile;
    var transportDay = e.detail.value.transportDay;
    var provinceName = e.detail.value.provinceName;
    var cityName = e.detail.value.cityName;
    var countyName = e.detail.value.countyName;
    var address = e.detail.value.address;
 
    console.log(transportDay + "," + provinceName + "," + cityName + "," + countyName + "," + address); //輸出該文本 
 
    var arr = wx.getStorageSync('addressList') || [];
    console.log("arr,{}", arr);
    addressList = {
      consignee: consignee,
      mobile: mobile,
      address: provinceName + cityName + countyName+address,
      transportDay: transportDay
    }
      arr.push(addressList);
    wx.setStorageSync('addressList', arr);
    wx.navigateBack({
      
    })
  }
})

area.js和weui.wxss 可以看下方源碼獲取方式，這里就不多做解釋。

以上是“微信小程序商城開發(fā)之怎么實(shí)現(xiàn)用戶收貨地址管理頁面”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！