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数据中?
相关分类