dreamland/pages/chat/user.vue

<template>
	<view>
		<cu-custom :bgColor="fetch.bgcolor" :isBack="true"><block slot="backText">返回</block><block slot="content">{{fetch.title}}</block></cu-custom>
		<view class="cu-chat">
			<graceLoading :loadingType="loadingType"></graceLoading>
			<block v-for="(v, k) in fetch.chat" :key="k">
				<view class="cu-item self" v-if="v.self">
					<view class="main">
						<view class="content bg-green shadow" v-if="v.text">
							<text>{{v.text}}</text>
						</view>
						<view v-if="v.pic">
							<image @click="Dever.viewPic(pic, v.pic)" :src="v.pic" class="radius chat-pic" mode="widthFix"></image>
						</view>
					</view>
					<view class="cu-avatar radius" :style="{backgroundImage:'url('+fetch.user[v.uid].avatar+')'}" @click="Dever.viewPic([fetch.user[v.uid].avatar], fetch.user[v.uid].avatar)"></view>
					<view class="date">{{v.date}}</view>
				</view>
				<view class="cu-item" v-if="!v.self">
					<view class="cu-avatar radius" :style="{backgroundImage:'url('+fetch.user[v.uid].avatar+')'}" @click="Dever.viewPic([fetch.user[v.uid].avatar], fetch.user[v.uid].avatar)"></view>
					<view class="main">
						<view class="content shadow" v-if="v.text">
							<text>{{v.text}}</text>
						</view>
						<view v-if="v.pic">
							<image @click="Dever.viewPic(pic, v.pic)" :src="v.pic" class="radius chat-pic" mode="widthFix"></image>
						</view>
					</view>
					<view class="date">{{v.date}}</view>
				</view>
			</block>
		</view>

		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<view class="action" style="display:none;">
				<text class="cuIcon-sound text-grey"></text>
			</view>
			<view class="action" @click="upload">
				<text class="cuIcon-picfill text-grey"></text>
			</view>
			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
			 @focus="InputFocus" @blur="InputBlur" v-model="msg"></input>
			<view class="action" style="display:none;">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button class="cu-btn bg-green shadow" @click="send()">发送</button>
		</view>
		<graceFixedMsg v-if="noticeShow" :msg="notice" :width="280" @tapme="noticeClick" :bottom="120"></graceFixedMsg>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				InputBottom: 0,
				uid : 0,
				msg : '',
				fetch : {
					chat : [],
					bgcolor : '',
					title : '聊天',
				},
				loadingType: 1,
				bottomState : false,
				pic : [],
				notice : '',
				noticeShow : false,
			};
		},
		onLoad(option) {
			this.uid = option.uid;
			this.fetch.title = option.title;
			this.Dever.config.code = option.code;
			this.im();
			this.getInfo(1);
		},
		onHide() {
			
		},
		onPageScroll(e) {
			if (e.scrollTop == 0 && this.loadingType != 2) {
				this.bottomState = false;
				this.loadingType = 1;
				this.getInfo(2);
			}
		},
		onReachBottom() {
			this.bottomState = true;
		},
		methods: {
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			
			im : function() {
				var self = this;
				this.Dever.im('chat', false, function(t) {
					if (t.type == 'init') {
						self.Dever.post('app/community/?l=chat.init', {code:self.Dever.config.code, client_id: t.client_id, uid:self.uid, noloading:1});
					} else if (t.type == 'ping') {
						
					} else if (t.type == 'msg') {
						self.add(t, 2);
					}
				});
			},
			getInfo : function(page) {
				var self = this;
				if (self.loadingType == 2) {
					return;
				}
				this.Dever.page([page,'chat'], this, 'app/community/?l=chat.getList', {code:this.Dever.config.code, uid: this.uid, noloading:1, concat:-1}, function(t) {
					if (t.chat) {
						for (var i in t.chat) {
							if (t.chat[i].pic) {
								self.pic.push(t.chat[i].pic);
							}
						}
					}
					if (self.Dever.pageData.status == 0) {
						self.loadingType = 2;
					} else {
						self.loadingType = 3;
					}
					if (page == 1) {
						self.bottom();
					}
				});
			},
			
			send : function(pic) {
				var self = this;
				var data = {};
				data.code = this.Dever.config.code;
				data.uid = this.uid;
				data.noloading = 1;
				if (!pic) {
					data.msg = this.msg;
				} else {
					data.pic = pic;
				}
				self.Dever.post('app/community/?l=chat.send', data, function(t) {
					self.msg = '';
					self.add(t.msg, 1);
				});
			},
			
			add : function(t, type) {
				if (t.pic) {
					this.pic.push(t.pic);
				}
				this.fetch.chat.push(t);
				if (type == 1 || this.bottomState) {
					this.bottom();
				} else {
					this.notice = '你有新的消息';
					this.noticeShow = true;
				}
			},
			noticeClick : function() {
				this.noticeShow = false;
				this.bottom();
			},
			upload : function() {
				var self = this;
				this.Dever.upload('pic', 1, function(type, file) {
					self.send(file);
				});
			},
			bottom : function() {
				var self = this;
				setTimeout(() => {	
					var query = uni.createSelectorQuery();
					query.select('.cu-chat').boundingClientRect();
					query.exec((res) => {
						var height = res[0].height + res[0].bottom;
						self.bottomState = true;
						uni.pageScrollTo({
							scrollTop: height,
							duration: 50
						});
					})
				});
			}
		}
	}
</script>

<style>
page{
  padding-bottom: 100upx;
}
.chat-pic {
	width: 150rpx;
}
</style>