对接手机端

2023-06-06 11:27:31 +08:00
parent 2852333f16
commit 271dd96bfb
12 changed files with 357 additions and 114 deletions
@@ -1871,4 +1871,6 @@ module.exports = {
  phoneReset:'Reset',
  noMore:'No More',
  loading:'Loading...',
+  howAboutComment:'How about a comment',
+  send:'Send',
 }
@@ -1972,4 +1972,6 @@ module.exports = {
  phoneReset:'重置',
  noMore:'没有更多了',
  loading:'加载中...',
+  howAboutComment:'说点什么评论一下吧',
+  send:'发送',
 }
@@ -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">
-        Chassis
-      </div>
-      <div class="header-buttom-text">
-        Chassis
-      </div>
-      <div class="header-buttom-text">
-        Chassis
+
+    <div class="header-buttom" v-if="queryForm.problemTypeNameList && queryForm.problemTypeNameList.length > 0">
+      <div class="header-buttom-text" v-for="val in queryForm.problemTypeNameList">
+        {{val}}
      </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月，中国汽车技术研究中心有限公司中国汽车标准化研究院联合行业各方力量，
-      成立了包括各主机厂、零部件制造商、检测机构、高校等单位在内的“线控底盘技术发展与标准化需求”研究组。
-      从线控转向、线控制动、线控悬架和线控驱动4 个领域，
-      围绕技术发展历程、技术路线与技术方案、技术需求、应用现状、测试验证、国内外标准分析和标准化需求等方面开展研究撰写并完成了研究报告，
-      为后续线控底盘相关技术研发、标准制定和行业管理提供支撑和借鉴。NIO作为“线控转向”领域的牵头单位，参与并完成对应内容。
+
+    <div class="content" v-html="queryForm.content">
+
    </div>
-    <div class="contentFile">
-      <div class="contentFile-text">
-        线控底盘技术发展与标准化需求研究报告.pdf
-      </div>
-      <div class="contentFile-text">
-        线控底盘技术发展与标准化需求研究报告.pdf
-      </div>
-      <div class="contentFile-text">
-        线控底盘技术发展与标准化需求研究报告.pdf
+
+    <div class="contentFile" v-if="queryForm.accessoryFileNameList && queryForm.accessoryFileNameList.length > 0">
+      <div class="contentFile-text" v-for="item in queryForm.accessoryFileNameList">
+        {{item.fileName}}
      </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">
-        <img src="~@/assets/icon_zan.png" alt="">
-        <span class="iconTextLeft-text">
-           123
+      <div class="iconTextLeft" @click="starClick()">
+        <img v-if="!this.isCollect" src="~@/assets/icon_zan.png" alt="">
+        <img v-else src="~@/assets/dianzan.png" alt="">
+        <span class="iconTextLeft-text" :class="{'icon-active':this.isCollect}">
+           {{queryForm.collectCount}}
        </span>
      </div>
-      <div class="iconTextLeft">
-        <img src="~@/assets/icon_shoucang.png" alt="">
-        <span class="iconTextLeft-text">
-           123
+      <div class="iconTextLeft" @click="likeClick()">
+        <img v-if="!this.isPraise" src="~@/assets/icon_shoucang.png" alt="">
+        <img v-else src="~@/assets/xuanzhong.png" alt="">
+        <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 class="comment-content-text">
-            <div class="comment-content-text-left">
-              <span class="comment-content-text-yuan"></span>
-              linda.zhao
+        <div style="margin-top: 0.3rem"
+             v-if="item.problemKnowledgeBaseCommentVOList && item.problemKnowledgeBaseCommentVOList.length > 0">
+          <div class="reply-box" v-for="(val,index1) in item.problemKnowledgeBaseCommentVOList">
+            <div class="comment-content-text">
+              <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">
-              <span>2023-05-18 10:51:28</span>
+            <div class="comment-text-box">
+              {{val.commentContent}}
            </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 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 class="comment-text-button-one">
+              <div class="commentRight" @click="messageClick(item)">
+                <img src="~@/assets/icon_reply.png" alt="">
+              </div>
+              <div class="commentRight" @click="deleteClick(val)">
+                <img src="~@/assets/icon_rubbish.png" alt="">
+              </div>
            </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;
-    padding: 0.4rem;
-    margin-top: 0.3rem;
+    /*border-radius: 0.16rem;*/
+    padding: 0.4rem 0.4rem 0 0.4rem;
    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>