crmcard/subpages/pages/card/cardChat.vue

<template>
	<view>
		<uni-menubar :title="nickeName" />
		<tm-loadding style="width: 100%;position: fixed;top: 180rpx;" v-if="ajax.loading" :label="ajax.loadText"></tm-loadding>
		<view style="background-color: #fff;width: 100%;position: fixed;top: 180rpx;z-index: 999;">
			<tm-grid :grid="3" @change="tabChange" color="blue" :list="tabList"></tm-grid>
		</view>
		<view @click="setUpShow = false" class="cu-chat">			
			<view class="" style="height: 200rpx;"></view>
			<view class="px-15" v-for="(item,index) in chatList" :key="index" :id="`msg-${item.id}`">
				<view v-if="item.type == 5">
					<view v-if="item.user.uid === userInfo.uid"
						style="text-align: center;font-size: 24rpx;color: #9E9E9E;margin: 40rpx 0;">
						已向对方发起交换电话
					</view>
					<view class="px-50" v-else>
						<tm-sheet :margin="[50,32]">
							<view class="" style="font-size: 28rpx;">
								对方想获取你的电话?
							</view>
							<view style="display: flex;justify-content: flex-end;margin-top: 20rpx;">
								<tm-button open-type="getPhoneNumber" @getphonenumber="getNumber" theme="blue" size="s">
									同意</tm-button>
							</view>
						</tm-sheet>
					</view>
				</view>
				<view v-else-if="item.type == 6">
					<view v-if="item.user.uid === userInfo.uid"
						style="text-align: center;font-size: 24rpx;color: #9E9E9E;margin: 40rpx 0;">
						已向对方发起交换微信
					</view>
					<view v-else style="text-align: center;font-size: 24rpx;color: #9E9E9E;margin: 40rpx 0;">
						对方想要获取你的微信
					</view>
				</view>
				<view v-else class="rowFlex mt-30 ">
					<view v-if="item.user.uid === userInfo.uid" class="cu-item self">
						<view class="main">
							<view class="action text-grey" v-if="item.state === 0">
								<text class="text-sm margin-left-sm">未读</text>
							</view>
							<view v-if="item.type === 0" class="content bg-blue shadow">
								<text>
									{{item.msg}}
								</text>
							</view>
							<image class="radius" mode="widthFix" v-if="item.type === 1" :src="item.msg">
							</image>
						</view>
						<view class="cu-avatar radius">
							<tm-avatar titl outlined :src="item.user.avatar" :size="80"></tm-avatar>
						</view>
						<view class="date">{{item.create_time}}</view>
					</view>
					<view v-else class="cu-item">
						<view class="cu-avatar radius">
							<tm-avatar titl outlined :src="item.user.avatar" :size="80"></tm-avatar>
						</view>
						<view class="main">
							<view v-if="item.type === 0" class="content bg-blue shadow">
								<text>
									{{item.msg}}
								</text>
							</view>
							<image class="radius" mode="widthFix" v-if="item.type === 1" :src="item.msg">
							</image>
						</view>
						<view class="date">{{item.create_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar foot input">
			<input class="solids-bottom" style="min-height: 100rpx;" adjust-position :focus="false" maxlength="300" cursor-spacing="10"
				v-model="inputInfo" placeholder="和TA说点什么吧"></input>	
			<view class="action">
				<view v-if="inputInfo.length>0">
					<button class="cu-btn blue shadow" @click="sendOut(0,inputInfo)">发送</button>
				</view>
				<view v-else @click="setUpShow = !setUpShow">
					<tm-icons color="grey-lighten" :size="50" name="fa-plus-square-o"></tm-icons>
				</view>
			</view>
			<view v-if="setUpShow" class="setUp" style="width: 100%;">
				<tm-sheet :shadow="24">
					<tm-grid :grid="4" @change="change" color="blue" :list="setList"></tm-grid>
				</tm-sheet>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<tm-dialog v-model="dialogShow" confirmColor="blue" :over-close="false" @confirm="dialogClick"
			:content="dialogContent"></tm-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ajax: {
					rows:20,	//每页数量
					page: 1, //页码
					flag: true, // 请求开关
					loading: true, // 加载中
					loadText: '正在获取消息'
				},

				dialogShow: false,
				dialogContent: "",
				scrollTop: '',
				isHistoryLoading: false,
				scrollAnimation: false,
				scrollToView: '',
				inputInfo: "",
				loading: true,
				setUpShow: false,
				setList: [{
						icon: 'icon-picture',
						text: '相册',
						color: 'grey-darken-1',
						fontColor: 'grey-darken-1'
					},
					{
						icon: 'icon-mobile-alt',
						text: '相机',
						color: 'grey-darken-1',
						fontColor: 'grey-darken-1'
					},
				],
				chatID: '',
				toUid: "",
				nickeName: "",
				page: 1,
				chatList: [],
				tabList: [{
						icon: 'icon-phone',
						text: '打电话',
						color: 'blue'
					},
					{
						icon: 'icon-headset',
						text: '换电话',
						color: 'yellow'
					},
					{
						icon: 'icon-aliwangwang',
						text: '换微信',
						color: 'green'
					},
				],
				custMobile: "",
				isStr: '',
				contentViewHeight: 0,
			}
		},
		created() {
			let that = this
			uni.$on('onMessage', function(data) {
				that.chatList.push(data.data)
				that.$nextTick(() => {
					uni.pageScrollTo({
						scrollTop: 999999, // 设置一个超大值，以保证滚动条滚动到底部
						duration: 300
					});
				});
			})
		},
		async onLoad(option) {
			if (option) {
				this.toUid = option.t_uid
				this.nickeName = option.name
				let info = await this.$tm.request.post('chat/createroom', {
					to_uid: option.t_uid,
					type: 1
				})
				this.chatID = info.data.id
				if (option.card_id) {
					this.getCardDetail(option.card_id)
				}
				this.$nextTick(() => {
					this.getHistoryMsg();
				});
			}
		},
		onPageScroll(e) {
			if (e.scrollTop < 50) {
				this.getHistoryMsg();
			}
		},
		computed: {
			userInfo() {
				return this.$tm.vx.state().user.userInfo || {}
			}
		},
		methods: {
			// 获取历史消息
			async getHistoryMsg() {
				if (!this.ajax.flag) {
					return; //
				}
				this.hideLoadTips();
				this.ajax.flag = false;
				let data = await this.$tm.request.post('chat/roomhistorylist', {
					chat_id: this.chatID,
					page: this.ajax.page
				})
				data = data.data.data
				// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用
				let selector = '';
				if (this.ajax.page > 1) {
					// 非第一页，则取历史消息数据的第一条信息元素
					selector = `#msg-${this.chatList[0].id}`;
				} else {
					// 第一页，则取当前消息数据的最后一条信息元素
					selector = `#msg-${data[data.length-1].id}`;
				}

				// 将获取到的消息数据合并到消息数组中
				this.chatList = [...data, ...this.chatList];

				// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
				this.$nextTick(() => {
					// 设置当前滚动的位置
					this.setPageScrollTo(selector);
					this.hideLoadTips(true);

					if (data.length < this.ajax.rows) {
					} else {
						this.ajax.page++;

						// 延迟 200ms ，以保证设置窗口滚动已完成
						setTimeout(() => {
							this.ajax.flag = true;
						}, 200)
					}
				})
			},
			hideLoadTips(flag) {
				if (flag) {
					this.ajax.loadText = '消息获取成功';
					setTimeout(() => {
						this.ajax.loading = false;
					}, 300);
				} else {
					this.ajax.loading = true;
					this.ajax.loadText = '正在获取消息';
				}
			},
			// 设置页面滚动位置
			setPageScrollTo(selector) {
				let view = uni.createSelectorQuery().in(this).select(selector);
				view.boundingClientRect((res) => {
					uni.pageScrollTo({
						scrollTop: res.top - 200, // -30 为多显示出大半个消息的高度，示意上面还有信息。
						duration: 0
					});
				}).exec();
			},

			// 获取名片详情
			getCardDetail(id) {
				this.$tm.request.post('card/viewread', {
					card_id: id
				}).then(res => {
					if (res.data.card.mobile !== '') {
						this.custMobile = res.data.card.mobile
					} else {
						this.tabList[0].color = "grey";
						this.tabList[0].fontColor = "grey"
					}

				})
			},
			change(e) {
				let that = this
				if (e.index === 0) {
					uni.chooseImage({
						count: 9, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							let list = res.tempFilePaths
							list.forEach(val => {
								uni.uploadFile({
									url: 'https://cardoa.platomix.net/api/upload', //仅为示例，非真实的接口地址
									filePath: val,
									name: 'file',
									header: {
										'Authorization': uni.getStorageSync('token'),
									},
									success: (uploadFileRes) => {
										let data = JSON.parse(uploadFileRes.data)
										that.sendOut(1, data.data)
									}
								});

							})
						}
					});
				} else if (e.index === 1) {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera '], //从相册选择
						success: function(res) {
							let list = res.tempFilePaths
							list.forEach(val => {
								uni.uploadFile({
									url: 'https://cardoa.platomix.net/api/upload', //仅为示例，非真实的接口地址
									filePath: val,
									name: 'file',
									header: {
										'Authorization': uni.getStorageSync('token'),
										'Content-Type': 'multipart/form-data'
									},
									success: (uploadFileRes) => {
										let data = JSON.parse(uploadFileRes.data)
										that.sendOut(1, data.data)
									}
								});
							})
						}
					});
				}
			},
			// 加载初始消息
			getRoomList(chatId, page) {
				let that = this
				that.$tm.request.post('chat/roomhistorylist', {
					chat_id: chatId,
					page: page
				}).then(res => {
					if (res.data.data.length > 0) {
						that.chatList = res.data.data
						// 滚动到底部
						let viewId = that.chatList[res.data.data.length - 1].id
						that.$nextTick(function() {
							//进入页面滚动到底部
							that.scrollToView = 'msg' + viewId
							that.$nextTick(function() {
								that.scrollAnimation = true;
							});
						});
					}
				})
			},
			// 滑动到顶部获取消息
			getdata() {
				// if (this.isHistoryLoading) {
				// 	return;
				// }
				// this.isHistoryLoading = true; //参数作为进入请求标识，防止重复请求
				// this.scrollAnimation = false; //关闭滑动动画
				let Viewid = this.chatList[1].id; //记住第一个信息ID
				this.$tm.request.post('chat/roomhistorylist', {
					chat_id: this.chatID,
					page: ++this.page
				}).then(res => {
					let list = res.data.data
					if (list.length > 0) {
						this.$nextTick(() => {
							this.scrollToView = 'msg' + Viewid; //跳转上次的第一行信息位置
							this.$nextTick(() => {
								this.scrollAnimation = true; //恢复滚动动画
							});
						});
						for (let i = 0; i < list.length; i++) {
							this.chatList.unshift(list[i]);
						}
					}
					this.isHistoryLoading = false;
				})
			},
			sendOut(type, msg) {
				let data = {
					"chat_id": this.chatID, //房间id号
					"to_uid": this.toUid,
					"msg": msg, //返回文字描述
					"type": type //0:文本;1:图片;2:名片;3:商品，4：正在输入
				}
				this.$tm.request.post('chat/send', data).then(res => {
					this.inputInfo = ""
					this.setUpShow = false
					this.chatList.push(res.data)
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 999999, // 设置一个超大值，以保证滚动条滚动到底部
							duration: 300
						});
					});
				})
			},
			// 顶部tab导航
			tabChange(e) {
				if (e.index == 0 && this.custMobile !== '') {
					uni.makePhoneCall({
						phoneNumber: this.custMobile //仅为示例
					});
				} else if (e.index == 1) {
					this.isStr = 'phone'
					this.dialogShow = true
					this.dialogContent = "是否发起与对方交换电话?"
				} else if (e.index == 2) {
					this.isStr = 'vx'
					this.dialogShow = true
					this.dialogContent = "是否发起与对方交换微信?"
				}
			},
			dialogClick() {
				this.dialogShow = false
				if (this.isStr === 'phone') {
					let msg = "发起交换电话"
					this.sendOut(5, msg)
				} else if (this.isStr === 'vx') {
					let msg = "发起交换微信"
					this.sendOut(6, msg)
				}
			},
			getNumber(res) {
				this.$tm.request.post('card/getphone', {
					code: res.detail.code
				}).then(result => {
					this.sendOut(0, result.data.phone_info.phoneNumber)
				})

			},
			getUserInfo(res) {
				console.log(res)
			},
		}

	}
</script>

<style lang="scss" scoped>
	.cu-chat {
		text {
			word-break: break-word
		}
	}
</style>