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

<template>
	<view class="chat_action_bar">
		<view class="fun-box u-border-top show-fun-box" v-if="isEmoji">
			<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>
			</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>
			<u-col v-for="(item,idx) in actionList" :key="idx" @click="actionClick(item)" span="3">
				<view class="action_item">
					<image class="img" :src="item.icon" alt="" srcset="" />
					<text class="action_item_title">{{ item.title }}</text>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	import {ChatingFooterActionTypes,} from "@/constant";
	import emojis from "@/common/emojis.js"
	import chating_action_image_img from "@/static/images/chat/action_bar/image.png";
	import chating_action_camera_img from "@/static/images/chat/action_bar/camera.png";
	import chating_action_call_img from "@/static/images/chat/action_bar/call.png";
	import chating_action_location_img from "@/static/images/chat/action_bar/location.png";
	import chating_action_file_img from "@/static/images/chat/action_bar/file.png";

	export default {
		props:{
			isEmoji:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			isEmoji(v){
				this.emojiMode = v;
			}
		},
		data() {
			return {
				emojiList:emojis,
				actionList: [
					{
						type: ChatingFooterActionTypes.Album,
						title: "照片",
						icon: chating_action_image_img,
					},
					{
						type: ChatingFooterActionTypes.Camera,
						title: "拍摄",
						icon: chating_action_camera_img,
					},
					{
						type: ChatingFooterActionTypes.Call,
						title: "视频通话",
						icon: chating_action_call_img,
					},
					{
						type: ChatingFooterActionTypes.Location,
						title: "位置",
						icon: chating_action_location_img,
					},
					// {
					// 	type: "File",
					// 	title: "文件",
					// 	icon: chating_action_file_img,
					// },
					// {
					// 	type: ChatingFooterActionTypes.Album,
					// 	title: "红包",
					// 	icon: chating_action_image,
					// },
					// {
					// 	type: ChatingFooterActionTypes.Album,
					// 	title: "转账",
					// 	icon: chating_action_image,
					// }
				],
			};
		},
		methods: {
			//删除表情和文字
			delSendStr: function() {
				this.$emit("onUserEvent",{type:"delSendStr"});
			},
			//清除文本
			clearSendStr: function() {
				this.$emit("onUserEvent",{type:"clearSendStr"});
			},
			async emojiClick(emoji){
				this.$emit("onUserEvent", {type:'insertEmoji', emoji:emoji});
			},
			async actionClick(action) {
				switch (action.type) {
					case ChatingFooterActionTypes.Album:
						this.$emit("onUserEvent",{type:"prepend_image_message",source:"album"});
						break;
					case ChatingFooterActionTypes.Camera:
						this.$emit("onUserEvent",{type:"prepend_image_message",source:"camera"});
						break;
					case ChatingFooterActionTypes.Call:
						this.$emit("onUserEvent",{type:"prepend_call_message"});
						break;
					case "File":
						this.$emit("onUserEvent",{type:"prepend_file_message"});
						break;
					case ChatingFooterActionTypes.Location:
						this.$emit("onUserEvent",{type:"prepend_location_message"});
						break;
					default:
						break;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.chat_action_bar {
		position: relative;
		background: #ececec;
		padding: 24rpx 36rpx;
		
		.action_row {
			flex-wrap: wrap;
			margin-bottom: 24rpx;
		}

		.action_item {
			@include centerBox();
			flex-direction: column;
			margin-top: 24rpx;

			.img {
				width: 96rpx;
				height: 96rpx;
			}

			&_title {
				font-size: 24rpx;
				color: #999;
				margin-top: 6rpx;
			}
		}

		.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;
			}
		}
		.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;
				}
			}
		}
	}
</style>