VAVABUY/pages/setting/compoments/messages.vue

<template>
  <view class="message_list">
    <view class="_list" v-for="item, index in newList" :key="index">
      <!-- 时间 -->
      <view class="_time" v-if="handleTime(index, newList)">
        <text>{{ handleTime(index, newList) }}</text>
      </view>
      <view class="_list_Y" v-if="!item.send">
        <view class="Y_left">
          <image lazy-load :src="item.simg || list[0].simg" class="avatar"></image>
          <view class="Y_cont" v-if="item.msg?.type == 'text'">{{ item.msg.text }}</view>
          <image :src="item.msg.url" lazy-load v-if="item.msg?.type == 'image'" class="Y_img"
            @click="previewImage(item.msg.url)"></image>
        </view>
      </view>
      <view class="_list_M" v-if="item.send">
        <view class="M_right">
          <view class="M_status">
            <up-loading-icon mode="circle" size="40rpx" v-if="item.loading"></up-loading-icon>
          </view>
          <view class="M_cont" v-if="item.msg?.type == 'text'">{{ item.msg.text }}</view>
          <image :src="item.msg.url" lazy-load v-if="item.msg?.type == 'image'" class="M_img"
            @click="previewImage(item.msg.url)"></image>
          <image :src="item.uimg || userInfo.userimg" lazy-load class="avatar"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue"
import { useUserStore } from "@/store"
import useTools from "@/pages/user/user_chat/hooks/useTools"

const useUser = useUserStore();
const userInfo = computed(() => useUser.getuserInfo)
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;
    }
  });
}
const previewImage = (url) => {
  uni.previewImage({
    urls: [url]
  })
}
</script>

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

.message_list {
  ._list {
    margin-top: 30rpx;

    .loading_icon {
      width: 100rpx;
      height: 20rpx;
    }

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

    &_Y {
      .Y_left {
        display: flex;

        .avatar {
          @width: 80rpx;
          width: @width;
          height: @width;
          border-radius: 50%;
          margin-right: 12rpx;
        }

        .Y_cont {
          max-width: 77%;
          background-color: var(--inputBg);
          border-radius: 20rpx;
          box-sizing: border-box;
          padding: 16rpx 28rpx;
          line-height: 44rpx;
          .size(28rpx);
          color: var(--text);
          word-break: break-all;
        }

        .Y_img {
          width: 240rpx;
          height: 240rpx;
          border-radius: 20rpx;
        }
      }
    }

    &_M {
      .M_right {
        display: flex;
        justify-content: flex-end;

        .M_status {
          margin-right: 12rpx;
        }

        .avatar {
          @width: 80rpx;
          width: @width;
          height: @width;
          border-radius: 50%;
          margin-left: 12rpx;
        }

        .M_cont {
          overflow: hidden;
          max-width: 77%;
          background: var(--black);
          border-radius: 20rpx;
          box-sizing: border-box;
          padding: 16rpx 28rpx;
          line-height: 44rpx;
          .size(28rpx);
          color: var(--light);
          word-break: break-all;
        }

        .M_img {
          width: 240rpx;
          height: 240rpx;
          border-radius: 20rpx;
        }
      }
    }
  }
}
</style>