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

<template>
  <div class="custom">
    <template v-if="isCustom.businessID === 'red_envelope_message'">
      <div class="evaluate" @click="lqhb(isCustom)">
        <div class="evaluatered">通用红包</div>
        <div class="time">
          {{
            isCustom.redEnvelopeExpireTime
              ? $moment(isCustom.redEnvelopeExpireTime).format("YYYY-MM-DD") + "过期"
              : ""
          }}
        </div>
      </div>
    </template>
    <template v-else-if="isCustom.businessID === 'order'">
      <div class="evaluate">
        <div @click="product(isCustom)">
          <div class="left">
            <img
              :src="isCustom.imageUrl"
              style="width: 80px; height: 80px; border-radius: 10px"
            />
            <div class="right">
              <div class="label">
                {{ isCustom.title }}
              </div>
              <div class="label">描述:{{ isCustom.spuDesc }}</div>
              <div style="font-weight: 400; font-size: 28rpx">
                价格:{{ isCustom.price.toFixed(2) }}元/{{ isCustom.unit }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <span v-html="content.custom" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { watchEffect, ref } from "../../../../adapter-vue";
import {
  TUITranslateService,
  IMessageModel,
  TUIStore,
} 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";
import * as mesApi from "@/api/message/index";
import TUIChatConfig from "../../config";
const featureConfig = TUIChatConfig.getFeatureConfig();
interface Props {
  messageItem: IMessageModel;
  content: any;
}

const props = withDefaults(defineProps<Props>(), {
  messageItem: undefined,
  content: undefined,
});

const custom = ref();
const message = ref<IMessageModel>();
const extension = ref();
const isCustom = ref<ICustomMessagePayload>({
  businessID: "",
});

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);
};
const lqhb = (record) => {
  console.log(record);
  let aa = record;
  aa.businessID = "red_envelope_message_gq";
  if (!message.value) return;
  const messageModel = TUIStore.getMessageModel(message.value.ID);
  messageModel.modifyMessage(aa);
};

const product = (record) => {
  if (record.saleType == 2) {
    webUni.webView.redirectTo({
      url: `/subpages/home/carpoolGoods/product-details?id=` + record.id,
    });
  } else {
    webUni.webView.redirectTo({
      url: `/subpages/home/supply-hall/product-details?id=` + record.id,
    });
  }
};
</script>
<style lang="scss" scoped>
@import "../../../../assets/styles/common";
.evaluatered {
  position: relative;
  left: 40px;
  font-size: 20px;
  color: #fff;
}
.time {
  letter-spacing: 0.1em;
  position: relative;
  top: 30px;
  font-weight: 500;
  font-size: 24rpx;
  color: #ffffff;
  text-align: left;
  font-style: normal;
}
.name {
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}
.value {
  font-size: 16px;
  margin-right: 10px;
}
a {
  color: #679ce1;
}

.custom {
  font-size: 14px;

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

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

  .evaluate {
    min-width: 240px;
    width: 240px;
    .left {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: #7a7a7d29;
      border-radius: 15px;
      padding: 15px;
    }
    .right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      height: 75px;
      width: 70%;
      justify-content: center;
      line-height: 25px;
      margin-left: 10px;
      .label {
        font-weight: bold;
        font-size: 14px;
        width: 100px;
        height: auto;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    ul {
      display: flex;
      padding: 10px 0;
    }

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

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

  .order {
    display: flex;

    main {
      padding-left: 5px;

      p {
        font-family: PingFangSC-Regular;
        width: 145px;
        line-height: 17px;
        font-size: 14px;
        color: #999;
        letter-spacing: 0;
        margin-bottom: 6px;
        word-break: break-word;
      }

      span {
        font-family: PingFangSC-Regular;
        line-height: 25px;
        color: #ff7201;
      }
    }

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