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">
			<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 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 from "@/static/images/chating_action_image.png";
	import chating_action_camera from "@/static/images/chating_action_camera.png";
	import chating_action_call from "@/static/images/chating_action_call.png";
	import chating_action_location from "@/static/images/chating_action_location.png";

	export default {
		props:{
			isEmoji:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			isEmoji(v){
				console.log(v);
				this.emojiMode = v;
			}
		},
		data() {
			return {
				pagesize:24,
				emojiList:emojis,
				actionList: [
					{
						idx: 0,
						type: ChatingFooterActionTypes.Album,
						title: "照片",
						icon: chating_action_image,
					},
					{
						idx: 1,
						type: ChatingFooterActionTypes.Camera,
						title: "拍摄",
						icon: chating_action_camera,
					},
					{
						idx: 2,
						type: ChatingFooterActionTypes.Video,
						title: "视频通话",
						icon: chating_action_call,
					},
					{
						idx: 3,
						type: ChatingFooterActionTypes.Location,
						title: "位置",
						icon: chating_action_location,
					},
					// {
					// 	idx: 0,
					// 	type: ChatingFooterActionTypes.Album,
					// 	title: "红包",
					// 	icon: chating_action_image,
					// },
					// {
					// 	idx: 0,
					// 	type: ChatingFooterActionTypes.Album,
					// 	title: "转账",
					// 	icon: chating_action_image,
					// }
				],
			};
		},
		methods: {
			delSendStr(){},
			clearSendStr(){},
			async emojiClick(emoji){
				this.$emit("prepareMediaMessage", 'emoji',emoji);
			},
			async actionClick(action) {
				switch (action.type) {
					case ChatingFooterActionTypes.Video:
						this.$emit("prepareMediaMessage", action.type);
						break;
					case ChatingFooterActionTypes.Album:
						this.$emit("prepareMediaMessage", action.type);
						break;
					case ChatingFooterActionTypes.Camera:
						this.$emit("prepareMediaMessage", action.type);
						break;
					case ChatingFooterActionTypes.Location:
						this.$emit("prepareMediaMessage", action.type);
						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_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>