<!-- address list --><div class="checkout-title"><span>配送地址</span></div><div class="addr-list-wrap"><div class="addr-list"><ul><li v-for="(item, index) in filterAddress" :key="index" :class="{'check':index==currentIndex}" @click="currentIndex=index"><dl><dt v-cloak>{{item.userName}}</dt><dd class="address" v-cloak>{{item.streetName}}</dd><dd class="tel" v-cloak>{{item.tel}}</dd></dl><div class="addr-opration addr-edit"><a href="javascript:;" class="addr-edit-btn" @click="editAddress(item.addressId)"><svg class="icon icon-edit"><use xlink:href="#icon-edit"></use></svg></a></div><div class="addr-opration addr-del"><a href="javascript:;" class="addr-del-btn" @click="delConfirm(item)"><svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg></a></div><div class="addr-opration addr-set-default"><a href="javascript:;" class="addr-set-default-btn" v-if="!item.isDefault" @click="setDefault(item.addressId)"><i>设为默认</i></a></div><div class="addr-opration addr-default" v-if="item.isDefault">默认地址</div></li><li class="addr-new"><div class="add-new-inner"><i class="icon-add"><svg class="icon icon-add"><use xlink:href="#icon-add"></use></svg></i><p >添加新地址</p></div></li></ul></div><div class="shipping-addr-more"><a class="addr-more-btn up-down-btn" href="javascript:" @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><!-- shipping method--><div class="checkout-title"><span>配送方式</span></div><div class="shipping-method-wrap"><div class="shipping-method"><ul><li><div class="name">标准配送</div><div class="price">Free</div></li><li><div class="name">高级配送</div><div class="price">180</div></li></ul></div></div><div class="next-btn-wrap"><a href="javascript:;" class="btn btn--red">下一步</a></div><div class="md-modal modal-msg md-modal-transition" id="showModal" :class="{'md-show': delStatus}"><div class="md-modal-inner"><div class="md-top"><button class="md-close">关闭</button></div><div class="md-content"><div class="confirm-tips"><p id="cusLanInfo">你确认删除此配送地址信息吗?</p></div><div class="btn-wrap col-2"><button class="btn btn--m" id="btnModalConfirm" @click="delAddress">Yes</button><button class="btn btn--m btn--red" id="btnModalCancel" @click="delStatus=false">No</button></div></div></div></div><div class="md-modal modal-msg md-modal-transition" id="showModal" :class="{'md-show': insFlag}"><div class="md-modal-inner"><div class="md-top"><button class="md-close">关闭</button></div><div class="md-content"><div class="confirm-tips"><div class="md-form-item"><label class="md-form-item__label" style="width: 80px;">姓名</label><div class="md-form-item__content" style="margin-left: 80px;"><div  class="el-input"><input type="text" autocomplete="off" class="md-input__inner"></div></div></div><div class="md-form-item"><label class="md-form-item__label" style="width: 80px;">地址</label><div class="md-form-item__content" style="margin-left: 80px;"><div  class="el-input"><input type="text" autocomplete="off" class="md-input__inner"></div></div></div><div class="md-form-item"><label class="md-form-item__label" style="width: 80px;">电话号码</label><div class="md-form-item__content" style="margin-left: 80px;"><div  class="el-input"><input type="text" autocomplete="off" class="md-input__inner"></div></div></div></div><div class="btn-wrap col-2"><button class="btn btn--s" id="btnModalConfirms" @click="saveFrom">保存</button><button class="btn btn--s btn--red" id="btnModalCancels">取消</button></div></div></div></div><div class="md-overlay" id="showOverLay" v-show="insFlag"></div></div></div></div>

new Vue({el:'.container',data:{limitNum: 3,//限制显示的数量addressList: [],//地址列表currentIndex:'',//当前项delStatus: false,insFlag: false,curAddress:" ",name: '',streetName:'',phone:'',fromStatus: '' ,checkIndex: ''},mounted: function() {this.$nextTick(function() {this.getAddressList();});},computed: {//数据过滤filterAddress: function () {return  this.addressList.slice(0,this.limitNum);//截取0-3个地址显示 返回一个全新数组
        }},methods: {getAddressList: function () {this.$http.get("data/address.json").then(response => {//获取后台数据let res = response.data;if (res.status == '0') {//这里不能写成===this.addressList = res.result;}})},loadMore: function () {//显示更多 控制显示的两种状态//this.limitNum = this.addressList.length;//展示地址数组全部数据let len = this.addressList.length;if (this.limitNum === len){this.limitNum = 3;}else{this.limitNum = len;}},setDefault: function (addressId) {this.addressList.forEach((address, index) => {if (address.addressId == addressId) {address.isDefault = true;}else{address.isDefault = false;}})},delConfirm: function(item) {this.delStatus = true;this.curAddress = item;},delAddress: function () {var index = this.addressList.indexOf(this.curAddress);this.addressList.splice(index, 1)this.delStatus = false;},insConfirm: function(item) {this.insFlag = true;this.curAddress = item;},addAddress: function (item) {this.fromStatus = 0;var a = this.addressList[this.addressList.length-1];// alert(a.addressId++)this.addressList.push({addressId: a.addressId++,userName: this.name,streetName: this.streetName,tel: this.phone});this.limitNum = this.addressList.length;this.insFlag = false;},editAddress: function (addressId) {this.fromStatus = 1;this.insFlag = true;var _this = thisthis.addressList.forEach(function (address,index) {if (address.addressId == addressId) {_this.name = address.userName;_this.phone = address.tel;_this.streetName = address.streetName;_this.checkIndex = index;}})},saveFrom: function () {if(this.fromStatus == 0){this.addAddress();}if(this.fromStatus == 1) {// alert(this.checkIndex);this.addressList.splice(this.checkIndex, 1, {addressId: this.addressId,userName: this.name,streetName: this.streetName,tel: this.phone});this.editAddress();this.insFlag = false;}}},
});