CBB3/components/tm-public/chat/cimg.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;}
	.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;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 .vimg{max-width: 200rpx;border-radius: 6px;}
	.msg .msg-in .emojis{width: 180rpx;}	
	.msg .nickname{font-size: 12px;margin-bottom:6px;}
	  
	
	.me-msg{padding: 20rpx;}       
	.msg-in{width: calc(100% - 160rpx); 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;display: inline-block;min-height: 20px;font-size: 16px;background-color: #cceaff; margin-right: 10px;padding: 20rpx;border-radius: 8rpx;}
	.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;border-radius: 6px;}
	.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" >
					<view class="i"></view>
					<image class="vimg" :src="item.data" @longtap="tapLongItem" @tap="tapOpenImg(item.data)" mode="widthFix"></image>
				</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=" fx-r fx-bc fx-ae">  
					<image v-if="item.isSend == -1" @tap="tapRsend" class="msg-err" src="/static/chat/waring.png"></image>
					<view class="content">
						<view class="i"></view>
						<image class="vimg" :src="item.data" @longtap="tapLongItem" @tap="tapOpenImg(item.data)" mode="widthFix"></image>
						<view v-if="item.isSend == 0" class="up fx-r fx-bc fx-ac">
							<image class="loading-msg" src="/static/chat/xloading-white.png"></image>
						</view>  
					</view>
				</view>
				
			</view>
			<view class="avatar" @tap="tapUser(0)" hover-class="avatar-hover"><image :src="utils.getAvatar(item.sendUser.avatar,'chat')" mode="aspectFill"></image></view>
		</view>
	
	</view>
</template>


<script>
	var swH = 0;
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user','sysData']),
		name: 'cimg',
		props:{
			item : {
				type: Object,
				default: ()=>{return {data:{}} }
			}
		},
		data() {
			return{ 
			}
		},
		created() { 
			//console.log(this.item);
		},
		mounted() {
			
		},
		methods: {
			tapRsend:function() {
				this.$emit('rsend',item);
			},
			/**
			 * 打开图片
			 * @param {Object} item
			 */
			tapOpenImg:function(item){
				this.$emit('openImg',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>