emoji

pages/conversation/chating/components/ChatingFooter/ChatingActionBar.vue

@@ -1,26 +1,17 @@
 <template>
 	<view class="chat_action_bar">
 		<view class="fun-box u-border-top show-fun-box" v-if="isEmoji">
-			<swiper class="emoji-swiper" :indicator-dots="true" :duration="50" :circular="true">
-				<swiper-item v-for="(page,index1) in Math.ceil(emojiList.length/pagesize)" :key="index1">
-					<view @tap="emojiClick(emojiList[pagesize*(page-1)+n])" v-for="(n,index2) in pagesize" :key="index2">
-						{{emojiList[pagesize*(page-1)+n]}}
-					</view>
-				</swiper-item>
-			</swiper>
-			<view style="padding:0rpx 20rpx;position: absolute;bottom: 1rpx;right: 10rpx;
-						width: 250rpx;height: 150rpx;z-index: 1000;opacity: 0.9;" 
-					class="u-flex u-row-right u-col-center">
-				<view class="u-flex u-row-center u-col-center"
-					style="border: 1px solid #f1f1f1;border-radius: 10rpx; background-color: #82848a;width: 100rpx;padding: 15rpx 20rpx;margin-right: 8rpx;">
-					<view @click="delSendStr()" @longpress="clearSendStr()">
-						<u-icon name="backspace" size="46" color="#ffffff"></u-icon>
+			<scroll-view scroll-y="true">
+				<view class="emoji-list">
+					<view @tap.stop="emojiClick(emojiList[i])" v-for="(emojiItem,i) in emojiList" :key="i">
+						{{emojiItem}}
 					</view>
 				</view>
-				<!-- <view>
-					<u-button @click="$noClicks(sendText)" type="success" :custom-style="{padding:'20rpx'}">发送
-					</u-button>
-				</view> -->
+			</scroll-view>
+			<view class="delete-btn">
+				<view @click="delSendStr()" @longpress="clearSendStr()">
+					<u-icon name="backspace" size="32" color="#ffffff"></u-icon>
+				</view>
 			</view>
 		</view>
 		<u-row class="action_row" v-else>
@@ -51,13 +42,11 @@
 		},
 		watch:{
 			isEmoji(v){
-				console.log(v);
 				this.emojiMode = v;
 			}
 		},
 		data() {
 			return {
-				pagesize:24,
 				emojiList:emojis,
 				actionList: [
 					{
@@ -100,8 +89,14 @@
 			};
 		},
 		methods: {
-			delSendStr(){},
-			clearSendStr(){},
+			//删除表情和文字
+			delSendStr: function() {
+				this.$emit("onUserEvent",{type:"delSendStr"});
+			},
+			//清除文本
+			clearSendStr: function() {
+				this.$emit("onUserEvent",{type:"clearSendStr"});
+			},
 			async emojiClick(emoji){
 				this.$emit("prepareMediaMessage", 'emoji',emoji);
 			},
@@ -154,27 +149,40 @@
 				margin-top: 6rpx;
 			}
 		}
-		.emoji_row{
-			.emoji{
-				
+
+		.emoji-list {
+			height: 400rpx;
+			display: flex;
+			align-content: flex-start;
+			flex-wrap: wrap;
+
+			view {
+				width: 90rpx;
+				height: 90rpx;
+				font-size: 48rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
 			}
 		}
-	
-		.emoji-swiper {
-			height: 400rpx;
-
-			swiper-item {
-				display: flex;
-				align-content: flex-start;
-				flex-wrap: wrap;
-
-				view {
-					width: 12%;
-					height: 16vw;
-					font-size: 48rpx;
-					display: flex;
-					justify-content: center;
-					align-items: center;
+		.delete-btn{
+			position: absolute;
+			bottom: 90rpx;
+			right: 10rpx;
+			z-index: 1000;
+			display: flex;
+			justify-content: flex-end;
+			align-items: flex-end;
+			>view{
+				border: 1px solid #f1f1f1;
+				border-radius: 10rpx; 
+				background-color: rgba(0, 0, 0, 0.6);
+				text-align: center;
+				padding:20rpx 50rpx;
+				margin-right: 8rpx;
+				.u-icon{justify-content: center;}
+				::v-deep .uicon-backspace{
+					font-size: 64rpx !important;
 				}
 			}
 		}