fix(PC): 全局评论at失效的问题

issue zhiyicx/plus-component-pc#1121

packages/zhiyicx-plus-pc/resources/assets/web/css/common.css

@@ -298,7 +298,7 @@ to {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
 .comment_line>.tr2:after {border-bottom:7px solid #fff;}
 .comment_body {font-size:12px;color:#999;}
 .comment_textarea {margin:10px 0 10px;}
-.comment_textarea textarea {width:100%;height:78px;padding:12px;border:1px solid #ededed;background:#f3f6f7;color:#333;outline:none;resize:none;overflow:hidden;}
+/* .comment_textarea .input-wrap textarea {width:100%;height:78px;padding:12px;border:1px solid #ededed;background:#f3f6f7;color:#333;outline:none;resize:none;overflow:hidden;} */
 .comment_post {line-height:31px;height:37px;position:relative;}
 .comment_post .dy_cs {position:absolute;right:5px;top:-40px;}
 .comment_post .post_button {line-height:32px;float:right;width:85px;height:32px;text-align:center;color:#fff;border:0;cursor:pointer;border-radius:3px;background:#59b6d7;}
@@ -309,7 +309,14 @@ to {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
 .comment_box .comment_con a.mouse {cursor:pointer;display:none;margin-left:5px;}
 /*详情评论*/.comment_title {margin-top:40px;margin-bottom:20px;}
 .comment_count {font-size:22px;color:#59b6d7;}
-.comment_box .comment_editor {font-size:14px;width:100%;min-height:77px;margin-bottom:10px;padding:10px;resize:none;color:#666;border:1px solid #ededed;outline:none;background:#f3f6f7;}
+.comment_box .input-wrap {position: relative;}
+.comment_box .input-wrap .comment_editor {font-size:14px;width:100%;min-height:77px;margin-bottom:10px;padding:10px;resize:none;color:#666;border:1px solid #ededed;outline:none;background:#f3f6f7;z-index: 102;}
+.comment_box .input-wrap .mirror {position: absolute;top: 0;display: none;}
+.comment_box .input-wrap .ev-mention-list {position: absolute;background-color: #fff;z-index: 105;display: none;padding: 8px;border: 1px solid #ccc;border-radius: 2px;box-shadow: 0 2px 8px 1px rgba(0, 0, 9, .2);}
+.comment_box .input-wrap .ev-mention-list .list-content,
+.comment_box .input-wrap .ev-mention-list .list-title {font-size: 12px;cursor: pointer;list-style: none;}
+.comment_box .input-wrap .ev-mention-list .list-content.active {color: #59b6d7; background-color: #fff;}
+
 .comment_box .comment_tool {text-align:right;}
 .comment_box .mention-btn {position: relative;display: inline-block;cursor: pointer;}
 .dialog-mention-select {position: absolute;display: flex;left: 0;top: 100%;width: 400px;height: 300px;z-index: 10;padding: 20px 40px;background-color: #fff;box-shadow: 0px 2px 9px 0px rgba(22, 23, 23, 0.09);flex-direction: column;cursor: default;}

packages/zhiyicx-plus-pc/resources/assets/web/css/feed.css

@@ -4,7 +4,7 @@
 /*动态发布*/
 .feed_post {width:100%;margin-bottom:20px;padding:30px 40px;border-radius:3px;background:white;}
 .feed_post .input-wrap {position: relative;width: 100%;min-height: 158px;}
-.feed_post .input-wrap .post_textarea {display: inline-block;position: absolute;width:100%;height:100%;overflow: hidden auto;outline: none;resize: none;white-space: pre-wrap;cursor: auto;padding: 10px;z-index: 101;top: 0;border: 1px solid #ededed;background-color: #f3f6f7;}
+.feed_post .input-wrap .post_textarea {display: block;position: absolute;width:100%;height:100%;overflow: hidden auto;outline: none;resize: none;white-space: pre-wrap;cursor: auto;padding: 10px;z-index: 101;top: 0;border: 1px solid #ededed;background-color: #f3f6f7;}
 .feed_post .input-wrap #mirror {z-index: 101;}
 .feed_post .input-wrap #feed_content {z-index: 102;}
 .feed_post .input-wrap .dy_cs {position:absolute;right:15px;bottom:10px;font-size:12px;z-index: 109;}

packages/zhiyicx-plus-pc/resources/assets/web/js/common.js

@@ -825,7 +825,7 @@ var comment = {
         this.support.to_uname = name;
         this.support.row_id = source_id;
         this.support.editor = $('#J-editor-' + type + this.support.row_id);
-        this.support.editor.text('回复 ' + this.support.to_uname+'：');
+        this.support.editor.val('回复 ' + this.support.to_uname+'：');
         this.support.editor.focus();
     },
     publish: function(obj) {
@@ -872,7 +872,7 @@ var comment = {
         axios.post(comment.urls(_this.support.row_id, _this.support.type), formData)
           .then(function (response) {
             _this.support.button.text('评论');
-            _this.support.editor.html('');
+            _this.support.editor.val('');
             _this.support.to_uid = 0;
             var res = response.data;
             var info = {
@@ -918,7 +918,7 @@ var comment = {
                     html += '                    </ul>'
                     html += '                </div>'
                     html += '            </div>';
-                    html += '            <div class="reply_body">'+res.comment.body+'</div>';
+                    html += '            <div class="reply_body">'+original_body+'</div>';
                     html += '        </dd>';
                     html += '    </dl>';
                     html += '</div>';

packages/zhiyicx-plus-pc/resources/assets/web/js/module.mention.js

@@ -74,27 +74,27 @@ var mention = {
                 var result = res.data.slice(0, 8);
                 list = []
                 // 填充列表
-                    result.forEach(function(user) {
-                        list.push(user.name)
-                    });
-
-                    var dom = ''
-                    if (list.length > 0) {
-                        dom = keyword.length > 1
-                            ? '<li class="list-title">选择好友或直接输入</li>'
-                            : '<li class="list-title">选择用户名或轻敲空格完成输入</li>'
-                        list.forEach(function(user) { dom += '<li class="list-content">' + user + '</li>'; })
-                    } else {
-                        dom = '<li class="list-title">没有找到该用户</li>'
-                    }
-
-                    _this.$atList.html(dom)
-
-                    var $listClick = _this.$atList.find('li.list-content')
-                    if ($listClick.length > 0) {
-                        $listClick.eq(0).addClass('active')
-                    }
-                })
+                result.forEach(function(user) {
+                    list.push(user.name)
+                });
+
+                var dom = ''
+                if (list.length > 0) {
+                    dom = keyword.length > 1
+                        ? '<li class="list-title">选择好友或直接输入</li>'
+                        : '<li class="list-title">选择用户名或轻敲空格完成输入</li>'
+                    list.forEach(function(user) { dom += '<li class="list-content">' + user + '</li>'; })
+                } else {
+                    dom = '<li class="list-title">没有找到该用户</li>'
+                }
+
+                _this.$atList.html(dom)
+
+                var $listClick = _this.$atList.find('li.list-content')
+                if ($listClick.length > 0) {
+                    $listClick.eq(0).addClass('active')
+                }
+            })
 
         } else {
             list = []
@@ -130,7 +130,6 @@ var mention = {
         this.atLocation = this.beforeCursorString.lastIndexOf('@') // 找到 @ 字符在光标签出现的最近位置
         this.indexString = this.objString.substr(this.atLocation, this.cursorPosition - this.atLocation) // 记录光标和@间的字符串，判断是否含有空格
         this.positionString = this.objString.substr(0, this.atLocation) // 获取从开始到光标之前@之间的字符串 定位at弹框的位置
-
         if (this.$atList.css('display') === 'block') {
             // 显示at中的选项列表
             var key = event.keyCode
@@ -167,13 +166,13 @@ var mention = {
             this.dynamicDisplayAtList()
 
             this.$atList.show()
-            this.$hiddenObj.html(this.positionString.replace(/\n/g, '<br>') + '<span id="at">@</span>')
+            this.$hiddenObj.html(this.positionString.replace(/\n/g, '<br>') + '<span class="at">@</span>')
 
-            var $at = $('#at');
+            var $at = this.$hiddenObj.find('.at');
 
             this.$atList.css({
                 left: this.getXY($at[0]).left + 2 + 'px',
-                top: this.getXY($at[0]).top - this.$textarea[0].scrollTop + 18 + 'px'
+                top: this.getXY($at[0]).top - this.$textarea[0].scrollTop + 28 + 'px'
             })
         } else {
             this.$atList.hide().empty()
@@ -182,16 +181,14 @@ var mention = {
 
     // 返回 obj 位置
     getXY: function (obj) {
-        // getBoundingClientRect()用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性
-        let rect = obj.getBoundingClientRect()
         // 获取滑动条位置
-        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
-        let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft
+        let scrollTop = obj.scrollTop || 0
+        let scrollLeft = obj.scrollLeft || 0
         let isIE = document.all ? 2 : 0
 
         let position = {}
-        position.left = rect.left - isIE + scrollLeft
-        position.top = rect.top - isIE + scrollTop
+        position.left = obj.offsetLeft - isIE + scrollLeft
+        position.top = obj.offsetTop - isIE + scrollTop
 
         return position
     }
@@ -207,6 +204,14 @@ $(function() {
         mention.objChange(event)
     })
 
+    $('.feed_content, .detail_comment, .profile_list').on('keyup mouseup', '.ev-comment-editor', function(event) {
+      event.preventDefault();
+      mention.$textarea = $(this)
+      mention.$hiddenObj = $(this).next('.ev-mirror')
+      mention.$atList = $(this).parent().children('.ev-mention-list')
+      mention.objChange(event)
+    })
+
     // 监听选择框
     $('#mention_list').on('click', '.list-content', function(event) {
         mention.handleString($(event.target).text())

packages/zhiyicx-plus-pc/resources/views/feed/read.blade.php

@@ -209,6 +209,7 @@
 
 @section('scripts')
 <script src="{{ asset('assets/pc/js/module.weibo.js') }}"></script>
+<script src="{{ asset('assets/pc/js/module.mention.js') }}"></script>
 <script src="{{ asset('assets/pc/js/qrcode.js') }}"></script>
 <script type="text/javascript">
     $(function(){

packages/zhiyicx-plus-pc/resources/views/news/read.blade.php

@@ -178,6 +178,7 @@
 
 @section('scripts')
 <script src="{{ asset('assets/pc/js/module.news.js') }}"></script>
+<script src="{{ asset('assets/pc/js/module.mention.js') }}"></script>
 <script src="{{ asset('assets/pc/js/qrcode.js') }}"></script>
 <script>
 $(function(){

packages/zhiyicx-plus-pc/resources/views/profile/index.blade.php

@@ -35,6 +35,7 @@
 <script src="{{ asset('assets/pc/js/module.profile.js') }}"></script>
 <script src="{{ asset('assets/pc/js/module.weibo.js') }}"></script>
 <script src="{{ asset('assets/pc/js/module.picshow.js') }}"></script>
+<script src="{{ asset('assets/pc/js/module.mention.js') }}"></script>
 <script src="{{ asset('assets/pc/js/md5.min.js') }}"></script>
 <script>
 $(function(){

packages/zhiyicx-plus-pc/resources/views/widgets/comments.blade.php

@@ -11,7 +11,12 @@
         </div>
         <div class="comment_body" id="comment_box{{ $id }}">
             <div class="comment_textarea">
-                <div class="comment_editor" id="J-editor-{{ $comments_type }}{{ $id }}" placeholder="说点什么吧" oninput="checkNums(this, 255, 'nums');" contenteditable></div>
+                <div class="input-wrap">
+                    <textarea class="comment_editor ev-comment-editor" id="J-editor-{{ $comments_type }}{{ $id }}" placeholder="说点什么吧" oninput="checkNums(this, 255, 'nums');" ></textarea>
+                    <div class="comment_editor mirror ev-mirror" contenteditable="true"></div>
+                    {{-- at列表 --}}
+                    <ul class="ev-mention-list"></ul>
+                </div>
                 <div class="comment_post">
                     <span class="dy_cs">可输入<span class="nums" style="color: rgb(89, 182, 215);">255</span>字</span>
                     <span class="font14 mention-btn">
@@ -87,7 +92,12 @@
         @endif
         <div class="comment_title"><span class="comment_count cs{{ $id }}">{{ $comments_count }} </span>人评论</div>
         <div class="comment_box">
-            <div class="comment_editor" id="J-editor-{{ $comments_type }}{{ $id }}" placeholder="说点什么吧" oninput="checkNums(this, 255, 'nums');" contenteditable></div>
+            <div class="input-wrap">
+                <textarea class="comment_editor ev-comment-editor" id="J-editor-{{ $comments_type }}{{ $id }}" placeholder="说点什么吧" oninput="checkNums(this, 255, 'nums');" ></textarea>
+                <div class="comment_editor mirror ev-mirror" contenteditable="true"></div>
+                {{-- at列表 --}}
+                <ul class="ev-mention-list"></ul>
+            </div>
             <div class="comment_buttons">
                 <span class="font14 mention-btn">
                     <div onclick="comment.showMention(true, this);">

packages/zhiyicx-plus-pc/resources/views/widgets/postfeed.blade.php

@@ -4,10 +4,10 @@
         <textarea id="feed_content" class="post_textarea" onkeyup="checkNums(this, 255, 'nums');"></textarea>
         <div id="mirror" class="post_textarea" contenteditable="true"></div>
         <span class="dy_cs">可输入<span class="nums" style="color: rgb(89, 182, 215);">255</span>字</span>
+        {{-- at列表 --}}
+        <ul id="mention_list"></ul>
     </div>
 
-    {{-- at列表 --}}
-    <ul id="mention_list"></ul>
 
     <div class="post_extra">
         <span class="font14 ev-btn-feed-pic">