aishangjia-uniapp/components/chat-item/chat-item.vue

<!-- z-paging聊天item -->

<template>
	<view class="chat-item">
		<text class="chat-time" v-if="showTime">
			<!-- {{ item.createTime }} -->
			{{ time }}
		</text>
		<view :class="{'chat-container':true,'chat-location-me':isMe}">
			<view class="chat-icon-container" @click="$push('sub_pages/member/detail/detail',{userId:item.formUserId})">
				<u-avatar class="chat-icon" size="40" shape="square" :src="isMe?userInfo.avatar:friendInfo.avatar" mode="aspectFill"></u-avatar>
				<!-- <image class="chat-icon" :src="isMe?userInfo.avatar:friendInfo.avatar" mode="aspectFill" /> -->
			</view>
			<view class="chat-content-container">
				<text :class="{'chat-user-name':true,'chat-location-me':isMe}">
					{{isMe?userInfo.nickname:friendInfo.nickname}}
				</text>
				<view :class="{'chat-text-container':item.type!='image','isme':isMe, 'chat-image-container': item.type=='image'}">
					<text v-if="item.type=='text'" :class="{'char-text':true,'char-text-me':isMe}">{{item.content}}</text>
					<chat-item-image @click="onImageClick"  v-if="item.type=='image'" :src="item.content"></chat-item-image>
					<!-- <image :class="{'char-image':true,'char-image-me':isMe}"  mode="widthFix"></image> -->
					<view v-if="item.type == 'card'" class="hello-card">
						<view class="hello-card-desc">
							{{`${ mateData.age ? mateData.age + '岁': '' } ${mateData.position ? mateData.position : ''} ${mateData.city ? mateData.city : ''}`}}
						</view>
						<view class="hello-card-desc u-line-2" style="color: #999999; font-size: 26rpx;">
							<view>很高兴认识你~</view>
							<view>海底月是天上月，眼前人是心上人！</view>
						</view>
						<view class="album" style="padding: 10rpx 0;">
							<u-album :urls="mateData.files" keyName="thumb" :singleSize="100" singleMode="aspectFill" multipleMode="aspectFill"></u-album>
						</view>
						<!-- <image class="hello-card-image" :src="isMe?userInfo.avatar:friendInfo.avatar" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ACCESS_TOKEN, USER_ID,USER_INFO
	} from '@/store/mutation-types'
	import storage from '@/utils/storage'
	import dayjs from "dayjs"
	import ChatItemImage from "@/components/chat-item-image/chat-item-image.vue"
	export default {
		name:"chat-item",
		components: {ChatItemImage},
		props: {
			item: {
				type: Object,
				default: function() {
					return {
						time: '',
						icon: '',
						name: '',
						content: '',
					}
				}
			},
			friendInfo: {
				type: Object,
				default: function() {
					return {
						avatar: '',
						nickname: ''
					}
				}
			},
			prevMsgTime: null
		},
		data() {
			return {
				userInfo: {},
				mateData: {},
				showTime: true,
				time: ''
			};
		},
		computed: {
			isMe(){
				console.log(this.item.formUserId == this.userInfo.userId);
				return this.item.formUserId == this.userInfo.userId
			}
		},
		created() {
			this.userInfo = storage.get(USER_INFO)
			if(this.item.type == 'card'){
				this.mateData = JSON.parse(this.item.content)
				console.log("this.mateData: ",this.mateData);
			}
			// 如果是第一条消息或上一条消息间隔三分钟，显示时间
			this.showTime = !this.prevMsgTime || (dayjs(this.prevMsgTime).diff(dayjs(this.item.createTime), 'minutes') <= -3)
			if(this.showTime){
				let isToday = new Date(this.item.createTime).setHours(0,0,0,0) == new Date().setHours(0,0,0,0)
				this.time = this.$u.timeFormat(this.item.createTime, isToday? 'hh:MM': 'mm-dd hh:MM')
			}
			
		},
		methods: {
			onImageClick(){
				this.$emit("onImageClick")
			}
		}
	}
</script>

<style scoped lang="scss">
	.chat-item{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}
	.chat-time{
		padding: 4rpx 0rpx;
		text-align: center;
		font-size: 22rpx;
		color: #aaaaaa;
	}
	.chat-container{
		display: flex;
		flex-direction: row;
	}
	.chat-location-me{
		flex-direction: row-reverse;
		text-align: right;
	}
	.chat-icon-container{
		margin-top: 12rpx;
	}
	.chat-icon{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #eeeeee;
	}
	.chat-content-container{
		margin: 0rpx 15rpx;
	}
	.chat-user-name{
		font-size: 26rpx;
		color: #888888;
	}
	.chat-text-container{
		display: table;
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-top: 10rpx;
		/* #ifndef APP-NVUE */
		max-width: 500rpx;
		/* #endif */
		&.isme{
			display: table;
			background-color: #ffe3ff;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-top: 10rpx;
			/* #ifndef APP-NVUE */
			max-width: 500rpx;
			/* #endif */
		}
	}
	.hello-card{
		max-width: 500rpx;
		border-radius: 12rpx;
		margin-top: 10rpx;
		text-align: left;
	}
	.hello-card-image{
		width: 200rpx;
	}
	.hello-card-title{
		font-size: 28rpx;
		font-weight: bold;
	}
	.hello-card-desc{
		color: #333333;
		padding: 4rpx 0;
	}
	.chat-text-container-me{
		
		
	}
	
	.chat-image-container{
		display: table;
		background-color: unset !important; 
		border-radius: 12rpx;
		padding: 20rpx;
		margin-top: 10rpx;
		/* #ifndef APP-NVUE */
		max-width: 500rpx;
		/* #endif */
		
		
	}
	.char-text{
		padding: 20rpx;
		border-radius: 12rpx;
		/* #ifndef APP-NVUE */
		word-break: break-all;
		/* #endif */
		/* #ifdef APP-NVUE */
		max-width: 500rpx;
		/* #endif */
	}
	.char-image{
		width: 400rpx;
		height: 400rpx;
	}
	.char-text-me{
		/* color: white; */
	}
</style>