vue商城项目地址模块，地址列表渲染，地址列表切换与展开，设置默认地址与删除地址

地址列表渲染

地址列表渲染首先是前端通过axios发送get请求，接受一个回调拿到数据
response.data的数据为
地址列表在result中

{"status":"0","msg":"","result":[{"addressId":"100001","userName":"JackBean","streetName":"北京市朝阳区朝阳公园","postCode":100001,"tel":12345678901,"isDefault":true},{"addressId":"100006","userName":"Cherry","streetName":"北京市海淀区回龙观","postCode":100009,"tel":10655555,"isDefault":false},{"addressId":"100006","userName":"Cherry","streetName":"北京市海淀区回龙观","postCode":100009,"tel":10655555,"isDefault":false},{"addressId":"100007","userName":"Joke","streetName":"北京市朝阳区望京","postCode":100010,"tel":13619898722,"isDefault":false},{"addressId":"100008","userName":"Frank","streetName":"北京市海淀区中关村软件园","postCode":100011,"tel":10125652345,"isDefault":false}]}

init(){
            axios.get("/users/cartList").then((response)=>{
              let res = response.data;
              this.cartList = res.result;
            })
          }

后端接口收到get请求，拿到已登录用户cookie中的用户id,根据用户ID查找数据，若查找成功，返回用户的购物车列表

router.get("/addressList",function (req,res,next) {
  var userId = req.cookies.userId;
  User.findOne({userId:userId},function (err,doc) {
    if(err){
      res.json({
        status:"1",
        msg:err.message,
        result:''
      })
    }else{
      res.json({
        status:"0",
        msg:'',
        result:doc.addressList
      })
    }
  })
})

前端拿到数据渲染到界面

 

                  

                    
{{item.userName}}
                    
{{item.streetName}}
                    
{{item.tel}}
                  
      

地址列表切换

在默认状态下只显示三条地址数据，点击more时才展开所有数据
使用computed计算
在computed中定义一个方法去addressListFilter动态截取地址列表的值，遍历的时候也是遍历返回的数组，默认limit是3

computed:{
        addressListFilter(){
          //数组动态控制，通过数据的slice方法返回一个全新的数组，不影响原数组
          return this.addressList.slice(0,this.limit);//截取三条数据
        }
      },

在 more上定义一个方法expand,绑定一个open时间，当limit>3时，为true，箭头朝上

                more

expand方法来修改limit的值，从而达到一个展开的效果。

 expand(){
            //如果此时数组显示长度是3说明是默认长度，赋值数组长度展开
            if(this.limit===3){
              this.limit = this.addressList.length;
            }else{
              this.limit = 3;
            }
        }

地址选中

定义一个属性 checkIndex:0,默认是0
在li标签上定义一个属性check，当checkIndex和循环中的索引index相等时，属性为true，并且点击的时候索引值 index赋给checkIndex
v-bind:class="{‘check’:checkIndex==index}" @click=“checkIndex = index”

设置默认地址

默认地址通过数据列表的isDefault字段来控制，数据列表中只有一个isDefault是true，其余的都是false,所以设置默认地址就是把该条目的isDefault设置为ture，并且把其他的值都改为false

                    Set default
                  
                  
Default address

前端传递一个地址列表的ID

   setDefault(addressId){
            axios.post("/users/setDefault",{
              addressId:addressId
            }).then((response)=>{
              let res = response.data;
              if(res.status==="0"){
                console.log("set default");
                this.init();
              }
            })
  },

后端接口
拿到参数值，判断地址是否存在，不存在返回err，若存在通过forEach循环查找修改然后保存。

router.post("/setDefault",function (req,res,next) {
  var userId = req.cookies.userId,
      addressId = req.body.addressId;
  if(!addressId){
    res.json({
      status:'1003',
      msg:'addressId is null',
      result:''
    });
  }else{
    User.findOne({userId:userId},function (err,user) {
      if(err){
        res.json({
          status:"1",
          msg:err.message,
          result:''
        })
      }else{
        var addressList = user.addressList;
        addressList.forEach((item)=>{
          if(item.addressId===addressId){
            item.isDefault = true;
          }else{
            item.isDefault = false;
          }
        })
        user.save(function (err1,doc1) {
          if(err1){
            res.json({
              status:"1",
              msg:err1.message,
              result:''
            })
          }else{
            res.json({
              status:"0",
              msg:'',
              result:''
            })
          }
        })
      }
    })
  }
})

删除地址列表的值
首先在删除图标上定义一个click事件，来控制删除模态框的显示

                    
                      
                    
                  

  delAddressConfirm(addressId){
            this.addressId = addressId;
            this.isMdShow = true;
        },

当点击时，控制模态框显示的属性为true，点击确认，向后端传递修改的请求

  
你确认要删除这个地址吗？
  

    确认
    关闭
  


     delAddress(){
            axios.post('/users/addressDel',{
              addressId:this.addressId
            }).then((response)=>{
              let res = response.data;
              if(res.status ==="0"){
                this.isMdShow = false;
                this.init();
              }
            })
        }

后端接口根据他的地址id使用update的方法去修改数据库里的值

router.post("/addressDel",function (req,res,next) {
  var userId = req.cookies.userId,//拿到用户id
    addressId = req.body.addressId;//拿到要删除的商品id
  User.update({
    userId:userId
  },{//找到数据库cartlist
    $pull:{
      'addressList':{
        addressId:addressId
      }
    }
  },function (err,doc) {
    if(err){
      res.json({
        status:"1",
        msg:err.message,
        result:''
      })
    }else{
      res.json({
        status:"0",
        msg:'',
        result:'suc'
      })
    }
  })
})