项目初始化

2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
--- a/pages/im/index
+++ b/pages/im/index
@@ -0,0 +1,204 @@
+<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>