peiwan-uniapp/pages/im/index - 副本.vue

<template>
	<view>
		<message-list @hidedKeyboard="hidedKeyboard">
			<template #chat-bar="{keyboardHeight}">
				<chat-bar ref="chatBar" :keyboardHeight="keyboardHeight"  @openGift="openGift"></chat-bar>
			</template>
		</message-list>
		
		<gift-bar ref="gift" @sendGift="sendGift"></gift-bar>
		
		<view class="svga-box" :class="giftFlag ? 'svga-show': 'svga-hide'">
			<c-svga ref="cSvgaRef" :canvasId='canvasId' :src="src" :loops='1' :auto-play="true" @frame='onFrame' @finished='onFinished' @percentage='onPercentage' @loaded='onLoaded'></c-svga>
			<view class="close-btn" @click="closeSvga"></view>
		</view>
		
	</view>  
</template>
  
<script>
	import MessageList from '@/pages/im/components/messageList.vue'; 
	import ChatBar from "@/components/chat-bar/chat-bar.vue"
	import GiftBar from "@/components/gift-bar/gift-bar.vue"
	export default { 
		components: { 
			MessageList,
			ChatBar,
			GiftBar,
		},
		data() {
			return {
				giftFlag: false,
				src: 'https://cos.duopei.feiniaowangluo.com/1866/reward/gift/171241866882267KgIoSuLt.svga',
				canvasId: 'myCanvas',
				modal: true,
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0,
				typeidx: 0,
				currentTab: 1,
				showMoreSheet: false,
				modalButton: [{
				  text: "置顶该聊天",
				  type: "green",
				  plain: false
				},
				{
				  text: "删除该聊天",
				  type: "green",
				  plain: false
				},
				{
				  text: "设置免打扰",
				  type: "green",
				  plain: false
				}],
				itemList: [{
					text: "删除",
					color: "#2B2B2B"
				}, {
					text: "举报",
					color: "#2B2B2B"
				}, {
					text: "分享",
					color: "#2B2B2B"
				}],
			}
		}, 
		created() {
			
		},
		computed: {
		  swiperHeight: {
		    get() {
		      let that = this;
		      return ' calc( 100vh - 100rpx )';
		    },
		    set(v) {}
		  },
		},
		methods: {
			hidedKeyboard() {
				this.$refs.chatBar.hideDrawer();
			},
			toChat() {
				this.$u.route({
					url: 'pages/chat/index',
				});
			},
			//调用此方法显示组件
			showModal() {
				this.modal = true;
			},
			//隐藏组件
			hideModal() {
				this.modal = false;
			},
			handleClick(e){
				let index = e.index;
				if (index === 0) {
					
				} else {
					
				}
				this.hideModal();
			},
			openGift() {
				this.$refs.gift.open();
			},
			sendGift(e) {
				this.src = e.src;
				this.$refs.cSvgaRef.call('startAnimation');
				this.giftFlag = true;
			},
			onFinished() {
				this.giftFlag = false;
				console.log('动画停止播放时回调');
			},
			onFrame(frame) {//动画播放至某帧后回调
				// console.log(frame);
			},
			onPercentage(percentage) { //动画播放至某进度后回调
				// console.log(percentage);
			},
			onLoaded() {
				this.$refs.cSvgaRef.call('setContentMode', 'AspectFill');
				console.log('加载完成');
			},
			closeSvga() {
				this.$refs.cSvgaRef.call('stopAnimation');
				this.giftFlag = false;
			}
	
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fafafa;
		height: calc(100vh);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.nav-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.tab-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.tab-box .title-label {
		height: 44px;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		color: #333333;
		font-size: 28rpx;
	}
	
	.tab-box .title-label text {
		font-weight: bold;
		transition: all 0.3s;
	}
	
	
	
	.svga-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
		
		.close-btn {
			color: #fff;
			font-size: 14px;
			position: absolute;
			z-index: 999999999;
			//background: rgba(0, 0, 0, .5);
			padding: 5px 10px;
			
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}
	
	.svga-hide {
		transform: translate(-100%, 0);
	}
	
	.svga-show {
		transform: translate(0, 0);
	}
</style>