YingXingAI/components/messageBox.vue

<template>
	<view class="msgbox">
		<!-- <view class="quick" :style="[{ background: quick ? '#fff' : 'none' }]">
      <view class="justify-between section_7" v-if="quick">
        <view class="flex-row">
          <view class="flex-col items-center text-wrapper_2">
            <text class="text">交换信息</text>
          </view>
          <view class="flex-col items-end text-wrapper_3">
            <text class="text">交换联系方式</text>
          </view>
        </view>
        <image
          @click="quick = false"
          src="/static/common/img/msgclose.png"
          class="image_13"
        />
      </view>
      <view style="display: flex; justify-content: flex-end" v-else>
        <image
          style="margin: 0.08rem; width: 0.2rem; height: 0.2rem"
          @click="quick = true"
          src="/static/common/img/msgopen.png"
          class="image_13"
        />
      </view>
    </view> -->
		<view class="flex-row section_1">
			<text  class="text" v-if="!isCommonWords" @click="CommonWords = !CommonWords;emoji = false;">常用语</text>

			<view class="input-container">
				<image @click="emoji = !emoji;CommonWords = false;emojicurrent = 0;" src="/static/common/img/homepage/icon-message.png" class="input-icon" />
				<u-input class="input" :type="'textarea'" v-model="message" :auto-height="true" @click="shuru"
					@blur="inputBlur" @focus="inputFocus" :placeholder='placeholder'/>
			</view>
			<!-- <u-input class="input" :type="'textarea'" v-model="message" :auto-height="true" @click="shuru"
				@blur="inputBlur" @focus="inputFocus" :placeholder='placeholder'/> -->
			<!-- <view class="icon" @click="emoji = !emoji;CommonWords = false;emojicurrent = 0;">
				<image src="/static/common/img/icon.png" class="image" />
			</view> -->
			<view class="btn" v-if="message != ''">
				<!-- <u-button size="mini" class="sendOut" @click="send">发送</u-button> -->
				<image
					src="/static/common/img/homepage/icon-send.png"
					class="image_send"
					@click="send"
				/>
			</view>
		</view>
		<!-- 常用语 -->
		<view class="CommonWords">
			<scroll-view scroll-y="true" style="transition: all 0.3s; height: 0rem" :class="CommonWords ? 'open' : ''">
				<text v-for="(v, i) in commonWords" :key="i" @click="choice(v)">{{v}}</text>
			</scroll-view>
		</view>
		<!-- emoji 表情 -->
		<swiper class="slider" :current="emojicurrent" :class="emoji ? 'emojishow' : ''">
			<swiper-item v-for="(item, key) in emojiData" :key="key" class="slider-emoji"
				:class="[key == emojiData.length - 1 ? 'lastbox' : '']">
				<text v-for="(emoji, index) in item" :key="index" @click="selemoji(emoji)"
					class="slider-emoji-icon">{{ emoji }}</text>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import emoji from "../static/common/js/emoji";
	export default {
		name: "messageBox",
		props:['isCommonWords'],
		data() {
			return {
				commonWords: [
					'您好，很高兴认识你！',
					'您好，有空聊一聊吗？',
					'嗨，你好呀！',
					'好的，我知道了。',
					'我们下次再聊，拜拜。'
				],
				CommonWords: false,
				quick: false,
				message: "",
				emojiData: [],
				emoji: false,
				inputShow: false,
				emojicurrent: 0,
				placeholder:"",
			};
		},
		// props:['placeholder'],
		mounted() {
			// console.log(this.placeholder)
			this.emojiInit();
		},
		created(){
			// console.log(this.placeholder)
		},
		methods: {
			outbox() {
				alert("out");
			},
			emojiInit() {
				var number = 60;
				var page = Math.ceil(emoji.length / number);
				for (let i = 0; i < page; i++) {
					this.emojiData[i] = [];
					for (let k = 0; k < number; k++) {
						emoji[i * number + k] ?
							this.emojiData[i].push(emoji[i * number + k]) :
							"";
					}
				}
			},
			inputFocus() {
				this.CommonWords = false;
				this.emoji = false;
				setTimeout(() => {
					this.scrollTop += 1;
				}, 100);
				// console.log("inputFocus");
			},
			inputBlur() {
				// console.log("inputBlur");
			},
			shuru() {
				setTimeout(() => {
					this.scrollTop += 1;
				}, 100);
			},
			choice(txt) {
				this.message = txt;
			},
			close() {
				this.CommonWords = false;
				this.emoji = false;
			},
			sendOut() {
				this.close();
			},
			selemoji(m) {
				this.message += m;
			},
			send(){
				this.$emit('onsend',this.message)
				this.message = ""
				this.$emit('onmsgShow',false)
			}
		},
	};
</script>

<style lang="scss">
	.msgbox {
		position: fixed;
		bottom: 0;
		width: 100%;

		.section_1 {
			width: 100%;
			display: flex;
			// height: 0.52rem;
			background-color: #ffffff;
			border: solid 0.01rem #eeeeee;
			padding: 0.11rem 0.1rem 0.11rem 0.1rem;
		}

		.text {
			font-size: 0.14rem;
			line-height: 0.15rem;
			color: #505051;
			margin: 0 0.1rem;
			line-height: 0.36rem;
		}

		.input {
			width: 100%;
			min-height: 0.36rem !important;
			line-height: 0.36rem;
			background-color: #f7f7f7;
			border-radius: 0.1rem;
			font-size: 0.14rem;
			padding-right: 0.1rem !important;

			::v-deep .u-input__input {
				padding: 0.05rem;
				min-height: 0.16rem !important;
				transform: translateY(0.03rem);
			}
		}

		.icon {
			margin-left: 0.05rem;
			padding: 0.03rem 0;
		}

		.btn {
			padding: 0.03rem 0;

			.sendOut {
				height: 0.3rem;
				line-height: 0.3rem;
				width: 0.5rem;
				margin-left: 0.05rem;
				background-color: #2e9bff;
				color: #ffffff;
			}

			.image_send {
				width: 0.25rem;
				height: 0.25rem;
				margin-left: 0.05rem;
				transform: translateY(0.03rem);
			}
		}

		.image {
			width: 0.26rem;
			height: 0.26rem;
		}

		.CommonWords {
			width: 100%;
			background-color: #f6f7fa;

			text {
				transition: all 0.3s;
				display: block;
				padding: 0.1rem 0 0.1rem 0.2rem;
				font-size: 0.14rem;
				line-height: 0.2rem;
				height: 0.4rem;
				overflow: hidden;
				color: #505051;
			}

			text:active {
				background: #ccc;
			}
		}

		.open {
			height: 3rem !important;
			transition: all 0.3s;
		}

		.input-container{
			position: relative;
			// width: 90%;
			display: flex;
			align-items: center;
			flex: 1;

			
			.input-icon {
				width: 0.2rem;
				height: 0.2rem;
				position: absolute;
				left: 0.1rem;
				z-index: 1;
			}

			.input {
				width: 100%;
				min-height: 0.36rem !important;
				line-height: 0.36rem;
				// background-color: #f7f7f7;
				border-radius: 0.1rem;
				font-size: 0.14rem;
				padding-right: 0.1rem !important;
				padding-left: 0.35rem !important;  /* 为左侧图标留出空间 */

				::v-deep .u-input__input {
					padding: 0.05rem;
					min-height: 0.16rem !important;
					transform: translateY(0.03rem);
				}
			}
		}
	}

	.emojishow {
		height: 3rem !important;
	}

	.slider {
		background: #fff;
		width: 7.75rem;
		height: 0rem;
		transition: all 0.3s;

		.slider-emoji {
			overflow-y: scroll;
			width: 100vw !important;
		}

		&-emoji {
			width: 6.75rem;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;

			&-icon {
				font-size: 0.265rem;
				display: inline-block;
				width: 0.4rem;
				text-align: center;
				padding: 0.05rem 0;
				border-radius: 0.1rem;
				//   border-bottom: 1px solid #ccc;
			}

			&-icon:active {
				background: #ccc;
			}
		}
	}
</style>