为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

qq_琥珀的眼泪_0 2018-03-19 11:36:25
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数据中?
查看完整描述

目前暂无任何回答

  • 0 回答
  • 1 关注
  • 1195 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信