红包需要添加样式

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, {
+  import TUIChatEngine, {
     TUITranslateService,
     TUIStore,
     StoreName,
     IConversationModel,
     TUIChatService,
     SendMessageParams,
-  SendMessageOptions,
+    SendMessageOptions
-} from '@tencentcloud/chat-uikit-engine-lite';
+  } from '@tencentcloud/chat-uikit-engine-lite'
-import { ref, computed } from '../../../../adapter-vue';
+  import { ref, computed } from '../../../../adapter-vue'
-import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
-import custom from '../../../../assets/icon/custom.svg';
+  import custom from '../../../../assets/icon/custom.svg'
-import Link from '../../../../utils/documentLink';
+  import Link from '../../../../utils/documentLink'
-import Icon from '../../../common/Icon.vue';
+  import Icon from '../../../common/Icon.vue'
-import starIcon from '../../../../assets/icon/star.png';
+  import starIcon from '../../../../assets/icon/star.png'
-import starLightIcon from '../../../../assets/icon/star-light.png';
+  import starLightIcon from '../../../../assets/icon/star-light.png'
-import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
-import { isPC, isH5, isUniFrameWork } from '../../../../utils/env';
+  import { isPC, isH5, isUniFrameWork } from '../../../../utils/env'
-import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+  import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils'
-import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
+  import OfflinePushInfoManager, {
+    IOfflinePushInfoCreateParams
+  } from '../../offlinePushInfoManager/index'
 
-const evaluateIcon = custom;
+  const evaluateIcon = custom
-const props = defineProps({
+  const props = defineProps({
     starTotal: {
       type: Number,
-    default: 5,
+      default: 5
-  },
+    }
-});
+  })
-const emits = defineEmits(['onDialogPopupShowOrHide']);
+  const emits = defineEmits(['onDialogPopupShowOrHide'])
 
-const container = ref();
+  const container = ref()
 
-const starList = ref<number>(props.starTotal);
+  const starList = ref<number>(props.starTotal)
-const currentStarIndex = ref<number>(-1);
+  const currentStarIndex = ref<number>(-1)
-const comment = ref('');
+  const comment = ref('')
-const currentConversation = ref<IConversationModel>();
+  const currentConversation = ref<IConversationModel>()
 
-TUIStore.watch(StoreName.CONV, {
+  TUIStore.watch(StoreName.CONV, {
     currentConversation: (conversation: IConversationModel) => {
-    currentConversation.value = conversation;
+      currentConversation.value = conversation
-  },
+    }
-});
+  })
 
-const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);
+  const isEvaluateValid = computed(
+    () => comment.value.length || currentStarIndex.value >= 0
+  )
 
-const onDialogShow = () => {
+  const onDialogShow = () => {
-  emits('onDialogPopupShowOrHide', true);
+    emits('onDialogPopupShowOrHide', true)
-};
+  }
 
-const onDialogClose = () => {
+  const onDialogClose = () => {
-  resetEvaluate();
+    resetEvaluate()
-  emits('onDialogPopupShowOrHide', false);
+    emits('onDialogPopupShowOrHide', false)
-};
+  }
 
-const openLink = () => {
+  const openLink = () => {
     if (isPC || isH5) {
-    window.open(Link?.customMessage?.url);
+      window.open(Link?.customMessage?.url)
+    }
   }
-};
 
-const closeDialog = () => {
+  const closeDialog = () => {
-  container?.value?.toggleDialogDisplay(false);
+    container?.value?.toggleDialogDisplay(false)
-};
+  }
 
-const resetEvaluate = () => {
+  const resetEvaluate = () => {
-  currentStarIndex.value = -1;
+    currentStarIndex.value = -1
-  comment.value = '';
+    comment.value = ''
-};
+  }
 
-const selectStar = (starIndex?: any) => {
+  const selectStar = (starIndex?: any) => {
     if (currentStarIndex.value === starIndex) {
-    currentStarIndex.value = currentStarIndex.value - 1;
+      currentStarIndex.value = currentStarIndex.value - 1
     } else {
-    currentStarIndex.value = starIndex;
+      currentStarIndex.value = starIndex
+    }
   }
-};
 
-const submitEvaluate = () => {
+  const submitEvaluate = () => {
     // The evaluate message must have at least one star or comment to be submitted.
     if (currentStarIndex.value < 0 && !comment.value.length) {
-    return;
+      return
     }
     const payload = {
       data: JSON.stringify({
         businessID: CHAT_MSG_CUSTOM_TYPE.EVALUATE,
         version: 1,
         score: currentStarIndex.value + 1,
-      comment: comment.value,
+        comment: comment.value
       }),
       description: '对本次的服务评价',
-    extension: '对本次的服务评价',
+      extension: '对本次的服务评价'
-  };
+    }
     const options = {
       to:
-      currentConversation?.value?.groupProfile?.groupID
+        currentConversation?.value?.groupProfile?.groupID ||
-      || currentConversation?.value?.userProfile?.userID,
+        currentConversation?.value?.userProfile?.userID,
       conversationType: currentConversation?.value?.type,
       payload,
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+      needReadReceipt: isEnabledMessageReadReceiptGlobal()
-  };
+    }
     const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
       conversation: currentConversation.value,
       payload: options.payload,
-    messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
+      messageType: TUIChatEngine.TYPES.MSG_CUSTOM
-  };
+    }
     const sendMessageOptions: SendMessageOptions = {
-    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+      offlinePushInfo: OfflinePushInfoManager.create(
-  };
+        offlinePushInfoCreateParams
-  TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
+      )
+    }
+
+
+    TUIChatService.sendCustomMessage(
+      options as SendMessageParams,
+      sendMessageOptions
+    )
     // close dialog after submit evaluate
-  container?.value?.toggleDialogDisplay(false);
+    container?.value?.toggleDialogDisplay(false)
-};
+  }
 </script>
 <style scoped lang="scss" src="./style/index.scss"></style>

TUIKit/components/TUIChat/message-input-toolbar/index.vue

@@ -63,6 +63,7 @@
             v-if="featureConfig.InputEvaluation"
             @onDialogPopupShowOrHide="handleSwiperDotShow"
           />
+          <!-- 红包 -->
           <RedEnvelope />
         </template>
       </swiper-item>

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>

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;
+    }
+  }
+}

TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="custom">
-    <template v-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
+    <template
+      v-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE"
+    >
       <div>
         <h1>
           <label>{{ extension.title }}</label>
@@ -8,18 +10,19 @@
             v-if="extension.hyperlinks_text"
             :href="extension.hyperlinks_text.value"
             target="view_window"
-          >{{ extension.hyperlinks_text.key }}</a>
+          >
+            {{ extension.hyperlinks_text.key }}
+          </a>
         </h1>
         <ul v-if="extension.item && extension.item.length > 0">
-          <li
+          <li v-for="(item, index) in extension.item" :key="index">
-            v-for="(item, index) in extension.item"
-            :key="index"
-          >
             <a
               v-if="isUrl(item.value)"
               :href="item.value"
               target="view_window"
-            >{{ item.key }}</a>
+            >
+              {{ item.key }}
+            </a>
             <p v-else>
               {{ item.key }}
             </p>
@@ -28,32 +31,30 @@
         <article>{{ extension.description }}</article>
       </div>
     </template>
-    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
+    <template
+      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE"
+    >
       <div class="evaluate">
-        <h1>{{ TUITranslateService.t("message.custom.对本次服务评价") }}</h1>
+        <h1>
+          {{ TUITranslateService.t('message.custom.对本次服务评价') }}
+        </h1>
         <ul class="evaluate-list">
           <li
             v-for="(item, index) in Math.max(customData.score, 0)"
             :key="index"
             class="evaluate-list-item"
           >
-            <Icon
+            <Icon :file="star" class="file-icon" />
-              :file="star"
-              class="file-icon"
-            />
           </li>
         </ul>
         <article>{{ customData.comment }}</article>
       </div>
     </template>
-    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
+    <template
-      <div
+      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER"
-        class="order"
-        @click="openLink(customData.link)"
-      >
-        <img
-          :src="customData.imageUrl"
     >
+      <div class="order" @click="openLink(customData.link)">
+        <img :src="customData.imageUrl" />
         <main>
           <h1>{{ customData.title }}</h1>
           <p>{{ customData.description }}</p>
@@ -61,15 +62,14 @@
         </main>
       </div>
     </template>
-    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
+    <template
+      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LINK"
+    >
       <div class="textLink">
         <p>{{ customData.text }}</p>
-        <a
+        <a :href="customData.link" target="view_window">
-          :href="customData.link"
+          {{ TUITranslateService.t('message.custom.查看详情>>') }}
-          target="view_window"
+        </a>
-        >{{
-          TUITranslateService.t("message.custom.查看详情>>")
-        }}</a>
       </div>
     </template>
     <template v-else>
@@ -79,52 +79,55 @@
 </template>
 
 <script lang="ts" setup>
-import { watchEffect, ref } from '../../../../adapter-vue';
+  import { watchEffect, ref } from '../../../../adapter-vue'
-import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine-lite';
+  import {
-import { isUrl, JSONToObject } from '../../../../utils/index';
+    TUITranslateService,
-import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
+    IMessageModel
-import { ICustomMessagePayload } from '../../../../interface';
+  } from '@tencentcloud/chat-uikit-engine-lite'
-import Icon from '../../../common/Icon.vue';
+  import { isUrl, JSONToObject } from '../../../../utils/index'
-import star from '../../../../assets/icon/star-light.png';
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
-interface Props {
+  import { ICustomMessagePayload } from '../../../../interface'
-  messageItem: IMessageModel;
+  import Icon from '../../../common/Icon.vue'
-  content: any;
+  import star from '../../../../assets/icon/star-light.png'
-}
+  interface Props {
-
+    messageItem: IMessageModel
-const props = withDefaults(defineProps<Props>(), {
+    content: any
-  messageItem: undefined,
+  }
-  content: undefined,
+
-});
+  const props = withDefaults(defineProps<Props>(), {
-
+    messageItem: undefined,
-const custom = ref();
+    content: undefined
-const message = ref<IMessageModel>();
+  })
-const extension = ref();
+
-const customData = ref<ICustomMessagePayload>({
+  const custom = ref()
-  businessID: '',
+  const message = ref<IMessageModel>()
-});
+  const extension = ref()
-
+  const customData = ref<ICustomMessagePayload>({
-watchEffect(() => {
+    businessID: ''
-  custom.value = props.content;
+  })
-  message.value = props.messageItem;
+
-  const { payload } = props.messageItem;
+  watchEffect(() => {
-  customData.value = payload.data || '';
+    custom.value = props.content
-  customData.value = JSONToObject(payload.data);
+    message.value = props.messageItem
-  if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
+    const { payload } = props.messageItem
-    extension.value = JSONToObject(payload.extension);
+    customData.value = payload.data || ''
+    customData.value = JSONToObject(payload.data)
+    if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
+      extension.value = JSONToObject(payload.extension)
+    }
+  })
+  const openLink = (url: any) => {
+    window.open(url)
   }
-});
-const openLink = (url: any) => {
-  window.open(url);
-};
 </script>
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+  @import '../../../../assets/styles/common';
 
-a {
+  a {
     color: #679ce1;
-}
+  }
 
-.custom {
+  .custom {
     font-size: 14px;
 
     h1 {
@@ -183,5 +186,5 @@ a {
         height: 67px;
       }
     }
-}
+  }
 </style>