DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-ali/chat-msg.vue

<template>
  <view :class="[type === 'left' ? '' : 'self', className]" :style="style" class="cu-item">
    <slot v-if="type === 'left'" name="avatar">
      <view
        v-if="type === 'left' && avatar"
        :style="{ backgroundImage: `url(${avatar})`, borderRadius: roundAvatar ? '50%' : '3px' }"
        class="cu-avatar radius"
      ></view>
      <image
        v-else-if="type === 'left' && imgAvatar"
        :src="imgAvatar"
        :style="`border-radius: ${roundAvatar ? '50%' : '3px'};` + imgStyle"
        mode="aspectFill"
        class="chat-msg-imgAvatar cu-avatar radius"
      ></image>
      <text
        v-else-if="type === 'left' && iconAvatar"
        :class="'cuIcon-' + iconAvatar"
        :style="`border-radius: ${roundAvatar ? '50%' : '3px'}; ` + iconStyle"
        class="chat-msg-iconAvatar flex justify-center align-center"
      ></text>

      <!-- 支付宝小程序，使用 l-icon 报错 -->
      <!--
      <l-icon
        v-else-if="type === 'left' && iconAvatar"
        :type="iconAvatar"
        :style="`border-radius: ${roundAvatar ? '50%' : '3px'}; ` + iconStyle"
        class="chat-msg-iconAvatar flex justify-center align-center"
      /> 
      -->
    </slot>

    <view class="main">
      <view
        :class="[type === 'left' ? (leftColor ? 'bg-' + leftColor : '') : rightColor ? 'bg-' + rightColor : '']"
        class="content shadow"
      >
        <text style="word-break: break-all;">
          <slot></slot>
          {{ content }}
        </text>
      </view>
    </view>

    <slot v-if="type !== 'left'" name="avatar">
      <view
        v-if="type !== 'left' && avatar"
        :style="{ backgroundImage: `url(${avatar})`, borderRadius: roundAvatar ? '50%' : '3px' }"
        class="cu-avatar radius"
      ></view>
      <image
        v-else-if="type !== 'left' && imgAvatar"
        :src="imgAvatar"
        :style="`border-radius: ${roundAvatar ? '50%' : '3px'};` + imgStyle"
        mode="aspectFill"
        class="chat-msg-imgAvatar cu-avatar radius"
      ></image>
      <text
        v-else-if="type !== 'left' && iconAvatar"
        :class="'cuIcon-' + iconAvatar"
        :style="`border-radius: ${roundAvatar ? '50%' : '3px'}; ` + iconStyle"
        class="chat-msg-iconAvatar flex justify-center align-center"
      ></text>

      <!-- 支付宝小程序，使用 l-icon 报错 -->
      <!--      
      <l-icon
        v-else-if="type !== 'left' && iconAvatar"
        :type="iconAvatar"
        :style="`border-radius: ${roundAvatar ? '50%' : '3px'}; ` + iconStyle"
        class="chat-msg-iconAvatar flex justify-center align-center"
      /> 
      -->
    </slot>

    <view class="date">
      <slot name="date">{{ date }}</slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'l-chat-msg',

  props: {
    content: { default: '' },
    type: { default: 'left' },
    roundAvatar: {},
    date: {},
    leftColor: {},
    rightColor: { default: 'green' },
    avatar: {},
    iconAvatar: {},
    iconStyle: { default: '' },
    imgAvatar: {},
    imgStyle: { default: '' }
  }
}
</script>