fanghuayuexuan/pages_shopping/live/article.vue

<template>
	<view class="content">
		<view class="status_bar" :style="{ height: statusBarHeight }"></view>
		<view class="top-block">
			<view class="left">
				<image class="w64 h64 " src="https://cdn.his.cdwjyyh.com/images/back_black.png" @click="goBack"></image>
				<image class="head" :src="lifeDetail.userInfo.avatar||'https://cdn.his.cdwjyyh.com/images/avatar.png'" @click="gotoExpertPage"></image>
				<text class="name">{{lifeDetail.userInfo.nickname}}</text>
			</view>
			<view class="right">
				<view class="icon-bg" @click="handleShareClick">
						<image class="w40 h40" src="https://cdn.his.cdwjyyh.com/images/share-icon.png"></image>
					</view>
				<view class="icon-bg">
					<image class="w40 h40" src="https://cdn.his.cdwjyyh.com/images/shopping_car.png"></image>
				</view>
			</view>
		</view>

		<!-- 文章 --> 
		<view class="article">
			<image class="photo" :src="lifeDetail.imgsUrl"></image>
			<view class="article-main">
				<view class="title">{{lifeDetail.title}}</view>
				<view class="txt">
					<text>{{lifeDetail.content}}</text>
					<text class="lable">#儿童鼻炎的高发期</text>
				</view>
				<view class="card">
					<view class="card-item">
						<image class="card-icon" src="https://cdn.his.cdwjyyh.com/images/jinbang_font.png"></image>
						<text class="ranking">24小时热门榜</text>
						<text class="top">TOP.3</text>
					</view>
					<image class="go" src="https://cdn.his.cdwjyyh.com/images/jb_arrow_right_icon.png"></image>
				</view>
				<view class="place">{{date}} {{lifeDetail.userInfo.addrIp}}</view>
			</view>
		</view>
		<view class="line"></view>
		<!-- 评论 -->
		<view class="comment">
			<view class="comment-num">
				<text>共 {{lifeDetail.commentsCount}}条评论</text>
				<image class="w24 h24 ml10" src="https://cdn.his.cdwjyyh.com/images/comment-icon.png"></image>
			</view>
			<!--可评论输入框 -->
			<view class="my-input">
				<image class="head" :src="userData.avatar||'https://cdn.his.cdwjyyh.com/images/avatar.png'"></image>
				<view class="input-item">
					<input class="input" placeholder="说点什么..." v-model="commentInput" 
						@focus="showKeyboardInput = true" />
					<image class="w40 h40" src="https://cdn.his.cdwjyyh.com/images/emoticon_icon.png" @click="showEmojiPicker = true"></image>
				</view>
			</view>


			<!-- 消息 -->
			<view class="message">
				<view v-for="comment in rootComments" :key="comment.commentId" class="message-item">
					<view class="left">
						<image class="head" :src="comment.userInfo.avatar||'https://cdn.his.cdwjyyh.com/images/avatar.png'"></image>
						<view class="column">
							<view class="chat">
								<view class="name">
									<text>{{comment.userInfo.nickname}}</text>
									<view v-if="comment.userInfo.userId === lifeDetail.userInfo.userId" class="author-lable">作者</view>
								</view>
								<view class="flex-wrap">
									<view class="txt">{{comment.content}}</view>
									<view class="info">
												<text class="time">{{calculateTimeDiff(comment.createAt)}}</text>
												<view class="reply" @click="handleReply(comment)">回复</view>
											</view>
								</view>
							</view>
							<!-- 二级评论 -->
							<view v-if="comment.children && comment.children.length > 0" class="left mt26">
								<image class="head-little" :src="comment.children[0].userInfo.avatar||'https://cdn.his.cdwjyyh.com/images/avatar.png'"></image>
								<view class="chat">
									<view class="name">
										<text>{{comment.children[0].userInfo.nickname}}</text>
										<view v-if="comment.children[0].userInfo.userId === lifeDetail.userInfo.userId" class="author-lable">作者</view>
									</view>
									<view class="flex-wrap">
										<view class="txt">{{comment.children[0].content}}</view>
										<view class="info">
												<text class="time">{{calculateTimeDiff(comment.children[0].createAt)}}</text>
												<view class="reply" @click="handleReply(comment.children[0])">回复</view>
											</view>
									</view>
								</view>
							</view>
							<!-- 展开的二级评论 -->
							<view v-if="expandedComments[comment.commentId] && comment.children && comment.children.length > 1" class="mt26">
								<view v-for="(child, index) in comment.children.slice(1)" :key="child.commentId" class="left mt26">
									<image class="head-little" :src="child.userInfo.avatar||'https://cdn.his.cdwjyyh.com/images/avatar.png'"></image>
									<view class="chat">
										<view class="name">
											<text>{{child.userInfo.nickname}}</text>
											<view v-if="child.userInfo.userId === lifeDetail.userInfo.userId" class="author-lable">作者</view>
										</view>
										<view class="flex-wrap">
											<view class="txt">{{child.content}}</view>
											<view class="info">
												<text class="time">{{calculateTimeDiff(child.createAt)}}</text>
												<view class="reply" @click="handleReply(child)">回复</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="comment.children && comment.children.length > 1" class="expand" @click="toggleExpand(comment)">
								{{expandedComments[comment.commentId] ? '收起' : '展开 ' + (comment.children.length - 1) + ' 条回复'}}
							</view>
						</view>
					</view>
					<view class="right">
								<image v-if="comment.isLiked" class="w40 h40" src="https://cdn.his.cdwjyyh.com/images/like_red_icon.png" @click="toggleLikeComments(comment.commentId)">
								</image>
								<image v-else class="w40 h40" src="https://cdn.his.cdwjyyh.com/images/like_icon.png" @click="toggleLikeComments(comment.commentId,!comment.isLiked)"></image>
								<view class="">{{comment.likeCount}}</view>
							</view>
				</view>
			</view>
		</view>

		<!-- 输入框 -->
		<view class="chat-input-container">
			<view class=" input-container">
				<input id="txgMsg" placeholder="说点什么..." v-model="inputValue" placeholder-style="color:#999999;" 
					class="ml20 input-native input-field" cursor-spacing="100" :adjust-position="false" 
					@focus="showKeyboardInput = true" />
			</view>
			<view class="icon-container">
				<view class="icon-item" @click="handleContentLike">
					<image v-if="isLiked" class="icon" src="https://cdn.his.cdwjyyh.com/images/like_red_icon.png" />
					<image v-else class="icon" src="https://cdn.his.cdwjyyh.com/images/like_icon.png" />
					<text>{{lifeDetail.likeCount}}</text>
				</view>
				<view class="icon-item" @click="handleContentCollection">
					<image v-if="isCollected" class="icon" src="https://cdn.his.cdwjyyh.com/images/collection_yellow.png" />
					<image v-else class="icon" src="https://cdn.his.cdwjyyh.com/images/collection.png" />
					<text>{{lifeDetail.collectionCount}}</text>
				</view>
				<view class="icon-item" @click="handleCommentClick">
					<image class="icon" src="https://cdn.his.cdwjyyh.com/images/comment.png" />
					<text>{{lifeDetail.commentsCount}}</text>
				</view>
			</view>
		</view>
		
		<!-- 键盘上方的输入框 -->
		<view v-if="showKeyboardInput" class="keyboard-input-container">
			<view class="keyboard-input-item">
				<input placeholder="说点什么..." v-model="keyboardInput" placeholder-style="color:#999999;" 
					class="keyboard-input" />
				<image class="w40 h40" src="https://cdn.his.cdwjyyh.com/images/emoticon_icon.png" @click="showEmojiPicker = true"></image>
				<view class="send-btn" @click="sendKeyboardComment">发送</view>
			</view>
		</view>

		<!-- 表情选择器 -->
		<EmojiPicker 
			v-if="showEmojiPicker" 
			@select="handleEmojiSelect" 
			@close="showEmojiPicker = false" 
		/>

	</view>
</template>

<script>
import Task from '@/components/task.vue'
import EmojiPicker from '@/components/emoji-picker.vue'
import {
	lifeDetail,
	listRootComments, // 一级评论列表
	listSubComments, //二级评论列表
	toggleLikeComments as apiToggleLikeComments, //评论点赞
	toggleLike, //内容点赞/取消点赞
	share, //内容分享
	toggleCollection,//内容收藏/取消收藏点赞
	postComment //发表评论
} from '@/api/life.js'
import {
getUserInfo
} from '@/api/user.js'
// 点赞/取消点赞常量
const LIKE = 'LIKE';
const UNLIKE = 'UNLIKE';
export default {
	components: {
		Task,
		EmojiPicker
	},
	data() {
		return {
			userData:{},
			isCollected:false,
			isLiked:false,
			date:null,
			lifeDetail: {},
			resourceId:9,
			// 状态栏的高度
			statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
			isLike: false,
			isCollection: false,
			// 评论输入框
			commentInput: '',
			// 底部输入框
			inputValue: '',
			// 表情选择器显示状态
			showEmojiPicker: false,
			// 一级评论列表
			rootComments: [],
			// 二级评论列表
			subComments: [],
			// 键盘上方输入框显示状态
			showKeyboardInput: false,
			// 键盘上方输入框内容
			keyboardInput: '',
			// 父评论ID（用于回复）
			parentId: '',
			// 评论展开状态
			expandedComments: {}

		}
	},
	onLoad(option) {
		this.resourceId = option.resourceId;
		this.getLifeDetail();
		this.getListRootComments();
		const userData = uni.getStorageSync('userData');
		if(userData){
			this.userData=userData;
		}else{
			this.getUserInfo();
		}

	},
	onUnload() {

	},
	methods: {
		getUserInfo(){
			getUserInfo().then(res => {
				if (res.code == 200) {
					this.userInfo=res.data;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { });
		},
		// 内容详情
		getLifeDetail() {
			if (!this.resourceId) return;
			let data = {
				resourceId: this.resourceId
			}
			lifeDetail(data).then(res => {
				if (res.code == 200) {
					this.lifeDetail=res.data;
					// 计算时间差并赋值给date
					this.date = this.calculateTimeDiff(res.data.createAt);
					// 更新点赞和收藏状态
					this.isLiked = res.data.isLiked || false;
					this.isCollected = res.data.isCollected || false;
					console.log("内容详情", res)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { });
		},
		onLike() {
			this.isLike = !this.isLike;
		},

		// 一级评论列表
		getListRootComments() {
			if (!this.resourceId) return;
			let data = {
				page: 1,
				pageSize: 10,
				resourceId: this.resourceId
			}
			listRootComments(data).then(res => {
				if (res.code == 200) {
					this.rootComments = res.data.list;
					console.log("一级评论列表", res)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { });
		},
		// 二级评论列表
		getListSubComments(rootId) {
			if (!rootId) return;
			let data = {
				page: 1,
				pageSize: 10,
				rootId: rootId
			}
			listSubComments(data).then(res => {
				if (res.code == 200) {
					// 查找对应的一级评论并更新其子评论
					const rootComment = this.rootComments.find(comment => comment.commentId === rootId);
					if (rootComment) {
						rootComment.children = res.data.list;
					}
					console.log("二级评论列表", res)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { });
		},
		// 内容点赞/取消点赞
		toggleLike() {
			this.isLiked=!this.isLiked;
			if (!this.resourceId) return;
			let data = {
				action: this.isLike ? UNLIKE : LIKE, //LIKE / UNLIKE
				resourceId: this.resourceId
			}
			toggleLike(data).then(res => {
				if (res.code == 200) {
					console.log("内容点赞/取消点赞", res)
					// 切换点赞状态
					this.isLike = !this.isLike;
					// 重新获取内容详情，更新点赞数
					this.getLifeDetail();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { });
		},//内容收藏/取消收藏
		toggleCollection() {
			this.isCollected=!this.isCollected;

			if (!this.resourceId) return;
			let data = {
				action: this.isCollection ? UNLIKE : LIKE, //LIKE / UNLIKE
				resourceId: this.resourceId
			}
			toggleCollection(data).then(res => {
				if (res.code == 200) {
					console.log("内容收藏/取消收藏", res)
					// 切换收藏状态
					this.isCollection = !this.isCollection;
					// 重新获取内容详情，更新收藏数
					this.getLifeDetail();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { });
		},
		// 处理内容点赞按钮点击事件
		handleContentLike() {
			this.toggleLike();
		},
		// 处理内容收藏按钮点击事件
		handleContentCollection() {
			this.toggleCollection();
		},
		// 处理评论图标点击事件
		handleCommentClick() {
			// 显示键盘输入框
			this.showKeyboardInput = true;
			// 自动聚焦到键盘输入框
			setTimeout(() => {
				const input = uni.createSelectorQuery().select('.keyboard-input');
				input.focus();
			}, 100);
		},
		// 处理分享图标点击事件
		handleShareClick() {
			this.share();
		},
		// 跳转到达人页面
		gotoExpertPage() {
			console.log("跳转达人页面", this.lifeDetail)
			if (this.lifeDetail.userInfo.expertId) {
			console.log("跳转达人页面", this.lifeDetail)
				uni.navigateTo({
					url: '/pages_shopping/live/expert?expertId=' + this.lifeDetail.userInfo.expertId
				});
			}
		},
		// 内容分享
		share() {
			if (!this.resourceId) return;
			let data = {
				resourceId: this.resourceId
			}
			share(data).then(res => {
				if (res.code == 200) {
					console.log("内容分享", res)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { });
		},
		// 评论点赞
		toggleLikeComments(commentId) {
			if (!commentId) return;
			// 查找评论对象，获取isLiked状态
			let isLiked = false;
			let found = false;
			// 先在一级评论中查找
			for (let comment of this.rootComments) {
				if (comment.commentId === commentId) {
					isLiked = comment.isLiked;
					found = true;
					break;
				}
				// 再在二级评论中查找
				if (comment.children && comment.children.length > 0) {
					for (let child of comment.children) {
						if (child.commentId === commentId) {
							isLiked = child.isLiked;
							found = true;
							break;
						}
					}
					if (found) break;
				}
			}
			let data = {
				action: isLiked ? UNLIKE : LIKE,// UNLIKE
				commentId: commentId
			}
			console.log("评论点赞参数:", data);
			apiToggleLikeComments(data).then(res => {
				if (res.code == 200) {
					console.log("评论点赞", res)
					// 重新获取评论列表
					this.getListRootComments();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { 
				console.log("评论点赞错误:", err);
			});
		},
		// 发表评论
		getPostComment() {
			// 检查哪个输入框有内容
			let content = this.commentInput || this.inputValue;
			if (!content.trim()) {
				uni.showToast({
					title: '请输入评论内容',
					icon: 'none'
				});
				return;
			}
			let data = {
				content: content,
				parentId: '', //父评论ID(回复必填，一级不填)
				resourceId: this.resourceId //业务ID (文章ID / 视频ID )
			}
			postComment(data).then(res => {
				if (res.code == 200) {
					console.log("发表评论", res)
					// 发表成功后清空输入框
					this.commentInput = '';
					this.inputValue = '';
					// 重新获取评论列表
					this.getListRootComments();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { });
		},
		// 表情选择事件
		handleEmojiSelect(emoji) {
			// 优先添加到键盘上方输入框
			if (this.showKeyboardInput) {
				this.keyboardInput += emoji;
			} else if (this.commentInput) {
				this.commentInput += emoji;
			} else {
				this.inputValue += emoji;
			}
			this.showEmojiPicker = false;
		},
		// 处理回复按钮点击事件
		handleReply(comment) {
			console.log("点击回复",comment)
			this.parentId = comment.commentId;
			this.showKeyboardInput = true;
			// 自动聚焦到键盘输入框
			setTimeout(() => {
				const input = uni.createSelectorQuery().select('.keyboard-input');
				input.focus();
			}, 100);
		},
		// 切换评论展开/收起状态
		toggleExpand(comment) {
			// 切换展开状态
			const isExpanded = this.expandedComments[comment.commentId];
			this.$set(this.expandedComments, comment.commentId, !isExpanded);
			// 如果展开，获取二级评论
			if (!isExpanded) {
				this.getListSubComments(comment.commentId);
			}
		},
		// 获取二级评论列表
		getListSubComments(rootId) {
			if (!rootId) return;
			let data = {
				page: 1,
				pageSize: 10,
				rootId: rootId
			}
			listSubComments(data).then(res => {
				if (res.code == 200) {
					console.log("二级评论列表", res)
					// 这里可以将二级评论存储到对应的一级评论中
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { });
		},
		// 发送键盘输入框的评论
		sendKeyboardComment() {
			if (!this.keyboardInput.trim()) {
				uni.showToast({
					title: '请输入评论内容',
					icon: 'none'
				});
				return;
			}
			let data = {
				content: this.keyboardInput,
				parentId: this.parentId || 0, //父评论ID(回复必填，一级不填，没有传0)
				resourceId: this.resourceId //业务ID (文章ID / 视频ID )
			}
			postComment(data).then(res => {
				if (res.code == 200) {
					console.log("发表评论", res)
					// 发表成功后清空输入框
					this.keyboardInput = '';
					this.showKeyboardInput = false;
					this.parentId = '';
					// 重新获取评论列表
					this.getListRootComments();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch(err => { });
		},
		// 计算时间差
		calculateTimeDiff(createAt) {
			if (!createAt) return '';
			
			const createTime = new Date(createAt).getTime();
			const now = new Date().getTime();
			const diff = now - createTime;
			
			// 时间单位（毫秒）
			const minute = 60 * 1000;
			const hour = 60 * minute;
			const day = 24 * hour;
			const month = 30 * day;
			const year = 365 * day;
			
			// 计算时间差
			if (diff < minute) {
				return '刚刚';
			} else if (diff < hour) {
				const minutes = Math.floor(diff / minute);
				return `${minutes}分钟前`;
			} else if (diff < day) {
				const hours = Math.floor(diff / hour);
				return `${hours}小时前`;
			} else if (diff < month) {
				const days = Math.floor(diff / day);
				return `${days}天前`;
			} else if (diff < year) {
				const months = Math.floor(diff / month);
				return `${months}个月前`;
			} else {
				const years = Math.floor(diff / year);
				return `${years}年前`;
			}
		},

		// 返回上一页，无则返回首页
		goBack() {
			// 获取页面栈
			const pages = getCurrentPages();
			// 如果页面栈长度大于1，说明有上一页
			if (pages.length > 1) {
				// 返回上一页
				uni.navigateBack({
					delta: 1
				});
			} else {
				// 否则返回首页
				uni.reLaunch({
					url: '/pages/home/index'
				});
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background: #ffffff;
	position: relative;

	.top-block {
		padding-left: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;

			.head {
				width: 68rpx;
				height: 68rpx;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				margin: 0 16rpx;
			}

			.name {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.right {
			display: flex;
			align-items: center;
			margin-right: 210rpx;

			.icon-bg {
				width: 64rpx;
				height: 64rpx;
				padding: 12rpx;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 1rpx solid #E9E9E9;
				box-sizing: border-box;
				background: #FFFFFF;
				margin-left: 24rpx;
			}
		}

		.title-box {
			position: relative;

			.title {
				font-weight: 600;
				font-size: 40rpx;
				color: #333333;
			}
		}
	}

	// 文章
	.article {
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;

		.photo {
			width: 100%;
			height: 416rpx;
		}

		.article-main {
			padding: 0 24rpx;

			.title {
				margin: 18rpx 0 32rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
			}

			.txt {
				font-size: 30rpx;
				color: #333333;

				.lable {
					color: #153868;
					margin-left: 8rpx;
				}
			}

			.card {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #FFF5EB;
				width: 100%;
				height: 64rpx;
				border-radius: 8rpx;
				border: 1rpx solid #F3E2D0;
				padding: 16rpx;
				box-sizing: border-box;
				margin: 22rpx 0 32rpx; // 添加边距

				.card-item {
					display: flex;
					align-items: center;
					color: #D46C0D;

					.card-icon {
						width: 60rpx;
						height: 32rpx;
						margin-right: 24rpx;
					}

					.ranking {
						font-size: 24rpx;
					}

					.top {
						font-family: Roboto Flex, Roboto Flex;
						font-weight: normal;
						font-size: 24rpx;
						transform: skewX(-8deg);
						display: inline-block;
						margin-left: 8rpx;
					}
				}

				.go {
					width: 16rpx;
					height: 16rpx;
				}
			}

			.place {
				font-size: 24rpx;
				color: #999999;
			}

		}
	}

	.line {
		margin: 32rpx 24rpx;
		width:calc(100% - 48rpx) ;
		height: 0rpx;
		border: 1rpx solid #EEEEEE;
	}

	// 评论
	.comment {
		display: flex;
		flex-direction: column;
		padding: 0 24rpx 120rpx;

		.comment-num {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.my-input {
			display: flex;
			margin-bottom: 40rpx;

			.head {
				width: 68rpx;
				height: 68rpx;
				margin-right: 24rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}

			.input-item {
				flex: 1;
				display: flex;
				align-items: center;
				background: #F5F7FA;
				padding: 0 24rpx;
				border-radius: 34rpx;

				.input {
					flex: 1;
				}
			}
		}

		.message {
			display: flex;
			flex-direction: column;

			.message-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;

				.left {
					display: flex;

					.head {
						width: 68rpx;
						height: 68rpx;
						margin-right: 24rpx;
						border-radius: 50%;
						flex-shrink: 0;
					}

					.head-little {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
						border-radius: 50%;
						flex-shrink: 0;
					}

					.chat {
						.name {
							font-size: 26rpx;
							color: #999999;
							display: flex;

							.author-lable {
								width: 62rpx;
								height: 32rpx;
								background: #E0FFF4;
								border-radius: 16rpx;
								text-align: center;
								line-height: 32rpx;
								font-weight: 500;
								font-size: 18rpx;
								color: #02B176;
								margin-left: 14rpx;
							}
						}

						.flex-wrap {
							display: flex;
							flex-wrap: wrap;
							align-items: center;


							.txt {
								font-size: 28rpx;
								color: #333333;
								margin: 12rpx 24rpx 12rpx 0;
							}

							.info {
								font-size: 24rpx;
								display: flex;

								.time {
									color: #999999;
								}

								.reply {
									color: #666666;
									margin-left: 22rpx;
								}
							}
						}
					}
				}

				.expand {
					font-size: 26rpx;
					color: #153868;
					padding: 0 64rpx;
				}

				.right {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}

	// 输入框
	.chat-input-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #EEEEEE;

		.input-container {
			background: #F5F7FA;
			height: 68rpx;
			box-sizing: border-box;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			overflow: hidden;
			margin-right: 20rpx;

			.send-btn {
				margin-left: 20rpx;
				padding: 8rpx 20rpx;
				background-color: #FF6B6B;
				color: white;
				font-size: 24rpx;
				border-radius: 15rpx;
				margin-right: 20rpx;
			}

		}

		.icon-container {
			display: flex;
			align-items: center;

			.icon-item {
				display: flex;
				align-items: center;
				margin-right: 42rpx;

				&:last-child {
					margin-right: 0rpx;
				}

				.icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 8rpx;
				}
			}
		}
	}

	// 键盘上方的输入框
	.keyboard-input-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #EEEEEE;
		padding: 20rpx 24rpx;
		z-index: 999;

		.keyboard-input-item {
			display: flex;
			align-items: center;
			background: #F5F7FA;
			padding: 0 24rpx;
			border-radius: 34rpx;
			height: 68rpx;

			.keyboard-input {
				flex: 1;
				height: 100%;
				font-size: 26rpx;
			}

			.send-btn {
				margin-left: 20rpx;
				padding: 8rpx 20rpx;
				background-color: #FF6B6B;
				color: white;
				font-size: 24rpx;
				border-radius: 15rpx;
			}
		}
	}

}
</style>