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

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

不言
不言
Aug 16, 2018 pm 05:08 PM
微信小程序

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

看效果

开发计划

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}}">  </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(&#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

<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

@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

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

address.js

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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

<🎜>：种植花园 - 完整的突变指南
3 周前ByDDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前By尊渡假赌尊渡假赌尊渡假赌
如何修复KB5055612无法在Windows 10中安装？
3 周前ByDDD
北端：融合系统，解释
3 周前By尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
3 周前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

EditPlus 中文破解版

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

显示更多

热门话题

Java教程
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
显示更多