添加红包功能

2026-01-07 00:52:23 +08:00
parent 95b46d5cf4
commit 1c021cdd21
12 changed files with 1542 additions and 1346 deletions
--- a/TUIKit/components/TUIGroup/manage-group/index.vue
+++ b/TUIKit/components/TUIGroup/manage-group/index.vue
--- a/TUIKit/components/TUIGroup/manage-group/manage-name.vue
+++ b/TUIKit/components/TUIGroup/manage-group/manage-name.vue
@@ -3,8 +3,10 @@
    <div class="group-info" @click="toggleEditStatus">
      <Avatar
        useSkeletonAnimation
-        :url="groupProfile.avatar ||
-          'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
+        :url="
+          groupProfile.avatar ||
+          'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'
+        "
        size="40px"
      />
      <div class="group-details">
@@ -16,28 +18,26 @@
    <div
      v-if="isEdit"
      :class="{
-        'edit-h5': isMobile,
+        'edit-h5': isMobile
      }"
    >
      <main class="edit-h5-main">
-        <header
-          v-if="!isPC"
-          class="edit-h5-header"
-        >
+        <header v-if="!isPC" class="edit-h5-header">
          <aside class="left">
-            <h1 class="title">{{ TUITranslateService.t(`TUIGroup.修改群聊名称`) }}</h1>
-            <span class="subtitle">{{
-              TUITranslateService.t(
-                `TUIGroup.修改群聊名称后，将在群内通知其他成员`
-              )
-            }}</span>
+            <h1 class="title">
+              {{ TUITranslateService.t(`TUIGroup.修改群聊名称`) }}
+            </h1>
+            <span class="subtitle">
+              {{
+                TUITranslateService.t(
+                  `TUIGroup.修改群聊名称后，将在群内通知其他成员`
+                )
+              }}
+            </span>
          </aside>
-          <span
-            class="close"
-            @click="toggleEditStatus"
-          >{{
-            TUITranslateService.t(`关闭`)
-          }}</span>
+          <span class="close" @click="toggleEditStatus">
+            {{ TUITranslateService.t(`关闭`) }}
+          </span>
        </header>
        <div class="input-box">
          <input
@@ -46,24 +46,17 @@
            v-model="inputGroupName"
            class="input"
            type="text"
-          >
-          <span
-            v-if="!isPC"
-            class="tip"
-          >{{
-            TUITranslateService.t(
-              `TUIGroup.仅限中文、字母、数字和下划线，2-20个字`
-            )
-          }}</span>
+          />
+          <span v-if="!isPC" class="tip">
+            {{
+              TUITranslateService.t(
+                `TUIGroup.仅限中文、字母、数字和下划线，2-20个字`
+              )
+            }}
+          </span>
        </div>
-        <footer
-          v-if="!isPC"
-          class="edit-h5-footer"
-        >
-          <button
-            class="btn"
-            @click="updateProfile"
-          >
+        <footer v-if="!isPC" class="edit-h5-footer">
+          <button class="btn" @click="updateProfile">
            {{ TUITranslateService.t(`确认`) }}
          </button>
        </footer>
@@ -73,226 +66,226 @@
 </template>

 <script lang="ts" setup>
-import { watchEffect, ref, nextTick, watch } from '../../../adapter-vue';
-import {
-  TUITranslateService,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import Avatar from "../../common/Avatar/index.vue";
-import Icon from '../../common/Icon.vue';
-import rightIcon from '../../../assets/icon/right-icon.svg';
-import { Toast, TOAST_TYPE } from '../../common/Toast/index';
-import { isMobile, isPC } from '../../../utils/env';
+  import { watchEffect, ref, nextTick, watch } from '../../../adapter-vue'
+  import {
+    TUITranslateService,
+    IGroupModel
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import Avatar from '../../common/Avatar/index.vue'
+  import Icon from '../../common/Icon.vue'
+  import rightIcon from '../../../assets/icon/right-icon.svg'
+  import { Toast, TOAST_TYPE } from '../../common/Toast/index'
+  import { isMobile, isPC } from '../../../utils/env'

-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({}),
-  },
-  isAuthor: {
-    type: Boolean,
-    default: false,
-  },
-});
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    isAuthor: {
+      type: Boolean,
+      default: false
+    }
+  })

-const groupProfile = ref<IGroupModel>({});
-const inputGroupName = ref('');
-const isEdit = ref(false);
-const nameInputRef = ref<HTMLInputElement>(null);
+  const groupProfile = ref<IGroupModel>({})
+  const inputGroupName = ref('')
+  const isEdit = ref(false)
+  const nameInputRef = ref<HTMLInputElement>(null)

-watchEffect(() => {
-  groupProfile.value = props.data;
-});
+  watchEffect(() => {
+    groupProfile.value = props.data
+  })

-const emit = defineEmits(['update']);
-const updateProfile = () => {
-  if (!inputGroupName.value) {
-    Toast({
-      message: TUITranslateService.t('TUIGroup.群名称不能为空'),
-      type: TOAST_TYPE.ERROR,
-    });
-  } else {
-    if (inputGroupName.value !== groupProfile.value.name) {
-      emit('update', { key: 'name', value: inputGroupName.value });
-      groupProfile.value.name = inputGroupName.value;
-      inputGroupName.value = '';
+  const emit = defineEmits(['update'])
+  const updateProfile = () => {
+    if (!inputGroupName.value) {
      Toast({
-        message: TUITranslateService.t('TUIGroup.群名称修改成功'),
-        type: TOAST_TYPE.SUCCESS,
-      });
+        message: TUITranslateService.t('TUIGroup.群名称不能为空'),
+        type: TOAST_TYPE.ERROR
+      })
+    } else {
+      if (inputGroupName.value !== groupProfile.value.name) {
+        emit('update', { key: 'name', value: inputGroupName.value })
+        groupProfile.value.name = inputGroupName.value
+        inputGroupName.value = ''
+        Toast({
+          message: TUITranslateService.t('TUIGroup.群名称修改成功'),
+          type: TOAST_TYPE.SUCCESS
+        })
+      }
+      toggleEditStatus()
    }
-    toggleEditStatus();
  }
-};

-const toggleEditStatus = () => {
-  if (props.isAuthor) {
-    isEdit.value = !isEdit.value;
-  }
-  if (isEdit.value) {
-    inputGroupName.value = groupProfile.value.name;
-  }
-};
-
-watch(
-  () => isEdit.value,
-  (newVal: boolean) => {
-    if (newVal) {
-      nextTick(() => {
-        nameInputRef.value?.focus();
-      });
+  const toggleEditStatus = () => {
+    if (props.isAuthor) {
+      isEdit.value = !isEdit.value
    }
-  },
-);
+    if (isEdit.value) {
+      inputGroupName.value = groupProfile.value.name
+    }
+  }
+
+  watch(
+    () => isEdit.value,
+    (newVal: boolean) => {
+      if (newVal) {
+        nextTick().then(() => {
+          nameInputRef.value?.focus()
+        })
+      }
+    }
+  )
 </script>

 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+  @import '../../../assets/styles/common';

-.group-name {
-  padding: 14px 20px;
-  font-weight: 400;
-  font-size: 14px;
-  color: #000;
-  display: flex;
-  flex-direction: column;
-}
-
-.group-info {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.group-details {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  gap: 6px;
-  flex-direction: column;
-  .name {
-    font-size: 16px;
-    line-height: 18px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-  }
-  .ID {
-    font-size: 12px;
-    line-height: 14px;
-    font-weight: 400;
-    color: #888;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-  }
-}
-
-.input-box {
-  display: flex;
-
-  .input {
-    flex: 1;
-    border: 1px solid #e8e8e9;
-    border-radius: 4px;
-    padding: 4px 16px;
+  .group-name {
+    padding: 14px 20px;
    font-weight: 400;
    font-size: 14px;
    color: #000;
-    opacity: 0.6;
-  }
-}
-
-.space-top {
-  border-top: 10px solid #f4f5f9;
-}
-
-.edit-h5 {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: flex-end;
-  z-index: 1;
-
-  .edit-h5-main {
-    background: #fff;
-    flex: 1;
-    padding: 18px;
-    border-radius: 12px 12px 0 0;
-    width: 80vw;
-
-    .input-box {
-      flex-direction: column;
-      padding: 18px 0;
-
-      .input {
-        background: #f8f8f8;
-        padding: 10px 12px;
-      }
-
-      .tip {
-        font-size: 12px;
-        color: #888;
-        padding-top: 8px;
-      }
-    }
-  }
-
-  &-header {
    display: flex;
+    flex-direction: column;
+  }
+
+  .group-info {
+    display: flex;
+    gap: 10px;
    align-items: center;
-    justify-content: space-between;
+  }

-    h1 {
-      font-family: PingFang SC;
+  .group-details {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    gap: 6px;
+    flex-direction: column;
+    .name {
+      font-size: 16px;
+      line-height: 18px;
      font-weight: 500;
-      font-size: 22px;
-      line-height: 26px;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
    }
-
-    .subtitle {
-      color: #888;
-    }
-
-    .close {
-      font-family: PingFangSC-Regular;
+    .ID {
+      font-size: 12px;
+      line-height: 14px;
      font-weight: 400;
-      font-size: 18px;
-      color: #3370ff;
-      letter-spacing: 0;
-      line-height: 27px;
+      color: #888;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
    }
  }

-  &-footer {
+  .input-box {
    display: flex;

-    .btn {
+    .input {
      flex: 1;
-      border: none;
-      background: #147aff;
-      border-radius: 5px;
-      font-family: PingFangSC-Regular;
+      border: 1px solid #e8e8e9;
+      border-radius: 4px;
+      padding: 4px 16px;
      font-weight: 400;
-      font-size: 16px;
-      color: #fff;
-      letter-spacing: 0;
-      line-height: 27px;
-      padding: 8px 0;
+      font-size: 14px;
+      color: #000;
+      opacity: 0.6;
+    }
+  }

-      &:disabled {
-        opacity: 0.3;
+  .space-top {
+    border-top: 10px solid #f4f5f9;
+  }
+
+  .edit-h5 {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: flex-end;
+    z-index: 1;
+
+    .edit-h5-main {
+      background: #fff;
+      flex: 1;
+      padding: 18px;
+      border-radius: 12px 12px 0 0;
+      width: 80vw;
+
+      .input-box {
+        flex-direction: column;
+        padding: 18px 0;
+
+        .input {
+          background: #f8f8f8;
+          padding: 10px 12px;
+        }
+
+        .tip {
+          font-size: 12px;
+          color: #888;
+          padding-top: 8px;
+        }
+      }
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      h1 {
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 22px;
+        line-height: 26px;
+      }
+
+      .subtitle {
+        color: #888;
+      }
+
+      .close {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 18px;
+        color: #3370ff;
+        letter-spacing: 0;
+        line-height: 27px;
+      }
+    }
+
+    &-footer {
+      display: flex;
+
+      .btn {
+        flex: 1;
+        border: none;
+        background: #147aff;
+        border-radius: 5px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 16px;
+        color: #fff;
+        letter-spacing: 0;
+        line-height: 27px;
+        padding: 8px 0;
+
+        &:disabled {
+          opacity: 0.3;
+        }
      }
    }
  }
-}
 </style>