539 lines
12 KiB
Vue
539 lines
12 KiB
Vue
|
<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" :class="{ 'header--circle': avatarCircle }" :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" >
|
|||
|
|
$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>
|