wx-qhb/pageA/chat/chat.vue

<template>
	<view class="chat-pages">
		<u-navbar :border="false" :fixed='true' :placeholder='true'>
			<view class="u-nav-slot" slot="left" style="display: flex;">
				<u-icon name="arrow-left" @click="return1()" size="20"></u-icon>
				<text
					class="title">{{user_other.merchant_name || user_other.nickname ||user_other.easemob_nickname}}</text>
			</view>
			<view class="u-flex" slot="right" @click="goshop(user_other.id)">
				<view v-if="user_other.merchant_name" class="dian">{{i18n.store}}</view>
				<view class="" style="width: 200rpx;"></view>
				<!-- <text class="title">{{user_other.merchant_name}}</text> -->
				<!-- <text>{{user_other.company_name || ''}}·{{user_other.type || ''}}</text> -->
			</view>
		</u-navbar>

		<view class="" style="height: 60rpx;"></view>
		<scroll-view scroll-y="true" :scroll-into-view="scrollIntoViewId" style="height: calc(100vh - 340rpx);">
			<view :id="'msg'+ item.ext.id" 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.avatar || 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 class="" v-if="item.type=='img'" style="margin: 0 20rpx;">
						<img :src="item.url" alt="" style="width: 200rpx;height: 200rpx;" />
					</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)">
							<image src="../static/images/yuyin-left.png" mode="" style="width: 20rpx;height: 20rpx;">
							</image>
							<text :style="'padding-left: ' + item.length * 10 + 'rpx'">{{item.length}}</text>
						</view>
					</view>
					<view class="chat-header" v-if="item.type == 'txt' && item.ext.type == 'shopinfo'"
						:style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item.ext.order.id)">
						<view class="u-flex ">
							<image :src="item.ext.order.image" style="width: 152rpx;height: 152rpx;" mode=""></image>
							<view class="u-flex-column u-row-between" style="margin-left: 20rpx;height: 152rpx;">
								<view class="chattitle">{{item.ext.order.name}}</view>
								<text
									class="catmoney">￥{{item.ext.order.discount_price || item.ext.order.discount_price}}</text>
							</view>
						</view>
						<view class="" style="border: 2rpx solid #979797;opacity: 0.1;margin: 24rpx 0;"></view>
						<view class="chatfu">{{item.ext.order.fu}}</view>
					</view>
					<view class="chat-header" v-if="item.type == 'txt' && item.ext.type == 'orderinfo'"
						:style="{top:(statusheight + 58) + 'px'}" @click="toDetail(item.ext.order.info.order.id)">
						<!-- <view v-for="(item,idx) in orderList" :key="idx"> -->
						<view class="chatfu"
							style="height: 50rpx;display: flex;justify-content: space-between;align-items: center;">
							<view class="">订单编号：{{item.ext.order.info.order.order_no}}</view>
						</view>
						<view class="u-flex " v-for="(child,index) in item.ext.order.info.order_goods" :key="index"
							style="margin-top: 10rpx;">
							<image :src="child.goods_image" style="width: 152rpx;height: 152rpx;" mode="">
							</image>
							<view class="u-flex-column u-row-between" style="margin-left: 20rpx;height: 152rpx;">
								<view class="chattitle">{{child.goods_name}}</view>
								<text class="catmoney">￥{{child.amount}}</text>
							</view>
						</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/images/yuyin-right.png" mode="" style="width: 20rpx;height: 20rpx;">
							</image>
						</view>
					</view>
					<view class="" v-if="item.type=='img'" style="margin: 0 20rpx;">
						<img :src="item.url" alt="" style="width: 200rpx;height: 200rpx;" />
					</view>
					<view class="chat-header" v-if="item.type == 'txt' && item.ext.type == 'shopinfo'"
						:style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item.ext.order.id)">
						<view class="u-flex ">
							<image :src="item.ext.order.image" style="width: 152rpx;height: 152rpx;" mode=""></image>
							<view class="u-flex-column u-row-between" style="margin-left: 20rpx;height: 152rpx;">
								<view class="chattitle">{{item.ext.order.name}}</view>
								<text
									class="catmoney">￥{{item.ext.order.discount_price || item.ext.order.discount_price}}</text>
							</view>
						</view>
						<view class="" style="border: 2rpx solid #979797;opacity: 0.1;margin: 24rpx 0;"></view>
						<view class="chatfu">{{item.ext.order.fu}}</view>
					</view>
					<view class="chat-header" v-if="item.type == 'txt' && item.ext.type == 'orderinfo'"
						:style="{top:(statusheight + 58) + 'px'}" @click="toDetail(item.ext.order.info.order.id)">
						<!-- <view v-for="(item,idx) in orderList" :key="idx"> -->
						<view class="chatfu"
							style="height: 50rpx;display: flex;justify-content: space-between;align-items: center;">
							<view class="">订单编号：{{item.ext.order.info.order.order_no}}</view>
						</view>
						<view class="u-flex " v-for="(child,index) in item.ext.order.info.order_goods" :key="index"
							style="margin-top: 10rpx;">
							<image :src="child.goods_image" style="width: 152rpx;height: 152rpx;" mode="">
							</image>
							<view class="u-flex-column u-row-between" style="margin-left: 20rpx;height: 152rpx;">
								<view class="chattitle">{{child.goods_name}}</view>
								<text class="catmoney">￥{{child.amount}}</text>
							</view>
						</view>
					</view>
					<image v-if="item.from == '13523652365'" src="/pageA/static/images/kefu.png"
						style="width: 88rpx;height: 88rpx;" mode=""></image>
					<image v-else-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="getdatab()"></kj-chat>
		</scroll-view>
	</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: '',
				currentMessageId: '',
				scrollIntoViewId: '',
				scrollId: '',
				cursor: ''
			}
		},
		onLoad(options) {
			this.user = uni.getStorageSync('user_info')
			console.log('user', this.user);
			if (options.user_other) {
				this.user_other = JSON.parse(decodeURIComponent(options.user_other))
				console.log('user_other', this.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)
			if (options.id) {
				this.scrollId = options.id
			}
		},
		onShow() {
			this.getdata()
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {
			getdatab() {
				this.cursor = ''
				this.getdata()
			},
			scroll(id) {
				// this.$nextTick(() => {
				this.scrollIntoViewId = 'msg' + id;
				// })
			},
			//跳转订单详情
			toDetail(id) {
				uni.navigateTo({
					url: `/pageC/orderFormDetail/orderFormDetail?orderId=${id}`,
				});
			},
			//逛逛
			goshop(id) {
				uni.navigateTo({
					url: '/pageD/homepage/homepage?merchant_id=' + id + '&show=' + true
				})
			},
			callphone() {
				uni.$u.http.get('/api/config', {
					params: {
						module: 'basic'
					}
				}).then((res) => {
					console.log(res);

					uni.makePhoneCall({
						phoneNumber: res.service_mobile
					})
				}).catch(() => {})
			},
			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: 50,
					// 查询的起始消息 ID。若该参数设置为 `-1`、`null` 或空字符串，从最新消息开始。
					cursor: this.cursor,
					// 会话类型：（默认） `singleChat`：单聊；`groupChat`：群聊。
					chatType: "singleChat",
					// 消息搜索方向：（默认）`up`：按服务器收到消息的时间的逆序获取；`down`：按服务器收到消息的时间的正序获取。
					searchDirection: "up",
				};
				conn.getHistoryMessages(options).then((res) => {
						// 成功获取历史消息。
						if (res.isLast) {
							this.loadText = this.i18n.Nofurtherdata;
						}
						if (this.cursor == '') {
							this.list = res.messages.reverse()
						} else {
							this.list = this.list.concat(res.messages.reverse())
						}

						if (this.scrollId != '') {
							this.list.forEach((item) => {
								if (item.ext.id == this.scrollId) {
									this.scrollIntoViewId = 'msg' + this.scrollId
								} else {

								}

							})
							if (this.scrollIntoViewId == '') {
								this.getdata()
							}
						}
						this.cursor = res.cursor
						console.log(this.list);
						if (this.scrollId == '') {
							this.$nextTick(() => {
								this.scrollIntoViewId = 'msg' + this.list.slice(-1)[0].ext.id
							})
						}
					})
					.catch((e) => {
						// 获取失败。
						console.log('失败', e);
					});
			},
			toinfo(id) {
				uni.navigateTo({
					url: '/pageA/productdetails?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.dian {
		height: 48rpx;
		border-radius: 24rpx;
		border: 1rpx solid rgba(151, 151, 151, 0.5);
		padding: 4rpx 20rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		// line-height: 48rpx;
		text-align: center;
		font-style: normal;
	}

	.chatfu {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #555555;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}

	.chattitle {
		width: 314rpx;
		height: 72rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		// white-space: pre-wrap;

	}

	.catmoney {
		width: 104rpx;
		height: 46rpx;
		font-family: HarmonyOS_Sans_Medium;
		font-size: 26rpx;
		color: #F83224;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		font-weight: 600;
	}

	.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: 540rpx;
			// height: 264rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: sticky;
			left: 24rpx;
			z-index: 10;
			margin: 10px auto;
			padding: 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>