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">
          {{ titleImpl(isCustom.redEnvelopeExpireTime) }}
        </div>
        <div class="time">
          {{ timeImpl(isCustom.redEnvelopeExpireTime) }}
          <!-- {{
            isCustom.redEnvelopeExpireTime
              ? $moment(isCustom.redEnvelopeExpireTime).format("YYYY-MM-DD") +
                "过期"
              : ""
          }} -->
        </div>
      </div>
    </template>
    <template v-else-if="isCustom.businessID === 'red_envelope_message_gq'">
      <div class="evaluate">
        <div class="evaluatered">通用红包</div>
        <div class="time">已领取</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 { Toast, TOAST_TYPE } from "../../../common/Toast/index";
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 * as mesApi from "@/api/message/index";
import moment from "moment";
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);
};
function titleImpl(time) {
  if (time) {
    let expireTime = moment(time).format("YYYY-MM-DD");
    const now = moment();
    if (expireTime && now.isAfter(expireTime)) {
      return "已过期";
    } else if (expireTime) {
      return "通用红包";
    }
    return "";
  } else {
    return "";
  }
}
function timeImpl(time) {
  if (time) {
    let expireTime = moment(time).format("YYYY-MM-DD");
    const now = moment();
    console.log("oldTime", expireTime);
    if (expireTime && now.isAfter(expireTime)) {
      return expireTime + "过期不可领取";
    } else if (expireTime) {
      return expireTime + "过期";
    }
    return "";
  } else {
    return "";
  }
}
const lqhb = async (record) => {
  console.log("lqhb 函数开始执行");
  console.log("record.recordId:", record.recordId);
  // 检查过期时间
  const expireTime = record.redEnvelopeExpireTime
    ? moment(record.redEnvelopeExpireTime).format("YYYY-MM-DD")
    : null;
  const now = moment();
  const isOk = expireTime && !now.isAfter(expireTime);
  if (isOk) {
    try {
      console.log("开始请求接口");
      let res = await mesApi.default.receiveLq(record.recordId);
      console.log("接口响应:", res);
      if (res.code == 200) {
        if (res.data) {
          let text = props.messageItem.payload.data;
          let msg = JSON.parse(text);
          msg.businessID = "red_envelope_message_gq";
          props.messageItem.payload.data = JSON.stringify(msg);
          if (!message.value) return;
          const messageModel = TUIStore.getMessageModel(message.value.ID);
          messageModel.modifyMessage(props.messageItem.payload.data);
          Toast({
            message: TUITranslateService.t("红包领取成功,请在钱包余额查看！"),
            type: TOAST_TYPE.SUCCESS,
          });
        }
      } else {
        Toast({
          message: TUITranslateService.t("红包领取失败,请联系客服反馈！"),
          type: TOAST_TYPE.ERROR,
        });
      }
    } catch (error) {
      console.error("接口请求出错:", error);
    }
  }
  console.log("lqhb 函数执行结束");
};

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>