wx-qhb/pageA/chat/chat.vue

<template>
	<view class="chat-pages">
		<u-navbar :border="false" >
			<view class="u-nav-slot" slot="left" style="display: flex;">
				<u-icon name="arrow-left" @click="return1()" size="20"></u-icon>
				<image src="@/static/images/index/dianhua.png" mode=""
					style="width: 40rpx;height: 40rpx;margin-left: 22rpx;"></image>
			</view>
			<view class=" u-flex-col u-row-center" slot="center">
				<text class="title">{{user_other.merchant_name}}</text>
				<!-- <text>{{user_other.company_name || ''}}·{{user_other.type || ''}}</text> -->
			</view>
		</u-navbar>


		<view class="" style="height: 200rpx;"></view>

		<view class="chat-item" v-for="(item,index) in list" :key="index">
			<view class="chat-time">
				{{renderTime(item.time)}}
			</view>
			<view class="chat-item-box u-flex u-col-top acenter" v-if="item.from == user_other_no">
				<image :src="user_other.image" class="user-img" mode=""></image>
				<view style="max-width: 80%;" class="" v-if="item.type == 'txt' && !item.ext.type">
					<view class="chat-text" :style="{background:item.from == user_no ? '#D3E5FB' : '#fff'}">
						{{item.msg}}
					</view>
				</view>
				<view style="max-width: 80%;" v-if="item.type == 'audio'">
					<view class="chat-text hflex acenter" style="background: #D3E5FB;max-width: 550rpx;"
						@click="playaudio(item.url)">
						<image src="static/yuyin-left.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
						<text :style="'padding-right: ' + item.length * 10 + 'rpx'">{{item.length}}</text>
					</view>
				</view>
				<image :src="item.msg ? item.msg : item.url" v-if="item.type === 'img'" mode="widthFix"
					style="width: 200px;text-align: right;" @click="previewimg(item.url)"></image>
				<view class="chat-header" v-if="item.type == 'txt' && item.ext.type == 'cand'"
					:style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'pos')">
					<view class="header-top u-flex u-row-between">
						<view class="header-left">
							<view class="u-flex">
								<text class="text1">{{item.ext.order.name}}</text>
							</view>
						</view>
						<view class="header-right">
							<image :src="item.ext.order.avatar" class="right-img" mode=""></image>
							<image src="../static/images/nan.png" class="sex" mode=""
								v-if="item.ext.order.sex == 'male'"></image>
							<image src="../static/images/nv.png" class="sex" mode="" v-else></image>
						</view>
					</view>
					<view class="goutong-time">
						{{renderTime(item.time)}} 发起沟通
					</view>
				</view>
				<view class="chat-header1" v-if="item.type == 'txt' && item.ext.type == 'pos'"
					:style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'pos')">
					<view class="header1-top u-flex u-row-between">
						<text>{{item.ext.order.title}}</text>
						<text>{{item.ext.order.salary}}K</text>
					</view>
					<view class="goutong-time1">
						{{renderTime(item.time)}} 发起沟通
					</view>
				</view>
				<view class="chat-header1" v-if="item.type == 'txt' && item.ext.type == 'order'"
					:style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'order')">
					<view class="header1-top u-flex u-row-between">
						<text>{{item.ext.order.title}}</text>
						<text>{{item.ext.order.salary}}K</text>
					</view>
					<view class="goutong-time1">
						{{renderTime(item.time)}} 发起沟通
					</view>
				</view>
			</view>
			<view class="chat-item-box u-flex u-col-top jend" v-if="item.from == user_no">
				<view style="max-width: 80%;" class="" v-if="item.type == 'txt' && !item.ext.type">
					<view class="chat-text" :style="{background:item.from == user_no ? '#D3E5FB' : '#fff'}">
						{{item.msg}}
					</view>
				</view>
				<view style="max-width: 80%;" v-if="item.type == 'audio'">
					<view class="chat-text hflex acenter jend" style="background: #D3E5FB;max-width: 550rpx;"
						@click="playaudio(item.url)">
						<text :style="'padding-left: ' + item.length * 10 + 'rpx'">{{item.length}}</text>
						<image src="static/yuyin-right.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
					</view>
				</view>
				<image :src="item.msg ? item.msg : item.url" v-if="item.type === 'img'" mode="widthFix"
					style="width: 200px;text-align: right;" @click="previewimg(item.url)"></image>
				<view class="chat-header" v-if="item.type == 'txt' && item.ext.type == 'cand'"
					:style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'pos')">
					<view class="header-top u-flex u-row-between">
						<view class="header-left">
							<view class="u-flex">
								<text class="text1">{{item.ext.order.name}}</text>
							</view>
						</view>
						<view class="header-right">
							<image :src="item.ext.order.avatar" class="right-img" mode=""></image>
							<image src="../static/images/nan.png" class="sex" mode=""
								v-if="item.ext.order.sex == 'male'"></image>
							<image src="../static/images/nv.png" class="sex" mode="" v-else></image>
						</view>
					</view>
					<view class="goutong-time">
						{{renderTime(item.time)}} 发起沟通
					</view>
				</view>
				<view class="chat-header1" v-if="item.type == 'txt' && item.ext.type == 'pos'"
					:style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'pos')">
					<view class="header1-top u-flex u-row-between">
						<text>{{item.ext.order.title}}</text>
						<text>{{item.ext.order.salary}}K</text>
					</view>
					<view class="goutong-time1">
						{{renderTime(item.time)}} 发起沟通
					</view>
				</view>
				<view class="chat-header1" v-if="item.type == 'txt' && item.ext.type == 'order'"
					:style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'order')">
					<view class="header1-top u-flex u-row-between">
						<text>{{item.ext.order.title}}</text>
						<text>{{item.ext.order.salary}}K</text>
					</view>
					<view class="goutong-time1">
						{{renderTime(item.time)}} 发起沟通
					</view>
				</view>
				<image v-if="item.from == user_no" :src="user.avatar" class="user-img" mode=""></image>
			</view>
		</view>
		<view class="" style="height: 55rpx;"></view>
		<!-- <kj-chat></kj-chat> -->
		<kj-chat :user='user' :to="user_other_no" :list="changyong_list" :user_other='user_other' @success="getdata"></kj-chat>
	</view>
</template>

<script>
	import vueBus from '@/utils/vueBus.js'
	import WebIM from '@/newSDK/Easemob-chat-4.1.7.js'
	import {
		conn
	} from '@/utils/WebIM';
	import {
		renderTime
	} from '@/utils/index'
	const innerAudioContext = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				user_other_no: '',
				user_no: '',
				user: {},
				user_other: {},
				pageSize: 20,
				loadText: '',
				list: [],
				renderTime,
				playStatus: 0, //录音播放状态 0:未播放 1:正在播放
				statusheight: '',
			}
		},
		onLoad(options) {
			this.user = options.user_info
			if(options.user_other){
				this.user_other = JSON.parse(decodeURIComponent(options.user_other))
			}
			// this.statusheight = uni.getSystemInfoSync().statusBarHeight,
			this.user_other_no = options.user_other_no
			console.log(this.user_other_no);
			// this.user_other = options.user_other, //用户信息
			if (uni.getStorageSync('user_no')) {
				this.user_no = uni.getStorageSync('user_no')
			} else {
				// index().then((res) => {


				// })
			}
			vueBus.$on('message', this.getdata)
		},
		onShow() {
			this.getdata()
		},
		methods: {
			previewimg(url) {
				let urls = []
				urls.push(url)
				uni.previewImage({
					urls: urls,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			playaudio(url) {
				let _this = this
				innerAudioContext.src = url
				console.log(url);
				var music = wx.setInnerAudioOption({
					obeyMuteSwitch: false,
					success: function(res) {
						console.log("开启静音模式下播放音乐的功能");
					},
					fail: function(err) {
						console.log(err);
						console.log("静音设置失败");
					},
				});
				console.log(this.playStatus);
				if (this.playStatus == 0) {
					innerAudioContext.play()
					innerAudioContext.onPlay(() => {
						console.log('开始播放');
						_this.playStatus = 1
					});
				} else {
					innerAudioContext.pause()
					innerAudioContext.onPause(() => {
						console.log('暂停播放');
						_this.playStatus = 0
					});
				}
				innerAudioContext.onError((res) => {
					console.log('onError', res.errMsg);
					console.log('onError', res.errCode);
				});
				innerAudioContext.onEnded((res) => {
					_this.playStatus = 0
				})
			},
			return1() {
				uni.navigateBack()
			},
			getuser() {
				let that = this
				getEmchatUsersData({
					user_no: this.user_no + ',' + this.user_other_no,
				}).then((res) => {
					if (res.code == 1) {
						this.user = res.data[0]
						this.user_other = res.data[1]
					} else {
						that.$u.toast(res.msg)
					}
				})
			},
			getdata() {
				let option2 = {
					chatType: "singleChat", // 会话类型，设置为单聊。
					type: "channel", // 消息类型。
					to: this.user_other_no, // 接收消息对象的用户 ID。
				};
				let msg2 = new WebIM.message.create(option2);
				conn.send(msg2);
				let options = {
					// 对方的用户 ID 或者群组 ID 或聊天室 ID。
					targetId: this.user_other_no,
					// 每页期望获取的消息条数。取值范围为 [1,50]，默认值为 20。
					pageSize: this.pageSize,
					// 查询的起始消息 ID。若该参数设置为 `-1`、`null` 或空字符串，从最新消息开始。
					cursor: -1,
					// 会话类型：（默认） `singleChat`：单聊；`groupChat`：群聊。
					chatType: "singleChat",
					// 消息搜索方向：（默认）`up`：按服务器收到消息的时间的逆序获取；`down`：按服务器收到消息的时间的正序获取。
					searchDirection: "up",
				};
				conn.getHistoryMessages(options).then((res) => {
						// 成功获取历史消息。
						if (res.isLast) {
							this.loadText = '已无更多数据';
						}
						this.list = res.messages.reverse()
						console.log(this.list);
						this.$nextTick(() => {
							uni.pageScrollTo({
								scrollTop: 99999
							})
						})
					})
					.catch((e) => {
						// 获取失败。
						console.log('失败', e);
					});
			},
			toinfo(item, type) {
				if (type == 'pos' && item.ext.order.item_url) {
					uni.navigateTo({
						url: "/pagesB/details?id=" + item.ext.order.item_url
					})
				} else if (type == 'cand') {
					uni.navigateTo({
						url: "/pagesC/rencai-info?id=" + item.ext.order.item_url
					})
				} else if (type == 'order') {
					uni.navigateTo({
						url: "/pagesD/order-detail?id=" + item.ext.order.item_url
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.title{
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #222222;
		line-height: 50rpx;
		text-align: left;
		font-style: normal;
	}
	.jend {
		justify-content: flex-end;
	}

	.chat-pages {
		.chat-header1 {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: sticky;
			left: 24rpx;
			// z-index: 20;
			margin: 10px auto;
			padding: 0 20rpx;

			.goutong-time1 {
				line-height: 80rpx;
				font-size: 24rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #777777;
				border-top: 2rpx solid #F0F0F0;
			}

			.zhiwei-text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #F0F0F0;
			}

			.zhiwei-title {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
				margin-bottom: 20rpx;
			}

			.chat-label1 {
				padding: 8rpx 0 10rpx 0;

				text {
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					line-height: 40rpx;
					background: #F3F3F3;
					border-radius: 4rpx;
					padding: 0 12rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #555555;
				}
			}

			.jingli1-box {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
				margin-bottom: 20rpx;
			}

			.header1-top {
				padding: 24rpx 0 20rpx 0;

				text:frist-child {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}

				text:last-child {
					font-size: 32rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #0C66C2;
				}
			}
		}

		.chat-item {
			padding: 0 24rpx;
			margin-bottom: 20rpx;

			.chat-item-box {

				.chat-text {
					border-radius: 20rpx;
					background-color: #fff;
					max-width: 100%;
					margin: 0 20rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #141414;
					padding: 20rpx 24rpx;
				}

				.user-img {
					width: 92rpx;
					height: 92rpx;
					border-radius: 100rpx;
				}
			}

			.chat-time {
				text-align: center;
				margin-bottom: 30rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}
		}

		.chat-header {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: sticky;
			left: 24rpx;
			z-index: 20;
			margin: 10px auto;
			padding: 0 20rpx;

			.goutong-time {
				line-height: 80rpx;
				font-size: 24rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #777777;
				border-top: 2rpx solid #F0F0F0;
			}

			.chat-label {
				padding: 8rpx 0 10rpx 0;

				text {
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					line-height: 40rpx;
					background: #F3F3F3;
					border-radius: 4rpx;
					padding: 0 12rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #555555;
				}
			}

			.jingli-box {
				margin-bottom: 12rpx;

				.img {
					width: 28rpx;
					height: 28rpx;
				}

				.text1 {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					margin: 0 12rpx;
					flex: 1;
				}

				.text2 {
					font-size: 22rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #888888;
				}
			}

			.header-top {
				height: 150rpx;

				.header-right {
					width: 96rpx;
					height: 96rpx;
					position: relative;

					.sex {
						position: absolute;
						bottom: 0;
						right: 4rpx;
						width: 20rpx;
						height: 20rpx;
					}

					.right-img {
						width: 96rpx;
						height: 96rpx;
						border-radius: 100rpx;
					}
				}

				.header-left {
					.text3 {
						font-size: 26rpx;
						font-family: SFPro-Regular, SFPro;
						font-weight: 400;
						color: #666666;
						margin-top: 10rpx;
					}

					.text1 {
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
						margin-right: 28rpx;
					}

					.text2 {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
					}
				}
			}
		}

		.chat-navbar {
			flex: 1;
			// padding-left: 100rpx;

			text:first-child {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #141414;
			}

			text:last-child {
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}
		}
	}

	page {
		background-color: #F3F3F3;
	}
</style>