CBB3/components/tm-public/chat/redTransfer.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: #fb9f3c;width: 46vw;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 #fb9f3c; border-bottom: 10px solid transparent;}
 .msg .nickname{font-size: 12px;margin-bottom:6px;}
 .msg .red_envelope{background: #fb9f3c;}
 .msg .red_envelope .red-view{padding-bottom: 10px;}
 .msg .red_envelope .red-view image{width: 30px;height: 30px;}  
 .msg .red_envelope .red-view .text{white-space:nowrap;overflow:hidden;text-overflow: ellipsis;font-size: 14px;color: #fff;width: calc(100% - 30px);}
 .msg .red_envelope .tag{padding-top: 10px;font-size: 12px;border-top: 1px solid rgba(255,255,255,0.6);color: #fff;}
 .msg.no-msg .content{background-color:rgba(251,159,60,0.6);}
 .msg.no-msg .red_envelope{background-color:transparent;}
  
  
 .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: #fb9f3c;width: 46vw;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 #fb9f3c; border-bottom: 10px solid transparent;}
 .me-msg .red_envelope{background: #fb9f3c;}
 .me-msg .red_envelope .red-view{padding-bottom: 10px;}
 .me-msg .red_envelope .red-view image{width: 30px;height: 30px;}
 .me-msg .red_envelope .red-view .text{font-size: 14px;color: #fff;}
 .me-msg .red_envelope .tag{padding-top: 10px;font-size: 12px;border-top: 1px solid rgba(255,255,255,0.6);color: #fff;}
 .me-msg.no-msg .content{background-color:rgba(251,159,60,0.6);}
 .me-msg.no-msg .red_envelope{background-color:transparent;}
 .me-msg.no-msg .content .i{border-left-color:rgba(251,159,60,0.6);}
 
 
 .me-msg .nickname{font-size: 12px;margin-bottom:6px;margin-right: 6px;}
/**结束**/
</style>
<template>
	<view>
		<view class="msg fx-r" :class="item.isReceiveRed ? 'no-msg' : ''" v-if="item.user.uid != user.uid">
			<view class="avatar" @tap="tapUser(1)" hover-class="avatar-hover"><image :src="item.user.avatar" mode="aspectFill" ></image></view>
			<view class="msg-in">
				<view class="nickname">{{item.user.nickname}}</view>
				<view class="content"  @tap="tapRedBack">
					<view class="i"></view>
					<view class="red_envelope">
						<view class="red-view fx-r">
							<image mode="widthFix" src="/static/img/chat-red-v2.svg"></image>
							<view class="text">
								<view >{{inItem.name}}</view>
								<view class="tagv1" v-if="inItem.f_uid == user.uid">请收款</view>
								<view class="tagv1" v-else-if="item.sendUid == user.uid">你发起了一笔转账</view>
								<view class="tagv1" v-else>你无需收款</view>
							</view>
							
						</view>
						<view class="tag">红包转账</view>
					</view>
				</view>
			</view>
		</view>
		<view class="me-msg fx-r fx-ae" :class="item.isReceiveRed ? 'no-msg' : ''" v-else >
			<view class="msg-in fx-h fx-be fx-ae">
				<view class="nickname">{{item.user.nickname}}</view>
				<view class="msg-in fx-r fx-bc fx-ae">
					<image v-if="item.isSend == 0" class="loading-msg" src="/static/img/xloading.png"></image>
					<image v-if="item.isSend == -1" @tap="tapRsend" class="msg-err" src="/static/img/waring.png"></image>
					<view class="content" @tap="tapRedBack">
						<view class="i"></view> 
						<view class="red_envelope">
							<view class="red-view fx-r">
								<image mode="widthFix" src="/static/img/chat-red-v2.svg"></image>
								<view class="text">
									<view >{{inItem.name}}</view>
									<view class="tagv1" v-if="inItem.f_uid == user.uid">请收款</view>
									<view class="tagv1" v-else-if="item.sendUid == user.uid">你发起了一笔转账</view>
									<view class="tagv1" v-else>你无需收款</view>
								</view>
							</view>
							<view class="tag">红包转账</view>
						</view>
						
					</view>
				</view>
			</view>
			
			<view class="avatar" @tap="tapUser(0)" hover-class="avatar-hover"><image :src="item.user.avatar"  mode="aspectFill"  ></image></view>
		</view>
	</view>
	
</template>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user','sysData']),
		name: 'redTransfer',
		props:{
			item : {
				type: Object,
				default: ()=>{return {data:{}} }
			}
		},
		watch:{
			item:{
				immediate:true,
				handler(val) {
					this.inItem = JSON.parse(val.data);
				}
			}
			
		},
		data() {
			return{ 
				inItem:{}
			}
		},
		created() { 
			//console.log(this.item);
		},
		mounted() {
			
		},
		methods: {
			tapRsend:function() {
				this.$emit('rsend',this.item);
			},
			tapRedBack:function(){
				this.$emit('redItem',this.item);
			},
			tapUser:function(type){
				this.$emit('userItem',type == 0 ? this.user.uid : this.item.sendUid);
			}
		}  
	}
</script>