红包需要添加样式

2026-01-07 17:49:17 +08:00
parent 1c021cdd21
commit 1634425c17
5 changed files with 450 additions and 237 deletions
--- a/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
@@ -14,27 +14,27 @@
        <div
          :class="[
            'evaluate-header-content',
-            !isPC && 'evaluate-h5-header-content',
+            !isPC && 'evaluate-h5-header-content'
          ]"
        >
-          {{ TUITranslateService.t("Evaluate.请对本次服务进行评价") }}
+          {{ TUITranslateService.t('Evaluate.请对本次服务进行评价') }}
        </div>
        <div
          v-if="!isPC"
          :class="[
            'evaluate-header-close',
-            !isPC && 'evaluate-h5-header-close',
+            !isPC && 'evaluate-h5-header-close'
          ]"
          @click.stop="closeDialog"
        >
-          {{ TUITranslateService.t("关闭") }}
+          {{ TUITranslateService.t('关闭') }}
        </div>
      </div>
      <div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
        <ul
          :class="[
            'evaluate-content-list',
-            !isPC && 'evaluate-h5-content-list',
+            !isPC && 'evaluate-h5-content-list'
          ]"
        >
          <li
@@ -42,7 +42,7 @@
            :key="index"
            :class="[
              'evaluate-content-list-item',
-              !isPC && 'evaluate-h5-content-list-item',
+              !isPC && 'evaluate-h5-content-list-item'
            ]"
            @click.stop="selectStar(index)"
          >
@@ -64,146 +64,162 @@
          v-model="comment"
          :class="[
            'evaluate-content-text',
-            !isPC && 'evaluate-h5-content-text',
+            !isPC && 'evaluate-h5-content-text'
          ]"
        />
        <div
          :class="[
            'evaluate-content-button',
-            !isPC && 'evaluate-h5-content-button',
+            !isPC && 'evaluate-h5-content-button'
          ]"
        >
          <button
-            :class="['btn', isEvaluateValid ? 'btn-valid' : 'btn-invalid']"
+            :class="[
+              'btn',
+              isEvaluateValid ? 'btn-valid' : 'btn-invalid'
+            ]"
            @click="submitEvaluate"
          >
-            {{ TUITranslateService.t("Evaluate.提交评价") }}
+            {{ TUITranslateService.t('Evaluate.提交评价') }}
          </button>
        </div>
      </div>
      <div :class="['evaluate-adv', !isPC && 'evaluate-h5-adv']">
-        {{ TUITranslateService.t("Evaluate.服务评价工具") }}
-        {{ "(" + TUITranslateService.t("Evaluate.使用") }}
+        {{ TUITranslateService.t('Evaluate.服务评价工具') }}
+        {{ '(' + TUITranslateService.t('Evaluate.使用') }}
        <a @click="openLink(Link.customMessage)">
-          {{ TUITranslateService.t(`Evaluate.${Link.customMessage.label}`) }}
+          {{
+            TUITranslateService.t(`Evaluate.${Link.customMessage.label}`)
+          }}
        </a>
-        {{ TUITranslateService.t("Evaluate.搭建") + ")" }}
+        {{ TUITranslateService.t('Evaluate.搭建') + ')' }}
      </div>
    </div>
  </ToolbarItemContainer>
 </template>
 <script setup lang="ts">
-import TUIChatEngine, {
-  TUITranslateService,
-  TUIStore,
-  StoreName,
-  IConversationModel,
-  TUIChatService,
-  SendMessageParams,
-  SendMessageOptions,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import { ref, computed } from '../../../../adapter-vue';
-import ToolbarItemContainer from '../toolbar-item-container/index.vue';
-import custom from '../../../../assets/icon/custom.svg';
-import Link from '../../../../utils/documentLink';
-import Icon from '../../../common/Icon.vue';
-import starIcon from '../../../../assets/icon/star.png';
-import starLightIcon from '../../../../assets/icon/star-light.png';
-import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
-import { isPC, isH5, isUniFrameWork } from '../../../../utils/env';
-import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
-import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
+  import TUIChatEngine, {
+    TUITranslateService,
+    TUIStore,
+    StoreName,
+    IConversationModel,
+    TUIChatService,
+    SendMessageParams,
+    SendMessageOptions
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { ref, computed } from '../../../../adapter-vue'
+  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
+  import custom from '../../../../assets/icon/custom.svg'
+  import Link from '../../../../utils/documentLink'
+  import Icon from '../../../common/Icon.vue'
+  import starIcon from '../../../../assets/icon/star.png'
+  import starLightIcon from '../../../../assets/icon/star-light.png'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
+  import { isPC, isH5, isUniFrameWork } from '../../../../utils/env'
+  import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils'
+  import OfflinePushInfoManager, {
+    IOfflinePushInfoCreateParams
+  } from '../../offlinePushInfoManager/index'

-const evaluateIcon = custom;
-const props = defineProps({
-  starTotal: {
-    type: Number,
-    default: 5,
-  },
-});
-const emits = defineEmits(['onDialogPopupShowOrHide']);
+  const evaluateIcon = custom
+  const props = defineProps({
+    starTotal: {
+      type: Number,
+      default: 5
+    }
+  })
+  const emits = defineEmits(['onDialogPopupShowOrHide'])

-const container = ref();
+  const container = ref()

-const starList = ref<number>(props.starTotal);
-const currentStarIndex = ref<number>(-1);
-const comment = ref('');
-const currentConversation = ref<IConversationModel>();
+  const starList = ref<number>(props.starTotal)
+  const currentStarIndex = ref<number>(-1)
+  const comment = ref('')
+  const currentConversation = ref<IConversationModel>()

-TUIStore.watch(StoreName.CONV, {
-  currentConversation: (conversation: IConversationModel) => {
-    currentConversation.value = conversation;
-  },
-});
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: (conversation: IConversationModel) => {
+      currentConversation.value = conversation
+    }
+  })

-const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);
+  const isEvaluateValid = computed(
+    () => comment.value.length || currentStarIndex.value >= 0
+  )

-const onDialogShow = () => {
-  emits('onDialogPopupShowOrHide', true);
-};
-
-const onDialogClose = () => {
-  resetEvaluate();
-  emits('onDialogPopupShowOrHide', false);
-};
-
-const openLink = () => {
-  if (isPC || isH5) {
-    window.open(Link?.customMessage?.url);
+  const onDialogShow = () => {
+    emits('onDialogPopupShowOrHide', true)
  }
-};

-const closeDialog = () => {
-  container?.value?.toggleDialogDisplay(false);
-};
-
-const resetEvaluate = () => {
-  currentStarIndex.value = -1;
-  comment.value = '';
-};
-
-const selectStar = (starIndex?: any) => {
-  if (currentStarIndex.value === starIndex) {
-    currentStarIndex.value = currentStarIndex.value - 1;
-  } else {
-    currentStarIndex.value = starIndex;
+  const onDialogClose = () => {
+    resetEvaluate()
+    emits('onDialogPopupShowOrHide', false)
  }
-};

-const submitEvaluate = () => {
-  // The evaluate message must have at least one star or comment to be submitted.
-  if (currentStarIndex.value < 0 && !comment.value.length) {
-    return;
+  const openLink = () => {
+    if (isPC || isH5) {
+      window.open(Link?.customMessage?.url)
+    }
+  }
+
+  const closeDialog = () => {
+    container?.value?.toggleDialogDisplay(false)
+  }
+
+  const resetEvaluate = () => {
+    currentStarIndex.value = -1
+    comment.value = ''
+  }
+
+  const selectStar = (starIndex?: any) => {
+    if (currentStarIndex.value === starIndex) {
+      currentStarIndex.value = currentStarIndex.value - 1
+    } else {
+      currentStarIndex.value = starIndex
+    }
+  }
+
+  const submitEvaluate = () => {
+    // The evaluate message must have at least one star or comment to be submitted.
+    if (currentStarIndex.value < 0 && !comment.value.length) {
+      return
+    }
+    const payload = {
+      data: JSON.stringify({
+        businessID: CHAT_MSG_CUSTOM_TYPE.EVALUATE,
+        version: 1,
+        score: currentStarIndex.value + 1,
+        comment: comment.value
+      }),
+      description: '对本次的服务评价',
+      extension: '对本次的服务评价'
+    }
+    const options = {
+      to:
+        currentConversation?.value?.groupProfile?.groupID ||
+        currentConversation?.value?.userProfile?.userID,
+      conversationType: currentConversation?.value?.type,
+      payload,
+      needReadReceipt: isEnabledMessageReadReceiptGlobal()
+    }
+    const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+      conversation: currentConversation.value,
+      payload: options.payload,
+      messageType: TUIChatEngine.TYPES.MSG_CUSTOM
+    }
+    const sendMessageOptions: SendMessageOptions = {
+      offlinePushInfo: OfflinePushInfoManager.create(
+        offlinePushInfoCreateParams
+      )
+    }
+
+
+    TUIChatService.sendCustomMessage(
+      options as SendMessageParams,
+      sendMessageOptions
+    )
+    // close dialog after submit evaluate
+    container?.value?.toggleDialogDisplay(false)
  }
-  const payload = {
-    data: JSON.stringify({
-      businessID: CHAT_MSG_CUSTOM_TYPE.EVALUATE,
-      version: 1,
-      score: currentStarIndex.value + 1,
-      comment: comment.value,
-    }),
-    description: '对本次的服务评价',
-    extension: '对本次的服务评价',
-  };
-  const options = {
-    to:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
-    conversationType: currentConversation?.value?.type,
-    payload,
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
-  };
-  const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
-    conversation: currentConversation.value,
-    payload: options.payload,
-    messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
-  };
-  const sendMessageOptions: SendMessageOptions = {
-    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
-  };
-  TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
-  // close dialog after submit evaluate
-  container?.value?.toggleDialogDisplay(false);
-};
 </script>
 <style scoped lang="scss" src="./style/index.scss"></style>
--- a/TUIKit/components/TUIChat/message-input-toolbar/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
@@ -63,6 +63,7 @@
            v-if="featureConfig.InputEvaluation"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          />
+          <!-- 红包 -->
          <RedEnvelope />
        </template>
      </swiper-item>
--- a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
@@ -1,20 +1,130 @@
 <script setup lang="ts">
+  import { computed, reactive, ref } from '../../../../adapter-vue'
  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
  import custom from '../../../../assets/icon/red-packet.svg'
  import { isUniFrameWork } from '../../../../utils/env'

-  const evaluateIcon = custom;
+  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666; font-size: 32rpx; font-style: normal; text-transform: none;`
+
+  const evaluateIcon = custom
+
+  /** 提示框 */
+  const message = ref()
+  const container = ref()
+  const formData = reactive({
+    //  积分
+    integral: '',
+    // 红包标题
+    title: ''
+  })
+
+  /** 监听积分输入值 */
+  const monitorPoints = computed(() => {
+    const data = {
+      valid: false,
+      message: ''
+    }
+    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 onDialogShow = () => {
+    console.log('弹出窗口')
+    formData.integral = ''
+    formData.title = ''
+  }
+
+  const onDialogClose = () => {
+    console.log('关闭窗口')
+  }
+
+  const closeDialog = () => {
+    container?.value?.toggleDialogDisplay(false)
+  }
+
+  const onSubmit = () => {
+    if (!formData.integral) return
+    console.log('确认')
+  }
 </script>

 <template>
  <ToolbarItemContainer
+    ref="container"
+    needBottomPopup
    :iconFile="evaluateIcon"
    :iconWidth="isUniFrameWork ? '26px' : '20px'"
    :iconHeight="isUniFrameWork ? '26px' : '20px'"
    title="红包"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
  >
-    <view>弹出窗口</view>
+    <view class="red-envelope">
+      <view class="top-title">
+        <text class="title">发红包</text>
+        <uni-icons
+          type="closeempty"
+          color="#333333"
+          size="24"
+          @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>
+
+      <view class="input-box title-box">
+        <input
+          v-model="formData.title"
+          :placeholder-style="placeholderStyle"
+          placeholder="恭喜发财，大吉大利"
+        />
+      </view>
+
+      <!-- 底部显示 -->
+      <view class="bottom-box">
+        <view class="text-box">
+          <text>积分：</text>
+          <text v-if="formData.integral">{{ formData.integral }}</text>
+          <text v-else>0.00</text>
+        </view>
+        <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>

-<style scoped lang="scss"></style>
+<style scoped lang="scss" src="./style/index.scss"></style>
--- a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss
+++ b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss
@@ -0,0 +1,83 @@
+.red-envelope {
+  padding: 34rpx 24rpx;
+  background-color: #f7f7f7;
+  .top-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 26rpx;
+    .title {
+      font-size: 32rpx;
+      color: #1c1c1c;
+    }
+  }
+
+  .input-box {
+    margin-bottom: 26rpx;
+    background: #ffffff;
+    border-radius: 16rpx;
+    padding: 24rpx 34rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text {
+      font-size: 32rpx;
+      color: #1c1c1c;
+    }
+    input {
+      width: 60%;
+      font-size: 32rpx;
+      color: #1c1c1c;
+      text-align: right;
+    }
+  }
+
+  .title-box {
+    input {
+      width: 100%;
+      text-align: left;
+    }
+  }
+
+  .bottom-box {
+    margin-top: 5vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .text-box {
+      display: flex;
+      align-items: baseline;
+      text {
+        font-weight: 600;
+        font-size: 28rpx;
+        color: #1c1c1c;
+        &:last-child {
+          font-size: 68rpx;
+        }
+      }
+    }
+
+    .btn {
+      margin-top: 28rpx;
+      font-size: 30rpx;
+      color: #ffffff;
+      background: #f56c6c;
+      width: 46%;
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  // 警告提现
+  .on-reminder {
+    text {
+      color: #f56c6c;
+    }
+    input {
+      color: #f56c6c;
+    }
+  }
+}