@trtc/calls-uikit-vue2 4.1.0

package/src/Components/components/common/Pusher/WeChatPusher/WeChatPusher.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="localClass">
+    <div class="stream-box">
+      <TRTCPusher class="stream" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { TUICallKitAPI, StoreName, NAME, TUIStore } from '../../../../../TUICallService/index';
+import { onMounted, ref, onUnmounted } from '../../../../../adapter-vue';
+import TRTCPusher from '@tencentcloud/trtc-component-uniapp/src/components/TRTCPusher.vue';
+
+const pusher = ref(TUIStore.getData(StoreName.CALL, NAME.PUSHER));
+const callStatus = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
+const props = defineProps({
+  localClass: {
+    type: String,
+    required: true,
+  },
+});
+const emit = defineEmits(['toggleViewSize']);
+
+const handlePusherChange = (value) => {
+  pusher.value = Object.assign({}, pusher.value, value);
+};
+
+const handleCallStatusChange = (value) => {
+  callStatus.value = value;
+};
+
+const watchOptions = {
+  [NAME.PUSHER]: handlePusherChange,
+  [NAME.CALL_STATUS]: handleCallStatusChange,
+};
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CALL, watchOptions, { notifyRangeWhenWatch: NAME.MYSELF });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, watchOptions);
+});
+
+function pusherStateChangeHandler(e: any) {
+  TUICallKitAPI._tuiCallEngine._pusherStateChangeHandler(e);
+}
+
+function pusherNetStatus(e: any) {
+  TUICallKitAPI._tuiCallEngine._pusherNetStatus(e);
+}
+
+function pusherErrorHandler(e: any) {
+  TUICallKitAPI.handlePusherError(e);
+}
+
+function pusherAudioVolumeNotify(e: any) {
+  TUICallKitAPI._tuiCallEngine._pusherAudioVolumeNotify(e);
+}
+</script>
+
+<style lang="scss" src="./style/index.scss" scoped></style>

package/src/Components/components/common/Pusher/WeChatPusher/style/index.scss

@@ -0,0 +1,37 @@
+.stream {
+  width: 100%;
+  height: 100%;
+}
+
+.small-view {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+
+  .stream-box {
+    width: 100%;
+    height: 100%;
+
+    .stream {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.large-view {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+
+  .stream-box {
+    width: 100%;
+    height: 100%;
+
+    .stream {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/src/Components/components/common/SelectUser/SelectUser.vue

@@ -0,0 +1,74 @@
+<template>
+  <TDialog
+    :isH5="!isPC"
+    :isHeaderShow="false"
+    :isFooterShow="false"
+    :background="false"
+    @cancel="handleSelectUserCancel"
+  >
+    <TTransfer
+      :isSearch="props.isNeedSearch"
+      :title="props.title"
+      :list="props.userList"
+      :isH5="!isPC"
+      :isRadio="props.isRadio"
+      :total="props.total"
+      @getMore="handleTransferGetMore"
+      @search="handleTransferSearchUser"
+      @submit="handleTransferSubmit"
+      @cancel="handleSelectUserCancel"
+    />
+  </TDialog>
+</template>
+<script lang="ts" setup>
+import { ref, defineProps, defineEmits, watchEffect } from "../../../../adapter-vue";
+import TDialog from "./components/Dialog/TDialog.vue";
+import TTransfer from "./components/Transfer/TTransfer.vue";
+
+const emits = defineEmits(["confirm", "cancel", "search", "getMore"]);
+
+const props = defineProps({
+  isRadio: {
+    type: Boolean,
+    default: false,
+  },
+  isNeedSearch: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  userList: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  isPC: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const handleSelectUserCancel = () => {
+  emits("cancel");
+};
+
+const handleTransferSubmit = (dataList: any) => {
+  emits("confirm", dataList);
+};
+
+const handleTransferSearchUser = (userID: string) => {
+  emits("search", userID);
+};
+
+const handleTransferGetMore = () => {
+  emits("getMore");
+};
+</script>

package/src/Components/components/common/SelectUser/components/Dialog/TDialog.vue

@@ -0,0 +1,94 @@
+<template>
+  <div
+    class="dialog"
+    :class="[props.isH5 ? 'dialog-h5' : '', center ? 'center' : '']"
+    @click.stop.prevent="toggleView(clickType.OUTSIDE)"
+  >
+    <main
+      class="dialog-main"
+      :class="[!backgroundDialog ? 'dialog-main-back' : '']"
+      @click.stop.prevent="toggleView(clickType.INSIDE)"
+    >
+      <header class="dialog-main-header" v-if="isHeaderShowDialog">
+        <h1 class="dialog-main-title">{{ showTitle }}</h1>
+        <i class="icon icon-close" @click="close"></i>
+      </header>
+      <div
+        class="dialog-main-content"
+        :class="[props.isH5 ? 'dialog-main-content-uniapp' : '']"
+      >
+        <slot />
+      </div>
+      <footer class="dialog-main-footer" v-if="isFooterShowDialog">
+        <button class="btn btn-cancel" @click="close">{{ t('Cancel') }}</button>
+        <button class="btn btn-default" @click="submit">{{ t('Done') }}</button>
+      </footer>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect, defineProps, defineEmits } from "../../../../../../adapter-vue";
+import { useTranslate } from '../../../../../hooks';
+
+const clickType = {
+  OUTSIDE: "outside",
+  INSIDE: "inside",
+};
+const props = defineProps({
+  isHeaderShow: {
+    type: Boolean,
+    default: true,
+  },
+  isFooterShow: {
+    type: Boolean,
+    default: true,
+  },
+  background: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  center: {
+    type: Boolean,
+    default: false,
+  },
+  isH5: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isHeaderShowDialog = ref(true);
+const isFooterShowDialog = ref(true);
+const backgroundDialog = ref(true);
+const showTitle = ref("");
+const t = useTranslate();
+
+watchEffect(() => {
+  showTitle.value = props.title;
+  isHeaderShowDialog.value = props.isHeaderShow;
+  isFooterShowDialog.value = props.isFooterShow;
+  backgroundDialog.value = props.background;
+});
+
+const emits = defineEmits(["cancel", "submit"]);
+
+const toggleView = (type: string) => {
+  if (type === clickType.OUTSIDE) {
+    close();
+  }
+};
+
+const close = () => {
+  emits("cancel");
+};
+
+const submit = () => {
+  emits("submit");
+};
+</script>
+<style scoped src="./style/dialog.css"></style>

package/src/Components/components/common/SelectUser/components/Dialog/style/color.css

@@ -0,0 +1,43 @@
+.dialog {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.dialog-main {
+  background: #FFFFFF; 
+}
+
+.dialog-main-header {
+  font-weight: 500;
+  color: #333333; 
+}
+
+.dialog-main-title {
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  color: #333333; 
+}
+
+.dialog-main-back {
+  background: none; 
+}
+
+.dialog-main-content {
+  font-weight: 400;
+  color: #333333; 
+}
+
+.btn {
+  font-weight: 400;
+  color: #FFFFFF;
+  letter-spacing: 0;
+}
+
+.btn-cancel {
+  border: 1px solid #dddddd;
+  color: #666666;
+}
+
+.btn-default {
+  background: #006EFF;
+  border: 1px solid #006EFF;
+}

package/src/Components/components/common/SelectUser/components/Dialog/style/dialog.css

@@ -0,0 +1,3 @@
+@import "./color.css";
+@import "./web.css";
+@import "./h5.css";

package/src/Components/components/common/SelectUser/components/Dialog/style/h5.css

@@ -0,0 +1,49 @@
+.dialog-h5 {
+  height: 100%;
+  top: 0;
+  align-items: inherit;
+}
+
+.dialog-h5 .dialog-main {
+  border-radius: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  min-height: 80px;
+  min-width: 120px; 
+}
+
+.dialog-h5 .dialog-main-content {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  text-align: center; 
+}
+
+.dialog-h5 .dialog-main-content-uniapp {
+  padding: 40px 0;
+}
+
+.dialog-h5 .dialog-main-footer {
+  border-top: 1px solid #DDDDDD;
+}
+
+.dialog-h5 .dialog-main-footer .btn {
+  flex: 1;
+  margin: 0;
+  background: none;
+  border-right: 1px solid #DDDDDD;
+}
+
+.dialog-h5 .dialog-main-footer .btn-default {
+  color: #FF584C;
+  border: none;
+}
+
+.center {
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+}

package/src/Components/components/common/SelectUser/components/Dialog/style/web.css

@@ -0,0 +1,55 @@
+.dialog {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dialog-main {
+  min-width: 368px;
+  border-radius: 10px;
+  padding: 20px 30px; 
+}
+.dialog-main-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  line-height: 30px; 
+}
+
+.dialog-main-title {
+  font-size: 16px;
+  line-height: 30px; 
+}
+
+.dialog-main-content {
+  font-size: 14px; 
+}
+
+.dialog-main-footer {
+  display: flex;
+  justify-content: flex-end; 
+}
+
+.btn {
+  padding: 8px 20px;
+  margin: 0 6px;
+  border-radius: 4px;
+  border: none;
+  font-size: 14px;
+  text-align: center;
+  line-height: 20px;
+}
+
+.btn:disabled {
+  opacity: 0.3; 
+}
+
+.btn:last-child {
+  margin-right: 0; 
+}

package/src/Components/components/common/SelectUser/components/Icon/TIcon.vue

@@ -0,0 +1,44 @@
+<template>
+  <!--本地 icon 资源, uniapp 打包到 app 仅支持标签 image, 打包小程序和 H5 均可支持标签 img -->
+  <div class="icon" @click="handlerImgClick">
+    <image
+      class="icon"
+      :src="props.file"
+      v-if="props.isApp"
+      :style="{ width: props.width, height: props.height }"
+    />
+    <img
+      class="icon"
+      :src="props.file"
+      v-else
+      :style="{ width: props.width, height: props.height }"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+// import { defineEmits, defineProps } from "vue";
+import { defineEmits, defineProps } from "../../../../../../adapter-vue";
+const emits = defineEmits(["click"]);
+const props = defineProps({
+  file: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "20px",
+  },
+  height: {
+    type: String,
+    default: "20px",
+  },
+  isApp: {
+    type: Boolean,
+    default: false,
+  },
+});
+const handlerImgClick = () => {
+  emits("click");
+};
+</script>
+<style lang="css" scoped src="./style/icon.css"></style>

package/src/Components/components/common/SelectUser/components/Icon/style/icon.css

@@ -0,0 +1,6 @@
+.icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+}