9

2025-12-02 03:05:52 +08:00
parent b4c9ae1b67
commit 29be534f22
24 changed files with 1118 additions and 372 deletions
@@ -1,6 +1,28 @@
 <template>
 	<view class="chat_action_bar">
-		<u-row class="action_row">
+		<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>
+					</view>
+				</view>
+				<!-- <view>
+					<u-button @click="$noClicks(sendText)" type="success" :custom-style="{padding:'20rpx'}">发送
+					</u-button>
+				</view> -->
+			</view>
+		</view>
+		<u-row class="action_row" v-else>
 			<u-col v-for="item in actionList" :key="item.idx" @click="actionClick(item)" span="3">
 				<view class="action_item">
 					<image :src="item.icon" alt="" srcset="" />
@@ -13,11 +35,25 @@

 <script>
 	import {ChatingFooterActionTypes,} from "@/constant";
+	import emojis from "@/common/emojis.js"

 	export default {
-		components: {},
+		props:{
+			isEmoji:{
+				type:Boolean,
+				default:false
+			}
+		},
+		watch:{
+			isEmoji(v){
+				console.log(v);
+				this.emojiMode = v;
+			}
+		},
 		data() {
 			return {
+				pagesize:24,
+				emojiList:emojis,
 				actionList: [
 					{
 						idx: 0,
@@ -29,19 +65,19 @@
 						idx: 1,
 						type: ChatingFooterActionTypes.Camera,
 						title: "拍摄",
-						icon: require("static/images/chating_action_image.png"),
+						icon: require("static/images/chating_action_camera.png"),
 					},
 					{
 						idx: 2,
 						type: ChatingFooterActionTypes.Video,
 						title: "视频通话",
-						icon: require("static/images/chating_action_image.png"),
+						icon: require("static/images/chating_action_call.png"),
 					},
 					{
 						idx: 3,
 						type: ChatingFooterActionTypes.Location,
 						title: "位置",
-						icon: require("static/images/chating_action_image.png"),
+						icon: require("static/images/chating_action_location.png"),
 					},
 					// {
 					// 	idx: 0,
@@ -59,6 +95,11 @@
 			};
 		},
 		methods: {
+			delSendStr(){},
+			clearSendStr(){},
+			async emojiClick(emoji){
+				this.$emit("prepareMediaMessage", 'emoji',emoji);
+			},
 			async actionClick(action) {
 				switch (action.type) {
 					case ChatingFooterActionTypes.Video:
@@ -84,7 +125,7 @@
 <style lang="scss" scoped>
 	.chat_action_bar {
 		position: relative;
-		background: #f0f2f6;
+		background: #ececec;
 		padding: 24rpx 36rpx;

 		.action_row {
@@ -108,5 +149,29 @@
 				margin-top: 6rpx;
 			}
 		}
+		.emoji_row{
+			.emoji{
+				
+			}
+		}
+		
+		.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;
+				}
+			}
+		}
 	}
 </style>