|
|
|
<template>
|
|
|
|
<div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
|
|
|
|
<ul class="fav-brand-list">
|
|
|
|
<li v-for="item in brandData" track-by="$index" id="li-{{$index}}">
|
|
|
|
<div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn($index)">
|
|
|
|
<li v-for="item in brandData" track-by="fav_id" id="li-{{item.fav_id}}"
|
|
|
|
v-touch:panstart="panstart(item.fav_id)"
|
|
|
|
v-touch:panmove="panmove(item.fav_id)"
|
|
|
|
v-touch:panend="panend(item.fav_id)">
|
|
|
|
<div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn(item.fav_id)">
|
|
|
|
<span class="fav-del-span"><span class="icon icon-edit-del"></span></span>
|
|
|
|
</div>
|
|
|
|
<a :href="item.link">
|
|
...
|
...
|
@@ -11,10 +14,12 @@ |
|
|
|
</div>
|
|
|
|
<div class="fav-info-list">
|
|
|
|
<span class="title">{{item.brandName}}</span>
|
|
|
|
<span class="down" v-if="item.down">品牌已下架</span>
|
|
|
|
<span class="down">
|
|
|
|
<span v-if="item.down">品牌已下架</span>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<div class="fav-del-right hide" id="del-{{$index}}" @click="delItem($index, item.fav_id)">
|
|
|
|
<div class="fav-del-right hide" id="del-{{item.fav_id}}" @click="delItem($index, item.fav_id)">
|
|
|
|
<span class="icon icon-delete"></span>
|
|
|
|
<br/>
|
|
|
|
<span class="fav-del-txt">删除</span>
|
|
...
|
...
|
@@ -42,7 +47,11 @@ |
|
|
|
busy: false,
|
|
|
|
editmodel: false,
|
|
|
|
page: 0,
|
|
|
|
brandData: []
|
|
|
|
pageX: 0,
|
|
|
|
currentX: 0,
|
|
|
|
pandata: {},
|
|
|
|
brandData: [],
|
|
|
|
keys: {}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
...
|
...
|
@@ -65,7 +74,10 @@ |
|
|
|
|
|
|
|
if (result.list.length) {
|
|
|
|
result.list.forEach(function(o) {
|
|
|
|
_this.brandData.push(o);
|
|
|
|
if (!_this.keys[o.fav_id]) {
|
|
|
|
_this.keys[o.fav_id] = true;
|
|
|
|
_this.brandData.push(o);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
...
|
...
|
@@ -74,19 +86,20 @@ |
|
|
|
tip('网络错误');
|
|
|
|
});
|
|
|
|
},
|
|
|
|
showDelBtn(index) {
|
|
|
|
showDelBtn(id) {
|
|
|
|
this.hideDelBth();
|
|
|
|
let delBtn = $('#del-' + index);
|
|
|
|
let delBtn = $('#del-' + id);
|
|
|
|
let width = delBtn.width();
|
|
|
|
|
|
|
|
$('#li-' + index).css('transform', 'translateX(-' + width + 'px)');
|
|
|
|
$('#li-' + id).css('transform', 'translateX(-' + width + 'px)');
|
|
|
|
delBtn.removeClass('hide');
|
|
|
|
},
|
|
|
|
hideDelBth() {
|
|
|
|
this.brandData.forEach(function(d, index) {
|
|
|
|
$('#li-' + index).css('transform', 'translateX(0px)');
|
|
|
|
$('#del-' + index).addClass('hide');
|
|
|
|
this.brandData.forEach(function(d) {
|
|
|
|
$('#li-' + d.fav_id).css('transform', 'translateX(0px)');
|
|
|
|
$('#del-' + d.fav_id).addClass('hide');
|
|
|
|
});
|
|
|
|
this.pandata = {};
|
|
|
|
},
|
|
|
|
delItem(index, id) {
|
|
|
|
let _this = this;
|
|
...
|
...
|
@@ -102,6 +115,7 @@ |
|
|
|
if (data.code === 200) {
|
|
|
|
_this.brandData.splice(index, 1);
|
|
|
|
_this.hideDelBth();
|
|
|
|
delete _this.keys[id];
|
|
|
|
} else if (data.code === 400) {
|
|
|
|
tip(data.message);
|
|
|
|
} else {
|
|
...
|
...
|
@@ -110,16 +124,77 @@ |
|
|
|
}).fail(function() {
|
|
|
|
tip('网络错误');
|
|
|
|
});
|
|
|
|
},
|
|
|
|
panstart: function(id) {
|
|
|
|
event.preventDefault();
|
|
|
|
if (this.editmodel) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
$('#del-' + id).removeClass('hide');
|
|
|
|
this.pageX = event.targetTouches[0].pageX;
|
|
|
|
if (this.pandata.id !== id) {
|
|
|
|
if (this.pandata.id !== undefined) {
|
|
|
|
$('#li-' + this.pandata.id).css('transform', 'translateX(0px)');
|
|
|
|
$('#del-' + this.pandata.id).addClass('hide');
|
|
|
|
}
|
|
|
|
|
|
|
|
this.pandata.objX = 0;
|
|
|
|
this.pandata.id = id;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
panmove: function(id) {
|
|
|
|
event.preventDefault();
|
|
|
|
if (this.editmodel) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
let li = $('#li-' + id);
|
|
|
|
let width = $('#del-' + id).width();
|
|
|
|
let moveX = event.targetTouches[0].pageX;
|
|
|
|
let X = moveX - this.pageX;
|
|
|
|
|
|
|
|
if (this.pandata.objX == 0) {
|
|
|
|
if (X >= 0) {
|
|
|
|
this.currentX = 0;
|
|
|
|
} else {
|
|
|
|
this.currentX = -Math.min(Math.abs(X), width);
|
|
|
|
}
|
|
|
|
li.css('transform', "translateX(" + this.currentX + "px)");
|
|
|
|
} else if (this.pandata.objX < 0) {
|
|
|
|
if (X >= 0) {
|
|
|
|
this.currentX = Math.min(Math.abs(X) - width, 0);
|
|
|
|
} else {
|
|
|
|
this.currentX = -width;
|
|
|
|
}
|
|
|
|
li.css('transform', "translateX(" + this.currentX + "px)");
|
|
|
|
}
|
|
|
|
},
|
|
|
|
panend: function(id) {
|
|
|
|
event.preventDefault();
|
|
|
|
if (this.editmodel) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
let li = $('#li-' + id);
|
|
|
|
let delBtn = $('#del-' + id);
|
|
|
|
let width = delBtn.width();
|
|
|
|
|
|
|
|
if (this.currentX > -(width / 2)) {
|
|
|
|
this.pandata.objX = 0;
|
|
|
|
delBtn.addClass('hide');
|
|
|
|
} else {
|
|
|
|
this.pandata.objX = -width;
|
|
|
|
}
|
|
|
|
li.css('transform',"translateX(" + this.pandata.objX + "px)");
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created: function() {
|
|
|
|
let _this = this;
|
|
|
|
|
|
|
|
yoho.addNativeMethod('editModel', function(action) {
|
|
|
|
_this.hideDelBth();
|
|
|
|
_this.editmodel = action;
|
|
|
|
if (!action) {
|
|
|
|
_this.hideDelBth();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
...
|
...
|
@@ -138,10 +213,11 @@ |
|
|
|
.fav-brand-list {
|
|
|
|
padding-left: 20px;
|
|
|
|
list-style: none;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
li {
|
|
|
|
position: relative;
|
|
|
|
height: 135px;
|
|
|
|
overflow: hidden;
|
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
|
}
|
|
|
|
|
|
...
|
...
|
@@ -214,28 +290,30 @@ |
|
|
|
font-size: 24px;
|
|
|
|
padding-bottom: 10px;
|
|
|
|
margin-right: 10px;
|
|
|
|
margin-top: 35px;
|
|
|
|
height: 100px;
|
|
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
width: 430px;
|
|
|
|
color: #b0b0b0;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
font-size: 34px;
|
|
|
|
margin: 0;
|
|
|
|
line-height: 130px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
span {
|
|
|
|
&.down {
|
|
|
|
.down {
|
|
|
|
height: 100%;
|
|
|
|
line-height: 130px;
|
|
|
|
float: right;
|
|
|
|
padding: 5px 18px;
|
|
|
|
color: #fffefe;
|
|
|
|
background: #b0b0b0;
|
|
|
|
border-radius: 20px;
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
|
|
span {
|
|
|
|
padding: 5px 18px;
|
|
|
|
color: #fffefe;
|
|
|
|
background: #b0b0b0;
|
|
|
|
border-radius: 20px;
|
|
|
|
font-size: 22px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
...
|
...
|
|
