小程序地址管理/ 修改/ 左滑删除

完整小程序地址：https://github.com/aipdx/webChat-app-demo

功能有：地址列表，新增，修改，左滑删除地址

image.png

效果图
地址列表

image.png
新增地址
image.png

编辑地址

image.png
左滑删除
image.png

在app.json里引入weui

"useExtendedLib": {
    "weui": true
  },

在使用左滑功能的页面json里引入组件

"usingComponents": {
    "mp-slideview": "weui-miniprogram/slideview/slideview"
  },

地址列表代码：

<view class="addr_wrap">
  <!--没有地址-->
  <view wx:if="{{!address.length}}" class="no_addr_wrap">
    <navigator url="/pages/address_manage/address_manage" hover-class="none">新增地址</navigator>
  </view>
  <!--有地址-->
  <view wx:else class="have_addr_wrap">
    <view wx:for="{{address}}" wx:key="index" class="slideview_wrap">
      <mp-slideview buttons="{{slideButtons}}" data-index="{{index}}" bindbuttontap="slideButtonTap">
        <view class="addr_item">
          <view class="checkbox_wrap">
            <radio-group bindchange="handleAddress" data-index="{{index}}">
              <radio checked="{{item.checked}}" value="{{item.userName}}" color="#eb4450"></radio>
            </radio-group>
          </view>
          <view class="addr_detail">
            <view class="addr_name">
              <text class="name_txt">{{item.userName}}</text>
              <text class="tel_txt">{{item.telNumber}}</text>
            </view>
            <view class="addr_txt_wrap">
              <view class="addr_txt">地址：</view>
              <view class="detail_txt">{{item.all}}</view>
            </view>
          </view>
          <navigator
            url="/pages/address_manage/address_manage?id={{index}}"
            hover-class="none"
            class="edit_wrap icon-xiugai iconfont">
          </navigator>
        </view>
      </mp-slideview>
    </view>
  </view>
</view>
<view class="add_addr_tool">
  <navigator url="/pages/address_manage/address_manage" hover-class="none" class="tool_wrap">
    <view class="add_icon">+</view>
    <view class="add_txt">新增个人地址</view>
    <view class="jiantou_icon">></view>
  </navigator>
</view>

Page({
  data: {
    address: [], // 所有地址数组
    slideButtons: [{ // 左滑按钮配置
      type: 'warn',
      text: '删除'
    }],
  },
  onShow() {
    this.getAddress()
  },
  // 获取地址信息
  getAddress() {
    const addressList = wx.getStorageSync('addressList') || [] // 用户自己在新增地址页面添加的
    addressList.map(v => {
      if (!v.checked) { // 如果没有checked就添加一个
        v.checked = false
      }
    }) // 给地址添加一个是否选中的标识
    this.setData({address: addressList})
  },
  // 选择地址
  handleAddress(e) {
    const {index} = e.currentTarget.dataset
    let {address} = this.data
    address.forEach((v, i) => i === index ? v.checked = true : v.checked = false)
    this.setData({
      address
    })
    wx.setStorageSync('addressList', address)
  },
  slideButtonTap(e) {
    const {index} = e.detail // index对应的是slideButtons数组的索引 index为多少就表示点击的是数组的第几个
    const currentIndex = e.currentTarget.dataset.index // 点击当前的索引
    let {address} = this.data
    if (index === 0) { // 删除
      wx.showModal({
        content: '确认删除吗',
        success: (res) => {
          if (res.confirm) { // 用户点击了确定
            address.splice(currentIndex, 1) // 删除当前索引对应的数据
            this.setData({address})
            wx.setStorageSync('addressList', address)
          } else {
            console.log('用户点击了取消')
          }
        }
      })
    }
  }
})

css

page {
  background-color: #dddddd;
  height: 100vh;
  padding-bottom: 90rpx;
}

.no_addr_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20rpx;

  navigator {
    color: #06ae56;
    font-size: 40rpx;
    width: 70%;
    border-radius: 15rpx;
    height: 90rpx;
    border: 1px solid #06ae56;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
}

.have_addr_wrap {
  padding: 20rpx;

  .slideview_wrap {
    margin-top: 15rpx;

    &:first-child {
      margin-top: 0;
    }

    /deep/ .weui-slideview__btn {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .addr_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 30rpx 10rpx;
  }

  .checkbox_wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    radio {
      transform: scale(0.7);
    }
  }

  .addr_detail {
    flex: 8;
    margin-left: 15rpx;

    .addr_name {
      color: #666666;
    }

    .tel_txt {
      margin-left: 20rpx;
    }

    .addr_txt_wrap {
      color: #666666;
      margin-top: 15rpx;
      display: flex;

      .addr_txt {
        flex-shrink: 0;
      }
    }
  }

  .edit_wrap {
    flex: 1;
    color: #666666;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
  }
}

.add_addr_tool {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  height: 90rpx;
  padding: 0 20rpx;

  .tool_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    .add_icon {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      line-height: 29rpx;
      text-align: center;
      background-color: var(--themeColor);
      color: #ffffff;
    }

    .add_txt {
      flex: 30;
      margin-left: 15rpx;
      color: #666666;
    }

    .jiantou_icon {
      flex: 1;
      color: #acacac;
      font-size: 36rpx;
    }
  }
}

编辑地址页面address_manage

<form bindsubmit="submitForm">
  <view class="addr_manage">
    <view class="addr_ma_item">
      <view class="addr_ma_txt">姓名</view>
      <view class="addr_ma_input">
        <input placeholder="请填写收货人姓名" value="{{form.userName}}" name="userName" placeholder-class="placeholder_class"/>
      </view>
    </view>
    <view class="addr_ma_item">
      <view class="addr_ma_txt">电话</view>
      <view class="addr_ma_input">
        <input placeholder="请填写收货电话" value="{{form.telNumber}}" name="telNumber" placeholder-class="placeholder_class"/>
      </view>
    </view>
    <view class="addr_ma_item province_select">
      <view class="picker_wrap">
        <view class="addr_ma_txt">省市区</view>
        <picker mode="region" bindchange="bindRegionChange" value="{{form.region}}" name="region" custom-item="{{customItem}}">
          <view class="{{form.region[1]?'':'default_picker'}}">
            {{form.region[0]}}
            {{form.region[1]?'-':''}}
            {{form.region[1]}}
            {{form.region[1]?'-':''}}
            {{form.region[2]}}
          </view>
        </picker>
      </view>
      <view class="addr_ma_icon">></view>
    </view>
    <view class="addr_ma_item">
      <view class="addr_ma_txt">详细信息</view>
      <view class="addr_ma_input">
        <input placeholder="街道、楼牌号等" value="{{form.addrDetail}}" name="addrDetail" placeholder-class="placeholder_class"/>
      </view>
    </view>
  </view>
  <!--提交按钮-->
  <view class="submit_btn_wrap">
    <button type="primary" formType="submit">提交</button>
    <button type="warn" bindtap="restForm" plain>取消</button>
  </view>
</form>

const app = getApp()
Page({
  data: {
    form: {
      userName: '',
      telNumber: '',
      addrDetail: '',
      region: ['请选择省市区/县', '', ''], // 省市区数据 第一个可以当placeholder
    },
    customItem: '', // 自定义picker显示的内容
  },
  Postcode: '', // 邮编
  AddressId: -1,
  onShow() {
    const {id} = app.getPage(1).options
    if (id >= 0) {
      this.AddressId = id
      this.getEditAddress(id)
    }
  },
  // 省市区选择事件
  bindRegionChange(e) {
    const {value, code, postcode} = e.detail
    // console.log(code) // 统计用区划代码
    // postcode 是邮政编码
    this.Postcode = postcode
    this.setData({
      'form.region': value
    })
  },
  // 提交表单
  submitForm(e) {
    if (!this.validateForm(e)) return
    // userName,telNumber...对应的是input的name属性
    const {userName, telNumber, region, addrDetail} = e.detail.value
    const addressList = wx.getStorageSync('addressList') || []
    if (this.AddressId >= 0) { // 编辑地址
      addressList[this.AddressId].userName = userName
      addressList[this.AddressId].telNumber = telNumber
      addressList[this.AddressId].postalCode = this.Postcode
      addressList[this.AddressId].provinceName = region[0]
      addressList[this.AddressId].cityName = region[1]
      addressList[this.AddressId].countyName = region[2]
      addressList[this.AddressId].detailInfo = addrDetail
      addressList[this.AddressId].all = region[0] + region[1] + region[2] + addrDetail
    } else { // 新增地址
      const address = {
        userName,
        telNumber,
        postalCode: this.Postcode,
        provinceName: region[0],
        cityName: region[1],
        countyName: region[2],
        detailInfo: addrDetail,
        all: region[0] + region[1] + region[2] + addrDetail
      }
      addressList.push(address)
    }
    wx.setStorageSync('addressList', addressList)
    wx.showToast({
      title: '提交成功',
    })
    wx.navigateBack({
      delta: 1
    })
  },
  // 验证form
  validateForm(e) {
    const telReg = app.regExps.mobile
    const {userName, telNumber, region, addrDetail} = e.detail.value
    if (!userName.trim()) {
      wx.showToast({
        title: '请先填写姓名',
        icon: "none"
      })
      return false
    }
    if (!telNumber.trim() || !telReg.test(telNumber)) {
      wx.showToast({
        title: '请先填正确的手机号',
        icon: "none"
      })
      return false
    }
    if (!region.length) {
      wx.showToast({
        title: '请先选择省市区',
        icon: "none"
      })
      return false
    }
    if (!addrDetail.trim()) {
      wx.showToast({
        title: '请先填写详细信息',
        icon: "none"
      })
      return false
    }
    return true
  },
  // 编辑地址获取需要编辑的地址信息
  getEditAddress(id) {
    const addressList = wx.getStorageSync('addressList') || []
    const address = addressList[id]
    this.setData({
      'form.userName': address.userName,
      'form.telNumber': address.telNumber,
      'form.addrDetail': address.detailInfo,
      'form.region': [address.provinceName, address.cityName, address.countyName],
    })
  },
  // 重置表单
  restForm() {
    this.setData({
      'form.userName': '',
      'form.telNumber': '',
      'form.addrDetail': '',
      'form.region': []
    })
    wx.navigateBack({
      delta: 1
    })
  }
})

page {
  background-color: #f9f9f9;
}

.addr_manage {
  .addr_ma_item {
    display: flex;
    border-bottom: 1px solid #ececec;
    padding: 20rpx;
    align-items: center;
    color: #666666;

    .addr_ma_txt {
      display: 2;
    }

    .addr_ma_input {
      flex: 4;
      margin-left: 30rpx;
      padding-right: 20rpx;
    }
  }

  .province_select {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .picker_wrap {
      display: flex;
      flex: 5;

      .addr_ma_txt {
        margin-right: 20rpx;
      }

      picker {
        width: 70%;
      }
      .default_picker {
        color: #acacac;
      }
    }

    .addr_ma_icon {
      font-size: 30rpx;
      color: #acacac;
    }
  }
}

.submit_btn_wrap {
  margin-top: 20rpx;
  padding: 0 20rpx;
  width: 100%;

  button {
    font-weight: normal;
    width: 100% !important;
    margin-top: 20rpx;
  }
}

app.js

// app.js
App({
  onLaunch() {
    // 将是否iphoneX 信息缓存到全局公众数据中
    this.globalData.isIphoneX = this.isIphoneX()
  },
  // iphoneX兼容 有刘海屏
  isIphoneX() {
    let mobile = wx.getSystemInfoSync()
    if (mobile.model.indexOf("iPhone X") >= 0) {
      return true
    } else {
      return false
    }
  },
  // 常用正则表达式集
  regExps: {
    email: /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$/, //邮箱
    mobile: /^(?:1\d{2})-?\d{5}(\d{3}|\*{3})$/, //手机号码
    qq: /^[1-9][0-9]{4,9}$/, //QQ
    befitName: /^[a-z0-9A-Z\u4e00-\u9fa5]+$/, //合适的用户名，中文,字母,数字
    befitPwd: /^[a-z0-9A-Z_]+$/, //合适的用户名，字母,数字,下划线
    allNumber: /^[0-9]+.?[0-9]$/ //全部为数字
  },
  // 获取上一页路由
  getPage(index) {
    const pages = getCurrentPages()
    const prevPage = pages[pages.length - index]
    return prevPage
  },
  globalData: {
    isIphoneX: false
  },
})