微信小程序,添加地址,修改地址,删除地址及设为默认地址(上)

微信小程序,添加地址,修改地址,删除地址及设为默认地址(上)_第1张图片

地址管理页面的wxml


    //判断地址有没有数据
    
         
            收货人:{{item.name}}
            收货地址:{{item.region[0]}}{{item.region[1]}}{{item.region[2] 
                {{item.specific}}
            
                
                   
                   设为默认
                
                
                     编辑
                     删除
                
            
         
    
    
        
    
  
       
         添加新地址
      
       
         导入微信地址
     
  

他的wxss

/* 尾部 */
.footer{
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    border-top: 1px solid #f1f1f1;
    position: fixed;
    bottom: 0;
    z-index: 99;
    padding: 0rpx 30rpx;
    font-size: 12px;
    color: #676774;
    display: flex;
}
.shopping_cart{
    margin: 10rpx 0;
    color: #fff;
    padding: 0 80rpx;
    font-size: 16px;
    line-height: 80rpx;
    border-radius: 100rpx;
}
/*单选框  */
   /* // 大小设置 */
   radio .wx-radio-input {
    border-radius: 50%;
    width: 24px;
    height: 24px;
  }
  /* // 边框颜色 */
  radio .wx-radio-input {
    border-color: #87858a;
  }
  /* // 选中状态设置 */
  radio .wx-radio-input.wx-radio-input-checked {
    border-color: #e93323 !important;
    background: #e93323!important;
   }
.weui-cell__bd{
    margin-left: 20rpx;
}

ok,现在样子设好了,现在就是他的js

 //添加地址
  addaddress:function(){
        wx.navigateTo({ 
          url:"/components/addaddress/addaddress",
         })
    },
 //修改
    editli:function(e){
      //e.currentTarget.id当前的id
        wx.navigateTo({  
            url:`/components/addaddress/addaddress?id=${e.currentTarget.id}`,
         })
    },
//页面数据
  onLoad: function (options) {
      var arr = wx.getStorageSync('addressList') || [];//添加地址的本地存储
      var id = 0  //由于没有加id,所以在这里遍历添加id  
      for (let index = 0; index < arr.length; index++) {
           arr[index].id = id+=1
      }
      wx.setStorageSync('addressList', arr);//保存
      this.setData({//渲染到页面
            addressList: arr,
        });       
        
    },
 //设默认
    change:function(e){
      var items = this.data.addressList;
      for (var i = 0; i < items.length; i++){
        if(items[i].id==e.currentTarget.id){
          items[i].checked = true
          wx.showToast({
            title: '设置成功',
            duration:2000, 
          })
        }else{
          items[i].checked =false
        }

      }
      this.setData({
         addressList: items
      });
      wx.setStorageSync('addressList', items);
    },
 /* 删除 */
  delAddress: function (e) {
    var id = e.currentTarget.dataset.id//数组下标
        this.data.addressList.splice(id, 1);
        // 更新data数据对象  
        if (this.data.addressList.length > 0) {
            wx.showToast({
                title: '删除成功',
                duration:2000,
            })
            this.setData({
            addressList: this.data.addressList
            })
            wx.setStorageSync('addressList', this.data.addressList);
        } else {
            this.setData({
                addressList: this.data.addressList
                })
                wx.setStorageSync('addressList', []);
            
        }
},

现在地址管理这个页面就完成了

你可能感兴趣的:(微信小程序,notepad++,小程序)