CBB3/components/tm-public/chat/msg.vue

<style>
	
/**基本聊天数据**/
 .msg{padding: 20rpx;}
 .msg .msg-in{width: calc(100% - 160rpx); margin-left: 30rpx;}
 .msg .loading-msg{width:20px;height:20px;animation:rotate 1.5s linear infinite;margin-left: 20rpx;}
 .msg .msg-err{width:20px;height:20px;margin-left: 20rpx;}
 .msg .avatar{width: 80rpx;height: 80rpx;border-radius: 50%;overflow: hidden;margin-top: 6px;}
 .msg .avatar image{width: 80rpx;height: 80rpx;border-radius: 50%;}
 .msg .content{position: relative;min-height: 20px;font-size: 16px;background-color: #fff;max-width: calc(100% - 140rpx);padding: 20rpx;border-radius: 8rpx;word-break:break-all;display:inline-block;}
 .msg .content .i{width: 0;height: 0;left: -10px;position: absolute;border-top: 10px solid transparent; border-right: 10px solid #fff; border-bottom: 10px solid transparent;}
 .msg .content.remind{color: orange;}
 .msg .content .vimg{max-width: 200rpx;}
 .msg .msg-in .emojis{width: 180rpx;}
 .msg .nickname{font-size: 12px;margin-bottom:6px;}
 

 .me-msg{padding: 20rpx;}  
 .msg-in{width: calc(100% - 140rpx); margin-right: 20rpx;}
 .me-msg .loading-msg{width:20px;height:20px;animation:rotate 1.5s linear infinite;margin-right: 20rpx;}
 .me-msg .msg-err{width:20px;height:20px;margin-right: 20rpx;}
 .me-msg .avatar{width: 80rpx;height: 80rpx;border-radius: 50%;overflow: hidden;}
 .me-msg .avatar image{width: 80rpx;height: 80rpx;border-radius: 50%;}
 .me-msg .content{position: relative;min-height: 20px;font-size: 16px;background-color: #cceaff;max-width: calc(100% - 140rpx);padding: 20rpx;border-radius: 8rpx;word-break:break-all;display:inline-block;}
 .me-msg .content .i{width: 0;height: 0;right: -10px;position: absolute;border-top: 10px solid transparent; border-left: 10px solid #cceaff; border-bottom: 10px solid transparent;}
 .me-msg .content .vimg{max-width: 200rpx;}
 .me-msg .msg-in .emojis{width: 180rpx;}
 .me-msg .content .up{position: absolute;width: calc(100% - 40rpx);height: calc(100% - 40rpx);top: 20rpx;left: 20rpx; background: rgba(0,0,0,0.4);color: #fff; font-size: 14px;}
 .me-msg .nickname{font-size: 12px;margin-bottom:6px;margin-right: 6px;}
/**结束**/
</style>
<template>
	<view>
		<view class="msg fx-r" v-if="item.sendUser.uid != user.uid">
			<view class="avatar" @tap="tapUser(1)" @longtap="tapLongUserItem"  hover-class="avatar-hover"><image :src="utils.getAvatar(item.sendUser.avatar,'chat')" mode="aspectFill" ></image></view>
			<view class="msg-in">
				<view class="nickname">{{item.sendUser.nickname}}</view>
				<view class="content" :class="item.is_remind == 1 ? 'remind': ''" @longtap="tapLongItem">
					<view class="i"></view>
					<!-- #ifdef H5 -->
						<text v-html="utils.toH5ml(item.data)"></text>
					<!-- #endif -->
					<!-- #ifndef H5 -->  
						<rich-text :nodes="utils.toH5ml(item.data)"></rich-text>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="me-msg fx-r fx-ae" v-else>  
			<view class="msg-in fx-h fx-be fx-ae">
				<view class="nickname">{{item.sendUser.nickname}}</view>
				<view class="msg-in fx-r fx-bc fx-ae">
					<u-loading-icon v-if="item.isSend == 0" style="margin-right: 10px;"></u-loading-icon>
					<image v-if="item.isSend == -1" @tap="tapRsend" class="msg-err" src="/static/chat/waring.png"></image>
					<view class="content"  @longtap="tapLongItem">
						<view class="i"></view>
						<!-- #ifdef H5-->
							<text v-html="utils.toH5ml(item.data)"></text>
						<!-- #endif -->
						
						<!-- #ifndef H5 -->  
							<rich-text :nodes="utils.toH5ml(item.data)"></rich-text>
						<!-- #endif -->
					</view>
				</view>
			</view>
			
			<view class="avatar" @tap="tapUser(0)" hover-class="avatar-hover"><image :src="utils.getAvatar(user.avatar,'chat')"  mode="aspectFill"  ></image></view>
		</view>
	</view>
	
</template>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user','sysData']),
		name: 'msg',
		props:{
			item : {
				type: Object,
				default: ()=>{return {data:{}} }
			},
			chatUser:{
				type: Object,
				default: ()=>{return {data:{}} }
			}
		},
		data() {
			return{ 
			}
		},
		created() { 
			//console.log(this.item);
		},
		mounted() {
			
		},
		methods: {
			tapRsend:function() {
				this.$emit('rsend',this.item);
			},
			tapLongItem:function(ev){
				this.$emit('longItem',{
					dom : ev,
					data : this.item
				});
			},
			
			tapLongUserItem:function(ev){
				this.$emit('longUserItem',{
					dom : ev,
					data : this.item
				});
			},
			
			tapUser:function(type){
				this.$emit('userItem',type == 0 ? this.user.uid : this.item.sendUser.uid);
			}
		}
	}
</script>