xinyilu/xinelu-applet-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
辉 2023-10-10 14:43:59 +08:00
parent 68f339a587
commit 8b0962781c
2 changed files with 204 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
api/request.js
View File

@ -1,17 +1,20 @@
import baseurl from './baseurl.js' import baseurl from './baseurl.js'
// Authorization: 'Bearer' + ' ' + uni.getStorageSync('token') // Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
var request = function(config) { var request = function(config) {
return new Promise((resolve, rejected) => { return new Promise((resolve, rejected) => {
uni.showLoading({ if (config.url != '/nurseApplet/chatRecord/updateReadStatus' && config.url !=
title: '' "/nurseApplet/chatRecord/sendMessage") {
}); uni.showLoading({
title: ''
});
}
uni.request({ uni.request({
url: baseurl + config.url, url: baseurl + config.url,
data: config.data, data: config.data,
method: config.method, method: config.method,
timeout: 10000, timeout: 10000,
header:config.header, header: config.header,
success(res) { success(res) {
uni.hideLoading(); uni.hideLoading();
resolve(res.data) resolve(res.data)
@ -24,4 +27,4 @@ var request = function(config) {
}) })
} }
export default request export default request

271
pagesC/seekadvicefrom/seekadvicefrom.vue
View File

@ -6,11 +6,13 @@
</view> --> </view> -->
<!-- 聊天渲染列表 --> <!-- 聊天渲染列表 -->
<!-- scroll-y scroll-into-view="placeholder" scroll-top="500" scroll-with-animation --> <!-- scroll-y scroll-into-view="placeholder" scroll-top="500" scroll-with-animation -->
<scroll-view scroll-y="true" :scroll-top='scrollTop'> <scroll-view scroll-y="true" :scroll-top='scrollTop' id="demo"
:style="'height:calc(100vh - '+ inputboxtop +'px)'" scroll-with-animation="true">
<view style="height: 85vh; padding-top: 200rpx;" @tap='touchend'> <view style="height: 85vh; padding-top: 200rpx;" @tap='touchend'>
<view class="snedItem" v-for="(item, index) in newsList" :key="index"> <view class="snedItem" v-for="(item, index) in newsList" :key="index">
<view class="ifSend" v-if="item.senderName == userName"> <view class="ifSend" v-if="item.senderName == userName">
<view class="sendBox" v-if="item.content">{{item.content}}</view> <view class="sendBox" v-if="item.messageType=='1'">{{item.content}}</view>
<image v-if="item.messageType=='2'" :src="baseurl+item.content" class="snedItemimage" />
<image class="head" src="@/static/headsculpture.png"></image> <image class="head" src="@/static/headsculpture.png"></image>
</view> </view>
<view class="doctorSend" v-else> <view class="doctorSend" v-else>
@ -20,10 +22,9 @@
<view class="sendBox" v-if="item.content">{{item.content}}</view> <view class="sendBox" v-if="item.content">{{item.content}}</view>
</view> </view>
</view> </view>
<!-- <image v-if="item.img" :src="item.img" mode="scaleToFill" class="touch-active" /> <video v-if="item.video" :src="item.video"></video>
<video v-if="item.video" :src="item.video"></video> -->
</view> </view>
<view class="placeholder" id="placeholder" v-if="showFunBtn"></view> <!-- <view class="placeholder" id="placeholder" v-if="showFunBtn"></view> -->
</view> </view>
</scroll-view> </scroll-view>
@ -35,7 +36,7 @@
<!-- 输入框 --> <!-- 输入框 -->
<view class="input-box-flex-grow"> <input type="text" class="contenxxt" id="input" <view class="input-box-flex-grow"> <input type="text" class="contenxxt" id="input"
v-model="formData.content" :hold-keyboard="true" :confirm-type="'send'" :confirm-hold="true" v-model="formData.content" :hold-keyboard="true" :confirm-type="'send'" :confirm-hold="true"
placeholder-style="color:#DDDDDD;" :cursor-spacing="10" /> </view> placeholder-style="color:#DDDDDD;" :cursor-spacing="10" @confirm='sendconfirm' /> </view>
<!-- 选择表情包 --> <!-- 选择表情包 -->
<!-- <image class=" icon_btn_add" :src="require('@/static/ico/emoji.png')" @tap="exprec"></image> --> <!-- <image class=" icon_btn_add" :src="require('@/static/ico/emoji.png')" @tap="exprec"></image> -->
<!-- 发送消息按钮 --> <!-- 发送消息按钮 -->
@ -80,9 +81,11 @@
getChatRecord, getChatRecord,
markRead markRead
} from '@/api/pagesC/seekadvicefrom/seekadvicefrom.js'; } from '@/api/pagesC/seekadvicefrom/seekadvicefrom.js';
import baseurl from '@/api/baseurl.js'
export default { export default {
data() { data() {
return { return {
baseurl:'',
title: '', title: '',
SOCKETURL: 'ws://192.168.16.212:8088/webSocket/1', SOCKETURL: 'ws://192.168.16.212:8088/webSocket/1',
socketOpen: false, socketOpen: false,
@ -139,6 +142,7 @@
}, },
], ],
scrollTop: 999999, scrollTop: 999999,
inputboxtop: undefined,
}; };
}, },
onReady() { //更改导航栏文字 onReady() { //更改导航栏文字
@ -147,6 +151,7 @@
}); });
}, },
onLoad(options) { onLoad(options) {
this.baseurl = baseurl;
// uni.closeSocket() // uni.closeSocket()
this.currentItem = JSON.parse(options.item) this.currentItem = JSON.parse(options.item)
this.title = this.currentItem.doctorName //导航栏标题 this.title = this.currentItem.doctorName //导航栏标题
@ -174,7 +179,12 @@
}) })
this.newsList = res.data this.newsList = res.data
setTimeout(() => { setTimeout(() => {
this.scrollTop = this.scrollTop + 1; let query = uni.createSelectorQuery().in(this);
//需要给黄色区域设置一个id标识，在这里是demo
query.select('.input-box').boundingClientRect(data => {
this.inputboxtop = data.height //赋值，待会要用
this.scrollTop = this.scrollTop + 1;
}).exec();
}, 100) }, 100)
}) })
}, },
@ -185,20 +195,41 @@
} }
markRead(markReadData) markRead(markReadData)
}, },
//键盘发送
sendconfirm(value) {
this.sendout();
},
touchend() { touchend() {
this.showFunBtn = false; //隐藏功能 this.showFunBtn = false; //隐藏功能
this.showExpre = false; //隐藏表情 this.showExpre = false; //隐藏表情
this.showOften = false; //隐藏常用 this.showOften = false; //隐藏常用
uni.hideKeyboard(); uni.hideKeyboard();
setTimeout(() => {
let query = uni.createSelectorQuery().in(this);
//需要给黄色区域设置一个id标识，在这里是demo
query.select('.input-box').boundingClientRect(data => {
this.inputboxtop = data.height //赋值，待会要用
this.scrollTop = this.scrollTop + 1;
}).exec();
}, 200)
}, },
goshowFunBtn() { goshowFunBtn() {
this.showFunBtn = true; //隐藏功能 this.showFunBtn = !this.showFunBtn; //隐藏功能
uni.hideKeyboard(); uni.hideKeyboard();
setTimeout(() => { setTimeout(() => {
this.scrollTop = this.scrollTop + 1; let query = uni.createSelectorQuery().in(this);
}, 100) //需要给黄色区域设置一个id标识，在这里是demo
query.select('.input-box').boundingClientRect(data => {
console.log(data)
this.inputboxtop = data.height //赋值，待会要用
setTimeout(() => {
this.scrollTop = this.scrollTop + 1;
}, 200)
}).exec();
}, 300)
}, },
sendout() { sendout() {
const that = this
if (this.socketOpen == false) { if (this.socketOpen == false) {
return return
} }
@ -206,38 +237,53 @@
senderName: this.userName, senderName: this.userName,
content: this.formData.content content: this.formData.content
}) })
let message = this.formData.content let obj = {
try { consultationId: that.currentItem.id,
const that = this senderId: that.currentItem.patientId,
uni.sendSocketMessage({ senderName: that.currentItem.patientName,
data: message, recipientId: that.currentItem.doctorId,
success(res) { recipientName: that.currentItem.doctorName,
console.log(that.currentItem) messageType: 1,
let obj = { sendTime: new Date(),
consultationId: that.currentItem.id, content: this.formData.content
senderId: that.currentItem.patientId,
senderName: that.currentItem.patientName,
recipientId: that.currentItem.doctorId,
recipientName: that.currentItem.doctorName,
messageType: 1,
sendTime: new Date(),
// messageType: 消息类型(0： 其他 1： 文字， 2： 图片 3： 表情 4： 视频 5： 文件 6： 链接)
content: message
}
sendMessage(obj).then(res => {
console.log(res);
setTimeout(() => {
that.scrollTop = that.scrollTop + 1;
}, 100)
})
}
})
} catch (e) {
console.log(e, '断线了')
// uni.closeSocket();
} }
this.formData.content = '' //清空输入框的文本 sendMessage(obj).then(res => {
that.formData.content = '' //清空输入框的文本
setTimeout(() => {
that.scrollTop = that.scrollTop + 1;
}, 100)
if (res.code != 200) {
}
})
// try {
// const that = this
// let message = this.formData.content
// uni.sendSocketMessage({
// data: message,
// success(res) {
// let obj = {
// consultationId: that.currentItem.id,
// senderId: that.currentItem.patientId,
// senderName: that.currentItem.patientName,
// recipientId: that.currentItem.doctorId,
// recipientName: that.currentItem.doctorName,
// messageType: 1,
// sendTime: new Date(),
// // messageType: 消息类型(0： 其他 1： 文字， 2： 图片 3： 表情 4： 视频 5： 文件 6： 链接)
// content: message
// }
// sendMessage(obj).then(res => {
// setTimeout(() => {
// that.scrollTop = that.scrollTop + 1;
// }, 100)
// })
// }
// })
// } catch (e) {
// console.log(e, '断线了')
// // uni.closeSocket();
// }
}, },
//输入常用消息 //输入常用消息
oftenc(e) { oftenc(e) {
@ -248,26 +294,50 @@
this.formData.content = !this.formData.content ? e : this.formData.content + e; this.formData.content = !this.formData.content ? e : this.formData.content + e;
}, },
//切换功能性按钮 //切换功能性按钮
switchFun() { // switchFun() {
this.showOften = false; //隐藏常用 // this.showOften = false; //隐藏常用
this.showExpre = false; //隐藏表情 // this.showExpre = false; //隐藏表情
this.showFunBtn = !this.showFunBtn; //显示功能 // this.showFunBtn = !this.showFunBtn; //显示功能
uni.hideKeyboard(); // uni.hideKeyboard();
}, // setTimeout(() => {
// let query = uni.createSelectorQuery().in(this);
// //需要给黄色区域设置一个id标识，在这里是demo
// query.select('.input-box').boundingClientRect(data => {
// this.inputboxtop = data.height //赋值，待会要用
// }).exec();
// this.scrollTop = this.scrollTop + 1;
// }, 200)
// },
//是否展示常用 //是否展示常用
oftenx() { // oftenx() {
this.showFunBtn = false; //隐藏功能 // this.showFunBtn = false; //隐藏功能
this.showExpre = false; //隐藏表情 // this.showExpre = false; //隐藏表情
this.showOften = !this.showOften; //显示常用 // this.showOften = !this.showOften; //显示常用
uni.hideKeyboard(); // uni.hideKeyboard();
}, // setTimeout(() => {
// let query = uni.createSelectorQuery().in(this);
// //需要给黄色区域设置一个id标识，在这里是demo
// query.select('.input-box').boundingClientRect(data => {
// this.inputboxtop = data.height //赋值，待会要用
// }).exec();
// this.scrollTop = this.scrollTop + 1;
// }, 100)
// },
//是否展示表情 //是否展示表情
exprec() { // exprec() {
this.showFunBtn = false; //隐藏功能 // this.showFunBtn = false; //隐藏功能
this.showOften = false; //隐藏常用 // this.showOften = false; //隐藏常用
this.showExpre = !this.showExpre; //显示表情 // this.showExpre = !this.showExpre; //显示表情
uni.hideKeyboard(); // uni.hideKeyboard();
}, // setTimeout(() => {
// let query = uni.createSelectorQuery().in(this);
// //需要给黄色区域设置一个id标识，在这里是demo
// query.select('.input-box').boundingClientRect(data => {
// this.inputboxtop = data.height //赋值，待会要用
// }).exec();
// this.scrollTop = this.scrollTop + 1;
// }, 100)
// },
//点击宫格时触发 //点击宫格时触发
tapGrid(index) { tapGrid(index) {
if (index == 0) { if (index == 0) {
@ -288,29 +358,70 @@
}, },
//发送图片 //发送图片
chooseImage(sourceType) { chooseImage(sourceType) {
console.log(sourceType, "sourceType"); var that = this
if (this.socketOpen == false) {
return
}
uni.chooseImage({ uni.chooseImage({
sourceType, sourceType,
sizeType: ["compressed"], sizeType: ["compressed"],
success: (res) => { success: (res) => {
console.log(res, "kkkk"); that.showFunBtn = false;
this.showFunBtn = false; setTimeout(() => {
for (let i = 0; i < res.tempFilePaths.length; i++) { let query = uni.createSelectorQuery().in(this);
const params = { //需要给黄色区域设置一个id标识，在这里是demo
contentType: 3, query.select('.input-box').boundingClientRect(data => {
content: res.tempFilePaths[i], console.log(data)
}; this.inputboxtop = data.height //赋值，待会要用
this.newsList.push({ setTimeout(() => {
img: res.tempFilePaths[i] this.scrollTop = this.scrollTop + 1;
}, 200)
}).exec();
}, 300)
res.tempFilePaths.forEach(e => {
that.newsList.push({
imgurl: e,
senderName: that.userName,
}) })
console.log(this.newsList, '图片'); uni.uploadFile({
} url: baseurl +
'/nurseApplet/consultationInfo/uploadConsultationFile',
filePath: e,
name: 'file',
timeout: 5000,
success(resp) {
console.log(resp)
var fileurls = JSON.parse(resp.data)
let obj = {
consultationId: that.currentItem.id,
senderId: that.currentItem.patientId,
senderName: that.currentItem.patientName,
recipientId: that.currentItem.doctorId,
recipientName: that.currentItem.doctorName,
messageType: 2,
sendTime: new Date(),
content: fileurls.fileUrl
}
sendMessage(obj).then(respp => {
console.log(respp)
})
}
})
})
}, },
}); });
}, },
//用户触摸屏幕的时候隐藏键盘 //用户触摸屏幕的时候隐藏键盘
touchstart() { touchstart() {
uni.hideKeyboard(); uni.hideKeyboard();
setTimeout(() => {
let query = uni.createSelectorQuery().in(this);
//需要给黄色区域设置一个id标识，在这里是demo
query.select('.input-box').boundingClientRect(data => {
this.inputboxtop = data.height //赋值，待会要用
this.scrollTop = this.scrollTop + 1;
}).exec();
}, 200)
}, },
scoket() { scoket() {
const that = this const that = this
@ -324,7 +435,6 @@
that.socketOpen = true that.socketOpen = true
that.reset() that.reset()
}) })
uni.onSocketError(err => { uni.onSocketError(err => {
console.log('webScoket连接打开失败', err); console.log('webScoket连接打开失败', err);
if (err && err.code != 1000) { if (err && err.code != 1000) {
@ -336,7 +446,6 @@
}, 3 * 1000) }, 3 * 1000)
} }
}) })
uni.onSocketClose(err => { uni.onSocketClose(err => {
console.log('webScoket连接关闭', err); console.log('webScoket连接关闭', err);
if (err && err.code !== 1000) { if (err && err.code !== 1000) {
@ -348,7 +457,6 @@
}, 3 * 1000) }, 3 * 1000)
} }
}) })
uni.onSocketMessage(res => { uni.onSocketMessage(res => {
console.log("webScoket监听收到的信息", res); console.log("webScoket监听收到的信息", res);
that.newsList.push({ that.newsList.push({
@ -373,9 +481,9 @@
}, },
fail(err) { fail(err) {
console.log('心跳发送失败，重新连接...'); console.log('心跳发送失败，重新连接...');
socketOpen = true that.socketOpen = true
uni.connectSocket({ uni.connectSocket({
url: this.SOCKETURL url: that.SOCKETURL
}) })
} }
}) })
@ -387,7 +495,6 @@
}) })
} }
}, },
onUnload() { onUnload() {
clearInterval(this.timeoutObj); clearInterval(this.timeoutObj);
if (this.socketOpen == true) { if (this.socketOpen == true) {
@ -402,6 +509,10 @@
background-color: #f3f3f3; background-color: #f3f3f3;
} }
#demo {
transition: all 0.3s ease;
}
.content { .content {
.input-box { .input-box {
position: fixed; position: fixed;
@ -558,6 +669,12 @@
.snedItem { .snedItem {
padding: 0rpx 30rpx 40rpx 30rpx; padding: 0rpx 30rpx 40rpx 30rpx;
.snedItemimage {
width: 200rpx;
height: 200rpx;
border-radius: 3rpx;
}
} }
.ifSend { .ifSend {
@ -610,6 +727,8 @@
.placeholder { .placeholder {
height: 200rpx; height: 200rpx;
transition: all 0.3s ease;
transform: translateY(0%) !important;
} }
.title { .title {