首頁 > 微信小程式 > 小程式開發 > 微信小程式商城開發之實現用戶收貨地址管理頁面的程式碼

微信小程式商城開發之實現用戶收貨地址管理頁面的程式碼

不言
發布: 2018-08-16 17:08:46
原創
24500 人瀏覽過

這篇文章帶給大家的內容是關於微信小程式商城開發之實現用戶收貨地址管理頁面的程式碼,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

看效果

#開發計畫

1 、佈局收貨地址清單和新增收貨地址頁面

2、實現省市縣三級連動功能

3、使用快取管理資料

一、收貨地址清單管理

addressList.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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}}">  </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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

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

1

2

3

{

  "navigationBarTitleText": "管理地址"

}

登入後複製

addressList.js

#

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

Page({

  

  /**

   * 页面的初始数据

   */

  data: {

    addressList:[]

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    var arr = wx.getStorageSync(&#39;addressList&#39;) || [];

    console.info("缓存数据:" + arr);

    // 更新数据 

    this.setData({

      addressList: arr

    });

  },

  

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

    this.onLoad();

  },

  addAddress:function(){

    wx.navigateTo({ url: &#39;../address/address&#39; });

  },

  /* 删除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(&#39;addressList&#39;, this.data.addressList);

    } else {

      this.setData({

        addressList: this.data.addressList

      })

      wx.setStorageSync(&#39;addressList&#39;, []);

    }

  }

})

登入後複製

二、新增收貨資訊

#address.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

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

      <view class="weui-cell__bd">

        <input class="weui-input" name="address" placeholder="请输入收货人详细地址" />

      </view>

    </view>

  </view>

  <button class="weui-btn" type="primary" form-type="submit">保存</button>

</form>

登入後複製

address.wxss

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

@import &#39;../../utils/weui.wxss&#39;;

  

.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

1

2

3

{

  "navigationBarTitleText": "添加收货地址"

}

登入後複製

address.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

var area = require(&#39;../../utils/area.js&#39;);

var areaInfo = []; //所有省市区县数据

var provinces = []; //省

var provinceNames = []; //省名称

var citys = []; //城市

var cityNames = []; //城市名称

var countys = []; //区县

var countyNames = []; //区县名称

var value = [0, 0, 0]; //数据位置下标

var addressList = null;

Page({

  

  /**

   * 页面的初始数据

   */

  data: {

    transportValues: ["收货时间不限", "周六日/节假日收货", "周一至周五收货"],

    transportIndex: 0,

    provinceIndex: 0, //省份

    cityIndex: 0, //城市

    countyIndex: 0, //区县

  },

  

  

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function(options) {

  

  },

  

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function() {

    var that = this;

    area.getAreaInfo(function(arr) {

      areaInfo = arr;

      //获取省份数据

      that.getProvinceData();

    });

  },

  // 获取省份数据

  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();

  },

  

  // 获取城市数据

  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: &#39;&#39;

      };

      cityNames[0] = {

        name: &#39;&#39;

      };

    }

    var that = this;

    that.setData({

      citys: citys,

      cityNames: cityNames

    })

    console.log(&#39;cityNames:&#39; + cityNames);

    that.getCountyInfo(count, 0);

  },

  

  // 获取区县数据

  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: &#39;&#39;

      };

      countyNames[0] = {

        name: &#39;&#39;

      };

    }

    console.log(&#39;countyNames:&#39; + countyNames);

    var that = this;

    // value = [column0, column1, 0];

  

    that.setData({

      countys: countys,

      countyNames: countyNames,

      // value: value,

    })

  },

  

  bindTransportDayChange: function(e) {

    console.log(&#39;picker country 发生选择改变,携带值为&#39;, e.detail.value);

    this.setData({

      transportIndex: e.detail.value

    })

  },

  

  bindProvinceNameChange: function(e) {

    var that = this;

    console.log(&#39;picker province 发生选择改变,携带值为&#39;, e.detail.value);

    var val = e.detail.value

    that.getCityArr(val); //获取地级市数据

    that.getCountyInfo(val, 0); //获取区县数据

  

    value = [val, 0, 0];

    this.setData({

      provinceIndex: e.detail.value,

      cityIndex: 0,

      countyIndex: 0,

      value: value

    })

  

  },

  

  bindCityNameChange: function(e) {

    var that = this;

    console.log(&#39;picker city 发生选择改变,携带值为&#39;, e.detail.value);

  

    var val = e.detail.value

    that.getCountyInfo(value[0], val); //获取区县数据

    value = [value[0], val, 0];

    this.setData({

      cityIndex: e.detail.value,

      countyIndex: 0,

      value: value

    })

  },

  

  bindCountyNameChange: function(e) {

    var that = this;

    console.log(&#39;picker county 发生选择改变,携带值为&#39;, 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(&#39;addressList&#39;) || [];

    console.log("arr,{}", arr);

    addressList = {

      consignee: consignee,

      mobile: mobile,

      address: provinceName + cityName + countyName+address,

      transportDay: transportDay

    }

      arr.push(addressList);

    wx.setStorageSync(&#39;addressList&#39;, arr);

    wx.navigateBack({

       

    })

  }

})

登入後複製

area.js和weui.wxss 可以看下方原始碼取得方式,這裡就不多做解釋。

相關推薦:

微信小程式商城開發之用微信授權並實現個人中心的頁面代碼

微信小程式商城開發之實現商品加入購物車的功能(程式碼)

微信小程式商城開發之https框架的搭建以及頂部和底部導航的實現

以上是微信小程式商城開發之實現用戶收貨地址管理頁面的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
現在個人嫩申請微信小程序
來自於 1970-01-01 08:00:00
0
0
0
微信小程式
來自於 1970-01-01 08:00:00
0
0
0
微信小程式輪播
來自於 1970-01-01 08:00:00
0
0
0
微信小程式自動補全工具
來自於 1970-01-01 08:00:00
0
0
0
微信小程式中用ajax呼叫後台接口
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板