<template>
|
<view>
|
<v-header class="nav_bar m-y-xs v-header menu" :left-text="$t('base.a1')"
|
:left-arrow="true">
|
<template #title>
|
|
<view @click="connect()">
|
<text class="cuIcon-emojifill" :style="{ color: online}"></text>
|
{{to_name}}
|
</view>
|
</template>
|
<template #right>
|
<v-link to="/pages/otc/order" class="d-flex align-center">
|
{{$t('otc.k2')}}
|
</v-link>
|
</template>
|
</v-header>
|
<view>
|
<view class="cu-bar"></view>
|
<!-- <view class="cu-chat "></view> -->
|
<view class="cu-chat" v-for="item in loadInfo" :key="item.id">
|
<view class="cu-item self" v-if="fromid==item.fromid" >
|
<view class="main">
|
<view class="content bg-green shadow" v-if="item.type==1">
|
<text>{{item.content}}</text>
|
</view>
|
<image v-else :src="'https://socket.kocoinlab.com/uploads/'+`${item.content}`" mode='widthFix' />
|
</view>
|
<view class="cu-avatar radius"
|
style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);">
|
</view>
|
<view class="date">{{new Date(parseInt(item.time)).toTimeString().substr(0, 8)}}</view>
|
</view>
|
<view class="cu-item" v-else>
|
<view class="cu-avatar radius"
|
style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);">
|
</view>
|
<view class="main">
|
<view class="content shadow" v-if="item.type==1">
|
<text>{{item.content}}</text>
|
</view>
|
<image v-else :src="'https://socket.kocoinlab.com/uploads/'+`${item.content}`" mode='widthFix' />
|
</view>
|
|
<view class="date ">{{new Date(parseInt(item.time)).toTimeString().substr(0, 8)}}</view>
|
</view>
|
|
</view>
|
<view class="cu-info d-flex align-center fixed">
|
<text class="cuIcon-localcationfill text-blue "></text>
|
</view>
|
<view class="cu-bar"></view>
|
<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
|
<view class="action">
|
<text class="cuIcon-sound text-grey"></text>
|
</view>
|
<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
|
@focus="InputFocus" @blur="InputBlur" v-model="myInput"></input>
|
<view class="action">
|
<text class="cuIcon-picfill text-grey" @click="uploadimg()"></text>
|
</view>
|
<button class="cu-btn bg-green shadow" @click="sendMsg()">发送</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
// import Mytext from '@/components/my-text/my-text.vue'
|
import app from "app.js";
|
import Profile from "@/api/profile";
|
import Member from "@/api/member";
|
import {
|
mapState,
|
mapActions
|
} from "vuex";
|
import Setting from "@/api/setting.js";
|
export default {
|
name: "chat",
|
data() {
|
return {
|
fromid:258659,
|
toid:258657,
|
from_head:'',
|
to_head: '',
|
online: 'gray',
|
to_name:'',
|
socketTask: false,
|
msg: false,
|
myInput: '',
|
InputBottom: 0,
|
API_URL: "https://socket.kocoinlab.com/index.php/api/chat2/",
|
loadInfo:[],
|
};
|
},
|
|
|
computed: {
|
...mapState({
|
user: "user",
|
}),
|
isLogin() {
|
return Boolean(uni.getStorageSync("token"));
|
},
|
showMsg() {
|
if (this.connected) {
|
if (this.msg) {
|
return '收到消息：' + this.msg
|
} else {
|
return '等待接收消息'
|
}
|
} else {
|
return '尚未连接'
|
}
|
}
|
},
|
methods: {
|
|
connect() {
|
this.getUserInfo();
|
var myDate = Date.now()
|
this.socketTask = uni.connectSocket({
|
url: "wss://socket.kocoinlab.com/ws1",
|
success(res) {
|
console.log('ws接口跑通了')
|
},
|
fail(err) {
|
console.log('ws接口异常')
|
}
|
})
|
console.log(this.socketTask);
|
this.socketTask.onOpen((res) => {
|
console.log('onOpen', res);
|
})
|
this.socketTask.onError((err) => {
|
console.log('onError', err);
|
})
|
this.socketTask.onMessage((res) => {
|
console.log(res)
|
var jsonData = JSON.stringify(res); // 转成JSON格式
|
var result = JSON.parse(jsonData); // 转成JSON对象
|
let message = eval("(" + res.data + ")")
|
// let obj = JSON.parse(res.data)
|
console.log("-----------websocket接收数据-------")
|
console.log(message.type)
|
switch (message.type) {
|
case 'init':
|
let bind = '{"type":"bind","fromid":"' + this.fromid + '"}'
|
this.socketTask.send({
|
data:bind,
|
success(res) {
|
console.log("--------初始化发送bind成功-----")
|
console.log(res);
|
},
|
fail(err) {
|
console.log("--------初始化发送bind失败-----")
|
console.log(err);
|
}
|
|
})
|
this.get_head(this.fromid, this.toid);
|
this.get_name(this.toid);
|
this.message_load();
|
let online = '{"type":"online","toid":' + this.toid + ',"fromid":' + this.fromid + '}';
|
this.socketTask.send({
|
data:online,
|
success(res) {
|
setTimeout(() => {
|
uni.pageScrollTo({
|
scrollTop: 2000000,
|
duration: 0
|
})
|
}, 50)
|
console.log("--------初始化发送online成功-----")
|
console.log(res);
|
},
|
fail(err) {
|
console.log("--------初始化发送online失败-----")
|
console.log(err);
|
}
|
});
|
this.changeNoRead();
|
return;
|
case 'text':
|
let tomessage = {"content": message.data,"type": 1,"time": myDate}
|
//推送到页面渲染发送的消息
|
console.log("=====我从ws接收到聊天信息了======"+message.data)
|
this.loadInfo.push(tomessage)
|
// this.myInput = ''
|
setTimeout(() => {
|
uni.pageScrollTo({
|
scrollTop: 2000000,
|
duration: 0
|
})
|
}, 50)
|
this.online = "green";
|
this.changeNoRead();
|
return;
|
case 'say_img':
|
let toomessage = {"content": message.data,"type": 2,"time": myDate}
|
//推送到页面渲染发送的消息
|
this.loadInfo.push(toomessage)
|
this.myInput = ''
|
setTimeout(() => {
|
uni.pageScrollTo({
|
scrollTop: 2000000,
|
duration: 0
|
})
|
}, 50)
|
this.changeNoRead();
|
return;
|
case 'save':
|
this.save_Message(message);
|
if (message.isread == 1){
|
this.online = "green";
|
|
}else {
|
this.online = "gray";
|
}
|
return;
|
case 'online':
|
if (message.status == 1){
|
console.log("===online在线====")
|
this.online = "green";
|
this.$forceUpdate();
|
}else {
|
console.log("===online不在线====")
|
this.online = "gray";
|
this.$forceUpdate();
|
}
|
return;
|
}
|
})
|
// this.socketTask.onClose((res) => {
|
// // this.connected = false
|
// // this.startRecive = false
|
// this.socketTask = false
|
// this.msg = false
|
// console.log('onClose', res)
|
// })
|
// console.log('task', this.socketTask)
|
},
|
|
close() {
|
if (this.socketTask && this.socketTask.close) {
|
this.socketTask.close()
|
}
|
},
|
|
//保存聊天信息
|
save_Message(message) {
|
uni.request({
|
method: 'POST',
|
url: this.API_URL + "save_message",
|
data: message,
|
success: (res) => {
|
console.log('=====我再保存信息=====');
|
console.log(res);
|
}
|
})
|
|
},
|
//更改未读信息
|
changeNoRead() {
|
uni.request({
|
method: 'POST',
|
url: this.API_URL + "changeNoRead",
|
data: {
|
"fromid": this.fromid,
|
"toid": this.toid
|
},
|
success: (res) => {
|
console.log(res.data);
|
}
|
})
|
},
|
//获取头部信息
|
get_head() {
|
uni.request({
|
method: 'POST',
|
url: this.API_URL + "getHead",
|
data: {
|
"fromid": this.fromid,
|
"toid": this.toid
|
},
|
success: (res) => {
|
console.log(res);
|
this.from_head = res.from_head;
|
this.to_head = res.to_head;
|
}
|
})
|
},
|
|
//获取名字
|
get_name() {
|
uni.request({
|
url:this.API_URL + "get_name",
|
method: 'POST',
|
data: {
|
uid: this.toid,
|
},
|
dataType: 'json',
|
success: (res) => {
|
console.log(res);
|
console.log("获取名字"+res.data.data.toname)
|
this.to_name = res.data.data.toname;
|
}
|
})
|
},
|
//加载聊天记录
|
message_load(toid) {
|
// this.getUserInfo()
|
let that = this
|
uni.request({
|
method: 'POST',
|
url: that.API_URL + "load",
|
data: {
|
"fromid": that.fromid,
|
"toid": that.toid
|
},
|
success: (res) => {
|
console.log(res);
|
var data = res.data
|
if (data.code == 0) {
|
that.loadInfo = data.data.message
|
setTimeout(() => {
|
uni.pageScrollTo({
|
scrollTop: 2000000,
|
duration: 0
|
})
|
}, 50)
|
// console.log(that.loadInfo)
|
// that.$forceUpdate()
|
} else{
|
console.log("false")
|
}
|
}
|
})
|
},
|
|
//获取toid/fromid,然后加载聊天记录
|
getUserInfo() {
|
Profile.getUserInfo().then((res) => {
|
this.fromid = res.data.user_id
|
console.log("fromid-------"+this.fromid)
|
});
|
},
|
InputFocus(e) {
|
this.InputBottom = e.detail.height
|
},
|
InputBlur(e) {
|
this.InputBottom = 0
|
},
|
// 文本内容发送
|
sendMsg() {
|
var myDate = Date.now()
|
|
if(this.myInput!=""&&this.myInput!=null&&this.myInput!=undefined){
|
|
let message = '{"data":"'+this.myInput+'","type":"say","fromid":"'+this.fromid+'","toid":"'+this.toid+'"}';
|
let mymessage = {
|
"content": this.myInput,
|
"type": 1,
|
"fromid": this.fromid,
|
"toid": this.toid,
|
"time": myDate
|
}
|
console.log(message)
|
// //ws发送输入的文字消息
|
// this.save_Message(message);
|
this.socketTask.send({
|
data:message,
|
success(res) {
|
console.log("--------发送输入消息成功-----")
|
console.log(res);
|
},
|
fail(err) {
|
console.log("--------输入消息失败-----")
|
console.log(err);
|
}
|
})
|
// console.log('data1发送的：', JSON.stringify(data1))
|
|
//推送到页面渲染发送的消息
|
this.loadInfo.push(mymessage)
|
this.myInput = ''
|
setTimeout(() => {
|
uni.pageScrollTo({
|
scrollTop: 2000000,
|
duration: 0
|
})
|
}, 50)
|
uni.setStorage({
|
key: 'loadInfo',
|
data: JSON.stringify(this.loadInfo),
|
success: function() {
|
console.log("success")
|
}
|
})
|
}
|
else{
|
console.log("请输入消息")
|
}
|
},
|
},
|
|
//加载页面初始化
|
onLoad(query) {
|
this.toid= query.id;
|
this.connect();
|
|
},
|
onShow() {
|
|
}
|
// this.getUserInfo()
|
// let that = this
|
// this.toid= query.id
|
// console.log("onload to id----"+this.toid)
|
// uni.setStorage({
|
// key: 'toid',
|
// data: that.toid,
|
// success: function () {
|
// console.log('success');
|
// }
|
// });
|
// uni.getStorage({
|
// key:'toid',
|
// success:function(res){
|
// console.log(res.data)
|
// }
|
// });
|
// that.message_load();
|
|
// uni.hideLoading()
|
// if (this.socketTask && this.socketTask.close) {
|
// this.socketTask.close()
|
// }
|
// },
|
|
// uploadimg(){
|
// uni.chooseImage({
|
// success: (chooseImageRes) => {
|
// const tempFilePaths = chooseImageRes.tempFilePaths;
|
// console.log(tempFilePaths)
|
// uni.uploadFile({
|
// url: 'http://web.kocoinlab.com:8001/items/uploadfile/', //仅为示例，非真实的接口地址
|
// filePath: tempFilePaths[0],
|
// name: 'file',
|
// formData: {
|
// 'user': {'test':"11"}
|
// },
|
// success: (uploadFileRes) => {
|
// console.log(uploadFileRes.data);
|
// var myDate = new Date()
|
// var obj = JSON.parse(uploadFileRes.data)
|
// let data2 = {
|
// myId:this.myIds,
|
// type:'img',
|
// content:obj.filename,
|
// time:myDate.toLocaleString()
|
// }
|
// console.log('发送图片的时候ws消息',JSON.stringify(data2))
|
// //ws发送输入的文字消息
|
// this.ws3.send({
|
// data:JSON.stringify(data2),
|
// success(res) {
|
// console.log(res);
|
// },
|
// fail(err) {
|
// console.log(err);
|
// }
|
// })
|
// //推送到页面渲染发送的消息
|
// this.chatList.push(data2)
|
// this.myInput = ''
|
// setTimeout(()=>{
|
// uni.pageScrollTo({
|
// scrollTop: 2000000,
|
// duration : 0
|
// })
|
// },50)
|
|
// uni.setStorage({
|
// key:'chatList',
|
// data:JSON.stringify(this.chatList),
|
// success:function(){
|
// console.log("success")
|
// }
|
// })
|
|
// }
|
// });
|
// }
|
// });
|
// },
|
|
}
|
</script>
|
|
<style>
|
page {
|
padding-bottom: 100upx;
|
}
|
|
.online {
|
position: fixed;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
