Skip to content

F
frontend-h5
Commit c30c48cd authored by songrui's avatar songrui
Browse files
Options

im聊天页面

parent dda80af2
Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 63 deletions
src/assets/image/nim/avatar-doctor.svg 0 → 100644
View file @ c30c48cd
<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5920_147382)">
<rect width="150" height="150" rx="48" fill="#E6EBFF"/>
<path d="M64.7405 92.3131L54.9307 95.8804L48.9855 122.337L62.9569 190.113H82.5764L109.33 144.037L98.3315 95.8804L87.9272 93.7995L64.7405 92.3131Z" fill="#A4C5FA"/>
<circle cx="97.7829" cy="64.5015" r="6" fill="#F9B1B3"/>
<circle cx="51.2768" cy="64.5015" r="6" fill="#F9B1B3"/>
<path d="M55.0628 38.607C55.0628 38.607 66.5036 35.6336 73.8782 36.2873C82.4395 37.0461 92.0654 38.3852 94.6697 43.5042C97.1613 48.4013 99.1373 71.2548 92.1782 77.6126C85.2191 83.9703 80.5788 86.6741 74.6515 86.5478C68.7242 86.4214 61.3611 83.0777 56.6093 78.128C51.2825 72.5796 51.9911 68.1764 51.2825 61.3316C50.3562 52.3829 55.0628 38.607 55.0628 38.607Z" fill="#F9D0D1"/>
<path d="M76.4804 87.1956C64.3502 87.4469 56.4947 91.4718 54.4232 93.5246L74.1566 102.484L96.7291 93.48C95.2444 91.5813 88.6106 86.9442 76.4804 87.1956Z" fill="#AFB7E9"/>
<path d="M94.082 122.744C93.6637 140.894 84.0777 174.858 79.337 189.572L83.1428 207.527L125.434 205.624C126.325 176.523 127.33 117.131 124.219 112.373C121.107 107.615 100.815 95.7219 91.1743 90.647C92.3178 93.7836 94.5003 104.594 94.082 122.744Z" fill="white"/>
<path d="M55.9183 122.744C56.3366 140.894 65.9225 174.858 70.6632 189.572L66.8575 207.527L24.5663 205.624C23.6751 176.523 22.6705 117.131 25.7816 112.373C28.8927 107.615 49.1849 95.7219 58.826 90.647C57.6825 93.7836 55.5 104.594 55.9183 122.744Z" fill="white"/>
<path d="M109.272 117.495C110 113.128 97.5105 97.7767 91.1745 90.647C92.318 93.7836 94.5005 104.594 94.0822 122.744C93.6639 140.894 84.078 174.858 79.3373 189.572C89.8247 174.815 108.072 147.508 110.41 135.765C111.041 132.596 105.759 128.366 100.736 126.073C103.278 125.033 108.544 121.862 109.272 117.495Z" fill="#DCE4FD"/>
<path d="M40.7283 117.495C39.9999 113.128 52.4898 97.7767 58.8258 90.647C57.6822 93.7836 55.4998 104.594 55.918 122.744C56.3363 140.894 65.9223 174.858 70.663 189.572C60.1756 174.815 41.9286 147.508 39.5899 135.765C38.9589 132.596 44.2412 128.366 49.2647 126.073C46.7227 125.033 41.4567 121.862 40.7283 117.495Z" fill="#DCE4FD"/>
<path d="M112.496 122.387C112.816 127.053 113.253 134.888 111.388 136.905C110.437 137.934 108.835 138.191 107.353 138.206" stroke="#928BC8" stroke-width="1.5" stroke-linecap="round"/>
<path d="M97.62 121.939C96.6768 126.762 96.6069 134.414 98.053 136.473C98.7908 137.524 100.335 137.785 101.81 137.798" stroke="#928BC8" stroke-width="1.5" stroke-linecap="round"/>
<path d="M103.036 138.068C102.924 138.78 102.033 139.23 101.047 139.074C100.06 138.918 99.333 138.333 99.4642 137.503C99.6111 136.574 100.468 136.34 101.454 136.496C102.441 136.652 103.149 137.356 103.036 138.068Z" fill="white"/>
<path d="M105.99 138.352C106.049 139.07 106.903 139.586 107.899 139.505C108.894 139.423 109.663 138.894 109.594 138.056C109.517 137.119 108.681 136.822 107.685 136.903C106.69 136.985 105.931 137.633 105.99 138.352Z" fill="white"/>
<path d="M97.4347 123.027C97.6535 118.171 99.5074 112.187 105.467 112.359C112.244 112.554 112.297 119.908 112.556 123.675" stroke="#5A578F" stroke-width="2"/>
<path d="M47.4882 113.917C47.6904 104.818 48.3775 97.1152 56.5593 92.2874C64.7412 87.4596 85.494 82.7435 97.3455 93.9654C103.646 99.9311 105.88 106.519 105.728 112.787" stroke="#5A578F" stroke-width="2"/>
<path d="M66.438 90.6309V82.0437H83.7559V90.168L92.1587 94.5658C90.4431 99.0151 84.6592 107.898 75.2482 107.837C65.8371 107.775 59.7575 98.9838 57.7969 94.5859L66.438 90.6309Z" fill="#F8BEB4"/>
<path d="M75.2482 57.8941C72.2332 57.7806 58.3241 62.8199 51.5113 65.3736C51.1381 75.3765 61.0708 86.1007 73.9328 86.1007C88.5509 86.1007 96.7158 74.1257 96.7158 66.0577C90.1446 63.2203 78.2632 58.0076 75.2482 57.8941Z" fill="white"/>
<circle cx="47.243" cy="118.603" r="6.96304" fill="#5A578F"/>
<circle cx="47.2431" cy="118.603" r="4.11451" fill="#ACA6DB"/>
<path d="M86.1843 42.2776C91.3577 41.9066 95.6404 45.0101 97.8281 46.5585C103.183 29.7989 96.3296 24.5496 90.3419 23.5139C85.0763 22.6031 72.5965 27.7766 61.427 28.2503C52.8358 28.6146 50.1568 25.4266 47.5701 22.9673C42.1205 34.7174 49.0487 47.7429 57.9171 48.4716C66.7855 49.2003 76.8437 42.9474 86.1843 42.2776Z" fill="#1D195A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M95.8306 54.0156C93.7261 52.9317 91.77 49.9798 90.927 46.2427C89.7703 41.1148 91.1476 36.4501 94.0033 35.8238C96.8589 35.1976 99.8107 38.5574 100.967 43.6854C101.931 47.9567 101.048 53.7675 98.192 54.3938C98.0647 54.4217 97.9366 54.4411 97.808 54.4523V58.2975C97.808 58.8435 97.3653 59.2862 96.8193 59.2862C96.2732 59.2862 95.8306 58.8435 95.8306 58.2975V54.0156Z" fill="#1D195A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.57 54.0158C54.6745 52.932 56.6308 49.9801 57.4738 46.2428C58.6305 41.1149 57.2532 36.4502 54.3976 35.8239C51.5419 35.1977 48.5901 38.5575 47.4334 43.6855C46.4699 47.9568 47.3531 53.7676 50.2088 54.3939C50.336 54.4218 50.464 54.4412 50.5926 54.4524V58.2976C50.5926 58.8436 51.0352 59.2863 51.5813 59.2863C52.1273 59.2863 52.57 58.8436 52.57 58.2976V54.0158Z" fill="#1D195A"/>
<path d="M96.9548 58.4126L94.9543 65.8484" stroke="white"/>
<path d="M53.4843 65.1591L51.3674 58.3441" stroke="white"/>
</g>
<defs>
<clipPath id="clip0_5920_147382">
<rect width="150" height="150" rx="48" fill="white"/>
</clipPath>
</defs>
</svg>
src/nim/Session.vue 0 → 100644
View file @ c30c48cd
<template>
<div class="flex flex-col session" style="height: 100vh">
<div class="py-2 px-3 text-black text-center shrink-0 head">
<span @click="onBack" class="text-12 back-bt">
<doc-icon type="doc-left2" />
</span>
<span>{{ targetId }}</span>
</div>
<div class="p-3 grow overflow-y-auto content">
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
direction="up"
:disabled="scrollDisabled"
@load="loadHistory"
>
<div v-for="item in msgs" :key="item.time"
:class="['flex msg-row', item.from === accountId ? 'self' : 'target']">
<div class="shrink-0 avatar">
<img src="@/assets/image/nim/avatar-doctor.svg" alt="" v-show="item.from !== accountId">
</div>
<div class="msg-cont">{{ item.text }}</div>
<div class="shrink-0 avatar">
<img src="@/assets/image/nim/avatar-man.png" alt="" v-show="item.from === accountId">
</div>
</div>
</van-list>
<div ref="bottom"></div>
</div>
<div class="shrink-0 px-3 py-2 footer">
<van-cell-group>
<van-field
v-model="inputValue"
center
>
<template #button>
<van-button size="small" type="primary"
@click="sendMsg">发送</van-button>
</template>
</van-field>
</van-cell-group>
</div>
</div>
</template>
<script>
import NIM from '@yxim/nim-web-sdk/dist/SDK/NIM_Web_NIM.js'
import { showNotify, showToast } from 'vant'
export default {
data() {
return {
msgs: [],
nim: null,
// 输入的信息
inputValue: '',
// 是否已连接
isConnect: false,
// 加载聊天记录
loading: false,
// 是否加载完成
finished: false,
scrollDisabled: true,
}
},
computed: {
accountId() {
return this.$route.query.accountId
},
// 聊天对象
targetId() {
return this.accountId === '18487350810' ? '18987175004' : '18487350810'
}
},
created() {
this.init()
},
methods: {
init() {
this.isConnect = false
this.finished = false
this.nim = NIM.getInstance({
debug: true,
appKey: '6c51376a55f54b2fa586d7b4c85757f8',
account: this.accountId,
token: '123456',
onconnect: () => {
console.log('连接成功 ================>')
this.isConnect = true
this.getLocalMsgs()
this.toBottom('instant')
setTimeout(() => {
// 开启滚动加载
this.scrollDisabled = false
}, 1000);
},
onwillreconnect: (obj) => {
console.log('即将重连')
console.log(obj.retryCount)
console.log(obj.duration)
},
ondisconnect: (error) => {
showNotify({ type: 'warning', message: '连接失败', duration: 0 })
},
onmsg: (msg) => {
console.log('收到新消息===========>', msg);
this.msgs.push(msg)
this.toBottom()
}
})
},
// 发送信息
sendMsg() {
if (!this.inputValue) {
showToast('不能发送空消息')
return
}
let msg = this.nim.sendText({
scene: 'p2p',
to: this.targetId,
text: this.inputValue,
done: function sendMsgDone (error, msg) {
console.log('sendText ================>', error, msg)
}
})
this.msgs.push(msg)
this.inputValue = ''
this.toBottom()
},
pushMsg(msg) {
this.msgs.push(msg)
},
toBottom(behavior = 'smooth') {
const dom = this.$refs.bottom
setTimeout(() => {
dom && dom.scrollIntoView({block: 'start', behavior})
}, 100)
},
// 加载本地消息
getLocalMsgs() {
const msg = this.msgs[0] || {}
this.loading = true
this.nim.getLocalMsgs({
sessionId: `p2p-${this.targetId}`,
limit: 40,
end: msg.time,
done: (error, obj) => {
// console.log('获取本地消息' + (!error?'成功':'失败'), error, obj)
const msgs = obj.msgs || []
this.loading = false
if (!msgs.length) {
this.finished = true
return
}
msgs.sort((a, b) => {
return a.time - b.time
})
this.msgs = msgs.concat(this.msgs)
}
})
},
loadHistory() {
this.getLocalMsgs()
},
onBack() {
}
}
}
</script>
<style lang="less" scoped>
.head {
position: relative;
border-bottom: 1px solid #3C3C435C;
.back-bt {
position: absolute;
left: .16rem;
top: 50%;
transform: translateY(-50%);
}
}
.footer {
border-top: 1px solid #3C3C431C;
background-color: #eeeeee66;
.van-cell {
padding: 0;
background: transparent;
}
}
.content {
background-color: #f5f5f5;
.msg-row {
align-items: flex-start;
margin-bottom: 12px;
}
.msg-cont {
display: inline-block;
line-height: 1.5;
padding: 8px;
border-radius: 4px;
position: relative;
word-break: break-all;
&::before {
content: '';
display: inline-block;
width: 4px;
height: 4px;
transform: rotate(45deg);
position: absolute;
right: -2px;
top: 16px;
}
}
.avatar {
width: 38px;
>img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.self {
justify-content: flex-end;
.msg-cont {
margin-right: 12px;
background-color: #91d5ff;
&::before {
right: -2px;
background-color: #91d5ff;
}
}
}
.target {
justify-content: flex-start;
.msg-cont {
margin-left: 12px;
background-color: #fff;
&::before {
left: -2px;
background-color: #fff;
}
}
}
}
</style>
src/nim/Test.vue
View file @ c30c48cd
...@@ -7,12 +7,15 @@ ...@@ -7,12 +7,15 @@
</template> </template>
<script> <script>
import SDK from '@yxim/nim-web-sdk' import NIM from '@yxim/nim-web-sdk/dist/SDK/NIM_Web_NIM.js'
import { showNotify } from 'vant'
export default { export default {
data() { data() {
return { return {
nim: null nim: null,
// 是否已连接
isConnect: false
} }
}, },
computed: { computed: {
...@@ -21,54 +24,38 @@ export default { ...@@ -21,54 +24,38 @@ export default {
} }
}, },
async created() { async created() {
// const nim = NIM.getInstance({ this.isConnect = false
// appkey: "6c51376a55f54b2fa586d7b4c85757f8", this.nim = NIM.getInstance({
// debugLevel: "debug",
// apiVersion: "v2"
// })
// if (!this.accountId) {
// console.log('缺少账号信息')
// return
// }
// try {
// const token = '123456'
// await nim.V2NIMLoginService.login(this.accountId, token, {
// "forceMode": false
// })
// console.log('登录成功')
// this.nim = nim
// nim.V2NIMMessageService.on("onReceiveMessages", function (messages) {
// console.log('监听消息==============================>')
// console.log(messages)
// })
// } catch (err) {
// // TODO failed, check code
// console.log(err)
// }
this.nim = SDK.NIM.getInstance({
debug: true, debug: true,
appKey: '6c51376a55f54b2fa586d7b4c85757f8', appKey: '6c51376a55f54b2fa586d7b4c85757f8',
account: this.accountId, account: this.accountId,
token: '123456', token: '123456',
onconnect: function() {
console.log('连接成功 ================>')
this.isConnect = true
},
onwillreconnect: function(obj) {
console.log('即将重连')
console.log(obj.retryCount)
console.log(obj.duration)
},
ondisconnect: function(error) {
showNotify({ type: 'warning', message: '连接失败', duration: 0 })
// if (error) {
// switch (error.code) {
// case 302:
// console.warn('账号或者密码错误')
// break
// }
// }
},
onmsg: function (msg) { onmsg: function (msg) {
console.log('收到新消息', msg); console.log('收到新消息===========>', msg);
} }
}); });
}, },
methods: { methods: {
async onPost() { async onPost() {
// try {
// // 创建一条文本消息
// const message = this.nim.V2NIMMessageCreator.createTextMessage("hello world")
// console.log('message==============================>')
// console.log(message)
// // 发送消息
// const res = await this.nim.V2NIMMessageService.sendMessage(message, '18487350810|1|18987175004')
// } catch (err) {
// // todo error
// console.log('onPost', err)
// }
let msg = this.nim.sendText({ let msg = this.nim.sendText({
scene: 'p2p', scene: 'p2p',
to: '18987175004', to: '18987175004',
...@@ -76,8 +63,19 @@ export default { ...@@ -76,8 +63,19 @@ export default {
done: function sendMsgDone (error, msg) { done: function sendMsgDone (error, msg) {
console.log('sendText', error, msg) console.log('sendText', error, msg)
} }
}); })
console.log('发送的消息===========>', msg)
} }
},
beforeUnmount() {
if (this.nim) {
this.nim.destroy({
done: function (err) {
console.log('nim 断开连接')
}
})
}
} }
} }
</script> </script>
......
src/resident/screening/first/detail/Detail.vue
View file @ c30c48cd
...@@ -29,20 +29,20 @@ ...@@ -29,20 +29,20 @@
<table class="w-full"> <table class="w-full">
<tr> <tr>
<td style="width: 7.1em">血压值(mmHg)</td> <td style="width: 7.1em">血压值(mmHg)</td>
<td>低压值(左侧)</td> <td>收缩压(高压)</td>
<td></td> <td></td>
<td>高压值(右侧)</td> <td>舒张压(低压)</td>
</tr> </tr>
<tr> <tr>
<td> <td>
第1次测量 第1次测量
</td> </td>
<td> <td>
{{ info.pressureOneDbp || '-' }} {{ info.pressureOneSbp || '-' }}
</td> </td>
<td>/</td> <td>/</td>
<td> <td>
{{ info.pressureOneSbp || '-' }} {{ info.pressureOneDbp || '-' }}
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -50,11 +50,11 @@ ...@@ -50,11 +50,11 @@
第2次测量 第2次测量
</td> </td>
<td class="flex"> <td class="flex">
{{ info.pressureTwoDbp || '-' }} {{ info.pressureTwoSbp || '-' }}
</td> </td>
<td>/</td> <td>/</td>
<td> <td>
{{ info.pressureTwoSbp || '-' }} {{ info.pressureTwoDbp || '-' }}
</td> </td>
</tr> </tr>
</table> </table>
......
src/resident/screening/first/form/ScreenInfo.vue
View file @ c30c48cd
...@@ -161,16 +161,16 @@ ...@@ -161,16 +161,16 @@
<table class="w-full"> <table class="w-full">
<tr> <tr>
<td style="width: 7.1em">血压值(mmHg)</td> <td style="width: 7.1em">血压值(mmHg)</td>
<td>低压值(左侧)</td> <td>收缩压(高压)</td>
<td>高压值(右侧)</td> <td>舒张压(低压)</td>
</tr> </tr>
<tr> <tr>
<td> <td>
第1次测量 第1次测量
</td> </td>
<td class="flex"> <td class="flex">
<van-field v-model="form.pressureOneDbp" <van-field v-model="form.pressureOneSbp"
name="pressureOneDbp" name="pressureOneSbp"
label="" label=""
type="number" type="number"
placeholder="60~300，整数" placeholder="60~300，整数"
...@@ -183,8 +183,8 @@ ...@@ -183,8 +183,8 @@
<span class="divide">/</span> <span class="divide">/</span>
</td> </td>
<td> <td>
<van-field v-model="form.pressureOneSbp" <van-field v-model="form.pressureOneDbp"
name="pressureOneSbp" name="pressureOneDbp"
label="" label=""
type="number" type="number"
placeholder="30~300，整数" placeholder="30~300，整数"
...@@ -201,8 +201,8 @@ ...@@ -201,8 +201,8 @@
第2次测量 第2次测量
</td> </td>
<td class="flex"> <td class="flex">
<van-field v-model="form.pressureTwoDbp" <van-field v-model="form.pressureTwoSbp"
name="pressureTwoDbp" name="pressureTwoSbp"
label="" label=""
type="number" type="number"
placeholder="60~300，整数" placeholder="60~300，整数"
...@@ -216,8 +216,8 @@ ...@@ -216,8 +216,8 @@
</td> </td>
<td> <td>
<div class="h-full flex"> <div class="h-full flex">
<van-field v-model="form.pressureTwoSbp" <van-field v-model="form.pressureTwoDbp"
name="pressureTwoSbp" name="pressureTwoDbp"
label="" label=""
type="number" type="number"
placeholder="30~300，整数" placeholder="30~300，整数"
......
src/residentWX/screening/detail/FirstDetail.vue
View file @ c30c48cd
...@@ -48,20 +48,20 @@ ...@@ -48,20 +48,20 @@
<table class="w-full"> <table class="w-full">
<tr> <tr>
<td style="width: 7.1em">血压值(mmHg)</td> <td style="width: 7.1em">血压值(mmHg)</td>
<td>低压值(左侧)</td> <td>收缩压(高压)</td>
<td></td> <td></td>
<td>高压值(右侧)</td> <td>舒张压(低压)</td>
</tr> </tr>
<tr> <tr>
<td> <td>
第1次测量 第1次测量
</td> </td>
<td> <td>
{{ info.pressureOneDbp || '-' }} {{ info.pressureOneSbp || '-' }}
</td> </td>
<td>/</td> <td>/</td>
<td> <td>
{{ info.pressureOneSbp || '-' }} {{ info.pressureOneDbp || '-' }}
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -69,11 +69,11 @@ ...@@ -69,11 +69,11 @@
第2次测量 第2次测量
</td> </td>
<td class="flex"> <td class="flex">
{{ info.pressureTwoDbp || '-' }} {{ info.pressureTwoSbp || '-' }}
</td> </td>
<td>/</td> <td>/</td>
<td> <td>
{{ info.pressureTwoSbp || '-' }} {{ info.pressureTwoDbp || '-' }}
</td> </td>
</tr> </tr>
</table> </table>
......
src/router/index.js
View file @ c30c48cd
...@@ -129,6 +129,11 @@ const routes = [ ...@@ -129,6 +129,11 @@ const routes = [
{ {
path: '/nim', path: '/nim',
name: 'nim', name: 'nim',
component: () => import(/* webpackChunkName: "nim" */ '@/nim/Session.vue'),
},
{
path: '/nimTest',
name: 'nimTest',
component: () => import(/* webpackChunkName: "nim" */ '@/nim/Test.vue'), component: () => import(/* webpackChunkName: "nim" */ '@/nim/Test.vue'),
} }
] ]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment