Merge branch 'feature/long-article-save-image' into 'develop'

长按保存图片以及长文章开启评论



See merge request !126

@@ -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 });
+          }
+
+        }, 500);
       }
     },
     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;