<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" @tap="tapUser(1)" 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"> <view class="i"></view> <!-- #ifdef H5 --> <text style="color: red;">[群公告]</text><text v-html="utils.toH5ml(item.data)"></text> <!-- #endif --> <!-- #ifndef H5 --> <text style="color: red;">[群公告]</text><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">{{user.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 style="color: red;">[群公告]</text><text v-html="utils.toH5ml(item.data)"></text> <!-- #endif --> <!-- #ifndef H5 --> <text style="color: red;">[群公告]</text><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:{}} } } }, 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 }); }, tapUser:function(type){ this.$emit('userItem',type == 0 ? this.user.uid : this.item.sendUid); } } } </script>