fanghuayuexuan/pages_course/components/chatInput.vue

<template>
	<view class="chat-input-container" :class="{ 'parent-container-focused': isFocus }">
		<view class="x-f input-container" :class="{
        'input-container-focused': isFocus,
        'input-container-normal': !isFocus
      }">
			<input id="txgMsg" 
        :placeholder="placeholderText" 
        v-model="inputValue" 
        placeholder-style="color:#e7e7e7;"
        placeholder-class="placeholder-style" 
        class="ml20 input-native input-field"
        :class="{ 'input-focused': isFocus }" 
        @focus="handleFocus" 
        @blur="handleBlur" 
        cursor-spacing="100"
        :adjust-position="false" />
			<view class="send-btn" @click="handleSend">发送</view>
		</view>

		<view class="icon-container" :class="{ 'icon-hidden': isFocus }">
			<view class="icon-bg ml20" @tap="handleOpenCart">
				<image src="/static/images/shopping.png" class="w58 h58" />
			</view>
			<view class="icon-bg ml20" @click="handleMoreClick">
				<image src="/static/images/more_icon.png" class="w58 h58" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ChatInput',
		props: {
			placeholderText: {
				type: String,
				default: '说点什么...'
			},
			value: {
				type: String,
				default: ''
			},
			focused: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isFocus: false,
				inputValue: ''
			};
		},
		watch: {
			focused: {
				immediate: true,
				handler(newVal) {
					this.isFocus = newVal;
				}
			},
			inputValue(newVal) {
				this.$emit('input', newVal);
			},
			value: {
				immediate: true,
				handler(newVal) {
					this.inputValue = newVal;
				}
			}
		},
		methods: {
			handleMoreClick() {
			  this.$emit('show-more');
			},
			handleFocus() {
				this.isFocus = true;
				this.$emit('focus', this.inputValue);
			},

			handleBlur() {
				this.isFocus = false;
				this.$emit('blur', this.inputValue);
			},

			handleSend() {
				if (this.inputValue.trim()) {
					this.$emit('send', this.inputValue);
					this.inputValue = '';
				} else {
					uni.showToast({
						title: '不能发送空消息',
						icon: 'none'
					});
				}
			},

			handleOpenCart() {
				this.$emit('open-cart');
			},

			handleShowGift() {
				this.$emit('show-gift');
			},

			clearInput() {
				this.inputValue = '';
			},

			setInputValue(value) {
				this.inputValue = value;
			},

			getInputValue() {
				return this.inputValue;
			}
		}
	};
</script>

<style scoped lang="scss">
	.chat-input-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		width: 100%;
		box-sizing: border-box;
		transition: all 0.3s ease;

		&.parent-container-focused {
			justify-content: flex-start;
		}
	}

	.input-container {
		background: rgba(0, 0, 0, 0.3);
		height: 90rpx;
		box-sizing: border-box;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		transition: all 0.3s ease;
		overflow: hidden;

		&.input-container-normal {
			padding: 10rpx 14rpx 10rpx 32rpx;
			flex: 1;
			justify-content: space-between;
		}

		&.input-container-focused {
			padding: 10rpx 10rpx 10rpx 20rpx;
			width: 100%;
			flex: 1 0 auto;
			justify-content: flex-start;
			gap: 20rpx;
		}
	}

	.input-field {
		border: none;
		font-size: 32rpx;
		color: #ffffff;
		background: transparent;
		flex: 1;
		min-width: 0;
		transition: all 0.3s ease;

		&.input-focused {
			flex: 1;
			min-width: 0;
		}
	}

	.send-btn {
		background-color: #fafafa;
		border-radius: 28rpx;
		padding: 12rpx 16rpx;
		color: #181818;
		font-weight: 500;
		min-width: 80rpx;
		text-align: center;
		flex-shrink: 0;
		white-space: nowrap;
		cursor: pointer;
		transition: all 0.2s ease;

		&:active {
			opacity: 0.8;
			transform: scale(0.98);
		}
	}

	.icon-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		transition: all 0.3s ease;
		margin-left: 20rpx;

		&.icon-hidden {
			opacity: 0;
			visibility: hidden;
			width: 0;
			margin-left: 0;
			flex: 0;
		}
	}

	.icon-bg {
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		width: 88rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: transform 0.2s ease;
		cursor: pointer;

		&:active {
			transform: scale(0.95);
		}
		
		& + & {
			margin-left: 20rpx;
		}
	}

	.ml20 {
		margin-left: 20rpx;
	}

	.w58 {
		width: 58rpx;
	}

	.h58 {
		height: 58rpx;
	}
</style>