微信小程序商城15天从零实战视频课程-添加地址

js代码

// pages/addr/edit/edit.js
Page({ 
  data: {
    addr: {},
    provinces: [
      "浙江",
      "湖南"
    ],
    citys: [
      "杭州",
      "长沙"
    ],
    areas: [
      "余杭区",
      "开福区"
    ],
    streets: [
      "星桥镇",
      "芙蓉北路",
      "湘江中路"
    ],
    street_idx: 0,
    province_idx: 0,
    city_idx: 0,
    area_idx: 0
  },

  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    //console.log(options)
    if (options.id) {
      this.setData({
        "addr.id": options.id
      })
    }
    var id = this.data.addr.id;
    if (id) {
      var that = this;
      wx.showToast({
        title: "Loading...",
        icon: "loading",
        duration: 900000
      })
      wx.request({
        url: 'http://www.yaoyiwangluo.com/wx/addr_info.asp?id=' + id,
        // data: {},
        method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        // header: {}, // 设置请求的 header
        success: function (res) {
          // success
          console.log(res.data[0]);
          that.setData({
            addr: res.data[0]
          })
        },
        fail: function () {
          // fail
          wx.showModal({
            content: "数据加载失败,请检查网络后重试!",
            showCancel: false,
            success: function (res) {
              wx.navigateBack({
                delta: 1, // 回退前 delta(默认为1) 页面
              })
            }
          })
        },
        complete: function () {
          // complete
          wx.hideToast();
          var addr = that.data.addr;
          var provinces = that.data.provinces;
          var areas = that.data.areas;
          var citys = that.data.citys;
          var streets = that.data.streets;
          var province_idx = 0;
          var city_idx = 0;
          var area_idx = 0;
          var street_idx = 0;
          //记得移走到success里面
          for (var i = 0; i < provinces.length; i++) {
            if (provinces[i] == addr.province) {
              province_idx = i;
              break;
            }
          }
          for (var i = 0; i < citys.length; i++) {
            if (citys[i] == addr.city) {
              city_idx = i;
              break;
            }
          }
          for (var i = 0; i < areas.length; i++) {
            if (areas[i] == addr.area) {
              area_idx = i;
              break;
            }
          }
          for (var i = 0; i < streets.length; i++) {
            if (streets[i] == addr.street) {
              street_idx = i;
              break;
            }
          }
          that.setData({
            "province_idx": province_idx,
            "city_idx": city_idx,
            "area_idx": area_idx,
            "street_idx": street_idx,
          })
        }
      })
    } else {
      wx.setNavigationBarTitle({
        title: '新增地址'
      })
    }
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  provinceChange: function (e) {
    var idx = e.detail.value;
    console.log(idx);
    this.setData({
      province_idx: idx
    })
  },
  cityChange: function (e) {
    var idx = e.detail.value;
    console.log(idx);
    this.setData({
      city_idx: idx
    })
  },
  areaChange: function (e) {
    var idx = e.detail.value;
    console.log(idx);
    this.setData({
      area_idx: idx
    })
  },
  streetChange: function (e) {
    var idx = e.detail.value;
    console.log(idx);
    this.setData({
      street_idx: idx
    })
  },

  //保存地址 
  saveAddr: function (e) {
    console.log(e)
    var provinces = this.data.provinces;
    var areas = this.data.areas;
    var citys = this.data.citys;
    var streets = this.data.streets;

    var addr = e.detail.value;
    addr.province = provinces[addr.province];
    addr.area = areas[addr.area];
    addr.city = citys[addr.city];
    addr.street = streets[addr.street];
    var id = this.data.addr.id;
    addr.id = id;
    console.log(addr)
    wx.showToast({
      title: "Loading...",
      icon: "loading",
      duration: 900000
    })
    wx.request({
      url: 'http://www.yaoyiwangluo.com/wx/txt.asp',
      data: addr,
      method: 'get', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        setTimeout(function () {
          if (res.data.flag == 'true') {
            wx.showToast({
              title: "保存成功",
              duration: 1500
            })
            setTimeout(function () {
              wx.navigateBack({
                delta: 1, // 回退前 delta(默认为1) 页面
              })
            }, 2000)
          } else {
            wx.showToast({
              title: "操作失败",
              duration: 1500
            })
          }
        }, 100)
      },
      fail: function () {
        // fail
        wx.showModal({
          content: "操作失败,未保存成功,请检查网络后重试",
          showCancel: false
        })
      },
      complete: function () {
        // complete
        wx.hideToast();
      }
    })
  },
  delAddr: function (e) {
    var id = e.target.dataset.id;
    console.log(id)
    wx.showToast({
      title: "Loading...",
      icon: "loading",
      duration: 900000
    })
    wx.request({
      url: 'http://localhost:8080/Wxmini/addr_del.do?id=' + id,
      // data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        setTimeout(function () {
          wx.showToast({
            title: "删除成功",
            duration: 1500
          })
          setTimeout(function () {
            wx.navigateBack({
              delta: 1, // 回退前 delta(默认为1) 页面
            })
          }, 2000)
        }, 100)
      },
      fail: function () {
        wx.showModal({
          content: "操作失败,未删除该地址,请检查网络后重试",
          showCancel: false
        })
      },
      complete: function () {
        // complete
        wx.hideToast();
      }
    })
  }
})

wxml代码

 <form bindsubmit="saveAddr">

    <view id='edit'>
      <view class='edit-item'>
        <text>收货人</text>
        <input type="text" maxlength="13" placeholder="请输入姓名" name="name" value="{{addr.name}}" />
      </view>
      <view class='hr'></view>

      <view class='edit-item'>
        <text>联系电话</text>
        <input type="text" maxlength="11" placeholder="请输入联系电话" name="phone" value="{{addr.phone}}" />
      </view>
      <view class='hr'></view>

      <view class='edit-item'>
        <text>所在地区</text>
        <picker mode="selector" name='area' value='{{area_idx}}' range="{{areas}}" bindchange="areaChange">
          <view class='picker_last'>
            {{areas[area_idx]}}
          </view>
        </picker>
        <picker mode="selector" name='city' value='{{city_idx}}' range="{{citys}}" bindchange="cityChange">
          <view>
            {{citys[city_idx]}}
          </view>
        </picker>
        <picker mode="selector" name='province' value='{{province_idx}}' range="{{provinces}}" bindchange="provinceChange">
          <view>
            {{provinces[province_idx]}}
          </view>
        </picker>
      </view>
      <view class='hr'></view>


      <view class='edit-item'>
        <textarea name="desc" maxlength="500" placeholder="请输入详细地址" style="height:200rpx;" value="{{addr.desc}}" />
      </view>
    </view>

    <view id='default'>
      设为默认地址
      <switch type="switch" checked="{{addr.isDefault}}" name="isDefault" />
    </view>

    <view id='del' wx:if="{{addr.id}}">
      <text data-id="{{addr.id}}" bindtap="delAddr">删除地址</text>
    </view>
    
    <view id='submit'>
      <button type="primary" form-type="submit">保存</button>
    </view>

  </form>

wxss代码

/* pages/addr/edit/edit.wxss */
#edit{
    background: white;
    font-size: 18px;
    font-family: 'Times New Roman', Times, serif;
}

.edit-item{
    clear: both;
    padding: 12rpx 0rpx;
}

.edit-item text{
    line-height: 30px;
    padding-left: 25rpx;
    float: left;
}

.edit-item input{
    float: right;
    position: relative;
}

.edit-item picker{
    float: right;
    padding-right: 30rpx;
    padding-top: 8rpx;
    color:#666;
}

.edit-item textarea{
    padding-top: 25rpx;
    padding-left: 25rpx;
}

.picker_last{
    padding-right: 30rpx;
}

.hr{
    position: relative;
    width: 100%;
    height: 1px;
    background: #ccc;
    top: 52rpx;
}

#default{
    margin: 10px 0px;
    padding: 20rpx;
    background: white;
    clear: both;
    font-size: 18px;
}

#default switch{
    float: right;
    position: relative;
    bottom: 10rpx;
}

#del{
    margin: 20px 0px;
    padding: 20rpx;
    background: white;
    color:red;
    font-size: 18px;
}

欢迎大家收看我的****：微信小程序商城15天从零实战视频课程
https://edu.****.net/course/detail/19437