对接手机端

jero-web/src/common/lang/en-us.js

@@ -1871,4 +1871,6 @@ module.exports = {
   phoneReset:'Reset',
   noMore:'No More',
   loading:'Loading...',
+  howAboutComment:'How about a comment',
+  send:'Send',
 }

jero-web/src/common/lang/zh-cn.js

@@ -1972,4 +1972,6 @@ module.exports = {
   phoneReset:'重置',
   noMore:'没有更多了',
   loading:'加载中...',
+  howAboutComment:'说点什么评论一下吧',
+  send:'发送',
 }

jero-web/src/views/phoneView/problemKnowledgeBase.vue

@@ -3,46 +3,34 @@
     <div class="header-search">
       <van-icon @click="iconClick" class="icon" name="arrow-left"/>
       <span class="header-search-text">
-           线控底盘技术发展与标准化需求研究报告
+           {{queryForm.title}}
         </span>
     </div>
-    <div class="header-buttom">
+
-      <div class="header-buttom-text">
+    <div class="header-buttom" v-if="queryForm.problemTypeNameList && queryForm.problemTypeNameList.length > 0">
-        Chassis
+      <div class="header-buttom-text" v-for="val in queryForm.problemTypeNameList">
-      </div>
+        {{val}}
-      <div class="header-buttom-text">
-        Chassis
-      </div>
-      <div class="header-buttom-text">
-        Chassis
       </div>
     </div>
+
     <div class="problemName">
       <div class="problemNameLeft">
         <img src="~@/assets/icon_contact.png" class="problemNameLeftImg" alt="">
-        <span class="problemNameLeftText">linda.zhao</span>
+        <span class="problemNameLeftText">{{queryForm.createBy}}</span>
       </div>
       <div class="problemNameLeft">
         <img src="~@/assets/icon_time.png" class="problemNameLeftImg" alt="">
-        <span class="problemNameLeftText">2023-03-29 17:25:05</span>
+        <span class="problemNameLeftText">{{queryForm.createTime}}</span>
       </div>
     </div>
-    <div class="content">
+
-      2021年10月，中国汽车技术研究中心有限公司中国汽车标准化研究院联合行业各方力量，
+    <div class="content" v-html="queryForm.content">
-      成立了包括各主机厂、零部件制造商、检测机构、高校等单位在内的“线控底盘技术发展与标准化需求”研究组。
+
-      从线控转向、线控制动、线控悬架和线控驱动4 个领域，
-      围绕技术发展历程、技术路线与技术方案、技术需求、应用现状、测试验证、国内外标准分析和标准化需求等方面开展研究撰写并完成了研究报告，
-      为后续线控底盘相关技术研发、标准制定和行业管理提供支撑和借鉴。NIO作为“线控转向”领域的牵头单位，参与并完成对应内容。
     </div>
-    <div class="contentFile">
+
-      <div class="contentFile-text">
+    <div class="contentFile" v-if="queryForm.accessoryFileNameList && queryForm.accessoryFileNameList.length > 0">
-        线控底盘技术发展与标准化需求研究报告.pdf
+      <div class="contentFile-text" v-for="item in queryForm.accessoryFileNameList">
-      </div>
+        {{item.fileName}}
-      <div class="contentFile-text">
-        线控底盘技术发展与标准化需求研究报告.pdf
-      </div>
-      <div class="contentFile-text">
-        线控底盘技术发展与标准化需求研究报告.pdf
       </div>
     </div>
 
@@ -50,138 +38,331 @@
       <div class="iconTextLeft">
         <img src="~@/assets/icon_kan.png" alt="">
         <span class="iconTextLeft-text">
-           123
+           {{queryForm.browsingHistoryCount}}
         </span>
       </div>
-      <div class="iconTextLeft">
+      <div class="iconTextLeft" @click="starClick()">
-        <img src="~@/assets/icon_zan.png" alt="">
+        <img v-if="!this.isCollect" src="~@/assets/icon_zan.png" alt="">
-        <span class="iconTextLeft-text">
+        <img v-else src="~@/assets/dianzan.png" alt="">
-           123
+        <span class="iconTextLeft-text" :class="{'icon-active':this.isCollect}">
+           {{queryForm.collectCount}}
         </span>
       </div>
-      <div class="iconTextLeft">
+      <div class="iconTextLeft" @click="likeClick()">
-        <img src="~@/assets/icon_shoucang.png" alt="">
+        <img v-if="!this.isPraise" src="~@/assets/icon_shoucang.png" alt="">
-        <span class="iconTextLeft-text">
+        <img v-else src="~@/assets/xuanzhong.png" alt="">
-           123
+        <span class="iconTextLeft-text" :class="{'icon-active':this.isPraise}">
+           {{queryForm.praiseCount}}
         </span>
       </div>
     </div>
 
     <div class="comment">
-      <div class="comment-text">
+      <div class="comment-text" @click="howAboutCommentClick">
-        说点什么评论一下吧～
+        {{$t('howAboutComment')}}～
       </div>
 
-      <div class="comment-content">
+      <div class="comment-content" v-for="(item,index) in releaseList" :key="index">
         <div class="comment-content-text">
           <div class="comment-content-text-left">
             <span class="comment-content-text-yuan"></span>
-            linda.zhao
+            {{item.createBy}}
           </div>
           <div class="comment-content-text-right">
-            <span>2023-05-18 10:51:28</span>
+            <span>{{item.createTime}}</span>
           </div>
         </div>
         <div class="comment-text-box">
-          这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
+          {{item.commentContent}}
         </div>
         <div class="comment-text-button">
-          <div class="commentRight">
+          <div class="commentRight" @click="messageClick(item)">
             <img src="~@/assets/icon_reply.png" alt="">
-            <span>回复</span>
+            <span>{{$t('answer')}}</span>
           </div>
-          <div class="commentRight">
+          <div class="commentRight" @click="deleteClick(item)">
             <img src="~@/assets/icon_rubbish.png" alt="">
-            <span>删除</span>
+            <span>{{$t('delete')}}</span>
           </div>
         </div>
-        <div class="reply-box">
+        <div style="margin-top: 0.3rem"
-          <div class="comment-content-text">
+             v-if="item.problemKnowledgeBaseCommentVOList && item.problemKnowledgeBaseCommentVOList.length > 0">
-            <div class="comment-content-text-left">
+          <div class="reply-box" v-for="(val,index1) in item.problemKnowledgeBaseCommentVOList">
-              <span class="comment-content-text-yuan"></span>
+            <div class="comment-content-text">
-              linda.zhao
+              <div class="comment-content-text-left">
+                <span class="comment-content-text-yuan"></span>
+                {{val.createBy}}
+              </div>
+              <div class="comment-content-text-right">
+                <span>{{val.createTime}}</span>
+              </div>
             </div>
-            <div class="comment-content-text-right">
+            <div class="comment-text-box">
-              <span>2023-05-18 10:51:28</span>
+              {{val.commentContent}}
             </div>
-          </div>
+            <div class="comment-text-button-one">
-          <div class="comment-text-box">
+              <div class="commentRight" @click="messageClick(item)">
-            这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
+                <img src="~@/assets/icon_reply.png" alt="">
-          </div>
+              </div>
-          <div class="comment-text-button">
+              <div class="commentRight" @click="deleteClick(val)">
-            <div class="commentRight">
+                <img src="~@/assets/icon_rubbish.png" alt="">
-              <img src="~@/assets/icon_reply.png" alt="">
+              </div>
-            </div>
-            <div class="commentRight">
-              <img src="~@/assets/icon_rubbish.png" alt="">
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="comment-content">
-        <div class="comment-content-text">
-          <div class="comment-content-text-left">
-            <span class="comment-content-text-yuan"></span>
-            linda.zhao
-          </div>
-          <div class="comment-content-text-right">
-            <span>2023-05-18 10:51:28</span>
-          </div>
-        </div>
-        <div class="comment-text-box">
-          这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
-        </div>
-        <div class="comment-text-button">
-          <div class="commentRight">
-            <img src="~@/assets/icon_reply.png" alt="">
-            <span>回复</span>
-          </div>
-          <div class="commentRight">
-            <img src="~@/assets/icon_rubbish.png" alt="">
-            <span>删除</span>
-          </div>
-        </div>
-        <div class="reply-box">
-          <div class="comment-content-text">
-            <div class="comment-content-text-left">
-              <span class="comment-content-text-yuan"></span>
-              linda.zhao
-            </div>
-            <div class="comment-content-text-right">
-              <span>2023-05-18 10:51:28</span>
-            </div>
-          </div>
-          <div class="comment-text-box">
-            这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
-          </div>
-          <div class="comment-text-button">
-            <div class="commentRight">
-              <img src="~@/assets/icon_reply.png" alt="">
-            </div>
-            <div class="commentRight">
-              <img src="~@/assets/icon_rubbish.png" alt="">
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <div class="input-text" v-if="isDisplay">
+      <van-cell-group>
+        <van-field rows="1"
+                   class="sendInput"
+                   autosize
+                   type="textarea"
+                   v-model="sendValue"
+                   placeholder="说点什么吧"/>
+        <van-button type="primary" :disabled="sendDisplay" @click="sendClick">{{$t('send')}}</van-button>
+      </van-cell-group>
+    </div>
   </div>
 </template>
 
 <script>
+  import { getAction, postAction, putAction } from '@/api/manage'
+  import { mapGetters } from 'vuex'
+  import { deleteAction } from '../../api/manage'
+  import { Dialog, Toast } from 'vant'
+
   export default {
     name: 'phoneProblemKnowledgeBase',
     data() {
-      return {}
+      return {
+        url: {
+          queryById: '/problemKnowledgeBase/problemKnowledgeBaseEO/queryById'
+        },
+        queryForm: {},
+        releaseList: [],
+        isCollect: false,
+        isPraise: false,
+        sendValue: '',
+        isDisplay: false,
+        commentQuery: {},
+        sendDisplay: true,
+        num: 1
+      }
     },
     mounted() {
       document.title = 'NIO GRP'
+      window.addEventListener('scroll', this.scrolling)
+      window.addEventListener('mousedown', this.handleonmousedown)
+      this.getQueryBy()
+      this.releaseData()
+    },
+    watch: {
+      sendValue: function(res) {
+        if (!res) {
+          this.sendDisplay = true
+        } else {
+          this.sendDisplay = false
+        }
+      }
+    },
+    destroyed() {
+      // 离开该页面需要移除这个监听的事件，不然会报错
+      window.removeEventListener('scroll', this.handleScroll)
+      window.removeEventListener('mousedown', this.handleonmousedown)
     },
     methods: {
+      ...mapGetters(['userInfo']),
+      scrolling() {
+        this.isDisplay = false
+      },
+      handleonmousedown(e) {
+        if (e.srcElement.type == 'textarea' || e.target.type == 'textarea') {
+
+        } else if (e.target.innerText == this.$t('send')) {
+
+        } else {
+          this.isDisplay = false
+        }
+      },
       iconClick() {
         this.$router.go(-1)
+      },
+      getQueryBy() {
+        let query = {
+          id: '1bbe56abe27b410998365f20e6023e38'
+        }
+        getAction(this.url.queryById, query).then((res) => {
+          if (res.success) {
+            this.queryForm = res.result || {}
+            this.queryForm = { ...this.queryForm }
+            if (this.queryForm.praiseEO && this.queryForm.praiseEO.praiseStatus == 'Praise') {
+              this.isPraise = true
+            } else {
+              this.isPraise = false
+            }
+            if (this.queryForm.collectEO && this.queryForm.collectEO.collectStatus == 'Collect') {
+              this.isCollect = true
+            } else {
+              this.isCollect = false
+            }
+          }
+        })
+      },
+      likeClick() {
+        if (this.isDisplay) {
+          this.isDisplay = false
+          return
+        }
+        let praiseStatus = ''
+        this.isPraise = !this.isPraise
+        if (this.isPraise) {
+          praiseStatus = 'Praise'
+          this.queryForm.praiseCount = this.queryForm.praiseCount + 1
+        } else {
+          praiseStatus = 'Cancel praise'
+          this.queryForm.praiseCount = this.queryForm.praiseCount - 1
+        }
+        let query = {
+          problemKnowledgeBaseId: this.queryForm.id,
+          praiseUserId: this.userInfo().id,
+          praiseStatus: praiseStatus,
+          id: this.queryForm.praiseEO ? this.queryForm.praiseEO.id : undefined
+        }
+        putAction('/problemKnowledgeBase/problemKnowledgeBasePraiseEO/edit', query).then((res) => {
+          if (!this.queryForm.praiseEO || !this.queryForm.praiseEO.id) {
+            this.queryById()
+          }
+        })
+      },
+      starClick() {
+        if (this.isDisplay) {
+          this.isDisplay = false
+          return
+        }
+        let collectStatus = ''
+        this.isCollect = !this.isCollect
+        if (this.isCollect) {
+          collectStatus = 'Collect'
+          this.queryForm.collectCount = this.queryForm.collectCount + 1
+        } else {
+          collectStatus = 'Cancel Collect'
+          this.queryForm.collectCount = this.queryForm.collectCount - 1
+        }
+        let query = {
+          problemKnowledgeBaseId: this.queryForm.id,
+          collectUserId: this.userInfo().id,
+          collectStatus: collectStatus,
+          id: this.queryForm.collectEO ? this.queryForm.collectEO.id : undefined
+        }
+        putAction('/problemKnowledgeBase/problemKnowledgeBaseCollectEO/edit', query).then((res) => {
+          if (!this.queryForm.collectEO || !this.queryForm.collectEO.id) {
+            this.queryById()
+          }
+        })
+      },
+      releaseData() {
+        let query = {
+          problemKnowledgeBaseId: '1bbe56abe27b410998365f20e6023e38'
+        }
+        getAction('/problemKnowledgeBase/problemKnowledgeBaseCommentEO/list', query).then((res) => {
+          if (res.success) {
+            this.releaseList = res.result || []
+          } else {
+            this.releaseList = []
+          }
+        })
+      },
+      deleteClick(item) {
+        let _this = this
+        if (this.isDisplay) {
+          this.isDisplay = false
+          return
+        }
+
+        function beforeClose(action, done) {
+          if (action === 'confirm') {
+            let url = ''
+            if (item.problemKnowledgeBaseId) {
+              url = '/problemKnowledgeBase/problemKnowledgeBaseCommentEO/deleteBatch'
+            } else {
+              url = '/project/problemKnowledgeBaseReplyEO/deleteBatch'
+            }
+            deleteAction(url, { ids: item.id }).then((res) => {
+              if (res.success) {
+                Toast(_this.$t('OperationSuccessful'))
+                _this.releaseData()
+                done()
+              } else {
+                _this.$message.warning(res.message)
+              }
+            })
+          } else {
+            done()
+          }
+        }
+
+        Dialog.confirm({
+          message: this.$t('confirmDeletion') + '?',
+          beforeClose
+        })
+      },
+      howAboutCommentClick() {
+        this.isDisplay = true
+        this.num = 1
+        this.$nextTick(() => {
+          let vanField = document.querySelectorAll('.sendInput .van-field__control')[0]
+          vanField.focus()
+        })
+      },
+      messageClick(item) {
+        this.isDisplay = true
+        this.num = 2
+        this.commentQuery = item
+        this.$nextTick(() => {
+          let vanField = document.querySelectorAll('.sendInput .van-field__control')[0]
+          vanField.focus()
+        })
+      },
+      sendClick() {
+        if (this.num == 1) {
+          let query = {
+            problemKnowledgeBaseId: this.queryForm.id,
+            commentContent: this.sendValue,
+            commentUserId: this.userInfo().id
+          }
+          postAction('/problemKnowledgeBase/problemKnowledgeBaseCommentEO/add', query).then((res) => {
+            if (res.success) {
+              Toast(this.$t('OperationSuccessful'))
+              this.releaseData()
+              this.sendValue = ''
+              this.isDisplay = false
+            } else {
+              Toast(this.$t('operationFailed'))
+            }
+          })
+        } else {
+          this.handleComment()
+        }
+      },
+      handleComment() {
+        let query = {
+          commentId: this.commentQuery.id,
+          replyContent: this.sendValue
+        }
+        postAction('/project/problemKnowledgeBaseReplyEO/add', query).then((res) => {
+          if (res.success) {
+            Toast(this.$t('OperationSuccessful'))
+            this.releaseData()
+            this.sendValue = ''
+            this.isDisplay = false
+          } else {
+            Toast(this.$t('operationFailed'))
+          }
+        })
       }
+
     }
   }
 </script>
@@ -192,6 +373,11 @@
     position: relative;
   }
 
+  .box-showModal {
+    position: absolute;
+    height: 100%;
+  }
+
   .header-search {
     width: 100%;
     display: flex;
@@ -376,6 +562,15 @@
     justify-content: flex-end;
     text-align: right;
     margin-top: 0.3rem;
+    /*margin-bottom: 0.3rem;*/
+  }
+
+  .comment-text-button-one {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    text-align: right;
+    margin-top: 0.3rem;
   }
 
   .commentRight {
@@ -398,9 +593,53 @@
 
   .reply-box {
     background: #F6F7F8;
-    border-radius: 0.16rem;
+    /*border-radius: 0.16rem;*/
-    padding: 0.4rem;
+    padding: 0.4rem 0.4rem 0 0.4rem;
-    margin-top: 0.3rem;
     margin-left: 0.5rem;
   }
+
+  .reply-box:last-child {
+    padding-bottom: 0.4rem;
+    border-bottom-left-radius: 0.16rem;
+    border-bottom-right-radius: 0.16rem;
+  }
+
+  .reply-box:first-child {
+    border-top-left-radius: 0.16rem;
+    border-top-right-radius: 0.16rem;
+  }
+
+  .icon-active {
+    color: #00B3BE !important;
+  }
+
+  .input-text {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: #F6F7FA;
+    padding: 0.2rem 0.4rem;
+  }
+
+  .input-text .van-cell-group {
+    display: flex;
+    background: transparent;
+    align-items: center;
+  }
+
+  .input-text .van-cell {
+    width: calc(100% - 1.8rem);
+    display: inline-block;
+    border-radius: 0.6rem;
+    margin-right: 0.3rem;
+  }
+
+  .input-text .van-button {
+    width: 1.8rem;
+    height: 1rem;
+    border-radius: 0.4rem;
+    background: #01A0AC;
+    border: none;
+  }
 </style>