Authored by 邱骏

长文章评论开启,长文章内容图片长按保存

... ... @@ -661,6 +661,7 @@ const yoho = {
},
longClickSaveImage(args, success, fail) {
alert(args.url);
if (this.isYohoBuy && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
method: 'go.longClickSaveImage',
... ...
... ... @@ -58,7 +58,7 @@
<DownloadBottom v-if="share" :class="{'scroll-opacity': scrolling}"></DownloadBottom>
<ArticleDetailFooter ref="footer" class="detail-fixed-footer" :style="`transform: translate3d(0, ${viewMoreArticles ? '100%' : '0'}, 0)`" v-bind="footerData" @on-comment-click="onComment">
<template v-if="articleInfo.sort != 2" v-slot:before>
<template v-if="articleInfo.sort" v-slot:before>
<div class="footer-comment">
<CommentPlaceholder
ref="commentInput"
... ... @@ -388,6 +388,9 @@ export default {
if (get(this.$refs, 'detailNote.onComment')) {
this.$refs.detailNote.onComment(comment);
}
if (get(this.$refs, 'detailLong.onComment')) {
this.$refs.detailLong.onComment(comment);
}
},
setShareData(article) {
if (this.$yoho.isApp || !article) {
... ...
... ... @@ -13,7 +13,7 @@
<div class="article-context">
<div class="context-title">{{data.articleTitle}}</div>
<ClientOnly>
<div ref="richTextWrapper" @touchstart="tStart" @touchend="tEnd" class="context-rich-text">
<div ref="richTextWrapper" class="context-rich-text">
<VRuntimeTemplate v-once ref="richText" :template="richText" :parent="{}"
:templateProps="{getNoteProduct}"></VRuntimeTemplate>
</div>
... ... @@ -62,6 +62,8 @@ const { mapState: mapArticleState, mapActions, mapGetters } = createNamespacedHe
let timeOutEvent = null;
let isMoving = false;
export default {
name: 'ArticleDetailLong',
props: {
... ... @@ -170,17 +172,27 @@ export default {
...mapMutations(['SET_STATUS_BAR_COLOR']),
...mapActions(['fetchProductBySknList']),
tStart(e) {
if (e.target.src) {
isMoving = false;
if (e.currentTarget && e.currentTarget.dataset.src) {
let src = e.currentTarget.dataset.src;
timeOutEvent = setTimeout(() => {
this.$yoho.longClickSaveImage({ url: e.target.src });
}, 1000);
if (!isMoving) {
this.$yoho.longClickSaveImage({ url: src });
}
}, 1500);
}
},
tEnd() {
isMoving = false;
if (timeOutEvent) {
clearTimeout(timeOutEvent);
}
},
tMove() {
isMoving = true;
},
onFollowAuthor(follow) {
this.$emit('on-follow', this.data, follow);
},
... ... @@ -240,6 +252,24 @@ export default {
});
}
// 处理长按图片下载
if (childNodes.length > 0) {
let childsImgs = richText.querySelectorAll('img');
childsImgs.forEach((item) => {
if (item.parentNode && /P/i.test(item.parentNode.nodeName)) {
item.className += ' download-img';
item.parentNode.className += ' download-img-container';
if (item.src) {
item.parentNode.dataset.src = item.src;
item.parentNode.addEventListener('touchstart', vm.tStart);
item.parentNode.addEventListener('touchend', vm.tEnd);
item.parentNode.addEventListener('touchmove', vm.tMove);
}
}
});
}
richText.querySelectorAll('a').forEach(ele => {
if (ele && ele.querySelector && ele.querySelector('img')) {
ele.classList.add('yoho-img-link');
... ... @@ -417,6 +447,10 @@ export default {
display: block;
}
img.download-img {
pointer-events: none;
}
p {
font-size: 32px !important;
... ...
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.