消息

TUIKit/components/TUIGroup/create-group/group-introduction/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <ul class="group-introduction-list select">
+    <li
+      v-for="(item, index) in type"
+      :key="index"
+      class="select-item"
+      :class="[selectType === item.type && 'selected']"
+      @click="selected(item)"
+    >
+      <main class="select-item-type">
+        <div class="select-item-header">
+          <aside class="left">
+            <Icon
+              class="icon"
+              :file="item.icon"
+            />
+            <span class="select-item-label">{{ TUITranslateService.t(`TUIGroup.${item.label}`) }}</span>
+          </aside>
+          <Icon
+            v-if="selectType === item.type"
+            :file="selectedIcon"
+          />
+        </div>
+        <span class="select-item-detail">{{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}</span>
+        <a
+          class="link"
+          :href="documentLink.product.url"
+          target="_blank"
+          @click="openUrl(documentLink.product.url)"
+        >{{
+          TUITranslateService.t(`TUIGroup.${item.src}`) }}</a>
+      </main>
+    </li>
+  </ul>
+</template>
+<script lang="ts" setup>
+import { ref, watchEffect } from '../../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import documentLink from '../../../../utils/documentLink';
+import Icon from '../../../common/Icon.vue';
+import selectedIcon from '../../../../assets/icon/selected.svg';
+import { groupIntroConfig } from './config';
+import { isUniFrameWork } from '../../../../utils/env';
+
+const props = defineProps({
+  groupType: {
+    type: String,
+    default: '',
+  },
+});
+
+const type = groupIntroConfig;
+
+const selectType = ref();
+
+const emit = defineEmits(['selectType']);
+
+watchEffect(() => {
+  selectType.value = props.groupType;
+});
+
+const selected = (item: any) => {
+  selectType.value = item.type;
+  emit('selectType', item.type);
+};
+
+const openUrl = (link: string) => {
+  if (!isUniFrameWork) {
+    TUIGlobal?.open(link);
+  }
+};
+
+</script>
+<style lang="scss" scoped src="../style/index.scss"></style>