为什么修改默认地址无法清除已有的默认地址?

HTML如下:

<div id="adress">

<div class="content" >

<div class="adr_bz">

<ul>

<li class="on">地址确认</li>

<li>查看订单</li>

<li>支付</li>

<li>订单确认</li>

</ul>

</div>

<div class="tit"><span>地址配送</span></div>

<div class="adr_con">

<div class="adr_list">

<ul>

<li v-for="(item,index) in addrcon" :class="{'on':index==adddefault}" @click="adddefault=index">

<dl>

<dt>{{item.userName}}</dt>

<dd class="addr">{{item.streetName}}</dd>

<dd class="tel">{{item.tel}}</dd>

</dl>

<div class="icon_btn adr_edit iconbtn" ><a href="javascript:;"><i class="icon iconfont">&#xe678;</i></a></div>

<div class="icon_btn adr_del iconbtn" ><a href="javascript:;" @click="deladdr(item)"><i class="icon iconfont">&#xe609;</i></a></div>

<div class="adr_defult" v-if="item.isDefault">默认地址</div>

<div class="adr_defult iconbtn" v-if="!item.isDefault" ><a href="javascript:;" @click="setdefault(index)">设为默认</a></div>

</li>

<li class="add_new">

<div class="add_adr">

<i class="icon iconfont">&#xe601;</i>

<p>添加新地址</p>

</div>

</li>

</ul>

</div>

<div class="adr_more">

<a href="javascript:;"  class="up-down-btn" @click="loadmore">

{{more}}

<i class="i-up-down">

               <i class="i-up-down-l"></i>

               <i class="i-up-down-r"></i>

                </i>

                </a>

</div>

<div class="tit"><span>配送方式</span></div>

<div class="dis_mode">

<ul>

<li :class="{'on':shipp==1}" @click="shipp=1">

<h5>标准配送</h5>

<p>Free</p>

</li>

<li :class="{'on':shipp==2}" @click="shipp=2">

<h5>高级配送</h5>

<p>180</p>

</li>

</ul>

</div>

</div>

</div>

<div class="layer my_layer" :class="{'layer_show':layerflag}">

<div class="layer_transnation layer_conbg">

<button type="button" class="close_btn close_1" @click="layerflag=false">关闭</button>

<div class="layer_contit">

<p>你确认删除此地址信息吗?</p>

</div>

<div class="layer_btn">

<button type="button" class="btn" @click="cutaddr">YES</button>

<button type="button" class="btn btn_red" @click="layerflag=false">NO</button>

</div>

</div>

</div>

<div class="layer_bg layer_show" v-if="layerflag"></div>

</div>

js如下:

var addr=new Vue({

el:"#adress",

data:{

addrlist:[],

addrnum:3,

more:'more',

adddefault:1,

shipp:1,

layerflag:false,

mm:null

},

mounted:function(){

this.$nextTick(function(){

this.addrdata();

  })

},

computed:{

addrcon:function(){

return this.addrlist.slice(0,this.addrnum)

}

},

methods:{

addrdata:function(){

var _this=this;

axios.get("data/address.json").then(function(res){

if(res.data.status==0){

_this.addrlist=res.data.result;

//查询默认地址

_this.addrlist.forEach(function(ali,index){

if(ali.isDefault){

_this.adddefault=index;

console.log(_this.adddefault)

}

})

}

})

},

loadmore:function(){

if(this.addrnum<this.addrlist.length){

this.addrnum=this.addrlist.length;

this.more='收起';

}else{

this.addrnum=3;

this.more='more';

}

},

setdefault:function(index){

this.addrlist[this.adddefault].isDefault=false;

// console.log(this.addrlist[this.adddefault].isDefault);

this.addrlist[index].isDefault=true;

this.adddefault=index;

console.log(this.adddefault)

},

deladdr:function(item){

this.layerflag=true;

this.mm=item;

console.log(this.mm);

},

cutaddr:function(){

this.layerflag=false;

var des=this.addrlist.indexOf(this.mm);

console.log(des);

this.addrlist.splice(des,1)

}

}

})

css如下:

*, *::before, *::after{box-sizing:border-box}

body{font-size: 14px;}

body,ul,li{ list-style: none; margin: 0; padding: 0;}

li, dl, dt, dd, h1, h2, h3, h4, h5, h6, hgroup, p, blockquote, figure, form, fieldset, input, legend, pre, abbr, button{ padding: 0; margin: 0;}

a{ text-decoration: none; color: #000;}

input[type="text"],textarea{ padding: 0.5em 5px;}

button{ background: 0; box-sizing: border-box;-webkit-box-sizing: border-box; cursor: pointer; border: 0;overflow:visible;outline:none;}

.content{ max-width: 1200px; margin: 0 auto;}


.tit{ text-align: center; position: relative; margin-top: 40px;}

.tit span{ padding: 0 1em; line-height: 22px; font-size: 18px; background-color: #fff; position: relative; z-index: 1; font-weight: 700; }

.tit:before{ height: 1px; background-color: #ccc; width: 100%; position: absolute; top: 50%; left: 0; content: ""; z-index: 0;}

@media only screen and (max-width: 1280px) {

    .content { width: 100%; }

    .tit span{font-size: 14px;}

}

.adr_bz{margin: 20px 0;}

.adr_bz ul{display: flex; display: -webkit-flex; display: -ms-flexbox;}

.adr_bz ul:after{overflow: hidden; content: ""; }

.adr_bz ul li{ flex: 1; text-align: center;font-size: 16px; width: 25%;float: left; border-bottom: 2px solid #ccc; position: relative; padding-bottom: 20px; }

.adr_bz ul li:after{ position: absolute; width: 14px; height: 14px; border-radius: 50%; background-color: #ccc; content: ""; left: 50%; bottom: -7px; margin-left: -7px;}

.adr_bz ul li.on{ border-color: #EE7A23; color: #EE7A23;}

.adr_bz ul li.on:after{ background-color: #EE7A23;}

.adr_list{ margin: 20px 0; overflow: hidden;}

.adr_list ul:after{ overflow: hidden;}


.adr_list li{ width: 23.5%;height: 170px; float: left; border: 2px solid #e9e9e9; padding: 20px; margin: 10px 2% 10px 0; cursor: pointer; position: relative;}

.adr_list li:nth-child(4){ margin-right: 0; }

.adr_list li dt{ font-size: 18px; margin-bottom: 10px;}

.adr_list li dd.addr{  height: 40px;  overflow:hidden}

.adr_list li dd.tel{   color: #605F5F; }

.adr_list li dd{line-height: 20px;margin-bottom: 6px;}

.adr_list li i{font-size: 18px;}

.adr_list li .icon_btn{ position: absolute; right: 20px;}

.adr_list li .adr_edit{ top: 20px; }

.adr_list li .adr_del{  bottom: 20px; }

.adr_list li .adr_defult,.adr_list li .adr_defult a{color: #EE7A23;}

.adr_list li .adr_defult{position: absolute; left: 20px; bottom: 20px;  color: #EE7A23;}

.adr_list li:hover,.adr_list li.on{ border-color: #EE7A23;}

.adr_list li .iconbtn{display: none;}

.adr_list li.on .iconbtn{ display: block;}

.adr_list li .add_adr{ text-align: center; margin-top: 10px;}

.adr_list li .add_adr i{ font-size: 50px; color: #605F5F;}

.adr_list li .add_adr p{ margin-top: 10px;}


json如下:

{

  "status":0,

  "message":"",

  "result":[

    {

      "addressId":"100001",

      "userName":"JackBean1",

      "streetName":"北京市朝阳区朝阳特殊公园B13栋23层2306室",

      "postCode":"100001",

      "tel":"12345678901",

      "isDefault":false

    },

    {

      "addressId":"100002",

      "userName":"JackBean2",

      "streetName":"北京市朝阳区朝阳公园2",

      "postCode":"100001",

      "tel":"12345678901",

      "isDefault":false

    },

    {

      "addressId":"100003",

      "userName":"JackBean3",

      "streetName":"北京市朝阳区朝阳公园3",

      "postCode":"100001",

      "tel":"12345678901",

      "isDefault":true

    },

    {

      "addressId":"100004",

      "userName":"JackBean4",

      "streetName":"北京市朝阳区朝阳公园4",

      "postCode":"100001",

      "tel":"12345678901",

      "isDefault":false

    },

    {

      "addressId":"100005",

      "userName":"JackBean5",

      "streetName":"北京市朝阳区朝阳公园5",

      "postCode":"100001",

      "tel":"12345678901",

      "isDefault":false

    }

  ]

}

是否是因为修改默认地址时没有将修改后的默认地址提交到json数据中?

qq_琥珀的眼泪_0
浏览 1251回答 0
0回答
打开App,查看更多内容
随时随地看视频慕课网APP