微信小程序收获地址管理

微信小程序收获地址管理

收获地址这部分主要有四个功能：新增地址，修改地址，删除地址，选择地址。

其中修改，删除，新增可以放在一个界面中，话不多说上代码

界面

选择界面

<view class='container'>
  <view class = "item" wx:for="{{list}}" wx:key="" wx:for-index="index" data-address='{{item.address}}{{item.door_card}}' data-name='{{item.name}}' data-phone='{{item.phone}}' data-id='{{item.address_id}}' bindtap='select'>
    <text class='address'>{{item.address}}{{item.door_card}}</text>
    <text class='name' >{{item.name}}</text>
    <text class='tel'>{{item.phone}}</text>
    <image class='eidt' src = "../../../images/icon/modify.png" mode = "widthFix" data-index='{{index}}' bindtap = "edit"/>
  </view>
</view>
<view class = "add" bindtap = "addAddre">
  <image  class = "left" src = "../../../images/icon/add.png" mode = "widthFix" />
  <view class = "text">新增个人地址</view>
  <image class="right" src = "../../../images/icon/right.png" mode = "widthFix" />
</view>

选择界面逻辑

新增地址点击，编辑按钮点击，选择地址后为上一页面的地址栏赋值;注意数据刷新一般放在onShow中

// pages/me/address/address.js
const tools = require('../../../utils/tools.js');
var app = getApp();
Page({
  data: {
    list:[]
  },
  onLoad: function (options) {
  },
  //修改地址
  edit: function (e){
    console.log(this.data.list[e.currentTarget.dataset.index])
    var address = this.data.list[e.currentTarget.dataset.index]
    wx.navigateTo({
    url: '/pages/me/address/add-address/add-address?address='+ JSON.stringify(address)
   })
  },
  //显示地址列表
  onShow: function (options){
    var vm = this;
    tools.request(app.globalData.url + "/info/Address", 'post', {})
      .then(resp => {
        console.log("收到服务器回复地址信息", resp.data.data)
        vm.setData({
          list: resp.data.data
        })
      })
  },
  //增加地址
  addAddre: function () {
    wx.navigateTo({
      url: '/pages/me/address/add-address/add-address'
    })
  },
  //选择地址
  select: function(e){
    //为上一个页面的data赋值
    var pages = getCurrentPages(); // 获取页面栈
    var currPage = pages[pages.length - 1]; // 当前页面
    var prevPage = pages[pages.length - 2]; // 上一个页面
    if (prevPage.__route__ == 'pages/shoppingcart/pay/pay') {
      var address = {
        name: e.currentTarget.dataset.name,
        address: e.currentTarget.dataset.address,
        phone: e.currentTarget.dataset.phone,
        id: e.currentTarget.dataset.id
      }
      console.log("为上一个页面的address赋值",address)
      prevPage.setData({
        address: address
      })
      wx.navigateBack({
        delta: 1
      })
   }
  }
})

新增/修改地址界面

<!--pages/me/address/add-address/add-address.wxml-->
<!-- 信息部分 --> 
<form bindsubmit="saveAddr" report-submit="true">
<view class = "info">
<!-- 姓名部分 -->
<view class = "item">
<text>姓名</text>
<view class = "right">
<input type="text" name = "name" placeholder="请填写收货人姓名"  value="{{list.name}}" />
</view>
</view>

<!-- 电话部分 -->
<view class = "item">
<text>电话</text>
<view class = "right">
<input name="phone" type="number" placeholder="请填写收货手机号"  value="{{list.phone}}"/>
</view>
</view>

<!-- 收货地址部分 -->
<view class = "item">
<text>地址</text>
<view class = "right1" bindtap='cilickaddress'>
  <text class='t1' wx:if="{{!address}}">点击选择</text>
  <input name="address"  wx:else value="{{address}}" />
  <image src='../../../../images/icon/right.png'></image>
</view>
</view>

<!-- 详细地址部分 -->
<view class = "item">
<text>详细地址</text>
<view class = "right">
<input name="door_card" type="text" placeholder="例： 10栋5层502室"  value="{{list.door_card}}" />
</view>
</view>

</view>
<!-- 信息部分end -->
    
<view class='save'>
  <button class="savebt" formType="submit" hover-class="none">保存</button>
</view>
<view class="delete" bindtap='delete' hidden='{{tag}}'>删除</view>
</form>

js逻辑

地址部分使用了定位功能，详情请看 微信小程序中腾讯位置API使用 ，通过判断传入值来决定是否显示删除按钮。

// pages/me/address/add-address/add-address.js
const tools = require('../../../../utils/tools.js');
var app = getApp();
Page({
  data: {
    tag: true
  },
    //判断是否有传入值
  onLoad: function (e) {
    console.log(e.address)
    if (e.address != undefined){
      var list = JSON.parse(e.address);
      this.setData({
        list: list,
        address: list.address,
        address_id: list.address_id
      })
    }else{
      console.log("不存在传入值")
    }
  },
  onShow: function(e){
    if (this.data.list != undefined){
      console.log("存在传入值")
      this.setData({
        tag:false
      })
    }
  },
  //点击地址信息，定位
  cilickaddress: function(e){
    wx.navigateTo({
      url: '/pages/home/address/address',
    })
  },
  //保存修改地址
  saveAddr: function(e){
    if (e.detail.value.name == "") {
      wx.showModal({
        title: '提示',
        content: "请填写您的姓名！"
      })
    } else if (e.detail.value.phone == "") {
      wx.showModal({
        title: '提示',
        content: "请填写您的手机号！"
      })
    } else if (!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.phone))) {
      wx.showModal({
        title: '提示',
        content: "手机号格式不正确"
      })
    } else if (e.detail.value.address === undefined) {
      wx.showModal({
        title: '提示',
        content: "请选择您的所在区域"
      })
    } else if (e.detail.value.door_card == "") {
      wx.showModal({
        title: '提示',
        content: "请输入您的详细地址"
      })
    }else {
      console.log(e.detail.value);
      if(this.data.tag === true){
        var address = e.detail.value
        address = JSON.stringify(address);
        //保存新地址
        tools.request(app.globalData.url + "/info/InsertAddress", 'post', {'address': address})
          .then(resp => {
            console.log("新增地址成功", resp)
            wx.showToast({
              title: resp.data.msg,
              icon: 'success',
              duration: 1500,
              success: function () {
                setTimeout(function () {
                  wx.navigateBack({
                    delta: 1
                  })
                }, 1500);
              }
            })
          })
      }else{
        var address = e.detail.value
        address.address_id = this.data.address_id;
        address = JSON.stringify(address);
        //修改地址
        tools.request(app.globalData.url + "/info/AlterAddress", 'post', { 'address': address })
          .then(resp => {
            console.log("修改地址成功", resp)
            wx.showToast({
              title: resp.data.msg,
              icon: 'success',
              duration: 1500,
              success: function () {
                setTimeout(function () {
                  wx.navigateBack({
                    delta: 1
                  })
                }, 1500);
              }
            })
          })
      }
    }
  },
  //删除该地址
  delete: function(e){
    var vm = this;
    console.log(vm.data.address_id)
    tools.request(app.globalData.url + "/info/DeleteAddress", 'post', { 'address_id': vm.data.address_id})
      .then(resp => {
        console.log("删除地址成功", resp)
        wx.showToast({
          title: resp.data.msg,
          icon: 'success',
          duration: 1500,
          success: function () {
            setTimeout(function () {
              wx.navigateBack({
                delta: 1
              })
            }, 1500);
          }
        })
      })
  }
})