FarmingWx_V2_message/TUIKit/components/TUIChat/message-input-toolbar/otgoing-call/index.vue

<template>
  <ToolbarItemContainer
    ref="container"
    :iconFile="evaluateIcon"
    title="打电话"
    :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '26px' : '20px'"
    :iconHeight="isUniFrameWork ? '26px' : '20px'"
    @onDialogShow="onDialogShow"
    @onDialogClose="onDialogClose"
  >
    <div :class="['evaluate', !isPC && 'evaluate-h5']">
      <div :class="['evaluate-content-button', !isPC && 'evaluate-h5-content-button']">
        <button
          :class="['btn', isEvaluateValid ? 'btn-valid' : 'btn-invalid']"
          @click="submitEvaluate"
        >
          {{ TUITranslateService.t("发送手机号") }}
        </button>
      </div>
    </div>
  </ToolbarItemContainer>
</template>
<script setup lang="ts">
import {
  TUITranslateService,
  TUIStore,
  StoreName,
  IConversationModel,
  TUIChatService,
  SendMessageParams,
} from "@tencentcloud/chat-uikit-engine";
import { ref, computed } from "../../../../adapter-vue";
import ToolbarItemContainer from "../toolbar-item-container/index.vue";
import evaluateIcon from "../../../../assets/icon/evaluate.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 { createOfflinePushInfo } from "../../utils/sendMessage";
const props = defineProps({
  starTotal: {
    type: Number,
    default: 5,
  },
});
const emits = defineEmits(["onDialogPopupShowOrHide"]);

const container = ref();

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;
  },
});

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 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 = () => {
  let promise = TUIChatService.sendCustomMessage({
    payload: {
      data: JSON.stringify({
        businessID: "phone",
        title: "用户名称的手机号",
        iphone: "18790411793",
     
      }),
      description: "",
      extension: "",
    },
  });
  container?.value?.toggleDialogDisplay(false);
};
</script>
<style scoped lang="scss" src="../../style/index.scss"></style>