hospital-inspect/components/IM/index.vue

<template>	
	<view class="chat-room">
	  <scroll-view id="scrollview" class="room" :scroll-top="scrollTop" scroll-y="true" > 
		<view class="chat-container">
			<view class="item" v-for="(item,index) in chats" :key="index"
				  :class="item.type==='mine'?'lf':''">
				<view class="avatar">
					<!-- #ifdef MP-WEIXIN -->
						<open-data  type="userAvatarUrl"  class="avatar-tag" v-if="item.type==='mine'"></open-data>
						<image src="/static/components/avatar.png" class="avatar-tag" mode="widthFix" v-if="item.type!=='mine'"></image>
						<text class="username">{{item.user}}</text>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
						<image src="/static/components/avatar.png" class="avatar-tag" mode="widthFix"></image>
						<text class="username">{{item.user}}</text>
					<!-- #endif -->
				</view>
				<view class="msgbox">
				  <text class="msg">{{item.msg}}</text>
				</view>    
			</view> 			
		</view>
	  </scroll-view>
	  <view class="send">
		<textarea 
		    maxlength="-1"
			class="sendInput"
			type="text"
			v-model="sendMsg"
			cursor-spacing="20"
			@confirm="sendMessage"
			confirm-type="发送"	
			auto-height
		></textarea>
		<button size="mini" class="sendBt"
				@click="sendMessage" 
				v-if="sendMsg.length>0"
				>
				<text>发送</text>
		</button>
		<button size="mini" class="sendBt"
				@click="callIM" 
				v-if="sendMsg.length<1"
				>
				<text>呼叫</text>
		</button>		
		<!-- <button class="moreHandle" v-if="sendMsg.length<1" >＋</button> -->
	  </view>
	</view>
</template>

<script>
	export default {
		name:"IM-chat",
		props:{
			chats:{
				type:[Array],
				default:()=>[]
			}
		},
		watch:{
			chats(){
				if(this.chats.length>1){
					this.scrollToBottom();
				}
			}
		},
		data() {
			return {
				scrollTop: 0,
				sendMsg:''
			}
		},
		methods: {
			sendMessage(){
				this.$emit('send',this.sendMsg);
				this.sendMsg="";
			},
			callIM(){
				this.$emit('call');
			},
			scrollToBottom: function () {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.chat-container').boundingClientRect(data => {
					this.scrollTop=data[0].height;
				}).exec();
			}					
		}
	}
</script>

<style lang="scss" scoped>
	@import url('./index.css') 
</style>