This commit is contained in:
THK3121 2023-09-28 18:36:15 +08:00
parent 1a8af2f26b
commit f3305df1ca
7 changed files with 685 additions and 145 deletions

View File

@ -3,8 +3,10 @@ import oahttp from "@/utils/aa.js";
/** /**
* 绑定scoket * 绑定scoket
*/ */
export const bindScoket = (data) => oahttp.post('/im/doBindUid', data) export const bindScoket = (data) => oahttp.post('/common/im/doBindUid', data)
// 发送消息 // 发送消息
export const sendMsgApi = (data) => oahttp.post('/im/sendMessage', data) export const sendMsgApi = (data) => oahttp.post('/common/im/sendMessage', data)
// 发送文件 // 发送文件
// export const sendFileApi = (data) => oahttp.post('/im/doBindUid', data) export const sendFileApi = (data) => oahttp.post('/common/im/sendFileMsg', data)
// 消息列表
export const getMsgListApi = (data) => oahttp.post('/common/im/msgList', data)

View File

@ -627,8 +627,12 @@
padding: 20rpx 0; padding: 20rpx 0;
position: fixed; position: fixed;
box-sizing: border-box; box-sizing: border-box;
// bottom: 400px;
padding-bottom: 500px;
/* #ifdef APP-PLUS */
bottom: 0px; bottom: 0px;
padding-bottom: 10px; padding-bottom: 10px;
/* #endif */
.send-col { .send-col {
display: flex; display: flex;

View File

@ -22,7 +22,7 @@ switch (env) {
httpApi = 'https://ceshi-worker-task.lihaink.cn' //测试 httpApi = 'https://ceshi-worker-task.lihaink.cn' //测试
httpApiThree = 'https://ceshi-worker-task.lihaink.cn' //测试 httpApiThree = 'https://ceshi-worker-task.lihaink.cn' //测试
httpApiTwo = 'https://ceshi-logistics.lihaink.cn' //测试环境 httpApiTwo = 'https://ceshi-logistics.lihaink.cn' //测试环境
httpApiTest = 'http://192.168.1.12:8081' //测试环境 httpApiTest = 'http://192.168.1.16:8081' //测试环境
} }

View File

@ -1,189 +1,728 @@
<template> <template>
<view class=""> <view style="background-color: #F6F7FD;">
<view class="box" v-if="true">
<!-- <u-empty icon="/static/img/empty/data.png"></u-empty> --> <!-- <view class="storeName" style="padding-top:var(--status-bar-height) ;">
<view class="serch"> <u--image src="/static/right.png" width="50rpx" height="50rpx" @click='backFn'></u--image>
<u-search bgColor='white' height="73.6rpx" :showAction="false" placeholder="日照香炉生紫烟" <view class="" @click="timeFn">
v-model="keyword"></u-search> {{timeFn()}}
<view class="sech-btn">
搜索
</view>
</view> </view>
<view class="talk-list"> <view class="">
<view class="talk-list-li" v-for="item in [1,1,1,1,1]" @tap="navgo">
<view class="l"> </view>
<!-- 头像 --> </view> -->
<view class="avtar">
<u--image shape="circle" :showLoading="true" :src="a" width="91.12rpx" <!-- 消息 -->
height="91.12rpx"></u--image> <view class="content" @click="showPlus=false" id="content">
<view class="brage"> <view class="">
10 <u-loadmore :status="status" />
</view> </view>
<!-- -->
<view class="task-li" v-for="item,index in list" :key="index">
<!-- 对方消息 -->
<view v-if="false">
<view class="task-li-r">
<view class="" style="margin-right: 10rpx;">
<u--image :showLoading="true" :src="a" shape="circle" width="40px" height="40px"></u--image>
</view> </view>
<!-- --> <view @longpress="copyText(item.content)" class="task-li-content" v-if="item.type=='text'"
<view class=""> style="margin-right: 10rpx;">
<view class="nickname"> {{item.content}}
张三 </view>
</view> <!-- 图片 -->
<view class="value"> <view class="task-li-content" v-if="item.type=='image'" style="margin-right: 10rpx;"
张三的消息sdfksdgflkgkdfgdfkjghkjdfh g的身份和迪斯科解放和恐惧受到攻击速度来看 @tap="showOverLayFn(item.content,item.type)">
<image :src="item.content" style="width:200rpx" mode="widthFix"></image>
</view>
<!-- 视频 -->
<view class="task-li-content" v-if="item.type=='video'"
style="margin-right: 10rpx;position: relative;"
@tap="showOverLayFn(item.content,item.type)">
<u--image :showLoading="true" :src="a" width="100px" height="80px"></u--image>
<view class="yl-text">
点击预览
</view> </view>
<!-- <video :src="item.content" @loadedmetadata="onVideoLoaded" controls id="vi1"
style="width: 400rpx; height: 100px;"></video> -->
<!-- <image src="item.content" style="width:200rpx" mode="widthFix"></image> -->
<!-- <canvas canvas-id="videoCanvas1" style="width: 100px; height: 100px;"></canvas> -->
</view>
</view>
<view class="send-time">
{{item.sendTime}}
</view>
</view>
<!-- 我的消息 -->
<view class="task-li-l" v-else="true">
<!-- 文字 -->
<view class="task-li-content" @longpress="copyText(item.content)" v-if="item.type=='text'"
style="margin-right: 10rpx;">
{{item.content}}
</view>
<!-- 图片 -->
<view class="task-li-content" v-if="item.type=='image'" style="margin-right: 10rpx;"
@tap="showOverLayFn(item.content,item.type)">
<image :src="item.content" style="width:200rpx" mode="widthFix"></image>
</view>
<!-- 视频 -->
<view class="task-li-content" v-if="item.type=='video'"
style="margin-right: 10rpx;position: relative;" @tap="showOverLayFn(item.content,item.type)">
<u--image :showLoading="true" src="/static/YL1.png" width="100px" height="80px"></u--image>
<view class="yl-text">
点击预览
</view> </view>
</view> </view>
<view class="r"> <view class="">
10:58 <u--image :showLoading="true" :src="a" shape="circle" width="40px" height="40px"></u--image>
</view>
</view>
</view>
<!-- 本地 -->
<view v-if="local">
<view class="localTask" v-if="localType=='video'">
<view class="task-li-content" style="margin-right: 10rpx;">
<video :src="local" controls id="vi1" style="width: 400rpx; height: 100px;"></video>
<u-line-progress :percentage="progress" activeColor="#19BE6B"></u-line-progress>
<!-- <canvas canvas-id="videoCanvas1" style="width: 100px; height: 100px;"></canvas> -->
</view>
<view class="" style="margin-right: 10rpx;">
<u--image :showLoading="true" shape="circle" :src="a" width="40px" height="40px"></u--image>
</view>
</view>
<view class="localTask" v-if="localType=='image'">
<view class="task-li-content" style="margin-right: 10rpx;">
<!-- <image :src="local" controls id="vi1" style="width: 400rpx; height: 100px;"></image> -->
<image :src="local" style="width:200rpx" mode="widthFix"></image>
<u-line-progress :percentage="progress" activeColor="#19BE6B"></u-line-progress>
</view>
<view class="" style="margin-right: 10rpx;">
<u--image :showLoading="true" shape="circle" :src="a" width="40px" height="40px"></u--image>
</view> </view>
</view> </view>
</view> </view>
<!-- <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" /> --> <view style="height: 50px;background-color: #F6F7FD;">
</view>
</view> </view>
<view class="" v-else> <!-- 底部 -->
<Talk></Talk>
<view class="bottom">
<!-- -->
<view class="send-col">
<input type="text" class="send-ipt" @click="scrollFn(300)" v-model="value" placeholder="请输入聊天内容"
placeholder-style="color:#DDD;" :cursor-spacing="6">
<u--image :showLoading="true" src="/static/img/bussness/Plus.png" width="32px" height="32px"
@click="showPlusFn"></u--image>
<button class="send" @tap="sendFn">发送</button>
</view>
<!-- 发送照片 -->
<view class="plus" v-if="showPlus">
<view class="plus_li">
<u--image :showLoading="true" src="/static/img/bussness/XC.png" width="120rpx" height="120rpx"
@click="choseImgFn"></u--image>
<text>图片</text>
</view>
<view class="plus_li">
<u--image :showLoading="true" src="/static/img/bussness/SP.png" width="120rpx" height="120rpx"
@click="choseVideoFn"></u--image>
<text>视频</text>
</view>
<!-- asdas -->
</view>
</view> </view>
<!-- 遮罩图 -->
<u-overlay :show="show" @click="show = false">
<view class="warp">
<view class="rect" @tap.stop @longpress="saveImage(overLaySrc)" v-if="overLayType=='image'">
<image :showLoading="true" style="width: 80vw;" mode="widthFix" :src="overLaySrc"></image>
</view>
<view class="rect" @tap.stop v-if="overLayType=='video'">
<video :src="overLaySrc"></video>
</view>
</view>
</u-overlay>
</view> </view>
</template> </template>
<script> <script>
import Talk from "@/components/business/talk.vue"
import { import {
bindScoket, sendMsgApi,getMsgListApi,bindScoket,sendFileApi
sendMsgApi
} from "@/api/bussness.js" } from "@/api/bussness.js"
export default { export default {
components: {
Talk,
},
data() { data() {
return { return {
a: "https://img1.baidu.com/it/u=716638254,3920932970&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695920400&t=aeec3d0e86c23759d5f82b3757e9b442", a: "https://img1.baidu.com/it/u=716638254,3920932970&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695920400&t=aeec3d0e86c23759d5f82b3757e9b442",
keyword: "", list: [
loadConfig: { ],
page: 1, bind:false,
limit: 15, value: "",
lastpage: '', showPlus: false,
loadingText: '努力加载中', num: 0,
loadmoreText: '轻轻上拉', flags: true,
nomoreText: '暂无商机', scollNum: 999999999999,
status: 'nomore' client_id: "",
}, formId: "",
name: "",
status: "lodemore",
page: 1,
limit: 10,
formUser: "",
show: false,
overLaySrc: "",
overLayType: "",
canvasContext: null,
timer: "",
local: "",
localType: "",
progress: "",
showNotice: false
} }
}, },
methods: {
timeFn(time) {
// 1695722299000
const currentDate = new Date(); //
const targetDate = new Date(1695722299000);
if (this.isSameDay(currentDate, targetDate)) {
const hours = targetDate.getHours(); //
const minutes = targetDate.getMinutes(); //
return hours + ':' + minutes;
} else if (this.isYesterday(currentDate, targetDate)) {
return '昨天';
}
const month = targetDate.getMonth() + 1; // 01
const day = targetDate.getDate(); //
return month + '月' + day + '日';
},
isSameDay(date1, date2) {
return (
date1.getFullYear() === date2.getFullYear() &&
date1.getMonth() === date2.getMonth() &&
date1.getDate() === date2.getDate()
);
},
isYesterday(currentDate, targetDate) {
const yesterday = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - 1);
return this.isSameDay(yesterday, targetDate);
},
saveImage(src) {
uni.saveImageToPhotosAlbum({
filePath: src,
success() {
uni.showToast({
title: '保存成功',
icon: 'none'
});
},
fail() {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
},
copyText(value) {
const text = value;
uni.setClipboardData({
data: text,
success() {
uni.showToast({
title: '复制成功',
icon: 'none'
});
}
});
},
backFn() {
uni.navigateBack()
},
showOverLayFn(src, type) {
this.show = true
this.overLaySrc = src
this.overLayType = type
},
getListFn() {
// getMsgListApi({})
return
// request("POST", "enterprise/im/getMessageList", {
// limit: this.limit,
// page: this.page,
// toContactId: this.formId,
// }).then(res => {
// if (res.data.data.length == 0) {
// this.status = "nomore"
// return
// }
// this.list.unshift(...res.data.data)
// this.status = "loadmore"
// }).catch(err => {
// console.log(err, "")
// })
},
scrollFn(time) {
this.scollNum += 500
setTimeout(() => {
uni.pageScrollTo({
scrollTop: this.scollNum,
});
}, time ? time : 100)
},
generateRandId() {
var d = new Date().getTime();
var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == "x" ? r : r & 0x3 | 0x8).toString(16);
});
return uuid;
},
sendFn() {
if (!this.value) return
this.num++
this.flags = !this.flags
let data = {
from_user_id: "2",
to_user_id:"",
type: "text",
content: this.value,
msg_id: this.generateRandId(),
to_user_id: "sdas",
// to_user_avatar: "https://ceshi-worker-task.lihaink.cn/uploads/images/20230926/20230926185925e41de3046.png",
}
sendMsgApi({
...data
}).then(res => {
this.list.push(data)
console.log(data)
}).catch(err => {
console.log(err, "发送消息失败")
})
this.value = ""
// this.scrollFn(100)
return
request("POST", "enterprise/im/sendMessage", {
content: this.value,
extends: null,
fileName: "",
fileSize: 0,
file_cate: 0,
file_id: 0,
fromUser: {
...this.fromUser
},
from_user: this.fromUser.id,
id: this.generateRandId(),
is_group: 0,
is_read: 0,
sendTime: Date.now(),
status: "going",
toContactId: this.formId,
type: "text",
}).then(res => {
console.log("发送消息成功")
// this.list.push(res.data.data)
})
this.value = ""
this.scrollFn(100)
},
login() {
return
// request("POST", "common/Pub/login", {
// account: 13800000006,
// password: "123456",
// rememberMe: false,
// }).then(res => {
// uni.setStorageSync("token", (res.data.data.authToken))
// uni.setStorageSync("userinfo", JSON.stringify(res.data.data.userInfo))
// })
},
showPlusFn() {
this.showPlus = !this.showPlus
this.scrollFn(200)
},
choseImgFn() {
this.login()
let time = Date.now()
let that = this
// https://im.raingad.com/common/upload/uploadFile
uni.chooseImage({
count: 1, //
success: res => {
const tempFilePath = res.tempFilePaths[0];
const file = res.tempFiles[0]
console.log(file)
that.local = tempFilePath
that.localType = 'image'
that.showPlus = false
that.scrollFn(200)
const uploadTask = uni.uploadFile({
url: "http://192.168.112:8081/apiim/upload",
filePath: tempFilePath, //
name: 'file',
header: {
"Authorization": uni.getStorageSync("TOKEN")
},
formData: {
// message: JSON.stringify({
// "id": this.generateRandId(),
// "sendTime": Date.now(),
// "status": "going",
// "type": "image",
// // "content": "blob:https://im.raingad.com/e2ffd725-a9e7-4a01-b7da-83fd64af97a4",
// "content": `blob:${tempFilePath}`,
// "is_read": 0,
// "is_group": 0,
// "file_id": 0,
// "file_cate": 0,
// "fileName": file.name,
// "fileSize": file.size,
// "extends": null,
// "fromUser": {
// ...this.fromUser
// },
// from_user: this.fromUser.id,
// toContactId: this.formId,
// })
to_user_id: "2",
type: "image",
msg_id: this.generateRandId(),
}, //
success: function(uploadRes) {
that.local = ""
that.list.push(JSON.parse(uploadRes.data).data)
//
},
fail: function(error) {
console.log('上传失败', error);
//
}
});
uploadTask.onProgressUpdate((res) => {
this.progress = res.progress
console.log('上传进度', res.progress);
});
},
fail: err => {
console.log(err, "没有选择图片");
}
});
},
choseVideoFn() {
let that = this
uni.chooseVideo({
sourceType: ['album', 'camera'], //
maxDuration: 600, //
camera: 'back', //
success: res => {
const tempFilePath = res.tempFilePath;
that.local = res.tempFilePath
that.localType = 'video'
that.showPlus = false
that.scrollFn(200)
const uploadTask = uni.uploadFile({
url: "https://ceshi-im.lihaink.cn/common/upload/uploadFile",
filePath: tempFilePath, //
name: 'file',
header: {
"Authorization": uni.getStorageSync("token")
},
formData: {
message: JSON.stringify({
"id": this.generateRandId(),
"sendTime": Date.now(),
"status": "going",
"type": "image",
// "content": "blob:https://im.raingad.com/e2ffd725-a9e7-4a01-b7da-83fd64af97a4",
"content": `blob:${tempFilePath}`,
"is_read": 0,
"is_group": 0,
"file_id": 0,
"file_cate": 0,
"fileName": "20210719150601_4401e.jpg",
"fileSize": 72046,
"extends": null,
"fromUser": {
...this.fromUser
},
from_user: this.fromUser.id,
toContactId: this.formId,
})
}, //
success: function(uploadRes) {
that.local = ""
that.list.push(JSON.parse(uploadRes.data).data)
//
},
fail: function(error) {
uni.showToast({
title: '视频不能超过60s',
duration: 2000,
icon: 'none'
});
that.local = false
}
});
uploadTask.onProgressUpdate((res) => {
this.progress = res.progress
console.log('上传进度', res.progress);
});
},
fail: err => {
uni.showToast({
title: '视频不能超过60s',
duration: 2000,
icon: 'none'
});
}
});
},
},
onShow() {
return
let that = this
this.scrollFn(500)
this.timer = setInterval(() => {
request("POST", "enterprise/im/getMessageList", {
limit: 1,
page: 1,
toContactId: this.formId,
}).then(res => {
if (res.data.data[0]?.id != this.list[this.list.length - 1]?.id) {
this.list.push(res.data.data[0])
if (res.data.data[0].type == 'video' || res.data.data[0].type == 'image') {
this.local = ""
}
// console.log(res.data.data)
}
// this.list.unshift(...res.data.data)
// this.status = "loadmore"
})
}, 3000)
},
async onPullDownRefresh() {
this.status = "loading"
this.page++
await this.getListFn()
// console.log("")
uni.stopPullDownRefresh();
},
onLoad() { onLoad() {
let client_id = "" uni.connectSocket({
let socket = uni.connectSocket({ url: 'ws://192.168.1.16:8282'
url: "ws://192.168.1.12:8282"
}); });
let flag = true uni.onSocketOpen(function (res) {
uni.onSocketOpen(function(res) { console.log('WebSocket连接已打开');
console.log('WebSocket连接已打开');
}); });
uni.onSocketError(function (res) {
console.log('WebSocket连接打开失败请检查');
});
let that=this
uni.onSocketMessage(function(res) { uni.onSocketMessage(function(res) {
console.log('收到服务器内容:' + res.data); if(!that.bind){
if (flag) { let id= JSON.parse( uni.getStorageSync("USER_INFO")).id
bindScoket({ bindScoket({
client_id: JSON.parse(res.data).client_id, client_id:JSON.parse(res.data).client_id,
user_id: 1, user_id:id,
}).then(res => { scene:0,
console.log(res) }).then(res=>{
flag = false that.bind=true
}) })
} }
}); });
// this.getListFn()
return
uni.sendSocketMessage({
data: msg
});
}, },
onShow() {}, onUnload() {
methods: { clearInterval(this.timer)
navgo() {
console.log('页面跳转')
uni.navigateTo({
url: "/pages/business/talkDetail"
})
}
}, },
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
* { .yl-text {
margin: 0; position: absolute;
padding: 0; color: black;
top: 60%;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
} }
.box {
padding: 20rpx;
// .storeName {
// position: fixed;
// text-align: center;
// background-color: white;
// font-weight: bold;
// height: 80rpx;
// width: 100vw;
// z-index: 9;
// display: flex;
// align-items: center;
// justify-content: space-between;
// }
.topflag {
height: 80rpx;
background-color: #F6F7FD;
} }
.serch { .content {
position: relative; padding: 0 20rpx;
margin-bottom: 40rpx; // min-height: 100vh;
height: 89vh;
background-color: #F6F7FD;
overflow: auto;
padding-top: 10rpx;
// padding-bottom: 50px;
.sech-btn { .task-li {
background-color: #3274F9; margin-bottom: 20rpx;
}
.task-li-l {
display: flex;
justify-content: flex-end;
}
.task-li-r {
display: flex;
}
.task-li-content {
background-color: white;
padding: 20rpx;
border-radius: 20rpx;
color: white; color: white;
width: 115.65rpx; word-break: break-all;
height: 66.59rpx; max-width: 60vw;
text-align: center;
line-height: 66.59rpx;
border-radius: 175.23rpx 175.23rpx 175.23rpx 175.23rpx;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 6rpx;
} }
} }
.talk-list { .bottom {
.talk-list-li { background-color: white;
// height: 8vh;
// padding: 20rpx;
padding: 20rpx 0;
position: fixed;
box-sizing: border-box;
bottom: 0px;
padding-bottom: 10px;
/* #ifndef APP-PLUS */
bottom: 40px;
/* #endif */
.send-col {
display: flex; display: flex;
justify-content: space-between; align-items: center;
margin-bottom: 40rpx; justify-content: space-around;
.l {
display: flex;
.avtar {
margin-right: 20rpx;
position: relative;
.brage {
position: absolute;
background-color: red;
color: white;
width: 34rpx;
height: 34rpx;
border-radius: 28.04rpx;
font-size: 19.28rpx;
text-align: center;
lighting-color: 34rpx;
right: 0;
top: -5rpx;
}
}
.value {
width: 60vw;
margin-top: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.send-ipt {
width: 70vw;
background-color: #F5F5F5;
height: 60rpx;
border-radius: 20rpx;
padding-left: 20rpx;
} }
} }
.send {
background-color: #2573fb;
color: #fff;
height: 64rpx;
margin-left: 20rpx;
border-radius: 6rpx;
padding: 0;
width: 120rpx;
line-height: 62rpx;
&:active {
background-color: #1573fb;
}
}
.plus {
display: flex;
background-color: white;
padding: 20rpx;
.plus_li {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20rpx;
flex-wrap: wrap;
}
}
}
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {}
.localTask {
display: flex;
justify-content: flex-end;
} }
</style> </style>

View File

@ -170,11 +170,6 @@
return { return {
a: "https://img1.baidu.com/it/u=716638254,3920932970&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695920400&t=aeec3d0e86c23759d5f82b3757e9b442", a: "https://img1.baidu.com/it/u=716638254,3920932970&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695920400&t=aeec3d0e86c23759d5f82b3757e9b442",
list: [ list: [
], ],
value: "", value: "",
showPlus: false, showPlus: false,
@ -597,8 +592,8 @@
.content { .content {
padding: 0 20rpx; padding: 0 20rpx;
min-height: 100vh; // min-height: 100vh;
// height: 89vh; height: 89vh;
background-color: #F6F7FD; background-color: #F6F7FD;
overflow: auto; overflow: auto;
padding-top: 10rpx; padding-top: 10rpx;

View File

@ -97,7 +97,7 @@
</view> </view>
<view class="list"> <view class="list">
<text> <text>
详情 详情
</text> </text>
<view> <view>
<view> <view>

View File

@ -48,7 +48,7 @@ function baseRequestTwo(url, method, data, {
// }) // })
uni.request({ uni.request({
// url: Url + '/api/v1' + url, // url: Url + '/api/v1' + url,
url: Url + '/api' + url, url: Url + url,
method: method || 'GET', method: method || 'GET',
header: { header: {
...header ...header