gypsy-crm-frontend-vu/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.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="avatarUrl" 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>
				<!-- #ifndef APP -->
				<view class="slot-header">
					<!-- #endif -->
					<slot name="header"></slot>
					<!-- #ifndef APP -->
				</view>
				<!-- #endif -->
				<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>
						<view style="flex-direction: row;">
							<text class="draft" v-if="isDraft">[草稿]</text>
							<text class="uni-list-chat__content-note uni-ellipsis">{{ isDraft ? note.slice(14) : note
							}}</text>
						</view>
					</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: {
		isDraft() {
			return this.note.slice(0, 14) == '[uni-im-draft]'
		},
		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';
			}
		}
	},
	watch: {
		avatar: {
			handler(avatar) {
				if (avatar.substr(0, 8) == 'cloud://') {
					uniCloud.getTempFileURL({
						fileList: [avatar]
					}).then(res => {
						// console.log(res);
						// 兼容uniCloud私有化部署
						let fileList = res.fileList || res.result.fileList
						this.avatarUrl = fileList[0].tempFileURL
					})
				} else {
					this.avatarUrl = avatar
				}
			},
			immediate: true
		}
	},
	data() {
		return {
			isFirstChild: false,
			border: true,
			// avatarList: 3,
			imageWidth: 50,
			avatarUrl: ''
		};
	},
	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) {
			let callback = {
				url: this.to,
				success: res => {
					this.$emit('click', {
						data: res
					});
				},
				fail: err => {
					this.$emit('click', {
						data: err
					});
				}
			}
			switch (api) {
				case 'navigateTo':
					uni.navigateTo(callback)
					break
				case 'redirectTo':
					uni.redirectTo(callback)
					break
				case 'reLaunch':
					uni.reLaunch(callback)
					break
				case 'switchTab':
					uni.switchTab(callback)
					break
				default:
					uni.navigateTo(callback)
			}
		}
	}
};
</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: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
$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: var(--bs-heading-color);
$note-weight: normal;
$right-text-size: 12px;
$right-text-color: var(--bs-heading-color);
$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;
}

.draft,
.uni-list-chat__content-note {
	margin-top: 3px;
	color: $note-color;
	font-size: $note-size;
	font-weight: $title-weight;
	overflow: hidden;
}

.draft {
	color: #eb3a41;
	/* #ifndef APP-NVUE */
	flex-shrink: 0;
	/* #endif */
	padding-right: 3px;
}

.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>