|
|
|
<template>
|
|
|
|
<div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
|
|
|
|
<ul class="fav-article-list">
|
|
|
|
<li v-for="item in articleData" track-by="fav_id" id="li-{{item.fav_id}}" v-touch-options:pan="{ direction: 'horizontal', threshold: 100}" 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>
|
|
|
|
<div class="editorial-box">
|
|
|
|
<a href="/editorial/{{item.fav_id}}.html">
|
|
|
|
<div class="img"><img :src="item.src | resize 750 469"/></div>
|
|
|
|
<div class="title">{{item.title}}</div>
|
|
|
|
<div class="editorial-des"><p class="line-clamp-2">{{item.intro}}</p></div>
|
|
|
|
<hr>
|
|
|
|
<div class="bottom clearfix">
|
|
|
|
<span class="icon icon-timeshare"></span>
|
|
|
|
<span class="time">{{item.publish_time}}</span>
|
|
|
|
<span class="icon icon-share share" @click="share(item.title, item.intro, item.src, item.fav_id)"></span>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="fav-del-right hide" id="del-{{item.fav_id}}" @click="delItem($index, item.fav_id)">
|
|
|
|
<div class="span-delete">
|
|
|
|
<span class="icon icon-delete"></span>
|
|
|
|
<br/>
|
|
|
|
<span class="fav-del-txt">删 除</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="fav-null-box {{ nullbox }}">
|
|
|
|
<span class="fav-null">您暂无收藏任何资讯</span>
|
|
|
|
<a class="go-shopping" href="/editorial/list">随便逛逛</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
const $ = require('jquery');
|
|
|
|
const tip = require('common/tip');
|
|
|
|
const interceptClick = require('common/intercept-click');
|
|
|
|
const yoho = require('yoho');
|
|
|
|
const bus = require('common/vue-bus');
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
nullbox: 'hide',
|
|
|
|
busy: false,
|
|
|
|
editmodel: false,
|
|
|
|
page: 0,
|
|
|
|
pageX: 0,
|
|
|
|
currentX: 0,
|
|
|
|
pandata: {},
|
|
|
|
articleData: [],
|
|
|
|
keys: {}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
yoho.addNativeMethod('editModel', () => {
|
|
|
|
this.hideDelBth();
|
|
|
|
this.editmodel = !this.editmodel;
|
|
|
|
this.updateNavBar();
|
|
|
|
});
|
|
|
|
|
|
|
|
yoho.store.remove('articleReload');
|
|
|
|
document.addEventListener('visibilitychange', () => {
|
|
|
|
if (!document.hidden && yoho.store.get('articleReload')) {
|
|
|
|
this.reload();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
if (yoho.isApp) {
|
|
|
|
bus.$on('app.favourite.tabChange', this.updateNavBar);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
reload() {
|
|
|
|
this.nullbox = 'hide';
|
|
|
|
this.busy = false;
|
|
|
|
this.editmodel = false;
|
|
|
|
this.page = 0;
|
|
|
|
this.pageX = 0;
|
|
|
|
this.currentX = 0;
|
|
|
|
this.pandata = {};
|
|
|
|
this.articleData = [];
|
|
|
|
this.keys = {};
|
|
|
|
|
|
|
|
yoho.store.remove('articleReload');
|
|
|
|
},
|
|
|
|
loadMore() {
|
|
|
|
this.busy = true;
|
|
|
|
$.ajax({
|
|
|
|
url: '/me/collection/favpaging',
|
|
|
|
data: {
|
|
|
|
page: ++this.page,
|
|
|
|
tab: 'article'
|
|
|
|
}
|
|
|
|
}).then(data => {
|
|
|
|
if ($.isEmptyObject(data) || data.totalPage === 0) {
|
|
|
|
this.busy = true;
|
|
|
|
} else {
|
|
|
|
if (data.totalPage && this.page === data.totalPage) {
|
|
|
|
this.busy = true;
|
|
|
|
} else {
|
|
|
|
this.busy = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
const list = data.data || [];
|
|
|
|
|
|
|
|
list.forEach(o => {
|
|
|
|
if (!this.keys[o.id]) {
|
|
|
|
this.keys[o.id] = true;
|
|
|
|
this.articleData.push({
|
|
|
|
fav_id: o.id,
|
|
|
|
src: o.src,
|
|
|
|
title: o.title,
|
|
|
|
intro: o.intro,
|
|
|
|
publish_time: o.publish_time
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.nullbox = this.articleData.length ? 'hide' : '';
|
|
|
|
|
|
|
|
if (this.page === 1) {
|
|
|
|
yoho.showLoading(false);
|
|
|
|
this.updateNavBar();
|
|
|
|
}
|
|
|
|
}).fail(() => {
|
|
|
|
tip('网络错误');
|
|
|
|
});
|
|
|
|
},
|
|
|
|
showDelBtn(id) {
|
|
|
|
this.hideDelBth();
|
|
|
|
let delBtn = $('#del-' + id);
|
|
|
|
let width = delBtn.width();
|
|
|
|
|
|
|
|
$('#li-' + id).css('transform', 'translateX(-' + width + 'px)');
|
|
|
|
delBtn.removeClass('hide');
|
|
|
|
this.pandata.id = id;
|
|
|
|
this.pandata.objX = -width;
|
|
|
|
},
|
|
|
|
hideDelBth() {
|
|
|
|
this.articleData.forEach(d => {
|
|
|
|
$('#li-' + d.fav_id).css('transform', 'translateX(0px)');
|
|
|
|
$('#del-' + d.fav_id).addClass('hide');
|
|
|
|
});
|
|
|
|
this.pandata = {};
|
|
|
|
},
|
|
|
|
delItem(index, id) {
|
|
|
|
$.ajax({
|
|
|
|
method: 'POST',
|
|
|
|
url: '/me/del-favdel',
|
|
|
|
data: {
|
|
|
|
favId: id,
|
|
|
|
type: 'article'
|
|
|
|
}
|
|
|
|
}).then(data => {
|
|
|
|
if (data.code === 200) {
|
|
|
|
this.articleData.splice(index, 1);
|
|
|
|
this.hideDelBth();
|
|
|
|
delete this.keys[id];
|
|
|
|
|
|
|
|
if (this.articleData.length === 0) {
|
|
|
|
this.nullbox = '';
|
|
|
|
this.updateNavBar();
|
|
|
|
}
|
|
|
|
} else if (data.code === 400) {
|
|
|
|
tip(data.message);
|
|
|
|
} else {
|
|
|
|
tip('刪除收藏失败');
|
|
|
|
}
|
|
|
|
}).fail(() => {
|
|
|
|
tip('网络错误');
|
|
|
|
});
|
|
|
|
},
|
|
|
|
panstart(id) {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
if (this.pandata.id && this.pandata.id !== id) {
|
|
|
|
$('#li-' + this.pandata.id).css('transform', 'translateX(0px)');
|
|
|
|
$('#del-' + this.pandata.id).addClass('hide');
|
|
|
|
return false;
|
|
|
|
} else {
|
|
|
|
this.pageX = event.targetTouches[0].pageX;
|
|
|
|
let delBtn = $('#del-' + id);
|
|
|
|
|
|
|
|
if (delBtn.hasClass('hide')) {
|
|
|
|
delBtn.removeClass('hide');
|
|
|
|
this.pandata.objX = 0;
|
|
|
|
this.pandata.id = id;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
panmove(id) {
|
|
|
|
event.preventDefault();
|
|
|
|
if (this.pandata.id && this.pandata.id !== id) {
|
|
|
|
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(id) {
|
|
|
|
event.preventDefault();
|
|
|
|
if (this.pandata.id && this.pandata.id !== id) {
|
|
|
|
this.pandata = {};
|
|
|
|
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)');
|
|
|
|
|
|
|
|
if (this.pandata.objX === 0) {
|
|
|
|
this.pandata = {};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
updateNavBar() {
|
|
|
|
const header = Object.assign({}, interceptClick.defaultTitleMap[5]);
|
|
|
|
|
|
|
|
header.defaultSelectedIndex = '1';
|
|
|
|
header.right.des = this.editmodel ? '完成' : '编辑';
|
|
|
|
if (!this.articleData.length) {
|
|
|
|
header.right.des = '';
|
|
|
|
}
|
|
|
|
yoho.updateNavigationBar({
|
|
|
|
header: header
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.yoho-favorite-article-page {
|
|
|
|
width: 100%;
|
|
|
|
height: auto;
|
|
|
|
|
|
|
|
.fav-content {
|
|
|
|
.fav-type {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fav-article-list {
|
|
|
|
list-style: none;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
li {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
position: relative;
|
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fav-del-left {
|
|
|
|
display: none;
|
|
|
|
width: 50px;
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
.fav-del-span {
|
|
|
|
display: inline-block;
|
|
|
|
width: 35px;
|
|
|
|
height: 35px;
|
|
|
|
margin-right: 15px;
|
|
|
|
margin-top: 50px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-edit-del {
|
|
|
|
color: red;
|
|
|
|
font-size: 35px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.editorial-box {
|
|
|
|
background: #f6f6f6;
|
|
|
|
border-bottom: #eee 1px solid;
|
|
|
|
padding-top: 30px;
|
|
|
|
float: 1;
|
|
|
|
|
|
|
|
a {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.img {
|
|
|
|
width: 100%;
|
|
|
|
height: 470px;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
|
|
background: #fff;
|
|
|
|
font-size: 42px;
|
|
|
|
line-height: 1.2;
|
|
|
|
font-weight: 700;
|
|
|
|
padding: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.editorial-des {
|
|
|
|
background: #fff;
|
|
|
|
padding: 0 30px 30px;
|
|
|
|
color: #b0b0b0;
|
|
|
|
font-size: 28px;
|
|
|
|
line-height: 32px;
|
|
|
|
}
|
|
|
|
|
|
|
|
hr {
|
|
|
|
margin: 0 30px;
|
|
|
|
border: #eee 1px solid;
|
|
|
|
border-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bottom {
|
|
|
|
padding: 10px 30px;
|
|
|
|
background: #fff;
|
|
|
|
color: #b0b0b0;
|
|
|
|
font-size: 24px;
|
|
|
|
height: 78px;
|
|
|
|
|
|
|
|
span {
|
|
|
|
display: inline-block;
|
|
|
|
padding: 12px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.share {
|
|
|
|
float: right;
|
|
|
|
padding-top: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.delshow {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fav-del-right {
|
|
|
|
position: absolute;
|
|
|
|
top: 30px;
|
|
|
|
right: -126px;
|
|
|
|
background: #ff3b30;
|
|
|
|
width: 126px;
|
|
|
|
height: 100%;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
.span-delete {
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-delete {
|
|
|
|
display: inline-block;
|
|
|
|
color: white;
|
|
|
|
font-size: 35px;
|
|
|
|
margin-top: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fav-del-txt {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
|
|
|
|
.hide {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.fav-null {
|
|
|
|
font-size: 22px;
|
|
|
|
color: #444;
|
|
|
|
display: block;
|
|
|
|
margin-top: 100px;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
content: "";
|
|
|
|
display: block;
|
|
|
|
width: 188px;
|
|
|
|
height: 171px;
|
|
|
|
background: resolve("me/fav-null.png");
|
|
|
|
background-size: 100% 100%;
|
|
|
|
margin: 0 auto 45px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.go-shopping {
|
|
|
|
width: 472px;
|
|
|
|
height: 88px;
|
|
|
|
line-height: 88px;
|
|
|
|
margin: 80px auto 0;
|
|
|
|
background: #444;
|
|
|
|
text-align: center;
|
|
|
|
color: #fff;
|
|
|
|
display: block;
|
|
|
|
font-size: 26px;
|
|
|
|
border-radius: 0.2rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
