发送红包接口有问题，添加群恢复

2026-01-08 01:44:39 +08:00
parent 1634425c17
commit c0619ea4ec
20 changed files with 2070 additions and 1531 deletions
--- a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
@@ -3,17 +3,50 @@
  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
  import custom from '../../../../assets/icon/red-packet.svg'
  import { isUniFrameWork } from '../../../../utils/env'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
+  import TUIChatEngine, {
+    type IConversationModel,
+    type SendMessageParams,
+    SendMessageOptions,
+    StoreName,
+    TUIChatService,
+    TUIStore
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils'
+  import OfflinePushInfoManager, {
+    type IOfflinePushInfoCreateParams
+  } from '../../offlinePushInfoManager'
+  import { getUserPayPwd } from '@/api/my-index'
+  import { useUI } from '@/utils/use-ui'
+  import { navigateTo } from '@/utils/router'
+  import { sendRedEnvelope } from '../../../../../api/tui-kit'

-  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666; font-size: 32rpx; font-style: normal; text-transform: none;`
+  const { showDialog } = useUI()

+  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #a9a9a9; font-size: 32rpx; font-style: normal; text-transform: none;`
  const evaluateIcon = custom

-  /** 提示框 */
-  const message = ref()
+  const currentConversation = ref<IConversationModel>()
+
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: (conversation: IConversationModel) => {
+      currentConversation.value = conversation
+    }
+  })
+
+  const tixian = ref()
+  /** 错误提示 */
+  const errorData = reactive({
+    integralShow: false,
+    numShow: false,
+    color: '#f56c6c'
+  })
  const container = ref()
  const formData = reactive({
    //  积分
    integral: '',
+    // 红包数量
+    num: '',
    // 红包标题
    title: ''
  })
@@ -27,16 +60,49 @@
    if (!formData.integral) {
      data.valid = true
      data.message = '请输入积分'
-      message.value.open()
      return data
    }
    if (Number(formData.integral) > 2000) {
      data.valid = true
      data.message = '积分不能大于2000'
-      message.value.open()
+
+      return data
+    }
+    return data
+  })
+
+  /** 监听是否是群组 */
+  const isGroup = computed(
+    () => currentConversation?.value?.type === 'GROUP'
+  )
+  /** 监听群人数 */
+  const memberCount = computed(
+    () => currentConversation?.value?.groupProfile?.memberCount
+  )
+
+  /** 监听红包个数 */
+  const monitorNum = computed(() => {
+    const data = {
+      valid: false,
+      message: ''
+    }
+    if (!formData.num) {
+      data.valid = true
+      data.message = '请输入红包个数'
      return data
    }

+    if (Number(formData.num) === 0) {
+      data.valid = true
+      data.message = '红包个数不能为 0'
+      return data
+    }
+
+    if (Number(formData.num) > memberCount.value) {
+      data.valid = true
+      data.message = '红包个数不能大于群人数'
+      return data
+    }
    return data
  })

@@ -44,6 +110,9 @@
    console.log('弹出窗口')
    formData.integral = ''
    formData.title = ''
+    formData.num = ''
+    errorData.integralShow = false
+    errorData.numShow = false
  }

  const onDialogClose = () => {
@@ -54,9 +123,106 @@
    container?.value?.toggleDialogDisplay(false)
  }

-  const onSubmit = () => {
-    if (!formData.integral) return
-    console.log('确认')
+  /** 监听输入 */
+  const monitorInput = () => {
+    if (monitorPoints.value.valid) {
+      errorData.integralShow = true
+      return
+    }
+
+    errorData.integralShow = false
+  }
+
+  /** 监听红包个数输入值 */
+  const numInput = () => {
+    if (monitorNum.value.valid) {
+      errorData.numShow = true
+      return
+    }
+    errorData.numShow = false
+  }
+
+  const onSubmit = async () => {
+    if (isGroup.value) {
+      if (monitorNum.value.valid) {
+        errorData.numShow = true
+        return
+      }
+    }
+
+    if (monitorPoints.value.valid) {
+      errorData.integralShow = true
+      return
+    }
+
+    const res = await getUserPayPwd()
+    if (res?.data) {
+      tixian.value.open()
+    } else {
+      const show = await showDialog('提示', '请先设置支付密码')
+      if (show) {
+        navigateTo('/pages/my-index/wallet/edit-password', { type: 0 })
+      }
+    }
+  }
+
+  const pwdModalSubmit = async (e: number[]) => {
+    // 默认文本
+    const text = `${formData.title || '恭喜发财，大吉大利'}`
+    const payload = {
+      data: JSON.stringify({
+        businessID: CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE,
+        version: 1,
+        // 积分
+        integral: Number(formData.integral),
+        // 红包个数
+        num: Number(formData.num || '1'),
+        // 发送类型
+        type: currentConversation?.value?.type,
+        title: text
+      }),
+      description: text,
+      extension: text
+    }
+    const options = {
+      to:
+        currentConversation?.value?.groupProfile?.groupID ||
+        currentConversation?.value?.userProfile?.userID,
+      conversationType: currentConversation?.value?.type,
+      payload,
+      needReadReceipt: isEnabledMessageReadReceiptGlobal()
+    }
+    const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+      conversation: currentConversation.value as IConversationModel,
+      payload: options.payload,
+      messageType: TUIChatEngine.TYPES.MSG_CUSTOM
+    }
+
+    const sendMessageOptions: SendMessageOptions = {
+      offlinePushInfo: OfflinePushInfoManager.create(
+        offlinePushInfoCreateParams
+      )
+    }
+    const isGroup = currentConversation?.value?.type === 'GROUP'
+    const data = {
+      password: e.join(''),
+      title: text,
+      packetType: isGroup ? 2 : 1,
+      receiverType: isGroup ? 2 : 1,
+      totalAmount: Number(formData.integral),
+      totalCount: Number(formData.num || '1')
+    }
+    try {
+      tixian.value.close()
+      await sendRedEnvelope(data)
+      TUIChatService.sendCustomMessage(
+        options as SendMessageParams,
+        sendMessageOptions
+      )
+      container?.value?.toggleDialogDisplay(false)
+    } catch (error) {
+      tixian.value.close()
+    }
  }
 </script>

@@ -71,6 +237,11 @@
    @onDialogShow="onDialogShow"
    @onDialogClose="onDialogClose"
  >
+    <uu-pwdModal
+      ref="tixian"
+      class="pwd-modal"
+      @success="pwdModalSubmit"
+    ></uu-pwdModal>
    <view class="red-envelope">
      <view class="top-title">
        <text class="title">发红包</text>
@@ -81,22 +252,59 @@
          @click.stop="closeDialog"
        ></uni-icons>
      </view>
-      <!-- 输入框 -->
-      <view
-        :class="{ 'on-reminder': monitorPoints.valid }"
-        class="input-box"
-      >
-        <text>积分</text>
-        <input
-          v-model="formData.integral"
-          :placeholder-style="placeholderStyle"
-          confirm-type="done"
-          type="number"
-          placeholder="0.00"
-          @confirm="onSubmit"
-        />
+      <!-- 红包个数 -->
+      <view v-if="isGroup" class="group-box">
+        <view
+          :class="{ 'on-reminder': errorData.numShow }"
+          class="input-box"
+        >
+          <view class="form-box">
+            <text>红包个数</text>
+            <view class="num-box">
+              <input
+                v-model="formData.num"
+                :placeholder-style="`font-family: PingFang SC, PingFang SC; font-weight: 500; color: ${
+                  errorData.numShow ? '#f56c6c' : '#a9a9a9'
+                }; font-size: 32rpx; font-style: normal; text-transform: none;`"
+                confirm-type="done"
+                type="number"
+                placeholder="填写红包个数"
+                @input="numInput"
+                @confirm="onSubmit"
+              />
+              <text>个</text>
+            </view>
+          </view>
+          <text v-if="errorData.numShow" class="error-text">
+            {{ monitorNum.message }}
+          </text>
+        </view>
+        <text class="num">本群共{{ memberCount }}人</text>
      </view>

+      <!-- 输入框 -->
+      <view
+        :class="{ 'on-reminder': errorData.integralShow }"
+        class="input-box"
+      >
+        <view class="form-box">
+          <text>积分</text>
+          <input
+            v-model="formData.integral"
+            :placeholder-style="`font-family: PingFang SC, PingFang SC; font-weight: 500; color: ${
+              errorData.integralShow ? '#f56c6c' : '#a9a9a9'
+            }; font-size: 32rpx; font-style: normal; text-transform: none;`"
+            confirm-type="done"
+            type="digit"
+            placeholder="0.00"
+            @input="monitorInput"
+            @confirm="onSubmit"
+          />
+        </view>
+        <text v-if="errorData.integralShow" class="error-text">
+          {{ monitorPoints.message }}
+        </text>
+      </view>
      <view class="input-box title-box">
        <input
          v-model="formData.title"
@@ -115,15 +323,6 @@
        <button class="btn" @click.stop="onSubmit">塞进红包</button>
      </view>
    </view>
-
-    <!-- 提示框 -->
-    <uni-popup ref="message" type="message">
-      <uni-popup-message
-        type="error"
-        :message="monitorPoints.message"
-        :duration="2000"
-      ></uni-popup-message>
-    </uni-popup>
  </ToolbarItemContainer>
 </template>

--- a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss
+++ b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss
@@ -5,7 +5,7 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
-    margin-bottom: 26rpx;
+    margin-bottom: 30rpx;
    .title {
      font-size: 32rpx;
      color: #1c1c1c;
@@ -13,13 +13,19 @@
  }

  .input-box {
-    margin-bottom: 26rpx;
+    margin-bottom: 60rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx 34rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
+    .form-box {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
    text {
      font-size: 32rpx;
      color: #1c1c1c;
@@ -30,6 +36,16 @@
      color: #1c1c1c;
      text-align: right;
    }
+    .num-box {
+      display: flex;
+      align-items: center;
+      justify-content: right;
+      text {
+        margin-left: 10rpx;
+        margin-bottom: 1rpx;
+        color: #1c1c1c;
+      }
+    }
  }

  .title-box {
@@ -73,11 +89,40 @@

  // 警告提现
  .on-reminder {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
    text {
-      color: #f56c6c;
+      color: #f56c6c !important;
    }
    input {
      color: #f56c6c;
    }
+    .error-text {
+      margin-top: 10rpx;
+      font-size: 24rpx;
+    }
+  }
+
+  // 群红包个数
+  .group-box {
+    display: flex;
+    flex-direction: column;
+    .input-box {
+      margin-bottom: 10rpx;
+    }
+    .num {
+      margin-bottom: 30rpx;
+      margin-left: 34rpx;
+      font-size: 28rpx;
+      color: #5e5e5e;
+    }
+  }
+}
+
+.pwd-modal {
+  :deep(.modal) {
+    position: relative;
+    right: 20rpx;
  }
 }