vue实战记录（六）- vue实现购物车功能之地址列表选配
vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据
作者：狐狸家的鱼
本文链接：vue实战-实现购物车功能（六）
GitHub：sueRimn
主要实现地址页面的适配和设置地址默认与删除，以及更多显示的状态取反。
address.html
<!-- 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 = this
this.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;
}
}
},
});
以上是 vue实战记录（六）- vue实现购物车功能之地址列表选配 的全部内容， 来源链接： utcz.com/z/379404.html
