微信小程序新增收货地址个人信息填写样式设计制作开发教程

本文给大家带来的是微信小程序新增收货地址个人信息填写样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container">
    <form bindsubmit="bindSave">
    <view class="form-box">
        <view class="row-wrap">
            <view class="label">联系人</view>
            <view class="label-right">
                <input name="linkMan" class="input" type="text" placeholder="姓名" value="{{addressData.linkMan}}"/>
            </view>
        </view>
        <view class="row-wrap">
            <view class="label">手机号码</view>
            <view class="label-right">
                <input name="mobile" class="input" maxlength="11" type="number" placeholder="11位手机号码" value="{{addressData.mobile}}"/>
            </view>
        </view>
        <view class="row-wrap" bindtap="selectCity">
            <view class="label">选择地区</view>
            <picker bindchange="bindPickerProvinceChange" range="{{provinces}}">
              <view class="picker {{selProvince=='请选择'?'hui':''}}">
                {{selProvince}}
              </view>
            </picker>
            <picker bindchange="bindPickerCityChange" range="{{citys}}">
              <view class="picker {{selCity=='请选择'?'hui':''}}">
                {{selCity}}
              </view>
            </picker>
            <picker bindchange="bindPickerChange" range="{{districts}}">
              <view class="picker {{selDistrict=='请选择'?'hui':''}}">
                {{selDistrict}}
              </view>
            </picker>
        </view>
        <view class="addr-details">
            <view class="label">详细地址</view>
            <view class="label-right">
                <!--<input class="input" type="text" placeholder="街道门牌信息"/>-->
                <textarea name="address" auto-height placeholder="街道门牌信息"  value="{{addressData.address}}"/>
            </view>
        </view>
        <view class="row-wrap">
            <view class="label">邮政编号</view>
            <view class="label-right">
                <input name="code" class="input" type="text" value="{{addressData.code}}"/>
            </view>
        </view>
    </view>
    <button type="warn" class="save-btn" formType="submit">保存</button>
    <button type="default" class="save-btn" bindtap="deleteAddress" data-id="{{addressData.id}}" wx:if="{{addressData}}">删除该地址</button>
    <button type="default" class="cancel-btn" bindtap="bindCancel">取消</button>
    </form>
</view>

二、wxss样式文件代码如下：

page{
    height: 100%;
}
.container{
    background-color: #f5f5f9;
    justify-content: initial;
}
.form-box{
    width:100%;
    background-color: #fff;
    margin-top: 20rpx;
}
.row-wrap{
    width: 720rpx;
    height: 88rpx;
    line-height: 88rpx;
    margin-left: 30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    font-size: 28rpx;
    /*justify-content: space-between;*/
}
.row-wrap .label{
    width: 160rpx;
    color: #000
}
.row-wrap .label-right{
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
}
.row-wrap .label-right input{
    height: 100%;
    font-size: 28rpx;
    padding-right: 30rpx;
}
.row-wrap .right-box{
    margin-right: 30rpx; 
}
.arrow-right{
    width: 15rpx;
    height: 24rpx;
}
.save-btn,
.cancel-btn{
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    margin-top:30rpx; 
    border-radius: 6rpx;
    box-sizing: border-box;
}
.save-btn{
    background-color: #e64340;
    color:#fff;
}
button[type="default"]{
    background-color: #ffffff;
    color:#000;
}
.addr-details{
    height: auto;
    padding: 30rpx 0;
    margin-left:30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    font-size: 28rpx;
}
.addr-details .label{
    margin:auto 0 auto 0;
    width: 160rpx;
    color: #000
}
.addr-details textarea{
    box-sizing: border-box;
    width: 480rpx;
    overflow: scroll;
}
picker {
    min-width: 20rpx;
    height: 100%;
    margin-right: 20rpx;
}
.hui{
    color: #777;
}

三、js页面代码如下：

var commonCityData = require('../../utils/city.js')
//获取应用实例
var app = getApp()
Page({
  data: {
    provinces:[],
    citys:[],
    districts:[],
    selProvince:'请选择',
    selCity:'请选择',
    selDistrict:'请选择',
    selProvinceIndex:0,
    selCityIndex:0,
    selDistrictIndex:0
  },
  bindCancel:function () {
    wx.navigateBack({})
  },
  bindSave: function(e) {
    var that = this;
    var linkMan = e.detail.value.linkMan;
    var address = e.detail.value.address;
    var mobile = e.detail.value.mobile;
    var code = e.detail.value.code;

    if (linkMan == ""){
      wx.showModal({
        title: '提示',
        content: '请填写联系人姓名',
        showCancel:false
      })
      return
    }
    if (mobile == ""){
      wx.showModal({
        title: '提示',
        content: '请填写手机号码',
        showCancel:false
      })
      return
    }
    if (this.data.selProvince == "请选择"){
      wx.showModal({
        title: '提示',
        content: '请选择地区',
        showCancel:false
      })
      return
    }
    if (this.data.selCity == "请选择"){
      wx.showModal({
        title: '提示',
        content: '请选择地区',
        showCancel:false
      })
      return
    }
    var cityId = commonCityData.cityData[this.data.selProvinceIndex].cityList[this.data.selCityIndex].id;
    var districtId;
    if (this.data.selDistrict == "请选择" || !this.data.selDistrict){
      districtId = '';
    } else {
      districtId = commonCityData.cityData[this.data.selProvinceIndex].cityList[this.data.selCityIndex].districtList[this.data.selDistrictIndex].id;
    }
    if (address == ""){
      wx.showModal({
        title: '提示',
        content: '请填写详细地址',
        showCancel:false
      })
      return
    }
    if (code == ""){
      wx.showModal({
        title: '提示',
        content: '请填写邮编',
        showCancel:false
      })
      return
    }
    var apiAddoRuPDATE = "add";
    var apiAddid = that.data.id;
    if (apiAddid) {
      apiAddoRuPDATE = "update";
    } else {
      apiAddid = 0;
    }
    wx.request({
      url: 'https://api.it120.cc/' + app.globalData.subDomain + '/user/shipping-address/' + apiAddoRuPDATE,
      data: {
        token: app.globalData.token,
        id: apiAddid,
        provinceId: commonCityData.cityData[this.data.selProvinceIndex].id,
        cityId: cityId,
        districtId: districtId,
        linkMan:linkMan,
        address:address,
        mobile:mobile,
        code:code,
        isDefault:'true'
      },
      success: function(res) {
        if (res.data.code != 0) {
          // 登录错误 
          wx.hideLoading();
          wx.showModal({
            title: '失败',
            content: res.data.msg,
            showCancel:false
          })
          return;
        }
        // 跳转到结算页面
        wx.navigateBack({})
      }
    })
  },
  initCityData:function(level, obj){
    if(level == 1){
      var pinkArray = [];
      for(var i = 0;i<commonCityData.cityData.length;i++){
        pinkArray.push(commonCityData.cityData[i].name);
      }
      this.setData({
        provinces:pinkArray
      });
    } else if (level == 2){
      var pinkArray = [];
      var dataArray = obj.cityList
      for(var i = 0;i<dataArray.length;i++){
        pinkArray.push(dataArray[i].name);
      }
      this.setData({
        citys:pinkArray
      });
    } else if (level == 3){
      var pinkArray = [];
      var dataArray = obj.districtList
      for(var i = 0;i<dataArray.length;i++){
        pinkArray.push(dataArray[i].name);
      }
      this.setData({
        districts:pinkArray
      });
    }
    
  },
  bindPickerProvinceChange:function(event){
    var selIterm = commonCityData.cityData[event.detail.value];
    this.setData({
      selProvince:selIterm.name,
      selProvinceIndex:event.detail.value,
      selCity:'请选择',
      selCityIndex:0,
      selDistrict:'请选择',
      selDistrictIndex: 0
    })
    this.initCityData(2, selIterm)
  },
  bindPickerCityChange:function (event) {
    var selIterm = commonCityData.cityData[this.data.selProvinceIndex].cityList[event.detail.value];
    this.setData({
      selCity:selIterm.name,
      selCityIndex:event.detail.value,
      selDistrict: '请选择',
      selDistrictIndex: 0
    })
    this.initCityData(3, selIterm)
  },
  bindPickerChange:function (event) {
    var selIterm = commonCityData.cityData[this.data.selProvinceIndex].cityList[this.data.selCityIndex].districtList[event.detail.value];
    if (selIterm && selIterm.name && event.detail.value) {
      this.setData({
        selDistrict: selIterm.name,
        selDistrictIndex: event.detail.value
      })
    }
  },
  onLoad: function (e) {
    var that = this;
    this.initCityData(1);
    var id = e.id;
    if (id) {
      // 初始化原数据
      wx.showLoading();
      wx.request({
        url: 'https://api.it120.cc/' + app.globalData.subDomain + '/user/shipping-address/detail',
        data: {
          token: app.globalData.token,
          id: id
        },
        success: function (res) {
          wx.hideLoading();
          if (res.data.code == 0) {
            that.setData({
              id:id,
              addressData: res.data.data,
              selProvince: res.data.data.provinceStr,
              selCity: res.data.data.cityStr,
              selDistrict: res.data.data.areaStr
              });
            that.setDBSaveAddressId(res.data.data);
            return;
          } else {
            wx.showModal({
              title: '提示',
              content: '无法获取快递地址数据',
              showCancel: false
            })
          }
        }
      })
    }
  },
  setDBSaveAddressId: function(data) {
    var retSelIdx = 0;
    for (var i = 0; i < commonCityData.cityData.length; i++) {
      if (data.provinceId == commonCityData.cityData[i].id) {
        this.data.selProvinceIndex = i;
        for (var j = 0; j < commonCityData.cityData[i].cityList.length; j++) {
          if (data.cityId == commonCityData.cityData[i].cityList[j].id) {
            this.data.selCityIndex = j;
            for (var k = 0; k < commonCityData.cityData[i].cityList[j].districtList.length; k++) {
              if (data.districtId == commonCityData.cityData[i].cityList[j].districtList[k].id) {
                this.data.selDistrictIndex = k;
              }
            }
          }
        }
      }
    }
   },
  selectCity: function () {
    
  },
  deleteAddress: function (e) {
    var that = this;
    var id = e.currentTarget.dataset.id;
    wx.showModal({
      title: '提示',
      content: '确定要删除该收货地址吗？',
      success: function (res) {
        if (res.confirm) {
          wx.request({
            url: 'https://api.it120.cc/' + app.globalData.subDomain + '/user/shipping-address/delete',
            data: {
              token: app.globalData.token,
              id: id
            },
            success: (res) => {
              wx.navigateBack({})
            }
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})

模板简介：该模板名称为【微信小程序新增收货地址个人信息填写样式设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。