This commit is contained in:
THK3121 2023-09-27 19:06:47 +08:00
parent bc396e3607
commit 1a8af2f26b
12 changed files with 2658 additions and 717 deletions

10
api/bussness.js Normal file
View File

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

28
api/index.js Normal file
View File

@ -0,0 +1,28 @@
// let Token = localStorage.getItem("token")
let Token = uni.getStorageSync("token")
let request = (METHOD, URL, DATA) => {
return new Promise((reslove, reject) => {
uni.request({
url: 'https://ceshi-im.lihaink.cn/' + URL,
method: METHOD,
data: {
...DATA
},
header: {
'content-type': 'application/json',
"Authorization": Token || ""
},
success: function(res) {
reslove(res)
},
fail: function(err) {
reject(err)
},
});
})
}
export default request;

View File

@ -0,0 +1,692 @@
<template>
<view style="background-color: #F6F7FD;">
<!-- <view class="storeName" style="padding-top:var(--status-bar-height) ;">
<u--image src="/static/right.png" width="50rpx" height="50rpx" @click='backFn'></u--image>
<view class="" @click="timeFn">
{{timeFn()}}
</view>
<view class="">
</view>
</view> -->
<!-- 消息 -->
<view class="content" @click="showPlus=false" id="content">
<view class="">
<u-loadmore :status="status" />
</view>
<!-- -->
<view class="task-li" v-for="item,index in list" :key="index">
<!-- 对方消息 -->
<view v-if="formId==item.fromUser.id">
<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 @longpress="copyText(item.content)" class="task-li-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="a" width="100px" height="80px"></u--image>
<view class="yl-text">
点击预览
</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-if="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 class="">
<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 style="height: 50px;background-color: #F6F7FD;">
</view>
</view>
<!-- 底部 -->
<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>
<!-- 遮罩图 -->
<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>
</template>
<script>
// import request from "@/api/index.js"
import {
bindScoket,
sendMsgApi
} from "@/api/bussness.js"
export default {
data() {
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",
list: [],
value: "",
showPlus: false,
num: 0,
flags: true,
scollNum: 999999999999,
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() {
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
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)
}).catch(err => {
console.log(err, "发送消息失败")
})
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: "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": file.name,
"fileSize": file.size,
"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) {
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();
},
created() {
let obj = {
"user_id": 2,
"account": "13800000002",
"realname": "熊大",
"avatar": "https://ceshi-im.lihaink.cn/avatar/熊大/120/2",
"email": "xiongda@kaishanlaw.com",
"sex": 2,
"role": 0,
"motto": null,
"remark": "",
"name_py": "xiongda",
"setting": null,
"is_auth": 0,
"last_login_time": 1695720745,
"last_login_ip": "221.182.82.214",
"delete_time": 0,
"status": 1,
"qrUrl": "https://ceshi-im.lihaink.cn/scan/u/oVQ5OmjEa7zD",
"displayName": "熊大",
"id": 2
}
this.fromUser = obj
console.log(this.fromUser)
return
this.getListFn()
},
onUnload() {
clearInterval(this.timer)
},
}
</script>
<style lang="scss">
.yl-text {
position: absolute;
color: black;
top: 60%;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
}
// .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;
}
.content {
padding: 0 20rpx;
min-height: 100vh;
// height: 89vh;
background-color: #F6F7FD;
overflow: auto;
padding-top: 10rpx;
// padding-bottom: 50px;
.task-li {
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;
word-break: break-all;
max-width: 60vw;
}
}
.bottom {
background-color: white;
// height: 8vh;
// padding: 20rpx;
padding: 20rpx 0;
position: fixed;
box-sizing: border-box;
bottom: 0px;
padding-bottom: 10px;
.send-col {
display: flex;
align-items: center;
justify-content: space-around;
.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>

View File

@ -1,10 +1,11 @@
let httpApiThree;
let httpApi; // 总域名
let httpApiTwo; // 物流系统域名
let httpApiTest
// const env = 'dev'; // 开发
const env = 'dev'; // 开发
// const env = 'prod'; // 生产
const env = 'prew'; // 预上线
// const env = 'prew'; // 预上线
switch (env) {
case 'prod':
@ -21,6 +22,7 @@ switch (env) {
httpApi = 'https://ceshi-worker-task.lihaink.cn' //测试
httpApiThree = 'https://ceshi-worker-task.lihaink.cn' //测试
httpApiTwo = 'https://ceshi-logistics.lihaink.cn' //测试环境
httpApiTest = 'http://192.168.1.12:8081' //测试环境
}
@ -48,6 +50,7 @@ module.exports = {
HTTP_REQUEST_URL: httpApi,
HTTP_REQUEST_URL_THREE: httpApiThree,
HTTP_REQUEST_URL_TWO: httpApiTwo,
httpApiTest: httpApiTest,
// #ifdef H5
//H5接口是浏览器地址

1388
pages.json

File diff suppressed because it is too large Load Diff

View File

@ -1,34 +1,189 @@
<template>
<view class="">
<u-empty icon="/static/img/empty/data.png"></u-empty>
<!-- <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" /> -->
</view>
<view class="">
<view class="box" v-if="true">
<!-- <u-empty icon="/static/img/empty/data.png"></u-empty> -->
<view class="serch">
<u-search bgColor='white' height="73.6rpx" :showAction="false" placeholder="日照香炉生紫烟"
v-model="keyword"></u-search>
<view class="sech-btn">
搜索
</view>
</view>
<view class="talk-list">
<view class="talk-list-li" v-for="item in [1,1,1,1,1]" @tap="navgo">
<view class="l">
<!-- 头像 -->
<view class="avtar">
<u--image shape="circle" :showLoading="true" :src="a" width="91.12rpx"
height="91.12rpx"></u--image>
<view class="brage">
10
</view>
</view>
<!-- -->
<view class="">
<view class="nickname">
张三
</view>
<view class="value">
张三的消息sdfksdgflkgkdfgdfkjghkjdfh g的身份和迪斯科解放和恐惧受到攻击速度来看
</view>
</view>
</view>
<view class="r">
10:58
</view>
</view>
</view>
<!-- <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" /> -->
</view>
<view class="" v-else>
<Talk></Talk>
</view>
</view>
</template>
<script>
export default {
data() {
return {
loadConfig: {
page: 1,
limit: 15,
lastpage: '',
loadingText: '努力加载中',
loadmoreText: '轻轻上拉',
nomoreText: '暂无商机',
status: 'nomore'
},
}
},
onLoad() {},
onShow() {},
methods: {},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
import Talk from "@/components/business/talk.vue"
import {
bindScoket,
sendMsgApi
} from "@/api/bussness.js"
export default {
components: {
Talk,
},
data() {
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",
keyword: "",
loadConfig: {
page: 1,
limit: 15,
lastpage: '',
loadingText: '努力加载中',
loadmoreText: '轻轻上拉',
nomoreText: '暂无商机',
status: 'nomore'
},
}
},
onLoad() {
let client_id = ""
let socket = uni.connectSocket({
url: "ws://192.168.1.12:8282"
});
let flag = true
uni.onSocketOpen(function(res) {
console.log('WebSocket连接已打开');
});
uni.onSocketMessage(function(res) {
console.log('收到服务器内容:' + res.data);
if (flag) {
bindScoket({
client_id: JSON.parse(res.data).client_id,
user_id: 1,
}).then(res => {
console.log(res)
flag = false
})
}
});
},
onShow() {},
methods: {
navgo() {
console.log('页面跳转')
uni.navigateTo({
url: "/pages/business/talkDetail"
})
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.box {
padding: 20rpx;
}
.serch {
position: relative;
margin-bottom: 40rpx;
.sech-btn {
background-color: #3274F9;
color: white;
width: 115.65rpx;
height: 66.59rpx;
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 {
.talk-list-li {
display: flex;
justify-content: space-between;
margin-bottom: 40rpx;
.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;
}
}
}
}
</style>

View File

@ -0,0 +1,701 @@
<template>
<view style="background-color: #F6F7FD;">
<!-- <view class="storeName" style="padding-top:var(--status-bar-height) ;">
<u--image src="/static/right.png" width="50rpx" height="50rpx" @click='backFn'></u--image>
<view class="" @click="timeFn">
{{timeFn()}}
</view>
<view class="">
</view>
</view> -->
<!-- 消息 -->
<view class="content" @click="showPlus=false" id="content">
<view class="">
<u-loadmore :status="status" />
</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 @longpress="copyText(item.content)" class="task-li-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="a" width="100px" height="80px"></u--image>
<view class="yl-text">
点击预览
</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 class="">
<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 style="height: 50px;background-color: #F6F7FD;">
</view>
</view>
<!-- 底部 -->
<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>
<!-- 遮罩图 -->
<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>
</template>
<script>
import {
sendMsgApi
} from "@/api/bussness.js"
export default {
data() {
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",
list: [
],
value: "",
showPlus: false,
num: 0,
flags: true,
scollNum: 999999999999,
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() {
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 = {
to_user_id: "2",
type: "text",
content: this.value,
msg_id: this.generateRandId(),
to_user_name: "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() {
uni.onSocketMessage(function(res) {
console.log('收到服务器内容6565' + res.data);
});
this.getListFn()
},
onUnload() {
clearInterval(this.timer)
},
}
</script>
<style lang="scss">
.yl-text {
position: absolute;
color: black;
top: 60%;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
}
// .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;
}
.content {
padding: 0 20rpx;
min-height: 100vh;
// height: 89vh;
background-color: #F6F7FD;
overflow: auto;
padding-top: 10rpx;
// padding-bottom: 50px;
.task-li {
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;
word-break: break-all;
max-width: 60vw;
}
}
.bottom {
background-color: white;
// height: 8vh;
// padding: 20rpx;
padding: 20rpx 0;
position: fixed;
box-sizing: border-box;
bottom: 0px;
padding-bottom: 10px;
.send-col {
display: flex;
align-items: center;
justify-content: space-around;
.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>

View File

@ -0,0 +1,224 @@
<template>
<view class="box">
<button @click="scrollFn(li4)">按钮</button>
<scroller style="padding-bottom: 200rpx;" :scrollable="true">
<view v-for="(item, index) in dataList" :key="item.id" ref="li">
<view class="sendtime" v-if="index %2 == 0||index==0" ref="sj">
<text class="font-size-cls" ref="sjt">10:25</text>
</view>
<!-- 对方消息 -->
<view class="talk-content">
<u--image shape="circle" :showLoading="true" :src="a" width="91.12rpx" height="91.12rpx"></u--image>
<!-- 文字 -->
<view class="talk-value">
<text class="font-size-cls">是独立建国路口附近过来的疯狂进攻打法了适当放宽是独立访客</text>
</view>
<!-- 图片 -->
<!-- 视频 -->
</view>
<!-- 我的消息 -->
<view class="talk-content" style="justify-content: flex-end;">
<view class="talk-value" style="margin-left: 0;margin-right: 30rpx;">
<text class="font-size-cls">是独立建国路口附近过来的疯狂进攻打法了适当放宽是独立访客</text>
</view>
<u--image shape="circle" :showLoading="true" :src="a" width="91.12rpx" height="91.12rpx"></u--image>
</view>
</view>
</scroller>
<!-- 底部 -->
<view class="bottom">
<!-- -->
<view class="send-col">
<view class="" style="width: 500rpx;">
<u--input class="send-ipt" placeholder="请输入内容" border="surround" v-model="value"></u--input>
</view>
<u--image :showLoading="true" src="/static/img/bussness/Plus.png" @tap="showPlusFn" width="49.07rpx"
height="49.07rpx"></u--image>
<view class="send"><text class="send-text" @click="scrollFn">发送</text></view>
</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"></u--image>
<text>图片</text>
</view>
<view class="plus_li">
<u--image :showLoading="true" src="/static/img/bussness/SP.png" width="120rpx"
height="120rpx"></u--image>
<text>视频</text>
</view>
<!-- asdas -->
</view>
<!-- 遮罩图 -->
</view>
</view>
</template>
<script>
const dom = uni.requireNativePlugin('dom')
export default {
data() {
return {
scollNum: 99999999999999999999,
value: "",
showPlus: false,
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",
dataList: [{
id: "1",
name: 'A'
}, {
id: "2",
name: 'B'
}, {
id: "3",
name: 'C'
}, {
id: "4",
name: "5"
}, {
id: "6",
name: "7"
}, {
id: "7",
name: "7"
}, {
id: "8",
name: "7"
}]
}
},
methods: {
showPlusFn() {
this.showPlus = !this.showPlus
},
scrollFn(el1) {
const el = this.$refs.li[0]
console.log(el)
dom.scrollToElement(el, {})
},
}
,
onShow() {
this.scrollFn(500)
}
}
</script>
<style lang="scss">
.box {
background-color: #F6F8FD;
padding: 20rpx;
}
.font-size-cls {
font-size: 29rpx;
}
.sendtime {
width: 750rpx;
/* background-color: red; */
/* text-align: center; */
display: flex;
flex-direction: row;
justify-content: space-around;
}
.talk-content {
display: flex;
flex-direction: row;
margin-bottom: 20rpx;
}
.talk-value {
background-color: #fff;
width: 550rpx;
margin-left: 30rpx;
border-radius: 5.26rpx 21.03rpx 21.03rpx 21.03rpx;
padding: 20rpx;
}
.bottom {
background-color: white;
// height: 8vh;
padding: 0 20rpx;
position: fixed;
box-sizing: border-box;
bottom: 0px;
// padding-bottom: 10px;
padding: 20rpx 0 40rpx 0;
width: 750rpx;
.send-col {
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: row;
// width: 700;
.send-ipt {
height: 63.08rpx;
background-color: #F5F5F5;
height: 60rpx;
padding-left: 20rpx;
}
}
.send {
background-color: #2573fb;
height: 50.82rpx;
border: none;
border-radius: 20rpx;
padding: 0;
width: 94.63rpx;
line-height: 62rpx;
// text-align: center;
// lighting-color: 50rpx;
&:active {
background-color: #1573fb;
}
.send-text {
color: white;
font-size: 26.29rpx;
line-height: 50rpx;
// margin: 0 50rpx;
margin-left: 20rpx;
}
}
.plus {
display: flex;
background-color: white;
padding: 20rpx;
flex-direction: row;
.plus_li {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20rpx;
flex-wrap: wrap;
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/img/bussness/SP.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
static/img/bussness/XC.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

118
utils/aa.js Normal file
View File

@ -0,0 +1,118 @@
import {
httpApiTest,
HEADER,
TOKENNAME,
} from '@/config/app';
import {
Toast
} from '../libs/uniApi';
// import { checkLogin } from '../libs/login';
import store from '../store';
function toLogin() {
uni.showToast({
title: '请先登录',
icon: 'none',
duration: 1000
});
}
function baseRequestTwo(url, method, data, {
noAuth = false,
noVerify = false
}) {
let Url = httpApiTest,
header = HEADER;
if (!noAuth) {
// 已经未登录了,禁止请求
if (!store.state.config.request) return Promise.reject({
msg: '未登录'
});
//登录过期自动登录
if (!store.state.app.token) {
toLogin();
store.commit("SET_REQUEST", false);
return Promise.reject({
msg: '未登录'
});
}
}
// if (store.state.app.token) header[TOKENNAME] = 'Bearer ' + store.state.app.token;
if (store.state.app.token) header[TOKENNAME] = store.state.app.token;
// header[TOKENNAME] = 'Bearer sdjflidshjgfkbdasgjmasbgvhauuiavhkesvndkaesbvkjsdbv';
return new Promise((reslove, reject) => {
// uni.showLoading({
// title: '加载中'
// })
uni.request({
// url: Url + '/api/v1' + url,
url: Url + '/api' + url,
method: method || 'GET',
header: {
...header
},
data: method != 'GET' ? data || {} : {},
params: method == 'GET' ? data : {},
success: (res) => {
// uni.hideLoading()
if (noVerify)
// reslove(res.data, res);
reslove(res.data);
else if (res.data.code == -1) {
store.commit("LOGOUT");
store.commit("SET_REQUEST", false);
reject(res.data);
} else if (res.data.code == 0) {
// uni.hideLoading();
if (res.data.show != 1 && res.data.msg != '无登录信息') {
uni.showToast({
title: res.data.msg || '请检查网络',
icon: 'none',
})
}
reject(res.data);
} else if (res.data.code == 1) {
store.commit("SET_REQUEST");
reslove(res.data);
} else if (res.data.code == 200) {
store.commit("SET_REQUEST");
reslove(res.data.data);
} else if ([410000, 410001, 410002, 40000].indexOf(res.data.code) !== -1) {
toLogin();
reject(res.data);
} else if (res.data.code == 501) {
// uni.reLaunch({
// url: '/pages/error/index'
// })
reject(res.data);
} else {
// uni.hideLoading();
uni.showToast({
title: res.data.msg || '请检查网络',
icon: 'none'
})
reject(res.data.msg || '请检查网络');
}
},
fail: (message) => {
// uni.hideLoading()
uni.showToast({
title: '网络错误',
icon: 'none'
})
reject('请求失败');
}
})
});
}
const oahttp = {};
['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
oahttp[method] = (api, data, opt) => baseRequestTwo(api, method, data, opt || {})
});
export default oahttp;