VAVABUY/components/message/index.vue

<template>
  <view class="message_list">
    <template v-for="(item, i) in newList" :key="i">
      <!-- 时间 -->
      <view class="message__item message_item__tips" v-if="handleTime(i, list)">
        <view class="message__item-time">
          <text>{{ handleTime(i, list) }}</text>
        </view>
      </view>
      <!-- 系统关闭提示信息 -->
      <view
        class="message__item message_item__tips"
        v-if="item.msg.type == 'service_close'"
      >
        <view class="message__item-time">
          <text>{{ $t("会话已关闭") }}</text>
        </view>
      </view>
      <view
        class="message__item message_item__tips"
        v-else-if="item.msg.type == 'service_start'"
      >
        <TipsListCard :datas="item.msg.data"></TipsListCard>
      </view>
      <view
        class="message__item message_item__tips"
        v-else-if="item.msg.type == 'notice_start'"
      >
        <QuestionCard :datas="item.msg.data"></QuestionCard>
      </view>
      <!-- 意向商品 -->
      <!-- <view v-else-if="item.msg.type == 'need'">
        <PurposeCard :datas="item.msg.data"></PurposeCard>
      </view> -->
      <view
        class="message__item"
        :class="[item.send > 0 ? 'message__item-self' : '']"
        v-else
      >
        <!-- 头像 -->
        <view class="message__item-left">
          <image
            v-if="item.send > 0"
            class="message__item-avatar"
            :src="item.uimg || getuserInfo.userimg"
            mode=""
          >
          </image>
          <image
            v-else
            class="message__item-avatar"
            :src="item.simg"
            mode=""
          ></image>
        </view>
        <!-- 内容 -->
        <!-- 意向商品 -->
        <view v-if="item.msg.type == 'need'" class="purpose__item-right">
          <PurposeCard :datas="item.msg.data"></PurposeCard>
        </view>
        <view class="message__item-right" v-else>
          <!-- 图片 -->
          <view v-if="item.msg.type == 'image'">
            <up-image
              :show-loading="true"
              :src="item.msg.url"
              width="240rpx"
              height="240rpx"
              :fade="false"
              @click="previewImage(1, [item.msg.url])"
            ></up-image>
          </view>

          <!-- 欢迎信息 -->
          <view
            style="padding: 20rpx 30rpx"
            v-else-if="item.msg.type == 'service_welcome'"
          >
            <text>{{ item.msg.body }}</text>
          </view>
          <!-- 文本 -->
          <view style="padding: 20rpx 30rpx" v-else>
            <text>{{ item.msg.text || "" }}</text>
          </view>
        </view>

        <view class="message__item-status">
          <up-loading-icon
            mode="circle"
            size="40rpx"
            v-if="item.loading"
          ></up-loading-icon>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { computed } from "vue";
import TipsListCard from "./components/tipsListCard.vue";
import QuestionCard from "./components/questionCard.vue";
import PurposeCard from "./components/purposeCard.vue";
import useTools from "./hooks/useTools";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store";
const useUser = useUserStore();
const { getuserInfo } = storeToRefs(useUser);

const { handleTime } = useTools();
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});
const newList = computed(() =>
  parseMessageJSON(props.list).sort((a, b) => a.id - b.id)
);
function parseMessageJSON(messages) {
  return messages.map((message) => {
    try {
      const parsedMessage = { ...message };
      if (typeof parsedMessage.msg === "string") {
        parsedMessage.msg = JSON.parse(parsedMessage.msg);
      }
      return parsedMessage;
    } catch (error) {
      return message;
    }
  });
}

function previewImage(index, urls) {
  uni.previewImage({
    current: index,
    urls: urls,
    success() {},
  });
}
</script>

<style lang="less" scoped>
@import url("@/style.less");

.message_list {
  margin-top: 30rpx;
  padding: 20rpx 30rpx 30rpx;

  .message__item {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 30rpx;
  }

  .message__item-self {
    display: flex;
    flex-direction: row-reverse;

    .message__item-right {
      margin-left: 0;
      margin-right: 16rpx;
      background-color: var(--black);
      color: #fff;
    }

    .message__item-status {
      margin-left: 0;
      margin-right: 12rpx;
    }
  }

  .message_item__tips {
    justify-content: center;
    margin-bottom: 24rpx;
    font-size: 24rpx;
    color: #767676;
  }

  .message__item-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .message__item-right {
    overflow: hidden;
    max-width: calc(100% - (80rpx * 2) - 16rpx - 20rpx - 40rpx - 12rpx);
    margin-left: 16rpx;
    border-radius: 20rpx;
    background: #fafafa;
    // text-align: justify;
    // word-break: break-all;
    word-wrap: break-word;
    color: #3d3d3d;
    font-size: 28rpx;
  }

  .message__item-status {
    width: 40rpx;
    height: 40rpx;
    margin-left: 12rpx;
  }
  .purpose__item-right {
    overflow: hidden;
    width: 100%;
    margin-right: 16rpx;
    border-radius: 20rpx;
    background: #fafafa;
    word-wrap: break-word;
    color: #3d3d3d;
    font-size: 28rpx;
  }
}
</style>