feat:礼物消息

src/common/enums.js

@@ -4,6 +4,7 @@ const MESSAGE_TYPE = {
   FILE: 2,
   AUDIO: 3,
   VIDEO: 4,
+  GIFT: 5,
   RECALL: 10,
   READED: 11,
   RECEIPT: 12,

src/components/chat-item/chat-item.vue

@@ -17,7 +17,8 @@
         <view class="chat-send-name" v-if="isShowSendName">
           {{ chat.sendNickName + ':&nbsp;' }}
         </view>
-        <view v-if="!isTextMessage" class="chat-content-text">{{ chat.lastContent }}</view>
+        <view v-if="isGiftMessage" class="chat-content-text">[礼物]</view>
+        <view v-else-if="!isTextMessage" class="chat-content-text">{{ chat.lastContent }}</view>
         <rich-text v-else class="chat-content-text" :nodes="nodesText"></rich-text>
         <view v-if="chat.isDnd" class="icon iconfont icon-dnd"></view>
         <wd-badge v-else-if="chat.unreadCount > 0" :max="99" :model-value="chat.unreadCount" />
@@ -88,6 +89,14 @@
         let messageType = this.chat.messages[idx].type;
         return messageType == this.$enums.MESSAGE_TYPE.TEXT;
       },
+      isGiftMessage() {
+        if (this.chat.messages.length == 0) {
+          return false;
+        }
+        let idx = this.chat.messages.length - 1;
+        let messageType = this.chat.messages[idx].type;
+        return messageType == this.$enums.MESSAGE_TYPE.GIFT;
+      },
       nodesText() {
         let text = this.$str.html2Escape(this.chat.lastContent);
         return this.$emo.transform(text, 'emoji-small');

src/components/chat-message-item/chat-message-item.vue

@@ -68,6 +68,29 @@
                 </view>
               </long-press-menu>
             </view>
+            <view
+              class="message-file bg-#B37B2E/40!"
+              v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.GIFT"
+            >
+              <view class="p-2 flex-col-center">
+                <image
+                  class="size-300rpx"
+                  :src="JSON.parse(msgInfo.content).image"
+                  mode="aspectFill"
+                />
+                <view>向你赠送了一个礼物</view>
+                <view class="c-transparent bg-clip-text bg-gradient-to-r from-red to-pink">
+                  {{ JSON.parse(msgInfo.content).title }}
+                </view>
+                <view class="text-20rpx c-#eee">
+                  {{
+                    (JSON.parse(msgInfo.content).price / 100.0).toFixed(2).replace(/\.?0+$/, '') +
+                    '钻石'
+                  }}
+                </view>
+                <loading v-if="sending"></loading>
+              </view>
+            </view>
             <long-press-menu
               v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.AUDIO"
               :items="menuItems"

src/pages/message/chat-box.vue

@@ -396,7 +396,7 @@
         const userInfos = encodeURIComponent(JSON.stringify(users));
         uni.navigateTo({
           url: `/pages/chat/chat-group-video?groupId=${groupId}&isHost=true
-						&inviterId=${inviterId}&userInfos=${userInfos}`,
+  				&inviterId=${inviterId}&userInfos=${userInfos}`,
         });
       },
       moveChatToTop() {
@@ -1198,6 +1198,40 @@
             uni.showToast({ title: '赠送成功' });
             sheep.$store('user').getWallet();
             this.giftShow = false;
+
+            let msgInfo = {
+              tmpId: this.generateId(),
+              content: JSON.stringify(item),
+              atUserIds: this.atUserIds,
+              receipt: this.isReceipt,
+              type: this.$enums.MESSAGE_TYPE.GIFT,
+            };
+            // 清空@成员和回执标记
+            this.atUserIds = [];
+            this.isReceipt = false;
+            // 填充对方id
+            this.fillTargetId(msgInfo, this.chat.targetId);
+            // 防止发送期间用户切换会话导致串扰
+            const chat = this.chat;
+            // 回显消息
+            let tmpMessage = this.buildTmpMessage(msgInfo);
+            this.chatStore.insertMessage(tmpMessage, chat);
+            this.moveChatToTop();
+            this.sendMessageRequest(msgInfo)
+              .then((m) => {
+                // 更新消息
+                tmpMessage = JSON.parse(JSON.stringify(tmpMessage));
+                tmpMessage.id = m.id;
+                tmpMessage.status = m.status;
+                tmpMessage.content = m.content;
+                this.chatStore.updateMessage(tmpMessage, chat);
+              })
+              .catch(() => {
+                // 更新消息
+                tmpMessage = JSON.parse(JSON.stringify(tmpMessage));
+                tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
+                this.chatStore.updateMessage(tmpMessage, chat);
+              });
           },
         });
       },