aishangjia-uniapp/components/chat-input-bar/chat-input-bar.vue

<!-- z-paging聊天输入框 -->

<template>
	<view class="chat-input-bar-box">
		<!-- :style="{'padding-bottom': keyboardHeight + 'px'}" -->
		<view class="chat-input-bar">
			<view class="chat-input-container">
				<input always-embed :adjust-position="false" @blur="onInputBlur" @focus="onInputFocus"
					class="chat-input" v-model="msg" :cursor-spacing="20" confirm-type="send" type="text"
					placeholder="请输入内容" @confirm="sendClick">
			</view>
			<view class="chat-input-send" @click="openEmoji">
				<u-icon name="/static/icon/emoji.png" size="28"></u-icon>
			</view>
			<view v-show="msg.length == 0" class="chat-input-send" @click="openExt">
				<u-icon name="plus-circle" size="28"></u-icon>
			</view>
			<view v-show="msg.length > 0" class="chat-input-send" @click="sendClick">
				<u-icon name="/static/icon/send.png" size="28"></u-icon>
			</view>
		</view>
		<view v-show="showExt" :style="{height: 100 + 'px'}" class="chat-input-ext">
			<u-grid :border="false" @click="clickExt">
				<u-grid-item>
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="photo" :size="40"></u-icon>
					<text class="grid-text">图片</text>
				</u-grid-item>
				<!-- <u-grid-item>
						<u-icon :customStyle="{paddingTop:20+'rpx'}" name="gift" :size="40" ></u-icon>
						<text class="grid-text">礼物</text>
					</u-grid-item> -->
			</u-grid>
		</view>
		<view v-show="showEmoji" :style="{height: 200 + 'px'}" class="chat-input-ext">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="emoj_box">
					<view class="emoj_box_item"  v-for="(item,index) in emojiList" :key="index">
						<text @click="setEmoj(item,index)" class="emoj_box_img">{{item}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
	import emojiList from "./emoji.js"
	import * as UploadApi from '@/api/upload'
	export default {
		name: "chat-input-bar",
		data() {
			return {
				msg: '',
				showExt: false,
				showEmoji: false,
				emojiList
			};
		},
		created() {

		},
		methods: {
			sendClick() {
				if (!this.msg.length) return;
				this.$emit('send', {
					content: this.msg,
					type: 'text'
				});
				this.msg = '';
			},
			onInputFocus(e) {
				this.showExt = false
				this.showEmoji = false
				this.$nextTick(() => {
					this.$emit('heightChange')
				})
			},
			onInputBlur() {
				setTimeout(() => {
					if (!this.showExt && !this.showEmoji) {
						this.$emit('heightChange')
					}
				}, 100)
			},
			openEmoji() {
				this.showExt = false
				this.showEmoji = true
				this.$nextTick(() => {
					this.$emit('heightChange')
				})
			},
			setEmoj(item) {
				this.msg = this.msg += item
			},
			openExt() {
				this.showEmoji = false
				this.showExt = true
				this.$nextTick(() => {
					this.$emit('heightChange')
				})
			},
			clickExt(index) {
				if (index === 0) {
					this.chooseImage()
				}
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						UploadApi.uploadFile({
							filePath: tempFilePaths[0],
							fileType: 'image',
							name: 'file'
						}).then(res => {
							this.$emit('send', {
								content: res.data.url,
								type: 'image'
							});
						})
						this.showExt = false
						this.showEmoji = false
						this.$nextTick(() => {
							this.$emit('heightChange')
						})
					}
				});
			}
		}
	}
</script>

<style scoped>
	.chat-input-bar-box {
		background-color: #f3f3f3;
	}

	.chat-input-ext {
		/* overflow: hidden; */
		border-top: solid 1px #f3f3f3;
		/* background-color: #eeeeee; */
	}

	.chat-input-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-top: solid 1px #eeeeee;
		background-color: #f9f9f9;

		padding: 10rpx 15rpx;
	}

	.chat-input-container {
		flex: 1;
		display: flex;
		/* #ifndef APP-NVUE */
		padding: 15rpx;
		/* #endif */
		/* #ifdef APP-NVUE */
		padding: 10rpx;
		/* #endif */
		background-color: white;
		border-radius: 10rpx;
	}

	.chat-input {
		flex: 1;
		font-size: 32rpx;
		box-sizing: border-box;
	}

	.chat-input-send {
		margin: 10rpx;
		border-radius: 50%rpx;
		padding: 10rpx 0rpx 10rpx 5rpx;

	}

	.chat-input-send-text {
		color: white;
		font-size: 26rpx;
	}

	.emoj_box {
		padding: 10rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.emoj_box_item{
		width: 16.66%;
		text-align: center;
	}
	.emoj_box_img {
		font-size: 60rpx;
		width: 83rpx;
		height: 83rpx;
		text-align: center;
		line-height: 83rpx;
		padding: 12rpx;
	}
</style>