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

<template>
  <view @click="$emit('click', $event)" :class="[arrow ? 'arrow' : '', className]" :style="style" class="cu-item">
    <slot name="avatar">
      <l-avatar
        v-if="avatar"
        :src="avatar"
        :radius="!roundAvatar"
        :round="roundAvatar"
        :style="avatarStyle"
        size="lg"
      />
      <image
        v-else-if="imgAvatar"
        :src="imgAvatar"
        :style="`border-radius: ${roundAvatar ? '50%' : '3px'}; ` + imgStyle"
        mode="aspectFill"
        class="list-item-imgAvatar"
      />
      <text
        v-else-if="iconAvatar"
        :class="'cuIcon-' + iconAvatar"
        :style="`border-radius: ${roundAvatar ? '50%' : '3px'}; ` + iconStyle"
        class="list-item-iconAvatar flex justify-center align-center"
      ></text>

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

    <view class="content">
      <view class="text-grey">
        <slot></slot>
        {{ title || '' }}
      </view>

      <view v-if="extra || $slots.extra" class="text-gray text-sm flex">
        <view class="text-cut text-grey">
          <slot name="extra">{{ extra }}</slot>
        </view>
      </view>
    </view>

    <view class="action">
      <view v-if="times" class="text-grey text-sm">
        <view v-if="times" style="display: flex; flex-direction: column; align-items: flex-end;">
          <view class="text-right margin-bottom-xs">{{ times[0] }}</view>
          <view v-if="times[1]" class="text-right">{{ times[1] }}</view>
        </view>
      </view>

      <view v-else-if="time || $slots.time || $slots.tips" class="text-grey text-sm">
        <slot name="time">{{ time || '' }}</slot>
        <slot name="tips"></slot>
      </view>

      <template v-else>
        <slot name="action">{{ action }}</slot>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: 'l-list-item',

  props: {
    title: {},
    action: {},
    arrow: {},
    extra: {},
    time: { default: '' },
    times: {},
    roundAvatar: {},
    avatar: {},
    avatarStyle: { default: '' },
    iconAvatar: {},
    iconStyle: { default: '' },
    imgAvatar: { default: '' },
    imgStyle: { default: '' }
  }
}
</script>