静态页面

src/pages/WuYe/BaoXiuDetail/index.jsx

@@ -21,7 +21,10 @@ export default function BaoXiuDetail () {
   const [ShowPingJiaPopup, setShowPingJiaPopup] = useState(false)
   const [StarIndex, setStarIndex] = useState(0)
   const [Comment, setComment] = useState(null)
+  const [ReplyContent, setReplyContent] = useState(null)
   const [DataLock, setDataLock] = useState(false)
+  const [ShowReplyPopup, setShowReplyPopup] = useState(false)
+  const [CurrentReplyId, setCurrentReplyId] = useState(null)
 
   Taro.useShareAppMessage(() => {
     return getShareObject({
@@ -35,6 +38,13 @@ export default function BaoXiuDetail () {
     Init()
   }, [])
 
+  useEffect(() => {
+    if (CurrentReplyId !== null) {
+      setReplyContent(null)
+      setShowReplyPopup(true)
+    }
+  }, [CurrentReplyId])
+
   const Init = () => {
     request({ ...apis.getGongDanDetail, args: { orgId: user.orgId }, params: { ticketId: CurrnetBaoXiuId } }).then((res) => { // 获取工单详情
       setDetailInfo(res)
@@ -50,10 +60,28 @@ export default function BaoXiuDetail () {
     }
   }
 
+  const ReplyChange = (e) => {
+    setReplyContent(e.detail.value)
+  }
+
   const CommentChange = (e) => {
     setComment(e.detail.value)
   }
 
+  const ToReply = () => {
+    if (DataLock) return
+    setDataLock(true)
+    request({ ...apis.ReplyTicket, args: { orgId: user.orgId }, data: { ticketId: CurrnetBaoXiuId, content: ReplyContent, ticketRecordCommentId: CurrentReplyId } }).then((res) => { // 获取工单详情
+      Taro.showToast({ title: '回复成功', icon: 'none' })
+      Init()
+      setDataLock(false)
+      setShowReplyPopup(false)
+    }).catch((res) => {
+      Taro.showToast({ title: res, icon: 'none' })
+      setDataLock(false)
+    })
+  }
+
   const ToPingJia = () => {
     if (DataLock) return
     setDataLock(true)
@@ -68,6 +96,14 @@ export default function BaoXiuDetail () {
     })
   }
 
+  const StepClick = (item) => {
+    return () => {
+      if (DetailInfo.status - 0 < 4) {
+        setCurrentReplyId(item.id)
+      }
+    }
+  }
+
   return (
     <Page>
       <view className='BaoXiuDetail'>
@@ -100,7 +136,7 @@ export default function BaoXiuDetail () {
                 {
                   DetailInfo !== null && DetailInfo.ticketRecordList !== null &&
                   DetailInfo.ticketRecordList.map((item, index) => (
-                    <view className='StepList' key={`StepList-${index}`}>
+                    <view className='StepList' key={`StepList-${index}`} onClick={StepClick(item)}>
                       <view className='Title flex-h'>
                         <text className='flex-item Red'>{item.ticketStatusName}</text>
                         <text>{toolclass.FormatDate(item.createDate)}</text>
@@ -144,6 +180,13 @@ export default function BaoXiuDetail () {
           </view>
         </view>
 
+        <SlidePopup Close={() => { setShowReplyPopup(false) }} Show={ShowReplyPopup}>
+          <view className='ReplyPopup'>
+            <Textarea placeholder='请输入您的回复' onInput={ReplyChange} value={ReplyContent}></Textarea>
+            <text className='Btn' onClick={ToReply}>回复</text>
+          </view>
+        </SlidePopup>
+
         <SlidePopup Close={() => { setShowPingJiaPopup(false) }} Show={ShowPingJiaPopup}>
           <view className='PinJiaPopup'>
             <text className='Title'>请对此次服务进行评分</text>

src/pages/WuYe/BaoXiuDetail/index.less

@@ -249,7 +249,8 @@
       }
     }
   }
-  .PinJiaPopup {
+  .PinJiaPopup,
+  .ReplyPopup {
     padding: 0 30px;
     position: relative;
     overflow: hidden;

src/utils/api.js

@@ -1,6 +1,10 @@
 const prefix = `${HOST}/api/wx`
 
 const $api = {
+  ReplyTicket: { // 工单回复
+    method: 'post',
+    url: `${prefix}/ticket/reply/:orgId`
+  },
   PostGongDanPingJia: { // 工单评价
     method: 'post',
     url: `${prefix}/accessTicket/:orgId`