专家在线咨询

src/api/residentWX/nim.js

+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

+<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

 <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

@@ -130,17 +130,17 @@ const routes = [
                 name: 'residentWX-guide-list',
                 component: () => import(/* webpackChunkName: "residentWX-guide" */ '@/residentWX/guide/List.vue')
             },
-        ]
-    },
             {
-        path: '/nim',
-        name: 'nim',
-        component: () => import(/* webpackChunkName: "nim" */ '@/nim/Session.vue'),
+                path: 'nim',
+                name: 'residentWX-nim',
+                component: () => import(/* webpackChunkName: "nim" */ '@/residentWX/nim/Index.vue'),
             },
             {
-        path: '/nimTest',
-        name: 'nimTest',
-        component: () => import(/* webpackChunkName: "nim" */ '@/nim/Test.vue'),
+                path: 'nim/:id',
+                name: 'residentWX-nim-session',
+                component: () => import(/* webpackChunkName: "nim" */ '@/residentWX/nim/Session.vue'),
+            }
+        ]
     }
 ]
 

vue.config.js

@@ -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: {