微信小程序微商城（十）：用戶收貨地址管理

上一篇：微信小程序微商城（九）：微信授權(quán)并實(shí)現(xiàn)個(gè)人中心頁(yè)面頁(yè)面

看效果

收貨地址管理.gif

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

1员帮、布局收貨地址列表和新增收貨地址頁(yè)面
2、實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)功能
3氯材、使用緩存管理數(shù)據(jù)

一氢哮、收貨地址列表管理

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({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    addressList:[]
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {
    var arr = wx.getStorageSync('addressList') || [];
    console.info("緩存數(shù)據(jù)：" + arr);
    // 更新數(shù)據(jù)  
    this.setData({
      addressList: arr
    });
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  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ù)對(duì)象  
    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="請(qǐng)輸入收貨人真實(shí)姓名" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">手機(jī)號(hào)</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input" name="mobile" placeholder="請(qǐng)輸入收貨人手機(jī)號(hào)" />
      </view>
    </view>
    <view class="weui-cell weui-cell_select">
      <view class="weui-cell__hd weui-cell__hd_in-select-after">
        <view class="weui-label">收貨時(shí)間</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">區(qū)縣</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">詳細(xì)地址</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input" name="address" placeholder="請(qǐng)輸入收貨人詳細(xì)地址" />
      </view>
    </view>
  </view>
  <button class="weui-btn" type="primary" form-type="submit">保存</button>
</form>

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({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    transportValues: ["收貨時(shí)間不限", "周六日/節(jié)假日收貨", "周一至周五收貨"],
    transportIndex: 0,
    provinceIndex: 0, //省份
    cityIndex: 0, //城市
    countyIndex: 0, //區(qū)縣
  },


  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  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 可以看下方源碼獲取方式伍派，這里就不多做解釋诉植。

備注

微信小程序微商城系列都是通過(guò)https 動(dòng)態(tài)獲取數(shù)據(jù)并展示的昵观，建議從第一篇開(kāi)始閱讀啊犬。大家多多支持本系列文章會(huì)繼續(xù)更新下去，謝謝各位剔应！大家在使用過(guò)程中有哪些建議可以提出來(lái)峻贮，我們一起學(xué)習(xí)哈~~~

微信小程序微商城系列

關(guān)注我們

如果需要源碼和素材可以關(guān)注“IT實(shí)戰(zhàn)聯(lián)盟”公眾號(hào)并留言（微商城源碼，5個(gè)字會(huì)收到源碼下載地址细层，一定要看源碼里面的操作手冊(cè)會(huì)少走很多彎路）唬涧，也可以加入交流群和作者互撩哦~~~

IT實(shí)戰(zhàn)聯(lián)盟.jpg

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末捧搞，一起剝皮案震驚了整個(gè)濱河市狮荔，隨后出現(xiàn)的幾起案子殖氏，更是在濱河造成了極大的恐慌，老刑警劉巖爵憎，帶你破解...
沈念sama閱讀 212,383評(píng)論 6贊 493
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件宝鼓，死亡現(xiàn)場(chǎng)離奇詭異愚铡，居然都是意外死亡胡陪，警方通過(guò)查閱死者的電腦和手機(jī)柠座，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,522評(píng)論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門愚隧，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)狂塘，“玉大人，你說(shuō)我怎么就攤上這事妈踊±扔” “怎么了萝勤？”我有些...
開(kāi)封第一講書人閱讀 157,852評(píng)論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵敌卓，是天一觀的道長(zhǎng)趟径。經(jīng)常有香客問(wèn)我蜗巧，道長(zhǎng)幕屹，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書人閱讀 56,621評(píng)論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮沧烈，結(jié)果婚禮上像云，老公的妹妹穿的比我還像新娘迅诬。我一直安慰自己侈贷，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 65,741評(píng)論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布上遥。她就那樣靜靜地躺著粉楚，像睡著了一般模软。火紅的嫁衣襯著肌膚如雪燃异。梳的紋絲不亂的頭發(fā)上继蜡，一...
開(kāi)封第一講書人閱讀 49,929評(píng)論 1贊 290
城市分裂傳說(shuō)
那天鲫剿，我揣著相機(jī)與錄音灵莲，去河邊找鬼政冻。笑死明场，一個(gè)胖子當(dāng)著我的面吹牛李丰，可吹牛的內(nèi)容都是我干的趴泌。我是一名探鬼主播嗜憔，決...
沈念sama閱讀 39,076評(píng)論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼夺鲜，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼币励！你這毒婦竟也來(lái)了榄审？” 一聲冷哼從身側(cè)響起搁进，我...
開(kāi)封第一講書人閱讀 37,803評(píng)論 0贊 268
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎莱革，沒(méi)想到半個(gè)月后盅视，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體闹击，經(jīng)...
沈念sama閱讀 44,265評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,582評(píng)論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年秋冰，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了剑勾。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甥材。...
茶點(diǎn)故事閱讀 38,716評(píng)論 1贊 341
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡鸳惯，死狀恐怖芝发，靈堂內(nèi)的尸體忽然破棺而出格郁，到底是詐尸還是另有隱情例书，我是刑警寧澤决采，帶...
沈念sama閱讀 34,395評(píng)論 4贊 333
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站坟奥，受9級(jí)特大地震影響树瞭，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜爱谁，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 40,039評(píng)論 3贊 316
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一晒喷、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧访敌，春花似錦凉敲、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 30,798評(píng)論 0贊 21
一樁弒父案荡陷，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至迅涮，卻和暖如春废赞，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背叮姑。一陣腳步聲響...
開(kāi)封第一講書人閱讀 32,027評(píng)論 1贊 266
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工唉地，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人传透。一個(gè)月前我還...
沈念sama閱讀 46,488評(píng)論 2贊 361
代替公主和親
正文我出身青樓耘沼，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親朱盐。傳聞我的和親對(duì)象是個(gè)殘疾皇子群嗤，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,612評(píng)論 2贊 350