vue移动端个人中心地址管理

1、前阶段做了这个地址管理页面，实现的过程中遇到了很多的问题，好在最后实现了，在此记录一下：
首先是加载页面阶段ajax从数据库中获取数据，然后动态的显示在页面中，随后可以点击单个的编辑或删除进行相关操作，可以单击默认地址按钮进行样式切换，默认地址可以没有（单击选中和取消），但是如果设置默认地址则只能设置一个。

2、我这里使用的是Vue.js，页面加载阶段很简单，直接在mounted声明一个方法，然后在方法中调用ajax请求访问数据然后通过v-for循环将数据放入到html元素中即可，这个就不多说了，直接看代码就行了。

var vm = new Vue({
    el:"#",
    data:{
        sites:[]
    },
    mounted:function() {
        this.showData();
    },
    methods:{
        showData:function(){
            jQuery.ajax({
                url:"这里写你的访问路径",
                data:"",
                type:"GET",
                dataType:"json",
                success:function(res){
                    if(res.code==0){
                        for(var i=0;i<res.data.addresses.length;i++){
                            //将获取到的数据赋值到data中的site[]
                            vm.sites.push(res.data.addresses[i]);
                        }
                    }else{
                        alert("加载失败");
                    }
                }
            })
        }
    }
})        

3、首先实现radio的点击选中和取消：JQuery实现一个radio点击的选中和取消，

<input type="radio" :id="site.addressid" name="defaultAddress" class="address_manager_content-d3-left-img" data-waschecked="true" v-if="site.isdefault=='1'" checked="checked" @click="editIsDefault(site, $event)"/>
<input type="radio" :id="site.addressid" name="defaultAddress" class="address_manager_content-d3-left-img" data-waschecked="false" v-else @click="editIsDefault(site, $event)" />

将获取到的addressid通过：id赋值到每个元素，实现每个元素对应它自己的id，为元素添加data-* 属性（点击了解data-*属性），方便获取到checked的信息，然后为每个radio添加class方便我们设置点击以后的图片切换，根据v-if判断该条地址信息是否为默认地址，在元素上添加了点击事件并传入site（每条地址的相关信息），和该地址信息dom对象。

下面是修改默认地址的方法：实现了点击选中和取消，并且点击切换后立即向服务器提交数据实现实时的数据更新。

editIsDefault:function(site,event){
    if($(event.currentTarget).data("waschecked")==true){
        $(event.currentTarget).prop("checked",false);
        $("input:radio[name='defaultAddress']").data('waschecked',false);
        $(event.currentTarget).data("waschecked",false);
    }else{
        $(event.currentTarget).prop("checked",true);
        $("input:radio[name='defaultAddress']").data('waschecked',false);
        $(event.currentTarget).data("waschecked",true);
    }
    var isDefault;
    if($(event.currentTarget).prop("checked")){
        isDefault = "1";
    }else{
        isDefault = "0";
    }
    jQuery.ajax({
        url:"这里写你自己的url",
        data:{
            addressid: site.addressid,
            name: site.name,
            phone: site.phone,
            area: site.area,
            address: site.address,
            isdefault: isDefault 
        },
        type:"GET",
        dataType:"json",
        success:function(res){
            if(res.code=="0"){
            }
        },
        error:function(){
            alert("修改默认地址失败,请刷新后重试");
        }
    })
}

4、使用CSS样式来实现radio点击选中和取消过程中图片样式的切换：点击radio实现两个图片间的样式切换

.address_manager_content-d3-left-img{
    /* 隐藏原有样式 */
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    /* 增加新样式:未选中时 */
    display: inline-block;
    width: 20px;
    height: 20px;
    position: static;
    margin : 15px 5px 0 0!important;
    background: url(未选中时图片的url) no-repeat;
    background-size: cover;
}
.address_manager_content-d3-left-img:checked{/* 选中时 */
   background: url(选中时的图片url) no-repeat;
   background-size: cover;
}

5、实现点击以后编辑地址：（删除的话思路一样）

这个非常简单，因为每一个地址信息我们都是通过v-for循环得来的，那么我们点击修改的时候将我们获取的数组中的site传入到方法中即可，然后访问页面的时候将该条地址信息的id传过去即可，到编辑地址页面可以通过id去后台查到该条地址信息并进行地址回填就可以实现了。

<span @click="editAddress(site)">编辑</span>
1
editAddress:function(site){
    window.location.href="你的跳转路径（编辑地址信息的页面）?addressid="+site.addressid;
}