qianzhi-message/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue

<template>
  <div class="custom" style="font-size: 14px">
    <template v-if="isCustom.businessID === 'interview_consult_message'">
      <div class="Consultation">
        <div class="contont">
          <div>
            <img
              src="https://qianzhiy-applet.oss-rg-china-mainland.aliyuncs.com/h5/newImages/jl.png"
              style="width: 76rpx; height: 76rpx"
            />
          </div>
          <div>
            <span style="font-weight: 500; font-size: 32rpx; color: #333333"
              > {{isCustom.title}}</span
            >
           
           
            <span style="font-weight: 400; font-size: 36rpx; color: #cd2121">
              ￥ {{isCustom.amount}}</span
            >
          </div>
        </div>
        <div class="tips">{{isCustom.desc}}</div>
      </div>
    </template>
    <!-- 发送联系方式 -->
    <template v-else-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.PHONE">
      <div class="phone">
        <img
          src="https://qcloudimg.tencent-cloud.cn/trisys/assets/product/images/SOOZNXCHkHcm50wX2ndp4.png"
          style="width: 50px; height: 50px; border-radius: 10px"
        />
        <div style="margin-left: 10px; line-height: 30px">
          <p>{{ isCustom.title }}</p>
          <p id="copyPhone">{{ isCustom.iphone }}</p>
        </div>
      </div>
      <div class="xian"></div>
      <div class="phone_footer">
        <span>
          <a :href="`tel:` + isCustom.iphone" ref="telPhone">拨号</a></span
        >
        <span>复制</span>
      </div>
    </template>
    <!-- 面试邀请 -->
    <template v-else-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
      <div class="order">
        <div class="header">
          <img :src="isCustom.imageUrl" />
          <div class="main">
            <h1>您已发起面试邀请</h1>
            <span></span>
          </div>
        </div>
        <div class="xian"></div>
        <div class="contont">
          <div>
            <p class="title">面试时间</p>
            <p class="value">{{ isCustom.interviewtime }}</p>
          </div>
          <div>
            <p class="title">面试地点</p>
            <p class="value">{{ isCustom.Interviewlocation }}</p>
          </div>
          <div>
            <p class="title">联系方式</p>
            <p class="value">{{ isCustom.name }}{{ isCustom.iphone }}</p>
          </div>
        </div>
        <div class="xian"></div>
        <div class="phone_footer">
          <span>等待接受</span>
        </div>
      </div>
    </template>
    
    <template v-else>
      <span v-html="content.custom" ></span>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { watchEffect, ref } from "../../../../adapter-vue";
import {
  TUITranslateService,
  IMessageModel,
} from "@tencentcloud/chat-uikit-engine";
import { isUrl, JSONToObject } from "../../../../utils/index";
import { CHAT_MSG_CUSTOM_TYPE } from "../../../../constant";
import { ICustomMessagePayload } from "../../../../interface";
import Icon from "../../../common/Icon.vue";
import star from "../../../../assets/icon/star-light.png";
interface Props {
  messageItem: IMessageModel;
  content: any;
}

const props = withDefaults(defineProps<Props>(), {
  messageItem: undefined,
  content: undefined,
});
const userType = ref(uni.getStorageSync("userId").includes("A"));
console.log("1123123", userType);

const custom = ref();
const message = ref<IMessageModel>();
const extension = ref();
const isCustom = ref<ICustomMessagePayload>({
  businessID: "",
});
const copyPhone = ref();
const PhoneChange = (index, record) => {
  if (index == "1") {
    //拨号
  } else if (index == "2") {
    //发短信
  } else if (index == "3") {
    var text = isCustom.value.iphone;
    copyTo(text); //把要复制的内容传入到copyTo方法
  }
};
function copyTo(content) {
  var oInput = document.createElement("input"); //创建一个input
  oInput.value = content; //给要复制的内容赋值input的value
  document.body.appendChild(oInput); //body中添加input
  oInput.select(); // 选择对象 .select()获取文本域中的内容
  document.execCommand("Copy"); // 执行浏览器复制命令
  oInput.style.display = "none"; // 把input隐藏
  uni.showToast({
    title: "复制成功",
  });
}
const AcceptInvitation = () => {
  //普通用户接受邀请
};
watchEffect(() => {
  custom.value = props.content;
  message.value = props.messageItem;
  const { payload } = props.messageItem;
  isCustom.value = payload.data || "";
  isCustom.value = JSONToObject(payload.data);
  if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
    extension.value = JSONToObject(payload.extension);
  }
});
const openLink = (url: any) => {
  window.open(url);
};
</script>
<style lang="scss" scoped>
@import "../../../../assets/styles/common";
.Consultation {
  padding: 15px 10px 15px 10px;
  width: 200px;
  height: 74px;
  background: linear-gradient(180deg, #ffdeb2 0%, #ffecc7 100%);
  border-radius: 16rpx;
  .contont {
    
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .tips {
    font-size: 12px;
    margin-top: 10px;
    color: #666666;
  }
}
::v-deep .message-body-content {
  background: transparent !important;
}
.phone {
  min-width: 180px;
  height: 65px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px;
}
.xian {
  width: 408rpx;
  height: 1rpx;
  background: #000000;
  opacity: 0.1;
}
.phone_footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: relative;
  top: 8px;
  height: 25px;
  align-items: center;
}
a {
  color: #00b693;
}

.custom {
  font-size: 14px;

  h1 {
    font-size: 14px;
    color: #000;
  }

  h1,
  a,
  p {
    font-size: 14px;
  }

  .evaluate {
    ul {
      display: flex;
      padding: 10px 0;
    }

    &-list {
      display: flex;
      flex-direction: row;

      &-item {
        padding: 0 2px;
      }
    }
  }

  .order {
    display: flex;
    min-height: 250px;
    min-width: 215px;
    flex-direction: column;
    padding: 5px;
    .header {
      width: 100%;
      height: 55px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .contont {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      height: 190px;
      .title {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #a1a1a1;
        line-height: 44rpx;
      }
      .value {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #666666;
        line-height: 44rpx;
      }
    }
    .main {
      padding-left: 5px;
      width: 90%;
      line-height: 25px;
    }

    img {
      width: 45px;
      height: 45px;
    }
  }
}
</style>