qianzhi-message/TUIKit-Homemaking/components/TUIChat/message-input-toolbar/evaluate/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-header', !isPC && 'evaluate-h5-header']">
        <div :class="['evaluate-header-content', !isPC && 'evaluate-h5-header-content']">
          {{ TUITranslateService.t("发送面试邀请") }}
        </div>
        <div
          v-if="!isPC"
          :class="['evaluate-header-close', !isPC && 'evaluate-h5-header-close']"
          @click.stop="closeDialog"
        >
          {{ TUITranslateService.t("关闭") }}
        </div>
      </div>
      <div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
        <picker
          class="picker"
          style="
            height: 40px;
            width: 94%;
            background: #f8f8f8;
            text-align: left;
            line-height: 39px;
            padding: 0px 11px;
          "
          mode="date"
          :value="date"
          @change="bindDateChange"
        >
          <view class="uni-input">{{ date ? date : "请选择面试时间" }}</view>
        </picker>

        <textarea
          v-model="comment"
          placeholder="请输入面试地址"
          :class="['evaluate-content-text', !isPC && 'evaluate-h5-content-text']"
        />
        <input
          style="
            height: 40px;
            width: 94%;
            background: #f8f8f8;
            text-align: left;
            line-height: 39px;
            padding: 0px 11px;
            margin-bottom: 20px;
          "
          @input="replaceInput"
          :value="inpvalue"
          focus
          placeholder="联系电话"
        />

        <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>
    </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 date = ref("");
const inpvalue = ref("");
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 bindDateChange = (e) => {
  date.value = e.detail.value;
};
const replaceInput = (e) => {
  inpvalue.value = e.detail.value;
};

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 = () => {
  // 评价消息，星星数和文本必须有一个才可以提交
  if (currentStarIndex.value < 0 && !comment.value.length) {
    return;
  }

  let promise = TUIChatService.sendCustomMessage({
    payload: {
      data: JSON.stringify({
        // 订单类消息标识字段
        businessID: "order",
        // 订单标题
        companyname: "云赋能网络信息有限公司",
        interviewtime: date.value, //面试时间
        Interviewlocation: comment.value, //面试地点
        iphone: inpvalue.value, //联系方式
        name: "王希望", //联系人
        imageUrl:
          "https://qcloudimg.tencent-cloud.cn/trisys/assets/product/images/SOOZNXCHkHcm50wX2ndp4.png",
      }),
      description: "",
      extension: "",
    },
  });

  // const options = {
  //   to:
  //     currentConversation?.value?.groupProfile?.groupID
  //     || currentConversation?.value?.userProfile?.userID,
  //   conversationType: currentConversation?.value?.type,
  //   payload: {
  //     data: JSON.stringify({
  //       businessID: CHAT_MSG_CUSTOM_TYPE.EVALUATE,
  //       version: 1,
  //       score: currentStarIndex.value + 1,
  //       comment: comment.value,
  //     }),
  //     description: '对本次的服务评价',
  //     extension: '对本次的服务评价',
  //   },
  //   needReadReceipt: isEnabledMessageReadReceiptGlobal(),
  // };
  // const sendMessageOptions: any = {
  //   offlinePushInfo: createOfflinePushInfo(currentConversation),
  // };
  // TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
  // 提交后关闭 dialog
  // close dialog after submit evaluate
  container?.value?.toggleDialogDisplay(false);
};
</script>
<style scoped lang="scss" src="./style/index.scss"></style>