Skip to content

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

专家在线咨询

parent eaabfc4b
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 35 deletions
src/api/residentWX/nim.js 0 → 100644
View file @ 953c1652
import { fetchBase } from '../fetch.js'
// 根据居民ID查询服务医生
export function getServiceDoc(params) {
return fetchBase({ url: `/chronic-resident/v1/chronic-visit-record/service-doctor`, body: params, loading: true })
}
// 获取IM账号信息
export function getAccount(idCard) {
return fetchBase({ url: `/chronic-resident/v1/chronic-resident-im/refresh-token/${idCard}`, loading: true })
}
src/residentWX/nim/Index.vue 0 → 100644
View file @ 953c1652
<template>
<div class="flex flex-col nim-index" style="height: 100vh">
<div class="py-2 px-3 text-black text-center shrink-0 doc-nav-bar">
<span>专家在线咨询</span>
</div>
<img src="@/assets/image/residentWX/banner.png" alt="" class="shrink-0 w-full">
<div style="color: #8C8C8C;" class="py-2 px-3">以下为您提供慢病筛查的专家，可向其进行慢病咨询</div>
<div class="grow flex">
<div class="h-full list-l">
<div class="p-3 active">
咨询过的专家
</div>
<div v-for="item in orgList" :key="item.unitId"
:class="['p-3', { 'active': item.unitId === activeOrg.unitId }]"
@click="onOrgChange(item)">
<span>{{ item.unitName || '-' }}</span>
</div>
</div>
<div class="h-full p-3 list-r">
<div class="mb-3 p-4 card" v-for="item in innerDoctorList" :key="item.identityCard">
<div class="mb-3">
<span class="text-16 mr-2 font-semibold">{{item.staffName}}</span>
<span>{{item.officeName || '-'}}</span>
</div>
<div class="mb-3">{{item.unitName || '-'}}</div>
<div>
<van-button plain round type="primary"
@click="toSession(item)">咨询医生</van-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { useStore } from '@/residentWX/store'
import { getServiceDoc } from '@/api/residentWX/nim.js'
import { showFailToast } from 'vant'
export default {
data() {
return {
store: useStore(),
orgList: [],
doctorList: [],
activeOrg: {}
}
},
computed: {
userInfo() {
return this.store.userInfo
},
innerDoctorList() {
return this.doctorList.filter(e => e.unitId === this.activeOrg.unitId)
}
},
created() {
this.init()
},
methods: {
init() {
console.log(this.userInfo)
this.load()
},
load() {
getServiceDoc({ residentInfoId: this.userInfo.residentInfoId }).then(res => {
const list = res.data || []
const orgList = []
this.doctorList = list
list.forEach(e => {
if (orgList.some(e => e.unitId === e.unitId)) return
orgList.push({
unitId: e.unitId,
unitName: e.unitName
})
})
this.orgList = orgList
if (orgList.length) {
this.activeOrg = orgList[0]
}
})
},
onOrgChange(item) {
this.activeOrg = item || {}
},
// 聊天页面
toSession(item = {}) {
if (!item.identityCard) {
showFailToast('缺失医生信息')
return
}
const path = `/residentWX/nim/${item.identityCard}`
this.$router.push({
path,
query: {
name: item.staffName
}
})
}
},
}
</script>
<style lang="less" scoped>
@import url('../utils/common.less');
.nim-index {
background: #f8fafc;
}
.list-l {
width: 35%;
background: transparent;
>div {
line-height: 1.5;
}
.active {
background-color: #fff;
}
}
.list-r {
width: 65%;
background: #fff;
.card {
background-color: #E4E8EE;
background: linear-gradient(to bottom, #E5F3FF 0%, #E9FAFC 100%);
border-radius: 8px;
border: 1px solid #E4E8EE;
.van-button {
height: 26px;
line-height: 26px;
font-size: 14px;
}
}
}
</style>
src/nim/Session.vue → src/residentWX/nim/Session.vue
View file @ 953c1652
<template>
<div class="flex flex-col session" style="height: 100vh">
<div class="py-2 px-3 text-black text-center shrink-0 head">
<div class="py-2 px-3 text-black text-center shrink-0 doc-nav-bar">
<span @click="onBack" class="text-12 back-bt">
<doc-icon type="doc-left2" />
</span>
<span>{{ targetId }}</span>
<span>{{ targetName }}</span>
</div>
<div class="p-3 grow overflow-y-auto content">
<van-list
......@@ -18,7 +18,7 @@
<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">
<img src="@/assets/image/residentWX/avatar-doctor.svg" alt="" v-show="item.from !== accountId">
</div>
<div class="msg-cont">
<span v-if="item.type === 'text'">{{ item.text }}</span>
......@@ -26,7 +26,7 @@
@viewImage="viewImage"/>
</div>
<div class="shrink-0 avatar">
<img src="@/assets/image/nim/avatar-man.png" alt="" v-show="item.from === accountId">
<img src="@/assets/image/residentWX/avatar-man.png" alt="" v-show="item.from === accountId">
</div>
</div>
</van-list>
......@@ -69,16 +69,24 @@
</template>
<script>
import { useStore } from '@/residentWX/store'
import NIM from '@yxim/nim-web-sdk/dist/SDK/NIM_Web_NIM.js'
import { showNotify, showToast, showImagePreview, showSuccessToast, showFailToast } from 'vant'
import { getAccount } from '@/api/residentWX/nim.js'
import FileView from './FileView.vue'
// 6c51376a55f54b2fa586d7b4c85757f8
const APPKEY = '8cee1ccf8ab46779976091db68a67955'
export default {
components: {
FileView
},
data() {
return {
store: useStore(),
accountId: '',
token: '',
msgs: [],
nim: null,
// 输入的信息
......@@ -102,13 +110,15 @@ export default {
}
},
computed: {
accountId() {
return this.$route.query.accountId
userInfo() {
return this.store.userInfo
},
// 聊天对象
targetName() {
return this.$route.query.name
},
targetId() {
return '2000050903'
return this.accountId === '18487350810' ? '18987175004' : '18487350810'
return `doc_${this.$route.params.id}`.toLocaleLowerCase()
}
},
created() {
......@@ -116,13 +126,27 @@ export default {
},
methods: {
init() {
getAccount(this.userInfo.idCard).then(res => {
console.log('getAccount ===========>', res)
const result = res.data || {}
this.accountId = result.accountId
this.token = result.yunxinToken
this.connect()
})
},
// 连接到im服务
connect() {
if (!this.accountId || !this.token) {
showNotify({ type: 'warning', message: '聊天服务连接失败', duration: 0 })
return
}
this.isConnect = false
this.finished = false
this.nim = NIM.getInstance({
debug: true,
appKey: '6c51376a55f54b2fa586d7b4c85757f8',
debug: false,
appKey: APPKEY,
account: this.accountId,
token: '123456',
token: this.token,
onconnect: () => {
console.log('连接成功 ================>')
this.isConnect = true
......@@ -139,12 +163,18 @@ export default {
console.log(obj.duration)
},
ondisconnect: (error) => {
showNotify({ type: 'warning', message: '连接失败', duration: 0 })
// showNotify({ type: 'warning', message: '连接失败', duration: 0 })
console.warn('连接失败 ===============>')
},
onmsg: (msg) => {
console.log('收到新消息===========>', msg);
this.msgs.push(msg)
this.toBottom()
},
onofflinemsgs: (obj) => {
console.log('收到离线消息===========>', obj);
this.msgs.push(...obj.msgs)
this.toBottom()
}
})
},
......@@ -154,6 +184,7 @@ export default {
showToast('不能发送空消息')
return
}
if (!this.nim) return
let msg = this.nim.sendText({
scene: 'p2p',
to: this.targetId,
......@@ -164,7 +195,6 @@ export default {
})
this.pushMsg(msg)
this.inputValue = ''
this.toBottom()
},
pushMsg(msg) {
this.msgs.push(msg)
......@@ -215,6 +245,7 @@ export default {
this.upload(files[0])
},
upload(file, hash) {
if (!this.nim) return
// 先上传再发送
const tempMsg = {
from: this.accountId,
......@@ -312,7 +343,7 @@ export default {
})
},
onBack() {
this.$router.replace({ name: 'residentWX-nim' })
}
},
beforeUnmount() {
......@@ -329,16 +360,8 @@ export default {
</script>
<style lang="less" scoped>
.head {
position: relative;
border-bottom: 1px solid #3C3C435C;
.back-bt {
position: absolute;
left: .16rem;
top: 50%;
transform: translateY(-50%);
}
}
@import url('../utils/common.less');
.footer {
border-top: 1px solid #3C3C431C;
background-color: #eeeeee66;
......
src/router/index.js
View file @ 953c1652
......@@ -130,17 +130,17 @@ const routes = [
name: 'residentWX-guide-list',
component: () => import(/* webpackChunkName: "residentWX-guide" */ '@/residentWX/guide/List.vue')
},
{
path: 'nim',
name: 'residentWX-nim',
component: () => import(/* webpackChunkName: "nim" */ '@/residentWX/nim/Index.vue'),
},
{
path: 'nim/:id',
name: 'residentWX-nim-session',
component: () => import(/* webpackChunkName: "nim" */ '@/residentWX/nim/Session.vue'),
}
]
},
{
path: '/nim',
name: 'nim',
component: () => import(/* webpackChunkName: "nim" */ '@/nim/Session.vue'),
},
{
path: '/nimTest',
name: 'nimTest',
component: () => import(/* webpackChunkName: "nim" */ '@/nim/Test.vue'),
}
]
......
vue.config.js
View file @ 953c1652
......@@ -39,7 +39,7 @@ module.exports = defineConfig({
}
},
'/chronic-resident': {
target: 'http://192.168.1.174:8903',
target: 'http://192.168.1.145:8903',
// target: 'https://beta-tumour.zmnyjk.com',
changOrigin: true,
pathRewrite: {
......
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