app/pages/chat/components/components/enterpriseCard.vue

<template>
  <view class="titleClass">您好，我是赢伟达智能客服小助手，很高兴为您服务</view>
  <view class="log-card">
    <view class="log-card__content">
      <view @click="handleClick(item)" class="log-card__text-wrapper" v-for="item in productSpuPageData" :key="item.id">
        <text class="log-card__text">
          {{ item.name }}
        </text>
        <scroll-view class="log-card__image-group" scroll-x>
          <image class="log-card__image" mode="aspectFill" :src="item.picUrl" />
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, inject } from "vue";
import AiApi from '@/sheep/api/aiApi/index.js'
import KeFuApi from '@/sheep/api/promotion/kefu';
import { onLoad } from "@dcloudio/uni-app";
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
console.log(props.item, 33333222);
const productSpuPageData = ref([])
const productSpuPageAxios = async () => {
  const res = await AiApi.productSpuPage({
    page: 1,
    pageSize: 10,
    categoryIds: props.item.id,
  });
  productSpuPageData.value = res.data.list
  console.log(res, 33333222);
};
const route = ref({})
onLoad((options) => {
  route.value = options
});
const EventSourceFun = inject('EventSourceFun');
const loadingInput = inject('loadingInput');
const handleClick = async (item) => {
  const data = {
    conversationId: route.value.conversationId,
    contentType: '1',
    content: JSON.stringify({ text: `components|<enterpriseDetailCard id="${item.id}"></enterpriseDetailCard>` }),
    relUserId: route.value.relUserId
  };
  console.log(data, 33333222);
  loadingInput.value = true;
  EventSourceFun(data, false)
  // EventSourceFun.value.send(data)
  // await KeFuApi.sendKefuMessageNew(data);
}
productSpuPageAxios();
</script>

<style lang="scss" scoped>
.titleClass {
  font-size: 15px;
  color: #444444;
  margin-bottom: 12px;
  margin-left: 12px;
}

.log-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 30rpx;
  border-radius: 16rpx;
  border: 1px solid var(--N3-, #ebedf0);
  background-color: #ffffff;
  position: relative;
  height: auto;

  &__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24rpx;
    flex-shrink: 0;
    position: relative;
  }

  &__text-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24rpx;
    flex-shrink: 0;
    text-align: justify;
    font-size: 32rpx;
    font-family: "Source Han Sans";
    font-weight: 400;
    line-height: 46rpx;
    color: var(---1, #222222);
    position: relative;
  }

  &__text {
    flex-shrink: 0;
  }

  &__image-group {
    display: flex;
    width: 100%;
    flex-direction: row;
    white-space: nowrap;
  }

  &__image {
    width: 186rpx;
    height: 186rpx;
    flex-shrink: 0;
    border-radius: 8rpx;
    margin-right: 16rpx;
  }

  &__tags {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16rpx;
    flex-shrink: 0;
    position: relative;
  }

  &__tag {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    // padding: 6rpx 16rpx;
    flex-shrink: 0;
    border-radius: 24rpx;
    background-color: var(--, #f3f4f4);
    line-height: 36rpx;
    white-space: pre;
    background: #f1f2f2;
    padding: 5px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;

    &--primary {
      flex-direction: row;
      align-items: center;
      gap: 4rpx;
      color: #773df7;
    }
  }

  &__tag-icon {
    width: 28rpx;
    height: 28rpx;
    position: relative;
    flex-shrink: 0;
  }

  &__tag-text {
    font-size: 24rpx;
    font-family: "Source Han Sans";
    line-height: 36rpx;
    font-weight: 400;
    color: #3d3d3d;

    &--gradient {
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-fill-color: transparent;
    }
  }
}
</style>