New file |
| | |
| | | <template> |
| | | <!-- #ifdef APP-NVUE --> |
| | | <cell> |
| | | <!-- #endif --> |
| | | <view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick"> |
| | | <view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view> |
| | | <view class="uni-list-chat__container"> |
| | | <view class="uni-list-chat__header-warp"> |
| | | <view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }"> |
| | | <image class="uni-list-chat__header-image" :src="avatar" mode="aspectFill"></image> |
| | | </view> |
| | | <!-- 头像组 --> |
| | | <view v-else class="uni-list-chat__header"> |
| | | <view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar" |
| | | :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }"> |
| | | <image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url" |
| | | mode="aspectFill"></image> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]"> |
| | | <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text> |
| | | </view> |
| | | <view class="uni-list-chat__content"> |
| | | <view class="uni-list-chat__content-main"> |
| | | <text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text> |
| | | <text class="uni-list-chat__content-note uni-ellipsis">{{ note }}</text> |
| | | </view> |
| | | <view class="uni-list-chat__content-extra"> |
| | | <slot> |
| | | <text class="uni-list-chat__content-extra-text">{{ time }}</text> |
| | | <view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']"> |
| | | <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text> |
| | | </view> |
| | | </slot> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <!-- #ifdef APP-NVUE --> |
| | | </cell> |
| | | <!-- #endif --> |
| | | </template> |
| | | |
| | | <script> |
| | | // 头像大小 |
| | | const avatarWidth = 45; |
| | | |
| | | /** |
| | | * ListChat 聊天列表 |
| | | * @description 聊天列表,用于创建聊天类列表 |
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=24 |
| | | * @property {String} title 标题 |
| | | * @property {String} note 描述 |
| | | * @property {Boolean} clickable = [true|false] 是否开启点击反馈,默认为false |
| | | * @property {String} badgeText 数字角标内容 |
| | | * @property {String} badgePositon = [left|right] 角标位置,默认为 right |
| | | * @property {String} link = [false|navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈,默认为false |
| | | * @value false 不开启 |
| | | * @value navigateTo 同 uni.navigateTo() |
| | | * @value redirectTo 同 uni.redirectTo() |
| | | * @value reLaunch 同 uni.reLaunch() |
| | | * @value switchTab 同 uni.switchTab() |
| | | * @property {String | PageURIString} to 跳转目标页面 |
| | | * @property {String} time 右侧时间显示 |
| | | * @property {Boolean} avatarCircle = [true|false] 是否显示圆形头像,默认为false |
| | | * @property {String} avatar 头像地址,avatarCircle 不填时生效 |
| | | * @property {Array} avatarList 头像组,格式为 [{url:''}] |
| | | * @event {Function} click 点击 uniListChat 触发事件 |
| | | */ |
| | | export default { |
| | | name: 'UniListChat', |
| | | emits:['click'], |
| | | props: { |
| | | title: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | note: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | clickable: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | link: { |
| | | type: [Boolean, String], |
| | | default: false |
| | | }, |
| | | to: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | badgeText: { |
| | | type: [String, Number], |
| | | default: '' |
| | | }, |
| | | badgePositon: { |
| | | type: String, |
| | | default: 'right' |
| | | }, |
| | | time: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | avatarCircle: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | avatar: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | avatarList: { |
| | | type: Array, |
| | | default () { |
| | | return []; |
| | | } |
| | | } |
| | | }, |
| | | // inject: ['list'], |
| | | computed: { |
| | | isSingle() { |
| | | if (this.badgeText === 'dot') { |
| | | return 'uni-badge--dot'; |
| | | } else { |
| | | const badgeText = this.badgeText.toString(); |
| | | if (badgeText.length > 1) { |
| | | return 'uni-badge--complex'; |
| | | } else { |
| | | return 'uni-badge--single'; |
| | | } |
| | | } |
| | | }, |
| | | computedAvatar() { |
| | | if (this.avatarList.length > 4) { |
| | | this.imageWidth = avatarWidth * 0.31; |
| | | return 'avatarItem--3'; |
| | | } else if (this.avatarList.length > 1) { |
| | | this.imageWidth = avatarWidth * 0.47; |
| | | return 'avatarItem--2'; |
| | | } else { |
| | | this.imageWidth = avatarWidth; |
| | | return 'avatarItem--1'; |
| | | } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | isFirstChild: false, |
| | | border: true, |
| | | // avatarList: 3, |
| | | imageWidth: 50 |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.list = this.getForm() |
| | | if (this.list) { |
| | | if (!this.list.firstChildAppend) { |
| | | this.list.firstChildAppend = true; |
| | | this.isFirstChild = true; |
| | | } |
| | | this.border = this.list.border; |
| | | } |
| | | }, |
| | | methods: { |
| | | /** |
| | | * 获取父元素实例 |
| | | */ |
| | | getForm(name = 'uniList') { |
| | | let parent = this.$parent; |
| | | let parentName = parent.$options.name; |
| | | while (parentName !== name) { |
| | | parent = parent.$parent; |
| | | if (!parent) return false |
| | | parentName = parent.$options.name; |
| | | } |
| | | return parent; |
| | | }, |
| | | onClick() { |
| | | if (this.to !== '') { |
| | | this.openPage(); |
| | | return; |
| | | } |
| | | |
| | | if (this.clickable || this.link) { |
| | | this.$emit('click', { |
| | | data: {} |
| | | }); |
| | | } |
| | | }, |
| | | openPage() { |
| | | if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) { |
| | | this.pageApi(this.link); |
| | | } else { |
| | | this.pageApi('navigateTo'); |
| | | } |
| | | }, |
| | | pageApi(api) { |
| | | uni[api]({ |
| | | url: this.to, |
| | | success: res => { |
| | | this.$emit('click', { |
| | | data: res |
| | | }); |
| | | }, |
| | | fail: err => { |
| | | this.$emit('click', { |
| | | data: err |
| | | }); |
| | | console.error(err.errMsg); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | $uni-font-size-lg:16px; |
| | | $uni-spacing-row-sm: 5px; |
| | | $uni-spacing-row-base: 10px; |
| | | $uni-spacing-row-lg: 15px; |
| | | $background-color: #fff; |
| | | $divide-line-color: #e5e5e5; |
| | | $avatar-width: 45px; |
| | | $avatar-border-radius: 5px; |
| | | $avatar-border-color: #eee; |
| | | $avatar-border-width: 1px; |
| | | $title-size: 16px; |
| | | $title-color: #3b4144; |
| | | $title-weight: normal; |
| | | $note-size: 12px; |
| | | $note-color: #999; |
| | | $note-weight: normal; |
| | | $right-text-size: 12px; |
| | | $right-text-color: #999; |
| | | $right-text-weight: normal; |
| | | $badge-left: 0px; |
| | | $badge-top: 0px; |
| | | $dot-width: 10px; |
| | | $dot-height: 10px; |
| | | $badge-size: 18px; |
| | | $badge-font: 12px; |
| | | $badge-color: #fff; |
| | | $badge-background-color: #ff5a5f; |
| | | $badge-space: 6px; |
| | | $hover: #f5f5f5; |
| | | |
| | | .uni-list-chat { |
| | | font-size: $uni-font-size-lg; |
| | | position: relative; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | background-color: $background-color; |
| | | } |
| | | |
| | | // .uni-list-chat--disabled { |
| | | // opacity: 0.3; |
| | | // } |
| | | |
| | | .uni-list-chat--hover { |
| | | background-color: $hover; |
| | | } |
| | | |
| | | .uni-list--border { |
| | | position: relative; |
| | | margin-left: $uni-spacing-row-lg; |
| | | /* #ifdef APP-PLUS */ |
| | | border-top-color: $divide-line-color; |
| | | border-top-style: solid; |
| | | border-top-width: 0.5px; |
| | | /* #endif */ |
| | | } |
| | | |
| | | /* #ifndef APP-NVUE */ |
| | | .uni-list--border:after { |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | left: 0; |
| | | height: 1px; |
| | | content: ''; |
| | | -webkit-transform: scaleY(0.5); |
| | | transform: scaleY(0.5); |
| | | background-color: $divide-line-color; |
| | | } |
| | | |
| | | .uni-list-item--first:after { |
| | | height: 0px; |
| | | } |
| | | |
| | | /* #endif */ |
| | | |
| | | .uni-list-chat--first { |
| | | border-top-width: 0px; |
| | | } |
| | | |
| | | .uni-ellipsis { |
| | | /* #ifndef APP-NVUE */ |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | /* #endif */ |
| | | /* #ifdef APP-NVUE */ |
| | | lines: 1; |
| | | /* #endif */ |
| | | } |
| | | |
| | | .uni-ellipsis-2 { |
| | | /* #ifndef APP-NVUE */ |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | display: -webkit-box; |
| | | -webkit-line-clamp: 2; |
| | | -webkit-box-orient: vertical; |
| | | /* #endif */ |
| | | |
| | | /* #ifdef APP-NVUE */ |
| | | lines: 2; |
| | | /* #endif */ |
| | | } |
| | | |
| | | .uni-list-chat__container { |
| | | position: relative; |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | /* #endif */ |
| | | flex-direction: row; |
| | | flex: 1; |
| | | padding: $uni-spacing-row-base $uni-spacing-row-lg; |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .uni-list-chat__header-warp { |
| | | position: relative; |
| | | } |
| | | |
| | | .uni-list-chat__header { |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | align-content: center; |
| | | /* #endif */ |
| | | flex-direction: row; |
| | | justify-content: center; |
| | | align-items: center; |
| | | flex-wrap: wrap-reverse; |
| | | /* #ifdef APP-NVUE */ |
| | | width: 50px; |
| | | height: 50px; |
| | | /* #endif */ |
| | | /* #ifndef APP-NVUE */ |
| | | width: $avatar-width; |
| | | height: $avatar-width; |
| | | /* #endif */ |
| | | |
| | | border-radius: $avatar-border-radius; |
| | | border-color: $avatar-border-color; |
| | | border-width: $avatar-border-width; |
| | | border-style: solid; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .uni-list-chat__header-box { |
| | | /* #ifndef APP-PLUS */ |
| | | box-sizing: border-box; |
| | | display: flex; |
| | | width: $avatar-width; |
| | | height: $avatar-width; |
| | | /* #endif */ |
| | | /* #ifdef APP-NVUE */ |
| | | width: 50px; |
| | | height: 50px; |
| | | /* #endif */ |
| | | overflow: hidden; |
| | | border-radius: 2px; |
| | | } |
| | | |
| | | .uni-list-chat__header-image { |
| | | margin: 1px; |
| | | /* #ifdef APP-NVUE */ |
| | | width: 50px; |
| | | height: 50px; |
| | | /* #endif */ |
| | | /* #ifndef APP-NVUE */ |
| | | width: $avatar-width; |
| | | height: $avatar-width; |
| | | /* #endif */ |
| | | } |
| | | |
| | | /* #ifndef APP-NVUE */ |
| | | .uni-list-chat__header-image { |
| | | display: block; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .avatarItem--1 { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .avatarItem--2 { |
| | | width: 47%; |
| | | height: 47%; |
| | | } |
| | | |
| | | .avatarItem--3 { |
| | | width: 32%; |
| | | height: 32%; |
| | | } |
| | | |
| | | /* #endif */ |
| | | .header--circle { |
| | | border-radius: 50%; |
| | | } |
| | | |
| | | .uni-list-chat__content { |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | /* #endif */ |
| | | flex-direction: row; |
| | | flex: 1; |
| | | overflow: hidden; |
| | | padding: 2px 0; |
| | | } |
| | | |
| | | .uni-list-chat__content-main { |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | /* #endif */ |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | padding-left: $uni-spacing-row-base; |
| | | flex: 1; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .uni-list-chat__content-title { |
| | | font-size: $title-size; |
| | | color: $title-color; |
| | | font-weight: $title-weight; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .uni-list-chat__content-note { |
| | | margin-top: 3px; |
| | | color: $note-color; |
| | | font-size: $note-size; |
| | | font-weight: $title-weight; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .uni-list-chat__content-extra { |
| | | /* #ifndef APP-NVUE */ |
| | | flex-shrink: 0; |
| | | display: flex; |
| | | /* #endif */ |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | align-items: flex-end; |
| | | margin-left: 5px; |
| | | } |
| | | |
| | | .uni-list-chat__content-extra-text { |
| | | color: $right-text-color; |
| | | font-size: $right-text-size; |
| | | font-weight: $right-text-weight; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .uni-list-chat__badge-pos { |
| | | position: absolute; |
| | | /* #ifdef APP-NVUE */ |
| | | left: 55px; |
| | | top: 3px; |
| | | /* #endif */ |
| | | /* #ifndef APP-NVUE */ |
| | | left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left}); |
| | | top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top}); |
| | | /* #endif */ |
| | | } |
| | | |
| | | .uni-list-chat__badge { |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | /* #endif */ |
| | | justify-content: center; |
| | | align-items: center; |
| | | border-radius: 100px; |
| | | background-color: $badge-background-color; |
| | | } |
| | | |
| | | .uni-list-chat__badge-text { |
| | | color: $badge-color; |
| | | font-size: $badge-font; |
| | | } |
| | | |
| | | .uni-badge--single { |
| | | /* #ifndef APP-NVUE */ |
| | | // left: calc(#{$avatar-width} + 7px + #{$badge-left}); |
| | | /* #endif */ |
| | | width: $badge-size; |
| | | height: $badge-size; |
| | | } |
| | | |
| | | .uni-badge--complex { |
| | | /* #ifdef APP-NVUE */ |
| | | left: 50px; |
| | | /* #endif */ |
| | | /* #ifndef APP-NVUE */ |
| | | width: auto; |
| | | /* #endif */ |
| | | height: $badge-size; |
| | | padding: 0 $badge-space; |
| | | } |
| | | |
| | | .uni-badge--dot { |
| | | /* #ifdef APP-NVUE */ |
| | | left: 60px; |
| | | top: 6px; |
| | | /* #endif */ |
| | | /* #ifndef APP-NVUE */ |
| | | left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left}); |
| | | /* #endif */ |
| | | width: $dot-width; |
| | | height: $dot-height; |
| | | padding: 0; |
| | | } |
| | | |
| | | .uni-list-chat--right { |
| | | /* #ifdef APP-NVUE */ |
| | | left: 0; |
| | | /* #endif */ |
| | | } |
| | | </style> |