wx-qhb/components/kj-chat/kj-chat.vue

<template>
	<view class="chat-bottom">
		<view :style="{height: height}"></view>
		<view class="safe-area-inset-bottom"></view>
		<view class="chat-down-box u-flex-col u-col-center">
			<view class="chat-down-btn u-flex u-row-between" v-if="isjianpan">
				<image @click="openchangyong" v-if="showtype == 2" class="img2" src="@/static/imagess/jianpan.png"
					mode=""></image>
				<input class="input" :cursor-spacing="15" v-model="text" type="text" confirm-type="send" @confirm="send"
					placeholder="请输入消息内容…">
				<image @click="openemoji" class="img1" src="@/static/imagess/biaoqing.png" mode=""></image>
				<text @click="send" v-if="text" class="send">发送</text>
				<image @click="openmore" v-else-if="showtype == 1" class="img2" src="@/static/imagess/jianpan.png"
					mode="">
				</image>
				<image @click="openmore" v-else-if="showtype != 1" class="img2" src="@/static/imagess/wenjian.png"
					mode=""></image>
			</view>
			<view class="chat-down-btn luyin u-flex u-row-between" v-else>
				<image @click="isjianpan = true" class="img2" src="@/static/imagess/jianpan.png" mode=""></image>
				<button class="record-btn" :class="longPress == '1' ? 'record-btn-1' : 'record-btn-2'"
					@longpress="longpressBtn()" @touchend="touchendBtn()">
					<!-- <image src="@/static/images/luyin.png" mode="" style="changyong" /> -->
					<text>{{longPress == '1' ? '按住说话' : '说话中...'}}</text>
				</button>
			</view>
			<view class="prompt-layer prompt-layer-1" v-if="longPress == '2'">
				<view class="prompt-loader">
					<view class="em" v-for="(item,index) in 15" :key="index"></view>
				</view>
				<text class="span">松手结束录音</text>
			</view>


			<view v-if="showtype == 1" class="more-box u-flex acenter">
				<!-- <view class="more-item u-flex-col u-col-center">
					<view class="item-img u-flex u-row-center">
						<image src="../static/images/more1.png" mode=""></image>
					</view>
					<view class="item-text">
						发简历
					</view>
				</view> -->
				<view class="more-item u-flex-col u-col-center" @click="toalbum">
					<view class="item-img u-flex u-row-center">
						<image src="/static/imagess/more2.png" mode=""></image>
					</view>
					<view class="item-text">
						相册
					</view>
				</view>
				<view class="more-item u-flex-col u-col-center" @click="tocapture">
					<view class="item-img u-flex u-row-center">
						<image src="/static/imagess/more3.png" mode=""></image>
					</view>
					<view class="item-text">
						拍摄
					</view>
				</view>
				<view class="more-item u-flex-col u-col-center" @click="isjianpan = false;showtype = 0">
					<view class="item-img u-flex u-row-center">
						<image src="/static/imagess/more4.png" mode=""></image>
					</view>
					<view class="item-text">
						语音
					</view>
				</view>
			</view>
			<view v-if="showtype == 2" class="changyong-box u-flex-col">
				<scroll-view scroll-y="true" class="changyong-scroll u-flex-1">
					<view class="changyong-text" v-for="(a,b) in changlist" :key="b" @click="select(a)">{{a.content}}
					</view>
				</scroll-view>
				<view class="changyong-btn u-flex u-row-between">
					<text class="text1" @click="toadd">新增</text>
					<text class="text2"></text>
					<text class="text1" @click="tolist">管理</text>
				</view>
			</view>
			<scroll-view v-if="showtype == 3" scroll-y="true" class="emoji-scroll">
				<view class="empji-box u-flex u-flex-wrap">
					<text v-for="(a,b) in emoji" :key="b" @click="changeemoji(a)">{{a}}</text>
				</view>
			</scroll-view>
			<view class="safe-area-inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	import {
		conn,
	} from '@/utils/WebIM';
	import WebIM from '@/newSDK/Easemob-chat-4.1.7.js'
	import emoji from "@/commont/emoji.js"
	const recorderManager = uni.getRecorderManager()
	var init // 录制时长计时器

	export default {
		props: {
			to: {
				typeof: String,
				default: ''
			},

			list: {
				typeof: Array,
				default: []
			},
			user_other: {
				type: Object,
				default: {}
			},
			user: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				height: '100rpx',
				showtype: 0, //默认0，1显示更多，2显示常用，3显示表情
				emoji: emoji,
				text: '',
				changlist: [],
				isjianpan: true,
				longPress: '1',
				time: 0, //录音时长
				duration: 60000, //录音最大值ms 60000/1分钟
				tempFilePath: '', //音频路径
				playStatus: 0, //录音播放状态 0:未播放 1:正在播放
			}
		},
		created() {

		},

		methods: {
			longpressBtn() {
				console.log('长按说话');
				this.longPress = '2';
				// this.countdown(60); // 倒计时
				// clearInterval(init) // 清除定时器
				recorderManager.onStop((res) => {
					console.log('onstop', res);
					this.tempFilePath = res.tempFilePath;
					this.recordingTimer(this.time);
				})
				const options = {
					duration: this.duration, // 指定录音的时长，单位 ms
					sampleRate: 16000, // 采样率
					numberOfChannels: 1, // 录音通道数
					encodeBitRate: 96000, // 编码码率
					format: 'mp3', // 音频格式，有效值 aac/mp3
					frameSize: 10, // 指定帧大小，单位 KB
				}
				this.recordingTimer();
				recorderManager.start(options);
				// 监听音频开始事件
				recorderManager.onStart((res) => {})
				recorderManager.onError((res) => {})
			},
			// 长按松开录音事件
			touchendBtn() {
				console.log('长按松开录音事件');
				let _this = this
				this.longPress = '1';
				recorderManager.onStop((res) => {
					console.log(res);
					_this.tempFilePath = res.tempFilePath
					console.log(_this.tempFilePath);
					uni.uploadFile({
						url: 'https://cbec.hdlkeji.com/api/upload/images',
						filePath: _this.tempFilePath,
						name: 'file',
						success: (res) => {
							console.log('发送语音',res);
							uni.hideLoading()
							if (JSON.parse(res.data).code == 1) {
								_this.sendluyin(JSON.parse(res.data).data.fullurl);
							} else {
								_this.$u.toast(JSON.parse(res.data).msg)
							}
						},
						fail: (e) => {
							console.log(e);
						}
					})
				})
				this.recordingTimer(this.time)
				recorderManager.stop()
			},
			recordingTimer(time) {
				var that = this;
				if (time == undefined) {
					// 将计时器赋值给init
					init = setInterval(function() {
						that.time++
					}, 1000);
				} else {
					clearInterval(init)
				}
			},
			sendluyin(url) {
				var option = {
					type: "audio",
					chatType: "singleChat",
					filename: url,
					// 消息接收方：单聊为对端用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
					to: this.to,
					body: {
						//文件 URL。
						url: url,
						//文件类型。
						type: "audio",
						//文件名。
						filename: url,
						// 音频文件时长，单位为秒。
						length: this.time,
					},
				};
				let msg = new WebIM.message.create(option);
				// 调用 `send` 方法发送该语音消息。
				conn.send(msg).then((res) => {
						// 语音消息成功发送。
						console.log("Success");
						setTimeout(() => {
							this.$emit('success', true)
						}, 800)
					})
					.catch((e) => {
						// 语音消息发送失败。
						console.log("Fail", e);
					});
			},
			send() {
				let _this = this
				if (this.text == '' || this.text == null) {
					this.$u.toast('发送消息不能为空')
					return
				}

				let id = conn.getUniqueId(); // 生成本地消息id

				let msg = new WebIM.message('txt', id); // 创建文本消息
				console.log(this.user_other);
				msg.set({
					msg: this.text, // 消息内容
					to: this.to, // 接收消息对象（用户id）
					chatType: 'singleChat', // 设置为单聊
					ext: {
						user_other: this.user_other,
						user:this.user
					},
					success: function(id, serverMsgId) {
						console.log('成功发送消息');
						setTimeout(() => {
							_this.$emit('success', true)
						}, 800);
					},
					fail: function(e) {
						console.log("发送消息失败");
					}
				});
				conn.send(msg.body);
				this.text = ''
			},
			toalbum() {
				let _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album"],
					success(img) {
						uni.showLoading({
							mask: true,
							title: "请稍后"
						})
						console.log('img', img);
						uni.uploadFile({
							url: 'https://hire.hdlkeji.com/api/common/upload',
							filePath: img.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								uni.hideLoading()
								if (JSON.parse(res.data).code == 1) {
									console.log('data', JSON.parse(res.data).data.fullurl);
									_this.sendPrivateImg(JSON.parse(res.data).data.fullurl);
								} else {
									_this.$u.toast(JSON.parse(res.data).msg)
								}
							},
							fail: (e) => {
								console.log(e);
							}
						})
					},
				});
			},
			tocapture() {
				let _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["camera"],
					success(img) {
						uni.showLoading({
							mask: true,
							title: "请稍后"
						})
						uni.uploadFile({
							url: 'https://hire.hdlkeji.com/api/common/upload',
							filePath: img.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								uni.hideLoading()
								if (JSON.parse(res.data).code == 1) {
									_this.sendPrivateImg(JSON.parse(res.data).data.fullurl);
								} else {
									_this.$u.toast(JSON.parse(res.data).msg)
								}
							},
							fail: (e) => {
								console.log(e);
							}
						})
					},
				});
			},
			sendPrivateImg(res) {
				console.log('sendPrivateImg', res);
				let option = {
					chatType: "singleChat",
					// 消息类型。
					type: "img",
					// 图片文件的 URL 地址。
					url: res,
					// 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
					to: this.to,
					ext: {
						// shopname:this.user_other.merchant_name,
						// image:this.user_other.image,
						user_other: this.user_other,
						user:this.user
					},
				};
				// 创建一条图片消息。
				let msg = new WebIM.message.create(option);
				// 调用 `send` 方法发送该图片消息。
				conn.send(msg).then((res) => {
					console.log('发送图片成功');
					setTimeout(() => {
						this.$emit('success', true)
					}, 800)
				});
			},

			select(item) {
				this.text = item.content
			},
			tolist() {
				uni.navigateTo({
					url: "/pagesC/changyong-list"
				})
			},
			toadd() {
				uni.navigateTo({
					url: "/pagesC/changyong-add"
				})
			},
			changeemoji(item) {
				this.text = this.text + item
			},
			openemoji() {
				this.showtype = this.showtype == 3 ? 0 : 3
				this.height = this.showtype == 3 ? '400rpx' : '100rpx'
			},
			openmore() {
				this.showtype = this.showtype == 1 ? 0 : 1
				this.height = this.showtype == 1 ? '300rpx' : '100rpx'
			},
			openchangyong() {
				this.showtype = this.showtype == 2 ? 0 : 2
				this.height = this.showtype == 2 ? '600rpx' : '100rpx'
				this.isjianpan = true
			}
		}
	}
</script>

<style lang="scss">
	.send {
		font-size: 26rpx;
		color: #fff;
		padding: 16rpx 20rpx;
		background: #0C66C2;
		border-radius: 16rpx;
	}

	.chat-bottom {

		.chat-down-box {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			width: 750rpx;
			background-color: #fff;

			.emoji-scroll {
				height: 300rpx;

				.empji-box {
					width: 750rpx;

					text {
						padding: 10rpx 0;
						text-align: center;
						width: 10%;
						font-size: 40rpx;
					}
				}
			}

			.changyong-box {
				height: 500rpx;
				width: 100%;

				.changyong-scroll {
					min-height: 1rpx;
					padding: 0 32rpx;
					width: 100%;
					box-sizing: border-box;
					border-top: 2rpx solid #F0F0F0;

					.changyong-text {
						border-bottom: 2rpx solid #F0F0F0;
						padding: 32rpx 0;
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
					}

					.changyong-text:last-child {
						border: none;
					}
				}

				.changyong-btn {
					height: 90rpx;
					width: 100%;
					box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.2);

					.text2 {
						height: 44rpx;
						border: 2rpx solid #E5E5E5;
					}

					.text1 {
						line-height: 90rpx;
						width: 45%;
						text-align: center;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #0C66C2;
					}
				}
			}

			.more-box {
				height: 200rpx;
				padding: 0 60rpx;
				width: 100%;
				box-sizing: border-box;

				.more-item {
					margin: 0 58rpx 0 0;

					.item-text {
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #444444;
					}

					.item-img {
						width: 114rpx;
						height: 114rpx;
						background: #F3F3F3;
						border-radius: 20rpx;
						margin-bottom: 24rpx;

						.hide {
							position: absolute;
							top: 0;
							right: 0;
							min-width: 100%;
							min-height: 100%;
							filter: alpha(opacity=0);
							opacity: 0;
							cursor: inherit;
							display: none;
						}

						image {
							width: 52rpx;
							height: 52rpx;
						}
					}
				}
			}

			.chat-down-btn {
				margin: 12rpx auto;
				width: 686rpx;
				height: 84rpx;
				background: #F3F3F3;
				border-radius: 42rpx;
				padding: 0 28rpx;

				.input {
					flex: 1;
					margin-left: 28rpx;
					font-size: 28rpx;
				}

				.img1 {
					width: 44rpx;
					height: 44rpx;
					margin: 0 28rpx;
				}

				.img2 {
					width: 44rpx;
					height: 44rpx;
				}

				.changyong {
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					border: 3rpx solid #131415;
					text-align: center;
					border-radius: 100rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #131415;
				}
			}
		}

		.record-box {
			width: 100%;
			position: relative;
		}

		.luyin button::after {
			border: none;
		}

		.luyin button {
			font-size: 14px;
			line-height: 38px;
			width: 100%;
			height: 38px;
			border-radius: 8px;
			text-align: center;
			background: #f3f3f3;
		}

		.luyin button image {
			width: 16px;
			height: 16px;
			margin-right: 4px;
			vertical-align: middle;
		}

		.record-btn-2 {
			background: rgba(255, 211, 0, 0.2);
		}

		/* 提示小弹窗 */
		.prompt-layer {
			border-radius: 8px;
			background: #fff;
			padding: 8px 16px;
			box-sizing: border-box;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}

		.prompt-layer::after {
			content: '';
			display: block;
			border: 6px solid rgba(0, 0, 0, 0);
			border-top-color: rgba(255, 211, 0, 1);
			position: absolute;
			bottom: -10px;
			left: 50%;
			transform: translateX(-50%);
		}

		.prompt-layer-1 {
			font-size: 12px;
			width: 128px;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			top: -80px;
		}

		.prompt-layer-1 .p {
			color: #000000;
		}

		.prompt-layer-1 .span {
			color: rgba(0, 0, 0, .6);
		}

		.prompt-loader .em {}

		/* 语音音阶------------- */
		.prompt-loader {
			width: 96px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6px;
		}

		.prompt-loader .em {
			display: block;
			background: #333333;
			width: 1px;
			height: 10%;
			margin-right: 2.5px;
			float: left;
		}

		.prompt-loader .em:last-child {
			margin-right: 0px;
		}

		.prompt-loader .em:nth-child(1) {
			animation: load 2.5s 1.4s infinite linear;
		}

		.prompt-loader .em:nth-child(2) {
			animation: load 2.5s 1.2s infinite linear;
		}

		.prompt-loader .em:nth-child(3) {
			animation: load 2.5s 1s infinite linear;
		}

		.prompt-loader .em:nth-child(4) {
			animation: load 2.5s 0.8s infinite linear;
		}

		.prompt-loader .em:nth-child(5) {
			animation: load 2.5s 0.6s infinite linear;
		}

		.prompt-loader .em:nth-child(6) {
			animation: load 2.5s 0.4s infinite linear;
		}

		.prompt-loader .em:nth-child(7) {
			animation: load 2.5s 0.2s infinite linear;
		}

		.prompt-loader .em:nth-child(8) {
			animation: load 2.5s 0s infinite linear;
		}

		.prompt-loader .em:nth-child(9) {
			animation: load 2.5s 0.2s infinite linear;
		}

		.prompt-loader .em:nth-child(10) {
			animation: load 2.5s 0.4s infinite linear;
		}

		.prompt-loader .em:nth-child(11) {
			animation: load 2.5s 0.6s infinite linear;
		}

		.prompt-loader .em:nth-child(12) {
			animation: load 2.5s 0.8s infinite linear;
		}

		.prompt-loader .em:nth-child(13) {
			animation: load 2.5s 1s infinite linear;
		}

		.prompt-loader .em:nth-child(14) {
			animation: load 2.5s 1.2s infinite linear;
		}

		.prompt-loader .em:nth-child(15) {
			animation: load 2.5s 1.4s infinite linear;
		}

		@keyframes load {
			0% {
				height: 10%;
			}

			50% {
				height: 100%;
			}

			100% {
				height: 10%;
			}
		}

		/* 语音音阶-------------------- */
		.prompt-layer-2 {
			top: -40px;
		}

		.prompt-layer-2 .text {
			color: rgba(0, 0, 0, 1);
			font-size: 12px;
		}
	}
</style>