CBB3/components/tm-public/chat/voice.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 .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" @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" @longtap="tapLongItem" @tap="playa">
					<view class="i"></view>
					<text style="color: 2c2c2c;,margin-right: 3rpx;margin-right: 60px;">{{parseInt(inItem.time/1000)}} "</text>
					<image v-if="playlyurl != inItem.filePath" src="/static/chat/yyy.png" style="width: 15px;height: 15px; margin-left:4px;" mode="widthFix"></image>
					<image v-if="playlyurl == inItem.filePath" src="/static/chat/yyy.gif" style="width: 15px;height: 15px; margin-left:4px;" 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="msg-in fx-r fx-bc fx-ae">
					<image v-if="item.isSend == 0" class="loading-msg" src="/static/chat/xloading.png"></image>
					<image v-if="item.isSend == -1" @tap="tapRsend" class="msg-err" src="/static/chat/waring.png"></image>
					<view class="content" @longtap="tapLongItem" @tap="playa">
						<view class="i"></view>
						<text style="color: 2c2c2c;,margin-right: 3rpx;margin-right: 60px;">{{parseInt(inItem.time/1000)}} "</text>
						<image v-if="playlyurl != inItem.filePath" src="/static/chat/yyy.png" style="width: 15px;height: 15px; margin-left:4px;" mode="widthFix"></image>
						<image v-if="playlyurl == inItem.filePath" src="/static/chat/yyy.gif" style="width: 15px;height: 15px; margin-left:4px;" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view class="avatar" hover-class="avatar-hover"><image :src="utils.getAvatar(item.sendUser.avatar,'chat')"  mode="aspectFill"  ></image></view>
		</view>
	</view>
	
</template>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user','sysData']),
		name: 'voice',
		props:{
			item : {
				type: Object,
				default: ()=>{return {data:{}} }
			}
		},
		watch:{
			item:{
				immediate:true,
				handler(val) {
					if(this.utils.isJSON(val.data)) {
						this.inItem = JSON.parse(val.data);
					} else {
						this.inItem = {};
					}
				}
			}
			
		},
		data() {
			return{ 
				playlyurl:""
			}
		},
		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
				});
			},
			   
			playa:function(){
				var innerAudioContext =  uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				if(this.playlyurl == this.inItem.filePath){
					this.playlyurl = ''
					innerAudioContext.stop()
				}else{
					this.playlyurl = this.inItem.filePath
					innerAudioContext.src = this.inItem.filePath
					innerAudioContext.play()
					innerAudioContext.onEnded(()=>{
						this.playlyurl = ''
					})
				}
			},
			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>