feats

src/pages/chat/chatDetail/index.jsx

@@ -17,18 +17,15 @@ export default withLayout((props) => {
   const { router, person } = props;
   const { friend } = router.params
 
+  const [submitting, setSubmitting] = useState(false)
   const [text, setText] = useState()
-  // const [image, setText] = useState()
-  const typeRef = useRef(im.MESSAGETYPE.TEXT)
-  const messageRef = useRef()
-
   const [receiver, setReceiver] = useState({})
   const [PageList, setPageList] = useState([])
   const [scrollTop, scroll] = useScrollTop('#chat-scroll')
 
-  const submit = (e, msg, type) => {
-    const message = msg || messageRef.current
-    const messageType = type || typeRef.current
+  const sendMessage = (msg, type = im.MESSAGETYPE.TEXT) => {
+    const message = msg
+    const messageType = type
 
     // 用来回调写入消息列表
     const newMessage = {
@@ -41,6 +38,7 @@ export default withLayout((props) => {
     }
 
     // 发送消息
+    setSubmitting(true)
     im.sendMessage(message, messageType).then(() => {
       // 发送成功
       setText()
@@ -48,7 +46,10 @@ export default withLayout((props) => {
       setPageList(PageList.concat(newMessage))
       // 滚动到底部
       scroll()
+      //
+      setSubmitting(false)
     }).catch(() => {
+      setSubmitting(false)
       Taro.showToast({
         title: '发送失败, 请重试',
         icon: 'none',
@@ -56,12 +57,21 @@ export default withLayout((props) => {
     })
   }
 
-  const handleMessage = (msg, type = im.MESSAGETYPE.TEXT) => {
-    typeRef.current = type
-    messageRef.current = msg
-    if (type === im.MESSAGETYPE.TEXT) {
-      setText(msg)
-    }
+  const submitText = () => {
+    sendMessage(text)
+  }
+
+  const submitImage = () => {
+    Taro.chooseImage({
+      count: 1,
+      sizeType: ['original', 'compressed'],
+      sourceType: ['album', 'camera'],
+      success: res => {
+        uploadFiles(res.tempFilePaths).then(data => {
+          sendMessage(data[0], im.MESSAGETYPE.IMAGE)
+        })
+      }
+    })
   }
 
   const getChatHistory = (params) => {
@@ -94,8 +104,10 @@ export default withLayout((props) => {
     })
   }
 
+  // 留电话
+  // 实际上是发送一条文本记录
   const leavePhone = () => {
-    submit(undefined, person.phone, im.MESSAGETYPE.TEXT)
+    sendMessage(person.phone)
   }
 
   useEffect(() => {
@@ -186,10 +198,10 @@ export default withLayout((props) => {
       </view>
       <view className='SendContent flex-h'>
         <view className='flex-item'>
-          <Input placeholder='发送消息' value={text} onInput={(e) => handleMessage(e.detail.value)} />
+          <Input placeholder='发送消息' value={text} onInput={(e) => setText(e.detail.value)} />
         </view>
-        <text className='iconfont icon-tianjia'></text>
-        <text className='Send' onClick={submit}>发送</text>
+        <text className='iconfont icon-tianjia' onClick={submitImage}></text>
+        <button loading={submitting} className='Send' onClick={submitText}>发送</button>
       </view>
     </view>
   )

src/pages/chat/index.jsx

@@ -65,7 +65,7 @@ export default withLayout((props) => {
                   <view>
                     <Image mode='aspectFill' className='centerLabel' src={item.avatar || defaultRuleImage} />
                   </view>
-                  <text className='Num'>{item.unReadNum}</text>
+                  {!!item.unReadNum && <text className='Num'>{item.unReadNum}</text>}
                 </view>
                 <view className='flex-item'>
                   <view className='flex-h'>