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"></i></a></div> <div class="icon_btn adr_del iconbtn" ><a href="javascript:;" @click="deladdr(item)"><i class="icon iconfont"></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"></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/150
提交
取消