pet_uni/pages/ChatDetail/index.vue

<template>
	<HeaderNav title="2023.5.3订单" :is-back="true"></HeaderNav>
	<view class="body-background" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}"></view>
	<view class="app-wallpaper">
		<view class="detail-container" :style="{height:windowHeihgt-40+'px'}">
			<view class="detail-content-container">
				<view class="detail-content" style="height: calc(100%);overflow: auto;padding-bottom: 150px;box-sizing: border-box;">
					<view :class="item.send_user_id === user_id ? 'chat-item my-chat row' : 'chat-item other-chat row'" v-for="(item, index) in messageList" wx:key="index">
						<view class="chat-item-content  row">
							<view class="chat-avator " v-if="item.send_user_id !== user_id">
								<image mode="aspectFill" class="img" :src="item.avatar ? item.avatar : user.avatar" />
							</view>
							<view class="chat-content-container " style="max-width: calc(100% - 50px);">
								<view class="chat-time">{{ item.create_time }}</view>
								<view class="chat-content" style="word-break: break-all;">{{ item.info }}</view>
							</view>
							<view class="chat-avator " v-if="item.send_user_id === user_id">
								<image mode="aspectFill" class="img" :src="item.avatar ? item.avatar : user.avatar" />
							</view>
						</view>
					</view>
<!--					<view class="chat-item other-chat row">-->
<!--						<view class="chat-item-content  row">-->
<!--							<view class="chat-avator  ">-->
<!--								<image mode="aspectFill" class="img" :src="user.avatar" />-->
<!--							</view>-->
<!--							<view class="chat-content-container ">-->
<!--								<view class="chat-time">2023/06/16 13:24</view>-->
<!--								<view class="chat-content">好的，您家狗狗脾气如何呀</view>-->
<!--							</view>-->
<!--						</view>-->
<!--					</view>-->

<!--					<view class="chat-item my-chat row">-->
<!--						<view class="chat-item-content  row">-->
<!--							<view class="chat-content-container ">-->
<!--								<view class="chat-time">2023/06/16 13:24</view>-->
<!--								<view class="chat-content">狗狗脾气很好，不用担心</view>-->
<!--							</view>-->
<!--							<view class="chat-avator ">-->
<!--								<image mode="aspectFill" class="img" :src="user.avatar" />-->
<!--							</view>-->
<!--						</view>-->
<!--					</view>-->
				</view>
				
				<view class="detail-input-group-container">
					<view class="detail-input-group row">

						<view class="col">
              <input class="detail-input" v-model="message" type="text"/>
            </view>
							<MzButton
									title="发送"
									font-color="#fff"
									button-color="#4DC3B8"
									button-width="auto"
									class="detail-input-button"
                  @click.stop="sendMessage"
              >
							</MzButton>
					</view>
				</view>
			</view>
			<view class="detail-background-container">
				<view class="detail-background"></view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {
		imghost
	} from '@/config/host'
	import api from '../../utils/functions.js';
	import HeaderNav from '../../components/HeaderNav/Index.vue';
	import MzButton from '../../components/MzButton/Index.vue';
	import {getToken} from "@/api/chat";
	import log from "@/utils/log";
	export default {
		components: {
			HeaderNav,
			MzButton
		},
		data: {
			windowHeihgt: 1000,
			staticImage: {
				wallpaperBgImage: imghost + '/static/image/background.png',
			},
			user: {
				avatar: imghost + '/static/image/banner.png',
				nickname: '清晨的风',
				background: imghost + '/static/image/banner.png',
				sex: '女',
				phone: '15012345678',
				coupons: 221,
				id: 88685,
				birthday: '2002-05-11',
			},
			ableChat: false,
			message:'',
			chat_id:0,
			type:0,
			user_id:0,
			messageList:[]
		},
		onLoad(options) {
			this.getToken(options.id);
		},
		methods: {
				getToken(order_id){
					getToken(order_id, this.$store.state.userInfo.store_id ? 2 : 1).then(data => {
						this.chat_id = data.data.chat_id;
						this.type = data.data.type;
						this.user_id = data.data.user_id;
						uni.connectSocket({
							url: data.data.chat_url
						});

						uni.onSocketOpen( (res) => {
							this.ableChat = true;
							console.log('WebSocket连接已打开！');
						});

						uni.onSocketClose((res) => {
							this.ableChat = false;
							console.log('WebSocket 已关闭！');
						});

						uni.onSocketMessage((res) => {
							this.newMessage(res);
						})
					})
				},
			newMessage(messages){
				log(messages);
				messages = JSON.parse(messages.data);
				log(messages);
				if (messages.do_type === 'init'){
					this.messageList = messages.data;
					return;
				}

				this.messageList.push(messages);
				log(this.messageList);
			},
			sendMessage(){
					if (!this.message){
						return uni.showToast({
							title:"消息不能为空",
							icon:'error'
						})
					}
				uni.showLoading({
					title: '消息发送中...',
					mask:true,
				});
				if (!this.ableChat) {
					setInterval((t) =>{
						if (!this.ableChat) {
							return;
						}
						clearInterval(t);
						uni.sendSocketMessage({
							data:this.message
						});
						uni.hideLoading();
					}, 50);
				}else{
					uni.sendSocketMessage({
						data:JSON.stringify({
							do_type:'add',
							info:this.message,
							msg_type:1,
							send_user_id:this.user_id,
							type:this.type,
							chat_id:this.chat_id,
						})
					});
					uni.hideLoading();
					this.message = '';
				}
			}
		},
		onPageScroll(res) {

		},
		onUnload() {
			try{
				uni.closeSocket();
			}catch{}
		},
		created() {
			this.windowHeihgt = api.navHeight().windowHeihgt;
		}
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>