dingdong-master/pages/index/msg-dialog.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-white'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{personToChat.name}}</block>
		</cu-custom>
		<view class="cu-chat" @click="downPanelBlur" style="min-height: 70vh;">
			<view class="cu-item self" v-for="(item,index) in chatMsgList"
				v-if="item.sendUserId === curUserInfo.workerId">
				<view class="main">
					<view class="content bg-main-color shadow">
						<text>{{item.msg}}</text>
					</view>
				</view>
				<view class="cu-avatar radius" :style="'background-image:url(' + curUserInfo.workerLogoUrl + ');'">
				</view>
				<view class="date">{{item.time}}</view>
			</view>
			<view class="cu-item" v-else>
				<view class="cu-avatar radius" :style="'background-image:url(' + personToChat.workerLogoUrl + ');'">
				</view>
				<view class="main">
					<view class="content shadow">
						<text>{{item.msg}}</text>
					</view>
				</view>
				<view class="date">{{item.time}}</view>
			</view>
			<!-- 内容发送中提示 -->
			<view class="cu-info" v-if="showLoading">
				<view class="load-info loading">内容发送中</view>
			</view>
			<!-- 内容发送失败提示 -->
			<view class="cu-info" v-if="showLoadErr">
				<text class="cuIcon-roundclosefill text-red margin-right-xs"></text>内容发送失败
			</view>
		</view>
		<view class="cu-bar foot input" :style="[{bottom:InputBottom +'px'}]">
			<view class="action" @click="showFuncAreaFun">
				<text class="cuIcon-roundadd text-grey"></text>
			</view>
			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
				@focus="InputFocus" @blur="InputBlur" v-model="inputContent"></input>
			<!-- <view class="action" @click="showEmojiFun">
				<text class="cuIcon-emojifill text-grey"></text>
			</view> -->
			<button class="cu-btn bg-main-color shadow" @click="sendMsg('text')">发送</button>
		</view>
		<!-- 功能区，图片发送 -->
		<view class="downPanel" :style="'height:' + InputBottom + 'px'" v-if="showFuncArea || showEmoji">
			<view v-if="showFuncArea">
				<view class='grid grid-square col-4 padding'>
					<view class="text-center">
						<view class="text-sl"><text class='cuIcon-pic'></text></view>
						<view>相册</view>
					</view>
				</view>
			</view>
			<view v-else-if="showEmoji">

			</view>
		</view>
	</view>
</template>

<script>
	import emoji from "@/components/js_sdk/m-emoji/m-emoji_2.0.0/emoji.js";

	export default {
		data() {
			return {
				InputBottom: 0,
				personToChat: null,
				curUserInfo: null,
				chatMsgList: [],
				showFuncArea: false,
				showEmoji: false,
				showLoading: false,
				showLoadErr: false,
				inputContent: ''
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				this.personToChat = await this.$api.data('personToChat');
				this.chatMsgList = await this.$api.data('chatMsgList');
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height;
			},
			InputBlur(e) {
				this.InputBottom = this.showEmoji || this.showFuncAreaFun ? this.InputBottom : 0;
			},
			downPanelBlur() {
				this.showEmoji = false;
				this.showFuncArea = false;
				this.InputBottom = 0;
			},
			showFuncAreaFun() {
				uni.hideKeyboard();
				this.showFuncArea = true;
				this.showEmoji = false;
				this.InputBottom = this.InputBottom === 0 ? 300 : this.InputBottom;
			},
			showEmojiFun() {
				uni.hideKeyboard();
				this.showFuncArea = false;
				this.showEmoji = true;
				this.InputBottom = this.InputBottom === 0 ? 300 : this.InputBottom;
			},
			sendMsg(type) {
				if (type === 'text' && this.inputContent != '') {
					this.showLoading = true;
					let content = this.inputContent;
					this.inputContent = '';
					// TODO：模拟调用后台服务发送消息
					setTimeout(() => {
						this.chatMsgList.push({
							sendUserId: this.curUserInfo.workerId,
							recvUserId: this.personToChat.workerId,
							msg: content,
							time: new Date()
						})
						this.showLoading = false;
					}, 0)
				}
			}
		},
	}
</script>

<style>
	page {
		padding-bottom: 100upx;
	}

	.downPanel {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.load-info.loading::before {
		content: "\e67a";
		-webkit-animation: cuIcon-spin 2s infinite linear;
		animation: cuIcon-spin 2s infinite linear;
		animation-duration: 2s;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-direction: normal;
		animation-fill-mode: none;
		animation-play-state: running;
		animation-name: cuIcon-spin;
	}

	.load-info::before {
		font-family: "cuIcon";
		display: inline-block;
		margin-right: 6rpx;
	}
</style>