uni-app（优医咨询）项目实战 - 第7天

学习目标：

  • 能够基于 WebSocket 完成问诊全流程

  • 能够使用 uniCloud 云存储上传文件

  • 能够完成查看电子处方的功能

  • 能够完成医生评价的功能

一、问诊室

以对话聊天的方式向医生介绍病情并获取诊断方案，聊天的内容支持文字和图片两种形式。

首先新建一个页面并完成分包的配置：

{"subPackages": [{"root": "subpkg_consult","pages": [{"path": "room/index","style": {"navigationBarTitleText": "问诊室"}}]},]
}

该页面的内容特别多我们分段来数据模板代码移到项目当中：

<!-- subpkg_consult/room/index.vue -->
<script setup></script>
​
<template><view class="room-page">
​<scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden"><view class="message-container"><!-- 此处将来填充更多代码... --></view></scroll-view>
​<!-- 发送消息 --><view class="message-bar"><template v-if="true"><uni-easyinputdisabled:clearable="false":input-border="false"placeholder-style="font-size: 32rpx; color: #c3c3c5;"placeholder="问医生"/><view class="image-button"><uni-icons size="40" color="#979797" type="image"></uni-icons></view></template><button v-else class="uni-button">咨询其它医生</button></view></view>
</template>
​
<style lang="scss">@import './index.scss';
</style>
// subpkg_consult/room/index.scss
.room-page {display: flex;flex-direction: column;height: 100vh;/* #ifdef H5 */height: calc(100vh - 44px);/* #endif */overflow: hidden;box-sizing: border-box;background-color: #f2f2f2;
}
​
.message-container {padding: 0 30rpx 60rpx;overflow: hidden;
}
​
.message-bar {background-color: red;display: flex;padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 40rpx);background-color: #fff;
​:deep(.is-disabled) {background-color: transparent !important;}
​:deep(.uni-easyinput__content-input) {height: 88rpx;padding: 0 44rpx !important;border-radius: 88rpx;color: #3c3e42;font-size: 32rpx;background-color: #f6f6f6;}
​.image-button {display: flex;justify-content: center;align-items: center;height: 88rpx;width: 88rpx;margin-left: 30rpx;}
​.uni-button {flex: 1;}
}
1.1 WebSocket 连接

首先安装 Socket.IO

npm install socket.io-client

然后建立连接，在建立连接进需要传入参数和登录信息:

  • auth 登录状态信息，即 token

  • query 建立连接时传递的参数

  • transports 建立连接时使用的协议

  • timeout 超时设置

<!-- subpkg_consult/room/index.vue -->
<script setup>import { ref } from 'vue'import { io } from 'socket.io-client'import { useUserStore } from '@/stores/user'
​// 用户登录信息（不具有响应式）const { token } = useUserStore()
​// 获取地址中的参数const props = defineProps({orderId: String,})
​// 建立 socket 连接const socket = io('https://consult-api.itheima.net', {auth: { token: 'Bearer ' + token },query: { orderId: props.orderId },transports: ['websocket', 'polling'],timeout: 5000,})
</script>
1.2 接收消息

Socket.IO 是基于事件来实现数据通信的，事件的名称是由前后端商定好的，详见接口文档说明，消息的获取分成两种情况：

  • 历史消息，事件名称为 chatMsgList

  • 即时消息，事件名称为 receiveChatMsg

1.2.1 消息列表

在建立连接时服务端会通过 chatMsgList 传递历史数据，通过 on 方法进行监听来获取这些数据：

<!-- subpkg_consult/room/index.vue -->
<script setup>import { ref } from 'vue'import { io } from 'socket.io-client'import { useUserStore } from '@/stores/user'
​// 省略前面小节的代码...// 消息列表const messageList = ref([])// 获取历史消息socket.on('chatMsgList', ({ code, data }) => {// 没有返回数据if (code !== 10000) return// 提取列表数据data.forEach(({ items }) => {// 追加到消息列表中messageList.value.push(...items)})})
</script>

在消息列表数据中包含了不同类型的消息且展示的方式也不相同，因此在对数据进行遍历的过程中需要通过 v-if 来渲染不同的模板，不同的类型对应了一个数值：

消息类型说明备注
21患者信息
22处方信息
23未提交评价
24已提交评价
31普通通知白底黑字
32温馨提示
33取消订单灰底黑字
4图片消息
1文字消息

首次进入问诊室返回的 3 条件的类型分别为患者信息（21）、普通通知（31）、温馨提示（32），我们逐个进行渲染。

1.2.2 患者消息

首先创建患者消息组件，组件的模板布局如下：

<!-- subpkg_consult/room/components/patient-info.vue -->
<script setup></script>
<template><!-- 患者信息（21） --><view class="patient-info"><view class="header"><view class="title">李富贵 男 31岁</view><view class="note">一周内 | 未去医院就诊</view></view><view class="content"><view class="list-item"><text class="label">病情描述</text><text class="note">头痛、头晕、恶心</text></view><view class="list-item"><text class="label">图片</text><text class="note">点击查看</text></view></view></view>
</template>
​
<style lang="scss">.patient-info {padding: 30rpx;margin-top: 60rpx;border-radius: 20rpx;box-sizing: border-box;background-color: #fff;
​.header {padding-bottom: 20rpx;border-bottom: 1rpx solid #ededed;
​.title {font-size: 32rpx;color: #121826;margin-bottom: 10rpx;}
​.note {font-size: 26rpx;color: #848484;}}
​.content {margin-top: 20rpx;font-size: 26rpx;
​.list-item {display: flex;margin-top: 10rpx;}
​.label {width: 130rpx;color: #3c3e42;}
​.note {flex: 1;line-height: 1.4;color: #848484;}}}
</style>

接下来分成3个步骤来实现：

  1. 自定义组件的相关逻辑，要求组件能接收外部传入的数据

<!-- subpkg_consult/room/components/patient-info.vue -->
<script setup>// 定义属性接收外部传入的数据const props = defineProps({info: {type: Object,default: {},},})// 患病时长const illnessTimes = {1: '一周内',2: '一个月内',3: '半年内',4: '半年以上',}// 是否就诊过const consultFlags = {1: '就诊过',0: '没有就诊过',}
</script>
<template>...
</template>

  1. 在页面应用组件并传入数据

<!-- subpkg_consult/room/index.vue -->
<script setup>import { ref } from 'vue'import { io } from 'socket.io-client'import { useUserStore } from '@/stores/user'// 引入患者信息组件import patientInfo from './components/patient-info.vue'// 省略前面小节的代码
</script>
<template><view class="room-page"><!-- 此处将来填充更多代码... --><scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden"><view class="message-container"><template v-for="message in messageList" :key="message.id"><!-- 患者信息（21） --><patient-infov-if="message.msgType === 21":info="message.msg.consultRecord"/><!-- 此处将来填充更多代码... --></template></view></scroll-view><!-- 发送消息 --><view class="message-bar">...</view></view>
</template>

  1. 在组件内部接收并渲染数据

<!-- subpkg_consult/room/components/patient-info.vue -->
<script setup>// 省略前面小节的代码...
</script><template><!-- 患者信息（21） --><view class="patient-info"><view class="header"><view class="title">{{ props.info.patientInfo.name }}{{ props.info.patientInfo.genderValue }}{{ props.info.patientInfo.age }}岁</view><view class="note">{{ illnessTimes[props.info.illnessTime] }}|{{ consultFlags[props.info.illnessType] }}</view></view><view class="content"><view class="list-item"><text class="label">病情描述</text><text class="note">{{ props.info.illnessDesc }}</text></view><view class="list-item"><text class="label">图片</text><text v-if="props.info.pictures?.length" class="note"> 点击查看 </text><text v-else class="note">暂无图片</text></view></view></view>
</template>

  1. 大图查看患者病情图片，uni-app 提供了大图查看图片的 API uni.previewImage

<script setup>// 省略前面小节的代码...// 点击查看病情介绍图片async function onPreviewClick(urls) {uni.previewImage({urls: urls.map((item) => item.url),})}
</script><template><!-- 患者信息（21） --><view class="patient-info"><view class="header">...</view><view class="content"><view class="list-item"><text class="label">病情描述</text><text class="note">{{ props.info.illnessDesc }}</text></view><view class="list-item"><text class="label">图片</text><textv-if="props.info.pictures?.length"@click="onPreviewClick(props.info.pictures)"class="note">点击查看</text><text v-else class="note">暂无图片</text></view></view></view>
</template>
1.2.3 通知消息

通知消息分为3种，分别为:

消息类型说明备注
31普通通知白底黑字
32温馨提示
33取消订单灰底黑字

首先创建消息通知组伯，通知消息的模板如下：

<!-- subpkg_consult/room/components/notify-info.vue -->
<script setup></script><template><!-- 普通通知（31） --><view class="message-tips"><view class="wrapper">医护人员正在赶来，请耐心等候</view></view><!-- 温馨提示（32） --><view class="message-tips"><view class="wrapper"><text class="label">温馨提示:</text>在线咨询不能代替面诊，医护人员建议仅供参考</view></view>
</template><style lang="scss">.message-tips {display: flex;justify-content: center;margin-top: 60rpx;&:first-child {margin-top: 30rpx;}}.wrapper {line-height: 1;text-align: center;padding: 20rpx 30rpx;// margin-top: 60rpx;font-size: 24rpx;border-radius: 70rpx;color: #848484;background-color: #fff;.label {color: #16c2a3;}}
</style>

接下来分成3个步骤来实现：

  1. 定义组件的逻辑，要求能区分通知的类型并通过插槽来展示内容

<!-- subpkg_consult/room/components/notify-info.vue -->
<script setup>// 接收外部传入的数据const props = defineProps({type: {type: Number,default: 31,},})
</script>
<template><!-- 温馨提示（32） --><view class="message-tips"><text class="label">温馨提示:</text><slot /></view>
</template>

  1. 在页面应用通知消息组件并传入数据

<!-- subpkg_consult/room/index.vue -->
<script setup>import { ref } from 'vue'import { io } from 'socket.io-client'import { useUserStore } from '@/stores/user'// 引入通知消息组件import notifyInfo from './components/notify-info.vue'// 省略前面小节的代码
</script>
<template><view class="room-page"><!-- 此处将来填充更多代码... --><scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden"><view class="message-container"><template v-for="message in messageList" :key="message.id"><!-- 消息通知 --><notify-info v-if="message.msgType >= 31" :type="message.msgType">{{ message.msg.content }}</notify-info><!-- 此处将来填充更多代码... --></template></view></scroll-view><!-- 发送消息 --><view class="message-bar">...</view></view>
</template>

  1. 接收并渲染组件数据

<!-- subpkg_consult/room/components/notify-info.vue -->
<script setup>// 省略前面小节的代码...
</script>
<template><!-- 温馨提示（32） --><view class="message-tips"><text v-if="props.type === 32" class="label">温馨提示:</text><slot /></view>
</template>
1.2.4 文字/图片消息

实时接收到医生发送过来的消息，包括文字消息和图片消息两种类型，使用超级医生来模拟医生端发送消息，根据订单 ID 来打通医生端和患者端的聊天连接。

首先接收医生端的回复的消息需要监听的事件为 receiveChatMsg

<!-- subpkg_consult/room/index.vue -->
<script setup>import { ref } from 'vue'import { io } from 'socket.io-client'import { useUserStore } from '@/stores/user'// 省略前面小节的代码...// 接收消息socket.on('receiveChatMsg', (message) => {// 修改消息为已读socket.emit('updateMsgStatus', message.id)// 接收到的消息追加到消息列表中messageList.value.push(message)})
</script>

然后创建文字消息组件，组件模板如下：

<!-- subpkg_consult/room/components/message-info.vue -->
<script setup></script><template><!-- 文字/图片消息 --><view class="message-item reverse"><image class="room-avatar" src="/static/uploads/doctor-avatar-2.png" /><view class="room-message"><view class="time">14:13</view><view class="text">您好，我是医师王医生，已收到您的问诊信息，我会尽量及时、准确、负责的回复您的问题，请您稍等。</view><imagev-if="false"class="image"src="/static/uploads/feed-1.jpeg"mode="widthFix"/></view></view>
</template><style lang="scss">.message-item {display: flex;align-self: flex-start;margin-top: 60rpx;.room-avatar {width: 80rpx;height: 80rpx;border-radius: 50%;}.room-message {margin-left: 20rpx;}.time {font-size: 26rpx;color: #979797;}.image {max-width: 420rpx;margin-top: 10rpx;}.text {max-width: 420rpx;line-height: 1.75;padding: 30rpx 40rpx;margin-top: 16rpx;border-radius: 20rpx;font-size: 30rpx;color: #3c3e42;background-color: #fff;position: relative;&::after {content: '';position: absolute;top: 0;left: -25rpx;width: 26rpx;height: 52rpx;background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);background-size: contain;}}&.reverse {flex-direction: row-reverse;align-self: flex-end;.room-message {margin-left: 0;margin-right: 20rpx;}.time {text-align: right;}.text {background-color: #16c2a3;color: #fff;&::after {left: auto;right: -25rpx;background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);}}}}
</style>

接下来分成3个步骤来实现：

  1. 定义组件的逻辑，要求能接收外部传入的数据

<!-- subpkg_consult/room/components/message-info.vue -->
<script setup>// 接收外部传入的数据const props = defineProps({info: {type: Object,default: {},},type: {type: Number,default: 1,},})
</script>

  1. 到页面中应用组件并传入数据

<!-- subpkg_consult/room/index.vue -->
<script setup>import { ref } from 'vue'import { io } from 'socket.io-client'import { useUserStore } from '@/stores/user'// 引入通知消息组件import messageInfo from './components/message-info.vue'// 省略前面小节的代码
</script>
<template><view class="room-page"><!-- 此处将来填充更多代码... --><scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden"><view class="message-container"><template v-for="message in messageList" :key="message.id"><!-- 文字图片消息 --><message-infov-if="message.msgType <= 4":info="message":type="message.msgType"/><!-- 此处将来填充更多代码... --></template></view></scroll-view><!-- 发送消息 --><view class="message-bar">...</view></view>
</template>

  1. 到组件是接收并渲染数据

<!-- subpkg_consult/room/components/message-info.vue -->
<script setup>// ...
</script><template><!-- 文字/图片消息 --><view class="message-item"><image class="room-avatar" :src="props.info.fromAvatar" /><view class="room-message"><view class="time">{{ props.info.createTime }}</view><!-- 文字消息 --><view v-if="props.type === 1" class="text">{{ props.info.msg.content }}</view><!-- 图片消息 --><imagev-if="props.type === 4"class="image":src="props.info.msg.picture.url"mode="widthFix"/></view></view>
</template>

  1. 处理消息的时间，安装 dayjs

npm install dayjs
<!-- subpkg_consult/room/index.vue -->
<script setup>import dayjs from 'dayjs'// 省略前面小节的代码...// 格式化显示时间function dateFormat(date) {return dayjs(date).format('hh:mm:ss')}
</script><template><!-- 文字/图片消息 --><view class="message-item"><image class="room-avatar" :src="props.info.fromAvatar" /><view class="room-message"><view class="time">{{ dateFormat(props.info.createTime) }}</view><view v-if="props.type === 1" class="text">{{ props.info.msg.content }}</view><imagev-if="props.type === 4"class="image":src="props.info.msg.picture.url"mode="widthFix"/></view></view>
</template>
1.2.5 处方消息

医生根据问诊的情况开具诊断结果即为处方消息，到消息的类型值为 22，首先创建组件，布局模板如下所示：

1

接下来分成3个步骤来实现：

  1. 定义组件逻辑，要求能接收组件外部传入的数据

<!-- subpkg_consult/room/components/prescription-info.vue -->
<script setup>// 接收组件外部传入的数据const props = defineProps({info: {type: Object,default: {},},})
</script>

  1. 在页面中应用组件并传入数据

<!-- subpkg_consult/room/index.vue -->
<script setup>import { ref } from 'vue'import { io } from 'socket.io-client'import { useUserStore } from '@/stores/user'// 引入处方消息组件import prescriptionInfo from './components/prescription-info.vue'// 省略前面小节的代码
</script>
<template><view class="room-page"><!-- 此处将来填充更多代码... --><scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden">    <view class="message-container"><template v-for="message in messageList" :key="message.id"><!-- 电子处方 --><prescription-infov-if="message.msgType === 22":info="message.msg.prescription"/><!-- 此处将来填充更多代码... --></template></view></scroll-view><!-- 发送消息 --><view class="message-bar">...</view></view>
</template>

  1. 在组件中接收并渲染数据

<!-- subpkg_consult/room/components/prescription-info.vue -->
<script setup>// ...
</script><template><!-- 处方消息（22）--><view class="e-prescription"><view class="prescription-content"><view class="list-title"><view class="label">电子处方</view><view class="extra">原始处方<uni-icons size="16" color="#848484" type="right" /></view></view><view class="list-item">{{ props.info.name }}{{ props.info.genderValue }}{{ props.info.age }}岁{{ props.info.diagnosis }}</view><view class="list-item">开方时间：{{ props.info.createTime }}</view><view class="dividing-line"></view><template v-for="medicine in props.info.medicines" :key="medicine.id"><view class="list-title"><view class="label"><text class="name">{{ medicine.name }}</text><text class="unit">85ml</text><text class="quantity">x{{ medicine.quantity }}</text></view></view><view class="list-item">{{ medicine.usageDosag }}</view></template></view><navigatorclass="uni-link"hover-class="none"url="/subpkg_medicine/payment/index">购买药品</navigator></view>
</template>
1.2.6 原始处方

在医生开完处方后会生成电子版的处方，通过调用接口进行查看。

1.2.7 医生评价

在医生端结束问诊后，患者可以对医生进行评价，医生评价的布局模板为：

<!-- subpkg_consult/room/components/rate-info.vue -->
<script setup></script>
<template><!-- 医生评价 --><view class="doctor-rating"><view class="title">医生服务评价</view><view class="subtitle">本次在线问诊服务您还满意吗？</view><view class="rating"><uni-rate :size="28" margin="12" :value="0" /></view><view class="text"><uni-easyinputtype="textarea"maxlength="150":input-border="false":styles="{ backgroundColor: '#f6f6f6' }"placeholder-style="font-size: 28rpx; color: #979797"placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"/><text class="word-count">0/150</text></view><view class="anonymous"><uni-icons v-if="true" size="16" color="#16C2A3" type="checkbox-filled" /><uni-icons v-else size="16" color="#d1d1d1" type="circle" /><text class="label">匿名评价</text></view><button disabled class="uni-button">提交</button></view>
</template><script>export default {options: {styleIsolation: 'shared',},}
</script>
<style lang="scss">.doctor-rating {padding: 30rpx 30rpx 40rpx;border-radius: 20rpx;background-color: #fff;margin-top: 60rpx;.title {text-align: center;font-size: 30rpx;color: #121826;}.subtitle {text-align: center;font-size: 24rpx;color: #6f6f6f;margin: 10rpx 0 20rpx;}.rating {display: flex;justify-content: center;}.text {padding: 20rpx 30rpx;margin-top: 20rpx;background-color: #f6f6f6;border-radius: 20rpx;position: relative;}:deep(.uni-easyinput__content-textarea) {font-size: 28rpx;}.word-count {position: absolute;bottom: 20rpx;right: 30rpx;line-height: 1;font-size: 24rpx;color: #6f6f6f;}.anonymous {display: flex;align-items: center;justify-content: center;margin: 30rpx 0;color: #6f6f6f;font-size: 24rpx;.label {margin-left: 6rpx;}}.uni-button[disabled] {color: #a6dbd5;background-color: #eaf8f6;}}
</style>

接下来分成5个步骤来实现：

  1. 到页面中应用该组件，消息的类型值是 23

<!-- subpkg_consult/room/index.vue -->
<script setup>import { ref } from 'vue'import { io } from 'socket.io-client'import { useUserStore } from '@/stores/user'// 引入处方消息组件import rateInfo from './components/rate-info.vue'// 省略前面小节的代码
</script>
<template><view class="room-page"><!-- 此处将来填充更多代码... --><scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden"><view class="message-container"><template v-for="message in messageList" :key="message.id"><!-- 医生评价 --><rate-info v-if="message.msgType === 23"></rate-info><!-- 此处将来填充更多代码... --></template></view></scroll-view><!-- 发送消息 --><view class="message-bar">...</view></view>
</template>

  1. 获取评价数据并对数据进行验证：

    • v-model 获取数据

    • 字数统计使用计算属性

    • 控制字数使用 maxlength

<!-- subpkg_consult/room/components/rate-info.vue -->
<script setup>import { computed, ref } from 'vue'// 评价内容const formData = ref({score: 0,content: '',anonymousFlag: 0,})// 统计字数const wordCount = computed(() => {return formData.value.content.length})// 是否允许提交const buttonEnable = computed(() => {return formData.value.score})// 是否匿名评价function onAnonymousClick() {formData.value.anonymousFlag = Math.abs(formData.value.anonymousFlag - 1)}
</script><template><!-- 医生评价 --><view class="doctor-rating"><view class="title">医生服务评价</view><view class="subtitle">本次在线问诊服务您还满意吗？</view><view class="rating"><uni-rate v-model="formData.score" :size="28" margin="12" /></view><view class="text"><uni-easyinputtype="textarea"maxlength="150"v-model="formData.content":input-border="false":styles="{ backgroundColor: '#f6f6f6' }"placeholder-style="font-size: 28rpx; color: #979797"placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"/><text class="word-count">{{ wordCount }}/150</text></view><view @click="onAnonymousClick" class="anonymous"><uni-iconsv-if="formData.anonymousFlag"size="16"color="#16C2A3"type="checkbox-filled"/><uni-icons v-else size="16" color="#d1d1d1" type="circle" /><text class="label">匿名评价</text></view><button :disabled="!buttonEnable" class="uni-button">提交</button></view>
</template>

  1. 在提交评价时，需要获取问诊订单详情，在问诊订单详情中包含了医生的 ID，接口文档在这里

// services/consult.js
import { http } from '@/utils/http'// 省略前面小节的代码.../*** 问诊订单详情*/
export const orderDetailApi = (orderId) => {return http.get('/patient/consult/order/detail', { params: { orderId } })
}

将订单 ID 和医生 ID 传入组件

<!-- subpkg_consult/room/index.vue -->
<script setup>import { ref } from 'vue'import { io } from 'socket.io-client'import { useUserStore } from '@/stores/user'import { orderDetailApi } from '@/services/consult'// 省略前面小节的代码...// 问诊订单详情const orderDetail = ref({})// 省略前面小节的代码...// 获取问诊订单详情async function getOrderDetail() {// 调用接口const { code, data, message } = await orderDetailApi(props.orderId)// 检测接口是否调用成功if (code !== 10000) return uni.utils.toast(message)// 渲染问诊订单数据orderDetail.value = data}getOrderDetail()
</script><template><view class="room-page"><!-- 此处将来填充更多代码... --><scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden"><view class="message-container"><template v-for="message in messageList" :key="message.id"><!-- 医生评价 --><rate-info:order-id="props.orderId":doctor-id="orderDetail.docInfo?.id"v-if="message.msgType === 23"/><!-- 此处将来填充更多代码... --></template></view></scroll-view><!-- 发送消息 --><view class="message-bar">...</view></view>
</template>

  1. 调用接口提交评价的数据，接口文档在这里

// services/doctor.js
import { http } from '@/utils/http'// 省略了前面小节的代码.../*** 评价医生*/
export const evaluateDoctorApi = (data) => {return http.post('/patient/order/evaluate', data)
}
<!-- subpkg_consult/room/components/rate-info.vue -->
<script setup>import { computed, ref } from 'vue'import { evaluateDoctorApi } from '@/services/doctor'// 接收组件外部的数据const props = defineProps({orderId: String,doctorId: String,})// 提交表单async function onFormSubmit() {// 调用接口const { code, data, message } = await evaluateDoctorApi({docId: props.doctorId,orderId: props.orderId,...formData.value,})// 检测接口是否调用成功if (code !== 10000) return uni.utils.toast(message)uni.utils.toast('感谢您的评价！')// 标记已经评价过hasEvaluate.value = true}
</script><template><!-- 医生评价 --><view class="doctor-rating"><view class="title">医生服务评价</view><view class="subtitle">本次在线问诊服务您还满意吗？</view><view class="rating"><uni-rate v-model="formData.score" :size="28" margin="12" /></view><view class="text"><uni-easyinputtype="textarea"maxlength="150"v-model="formData.content":input-border="false":styles="{ backgroundColor: '#f6f6f6' }"placeholder-style="font-size: 28rpx; color: #979797"placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"/><text class="word-count">{{ wordCount }}/150</text></view><view @click="onAnonymousClick" v-if="!hasEvaluate" class="anonymous"><uni-iconsv-if="formData.anonymousFlag"size="16"color="#16C2A3"type="checkbox-filled"/><uni-icons v-else size="16" color="#d1d1d1" type="circle" /><text class="label">匿名评价</text></view><buttonv-if="!hasEvaluate":disabled="!buttonEnable"@click="onFormSubmit"class="uni-button">提交</button></view>
</template>

  1. 已评价状态，消息类型值 为 24

<!-- subpkg_consult/room/components/rate-info.vue -->
<script setup>import { ref, computed } from 'vue'import { evaluateDoctorApi } from '@/services/doctor'// 接收组件外部的数据const props = defineProps({orderId: String,doctorId: String,// 是否已评价过hasEvaluate: {type: Boolean,default: false,},// 评价的内容evaluateDoc: {type: Object,default: {},},})// 评价内容const formData = ref({score: props.evaluateDoc.score,content: props.evaluateDoc.content,// 注意要指定一个默认值为 0anonymousFlag: 0,})// 是否已经评价过const hasEvaluate = ref(props.hasEvaluate)// 统计字数const wordCount = computed(() => {// 通过 ? 来避免初始数据中 content 不存在的情况return formData.value.content?.length || 0})
</script>
<!-- subpkg_consult/room/index.vue -->
<script setup>import { ref } from 'vue'import { io } from 'socket.io-client'import { useUserStore } from '@/stores/user'import { orderDetailApi } from '@/services/consult'// 省略前面小节的代码...
</script><template><view class="room-page"><!-- 此处将来填充更多代码... --><scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden"><view class="message-container"><template v-for="message in messageList" :key="message.id"><!-- 医生评价（已评价） --><rate-info:evaluateDoc="message.msg.evaluateDoc"has-evaluatev-if="message.msgType === 24"/><!-- 此处将来填充更多代码... --></template></view></scroll-view><!-- 发送消息 --><view class="message-bar"></view></view>
</template>
1.3 发送消息

患者向医生告之病情及询问诊断方法，分为文字图片消息两种类型，且只有问诊订单状态处理咨询中时才以发送消息，问诊订单的状态包含在订单详情数据中。

<!-- subpkg_consult/room/index.vue -->
<script setup>// 省略前面小节的代码...// 订单状态为3时，表示 问诊中...// 监听订单状态变化socket.on('statusChange', getOrderDetail)// 省略前面小节的代码...
</script>
<template><view class="room-page"><!-- 此处将来填充更多代码... --><scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden"><view class="message-container"><!-- 省略前面小节的代码... --></view></scroll-view><!-- 发送消息 --><view class="message-bar"><template v-if="true"><uni-easyinput:disabled="orderDetail.status !== 3":clearable="false":input-border="false"placeholder-style="font-size: 32rpx; color: #c3c3c5;"placeholder="问医生"/><view class="image-button"><uni-icons size="40" color="#979797" type="image"></uni-icons></view></template><button v-else class="uni-button">咨询其它医生</button></view></view>
</template>
1.3.1 文字消息

发送文字消息分3个步骤来实现：

  1. 监听 uni-easyinput 组件的 confirm 事件并使用 v-model 获取表单的内容

<!-- subpkg_consult/room/index.vue -->
<script setup>// 省略前面小节的代码...// 文字消息const textMessage = ref('')// 省略前面小节的代码...// 发送文字消息function onInputConfirm() {console.log(textMessage.value)}// 省略前面小节的代码...
</script><template><view class="room-page"><!-- 此处将来填充更多代码... --><scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden"><view class="message-container">...</view></scroll-view><!-- 发送消息 --><view class="message-bar"><template v-if="true"><uni-easyinputv-model="textMessage"@confirm="onInputConfirm":disabled="orderDetail.status !== 3":clearable="false":input-border="false"placeholder-style="font-size: 32rpx; color: #c3c3c5;"placeholder="问医生"/><view class="image-button"><uni-icons size="40" color="#979797" type="image"></uni-icons></view></template><button v-else class="uni-button">咨询其它医生</button></view></view>
</template>

  1. 触发服务端正在监听的事件类型，文档地址在这里

<script setup>// 省略前面小节的代码...// 用户登录信息（不具有响应式）const { token, userId } = useUserStore()// 问诊订单详情const orderDetail = ref({})// 文字消息const textMessage = ref('')// 省略前面小节的代码...// 发送文字消息function onInputConfirm() {// 发送消息socket.emit('sendChatMsg', {// 当前登录用户的IDfrom: userId,to: orderDetail.value?.docInfo?.id,msgType: 1,msg: {content: textMessage.value,},})// 清空表单textMessage.value = ''}// 省略前面小节的代码...
</script>

在用户登录成功时，只记录了用户的 token 在患者向医生发送消息时还需要传递用户的 ID，在 Pinia 中添加数据来记录登录用户的 ID

// stores/user.js
import { ref } from 'vue'
import { defineStore } from 'pinia'export const useUserStore = defineStore('user',() => {// 记录用户登录状态const token = ref('')// 记录登录成功后要路转的地址（默认值为首页）const redirectURL = ref('/pages/index/index')// 跳转地址时采用的 API 名称const openType = ref('switchTab')// 用户IDconst userId = ref('')return { token, userId, redirectURL, openType }},{persist: {paths: ['token', 'userId', 'redirectURL', 'openType'],},}
)
<!-- pages/login/index.vue -->
<script setup>async function onFormSubmit() {// 判断是否勾选协议if (!isAgree.value) return uni.utils.toast('请先同意协议!')// 调用 uniForms 组件验证数据的方法try {// 省略前面小节的代码...// 持久化存储 tokenuserStore.token = data.token// 存储登录用户的 IDuserStore.userId = data.id} catch (error) {console.log(error)}}
</script>

  1. 调整消息的对齐方式，患者消息靠右显示

在消息中包含的属性 from 是消息发送者的 ID，如果与登录用户的 ID 一致，则表示是患者发送的消息，消息的内容要靠右显示，类名 reverse 可以控制靠右对齐。

<!-- subpkg_consult/room/components/message-info.vue -->
<script setup>import dayjs from 'dayjs'import { useUserStore } from '@/stores/user.js'// 登录用户 IDconst { userId } = useUserStore()// 省略前面小节的代码...
</script><template><!-- 文字/图片消息 --><view :class="{ reverse: props.info.from === userId }" class="message-item"><image class="room-avatar" :src="props.info.fromAvatar" /><view class="room-message"><view class="time">{{ dateFormat(props.info.createTime) }}</view><view v-if="props.type === 1" class="text">{{ props.info.msg.content }}</view><imagev-if="props.type === 4"class="image":src="props.info.msg.picture.url"mode="widthFix"/></view></view>
</template>
1.3.2 图片消息

发送图片消息需要将图片上传到云空间，需要调用 uniCloud 提供的 API chooseAndUploadFile，我们分x步来实现：

  1. 判断问诊订单状态是否为问诊中

<!-- subpkg_consult/room/index.vue -->
<script setup>// 省略前面小节代码...// 发送图片消息function onImageButtonClick() {// 是否在问诊状态中...if (orderDetail.value.status !== 3) {return uni.utils.toast('医生当前不在线!')}}// 省略前面小节代码...
</script><template><view class="room-page"><!-- 此处将来填充更多代码... --><scroll-viewrefresher-enabledrefresher-background="#f2f2f2"scroll-ystyle="flex: 1; overflow: hidden"><view class="message-container">...</view></scroll-view><!-- 发送消息 --><view class="message-bar"><template v-if="true"><uni-easyinputv-model="textMessage"@confirm="onInputConfirm":disabled="orderDetail.status !== 3":clearable="false":input-border="false"placeholder-style="font-size: 32rpx; color: #c3c3c5;"placeholder="问医生"/><view @click="onImageButtonClick" class="image-button"><uni-icons size="40" color="#979797" type="image"></uni-icons></view></template><button v-else class="uni-button">咨询其它医生</button></view></view>
</template>

  1. 调用 API 上传到 uniCloud 存储空间

<!-- subpkg_consult/room/index.vue -->
<script setup>// 省略前面小节代码...// 发送图片消息function onImageButtonClick() {// 是否在问诊状态中...if (orderDetail.value.status !== 3) {return uni.utils.toast('医生当前不在线!')}// 上传图片到 uniClouduniCloud.chooseAndUploadFile({type: 'image',count: 1,extension: ['.jpg', '.png', '.gif'],success: ({ tempFiles }) => {console.log(tempFiles)},})}// 省略前面小节代码...
</script><template>...
</template>

  1. 向医生发送图片消息，文档地址在这里

<!-- subpkg_consult/room/index.vue -->
<script setup>// 省略前面小节代码...// 用户登录信息（不具有响应式）const { token, userId } = useUserStore()// 发送图片消息function onImageButtonClick() {// 是否在问诊状态中...if (orderDetail.value.status !== 3) {return uni.utils.toast('医生当前不在线!')}// 上传图片到 uniClouduniCloud.chooseAndUploadFile({type: 'image',count: 1,extension: ['.jpg', '.png', '.gif'],success: ({ tempFiles }) => {// 上传成功的图片const picture = {id: tempFiles[0].lastModified,url: tempFiles[0].url,}// 发送消息socket.emit('sendChatMsg', {from: userId,to: orderDetail.value?.docInfo?.id,msgType: 4,msg: { picture },})},})}// 省略前面小节代码...
</script>
1.4 问诊订单状态

患者在与医生对话的过程中问诊订单状态会发生改变，包括待支付、待接诊、咨询中、已完成、已取消，在页面的顶部要根据订单的状态展示不同的内容。

  1. 将问诊状态的布局模板独立到组件中，要求组件能接收3个数据

    • status 问诊订单的状态值

    • statusValue 问诊订单的文字描述

    • countdown 倒计时剩余时长

<!-- subpkg_consult/room/components/room-status.vue -->
<script setup>// 接收组件外部传入的数据const props = defineProps({status: Number,statusValue: String,countdown: Number,})
</script>
<template><!-- 咨询室状态 --><view class="room-status"><view class="status countdown" v-if="false"><text class="label">咨询中</text><view class="time">剩余时间:<uni-countdowncolor="#3c3e42":font-size="14":show-day="false":second="0"/></view></view><view v-else-if="false" class="status waiting">已通知医生尽快接诊，24小时内医生未回复将自动退款</view><view v-else class="status"><uni-icons size="20" color="#121826" type="checkbox-filled" />已结束</view></view>
</template><style lang="scss">.room-status {font-size: 26rpx;position: sticky;top: 0;z-index: 99;.status {display: flex;padding: 30rpx;background-color: #fff;}.waiting {color: #16c2a3;background-color: #eaf8f6;}.countdown {justify-content: space-between;}.label {color: #16c2a3;}.icon-done {color: #121826;font-size: 28rpx;margin-right: 5rpx;}.time {display: flex;color: #3c3e42;}:deep(.uni-countdown) {margin-left: 6rpx;}}
</style>

  1. 在页面中应用组件并传入数据，查询订单状态的的 API 在前面小节中已经调用了，即 getOrderDetail

<!-- subpkg_consult/room/index.vue -->
<script setup>// 省略前面小节的代码...// 问诊订单详情const orderDetail = ref({})// 获取问诊订单详情async function getOrderDetail() {// 调用接口const { code, data, message } = await orderDetailApi(props.orderId)// 检测接口是否调用成功if (code !== 10000) return uni.utils.toast(message)// 渲染问诊订单数据orderDetail.value = data}// 省略前面小节的代码...
</script>
<template><view class="room-page"><!-- 问诊订单状态 --><room-status:status-value="orderDetail.statusValue":countdown="orderDetail.countdown":status="orderDetail.status"/><!-- 省略前面小节的代码 --></view>
</template>

  1. 根据传入组件的订单状态展示数据

<!-- subpkg_consult/room/components/room-status.vue -->
<template><!-- 咨询室状态 --><view class="room-status"><!-- 待接诊(status: 2) --><view v-if="props.status === 2" class="status waiting">{{ props.statusValue }}</view><!-- 咨询中(status: 3) --><view class="status" v-if="props.status === 3"><text class="label">{{ props.statusValue }}</text><view class="time">剩余时间:<uni-countdowncolor="#3c3e42":font-size="14":show-day="false":second="props.countdown"/></view></view><!-- 已完成(status: 4) --><view v-if="props.status === 4" class="status"><view class="wrap"><uni-icons size="20" color="#121826" type="checkbox-filled" />{{ props.statusValue }}</view></view></view>
</template>
1.5 消息分段

每次重新建立 Socket 连接后（刷新页面），后端都会对数据进行分组，前端在进行展示时也相应的需要展示分段的时间节点，这个时间节点按通知消息类型处理。

<!-- subpkg_consult/room/index.vue -->
<script setup>// 省略前面小节的代码...// 接收消息列表socket.on('chatMsgList', ({ code, data }) => {// 没有返回数据if (code !== 10000) return// 提取列表数据const tempList = []data.forEach(({ createTime, items }) => {// 追加到消息列表中tempList.push(// 构造一条数据，显示时间节点{msgType: 31,msg: { content: createTime },id: createTime,},...items)})// 追加到消息列表中messageList.value.unshift(...tempList)})// 省略后面小节的代码...
</script>

在返回的数据中 data 是一个数组，每个单元是一个消息的分组，在对该数组遍历时前端构造一条数据放到数组单元中，被构告的这条件数据仅仅是要显示一个时间节点。

1.6 历史消息

用户下拉操作时分页获取聊天记录，按以下几个步骤来实现：

  1. 启动下拉刷新并监听下拉操作

<!-- subpkg_consult/room/index.vue -->
<script setup>// 省略前面小节的代码...// 关闭下拉动画交互const refreshTrigger = ref(false)// 省略前面小节的代码...// 下拉获取历史消息function onPullDownRefresh() {// 开启下拉交互动画refreshTrigger.value = truesetTimeout(() => {// 关闭下拉交互动画refreshTrigger.value = false}, 1000)}// 省略前面小节的代码...
</script><template><view class="room-page"><!-- 省略前面小节的代码... --><scroll-view@refresherrefresh="onPullDownRefresh"refresher-enabled:refresher-triggered="refreshTrigger"background-color="#f2f2f2">...</scroll-view><!-- 省略前面小节的代码... --></view>
</template>

  1. 触发后端定义的事件类型获取历史消息，文档地址在这里。

<!-- subpkg_consult/room/index.vue -->
<script setup>// 省略前面小节的代码...// 关闭下拉动画交互const refreshTrigger = ref(false)// 上次获取历史消息节点const lastTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))// 省略前面小节的代码...// 下拉获取历史消息function onPullDownRefresh() {// 开启下拉交互动画refreshTrigger.value = true// 获取历史消息socket.emit('getChatMsgList', 20, lastTime.value, props.orderId)}// 省略前面小节的代码...
</script><template><view class="room-page"><!-- 省略前面小节的代码... --><scroll-page@refresherrefresh="onPullDownRefresh"refresher-enabled:refresher-triggered="refreshTrigger"background-color="#f2f2f2">...</scroll-page><!-- 省略前面小节的代码... --></view>
</template>

  1. 更新时间节点，获取的历史消息会返回给客户端

<!-- subpkg_consult/room/index.vue -->
<script setup>// 省略前面小节的代码...// 接收消息列表socket.on('chatMsgList', ({ code, data }) => {// 关闭下拉交互动画refreshTrigger.value = false// 没有返回数据if (code !== 10000) return// 提取列表数据const tempList = []data.forEach(({ createTime, items }, index) => {// 获取消息的时间节点if (index === 0) lastTime.value = createTime// 追加到消息列表中tempList.push({msgType: 31,msg: { content: createTime },id: createTime,},...items)})// 是否获取到新数据if (tempList.length === 0) return uni.utils.toast('没有更多聊天记录了')// 追加到消息列表中messageList.value.unshift(...tempList)})// 省略前面小节的代码...
</script>

注意事项：

  • 历史消息是以从后往前的顺序获取，将历史消息中第1个分组的时间节点做为下一次获取历史消息的起始点

  • 获取数据即表示请求结束，要关闭下拉交互的动画

  • 判断是否还存在更多的历史消息

支付宝支付账号，密码为 111111

scobys4865@sandbox.com

askgxl8276@sandbox.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/497036.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【连续学习之SSL算法】2018年论文Selfless sequential learning

【连续学习之SSL算法】2018年论文Selfless sequential learning

1 介绍 年份&#xff1a;2018 期刊&#xff1a; arXiv preprint Aljundi R, Rohrbach M, Tuytelaars T. Selfless sequential learning[J]. arXiv preprint arXiv:1806.05421, 2018. 本文提出了一种名为SLNID&#xff08;Sparse coding through Local Neural Inhibition and…
阅读更多...
《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》学习笔记——HarmonyOS技术理念

《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》学习笔记——HarmonyOS技术理念

1.2 技术理念 在万物智联时代重要机遇期&#xff0c;HarmonyOS结合移动生态发展的趋势&#xff0c;提出了三大技术理念&#xff08;如下图3-1所示&#xff09;&#xff1a;一次开发&#xff0c;多端部署&#xff1b;可分可合&#xff0c;自由流转&#xff1b;统一生态&#xf…
阅读更多...
基于springboot校园招聘系统源码和论文

基于springboot校园招聘系统源码和论文

可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C、python、数据可视化、大数据、文案 使用旧方法对校园招聘系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在校园招聘系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比…
阅读更多...
【小程序】自定义组件的data、methods、properties

【小程序】自定义组件的data、methods、properties

目录 自定义组件 - 数据、方法和属性 1. data 数据 2. methods 方法 3. properties 属性 4. data 和 properties 的区别 5. 使用 setData 修改 properties 的值 自定义组件 - 数据、方法和属性 1. data 数据 在小程序组件中&#xff0c;用于组件模板渲染的私有数据&…
阅读更多...
Python 敲电子木鱼，见机甲佛祖，修赛博真经

Python 敲电子木鱼，见机甲佛祖，修赛博真经

Python 敲电子木鱼&#xff0c;见机甲佛祖&#xff0c;修赛博真经 相关资源文件已经打包成EXE文件&#xff0c;可下载相关资源压缩包后双击直接运行程序&#xff0c;且文章末尾已附上相关源码&#xff0c;以供大家学习交流&#xff0c;博主主页还有更多Python相关程序案例&…
阅读更多...
acitvemq AMQP:因为消息映射策略配置导致的MQTT接收JMS消息乱码问题 x-opt-jms-dest x-opt-jms-msg-type

acitvemq AMQP:因为消息映射策略配置导致的MQTT接收JMS消息乱码问题 x-opt-jms-dest x-opt-jms-msg-type

使用ActiveMQ&#xff08;5.14.5&#xff09;作消息系统服务的场景下&#xff0c; 当我用Apache Qpid Proton发送消息(使用AMQP协议)发送JMS消息&#xff0c;用Paho MQTT接收消息的时候&#xff0c; 收到的消息前面总是有一串乱码&#xff0c;大概就是这样&#xff1a; 4Sp?AS…
阅读更多...
viva-bus 航空机票网站 Akamai3 分析

viva-bus 航空机票网站 Akamai3 分析

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 有相关问题请第一时间头像私信联系我删…
阅读更多...
pyQT + OpenCV相关练习

pyQT + OpenCV相关练习

一、设计思路 1、思路分析与设计 本段代码是一个使用 PyQt6 和 OpenCV 创建的图像处理应用程序。其主要功能是通过一个图形界面让用户对图片进行基本的图像处理操作&#xff0c;如灰度化、翻转、旋转、亮度与对比度调整&#xff0c;以及一些滤镜效果&#xff08;模糊、锐化、边…
阅读更多...
【数据库初阶】Linux中库的基础操作

【数据库初阶】Linux中库的基础操作

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; 数据库初阶 &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 亲爱的小伙伴们&#xff0c;大家好&#xff01;在这篇文章中&#xff0c;我们将深入浅出地为大家讲解 Linux…
阅读更多...
Element Plus 日期时间选择器大于当天时间置灰

Element Plus 日期时间选择器大于当天时间置灰

效果&#xff1a; 实现思路&#xff1a; 点击官方链接的日期时间选择器的属性查看&#xff0c;发现disabled-date属性 一个用来判断该日期是否被禁用的函数&#xff0c;接受一个 Date 对象作为参数。 应该返回一个 Boolean 值&#xff0c;即用函数返回布尔值。 前言 JavaScrip…
阅读更多...
线性直流电流

线性直流电流

电阻网络的等效 等效是指被化简的电阻网络与等效电阻具有相同的 u-i 关系 (即端口方程)&#xff0c;从而用等效电阻代替电阻网络之后&#xff0c;不 改变其余部分的电压和电流。 串联等效&#xff1a; 并联等效&#xff1a; 星角变换 若这两个三端网络是等效的&#xff0c;从任…
阅读更多...
Java与SQL Server数据库连接的实践与要点

Java与SQL Server数据库连接的实践与要点

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;Java和SQL Server数据库交互是企业级应用开发中的重要环节。本文详细探讨了使用Java通过JDBC连接到SQL Server数据库的过程&#xff0c;包括加载驱动、建立连接、执行SQL语句、处理异常、资源管理、事务处理和连…
阅读更多...
【Halcon】例程讲解：基于形状匹配与OCR的多图像处理（附图像、程序下载链接）

【Halcon】例程讲解：基于形状匹配与OCR的多图像处理（附图像、程序下载链接）

1. 开发需求 在参考图像中定义感兴趣区域&#xff08;ROI&#xff09;&#xff0c;用于形状匹配和文本识别。通过形状匹配找到图像中的目标对象位置。对齐多幅输入图像&#xff0c;使其与参考图像保持一致。在对齐后的图像上进行OCR识别&#xff0c;提取文本和数字信息。以循环…
阅读更多...
从0入门自主空中机器人-2-2【无人机硬件选型-PX4篇】

从0入门自主空中机器人-2-2【无人机硬件选型-PX4篇】

1. 常用资料以及官方网站 无人机飞控PX4用户使用手册&#xff08;无人机基本设置、地面站使用教程、软硬件搭建等&#xff09;&#xff1a;https://docs.px4.io/main/en/ PX4固件开源地址&#xff1a;https://github.com/PX4/PX4-Autopilot 飞控硬件、数传模块、GPS、分电板等…
阅读更多...
Artec Space Spider助力剑桥研究团队解码古代社会合作【沪敖3D】

Artec Space Spider助力剑桥研究团队解码古代社会合作【沪敖3D】

挑战&#xff1a;考古学家需要一种安全的方法来呈现新出土的陶瓷容器&#xff0c;对比文物形状。 解决方案&#xff1a;Artec Space Spider, Artec Studio 效果&#xff1a;本项目是REVERSEACTION项目的一部分&#xff0c;旨在研究无国家社会中复杂的古代技术。研究团队在考古地…
阅读更多...
IPv6 基础协议-NDP

IPv6 基础协议-NDP

IPv6 基础协议报文 何为基础协议&#xff1f;像v4中的icmp、arp、hdcp之类的 在v6中只需要NDP协议&#xff0c;他是通过ICMPv6报文完成的&#xff0c;她能够实现邻居发现、无状态地址检测、重复地址检测、PMTU等功能 RS&#xff08;133&#xff09;RA&#xff08;134&#x…
阅读更多...
数据库原理及应用（MySQL版-李月军）-习题参考答案

数据库原理及应用（MySQL版-李月军）-习题参考答案

数据库原理及应用&#xff08;MySQL版&#xff09;-微课视频版 习题参考答案 习 题一 一&#xff0e;选择题 1、D 2、C 3、C 4、B 5、D 6、B 7、A 8、B 9、C 10、A 11、B 12、C 13、①A②B③C 14、①E②B 15、①B②C③B 16、B 17、A 18、D 二&#xff0e;填空题 1、文件…
阅读更多...
用Python开启人工智能之旅（四）深度学习的框架和使用方法

用Python开启人工智能之旅（四）深度学习的框架和使用方法

第四部分&#xff1a;深度学习的框架和使用方法 用Python开启人工智能之旅&#xff08;一&#xff09;Python简介与安装 用Python开启人工智能之旅&#xff08;二&#xff09;Python基础 用Python开启人工智能之旅&#xff08;三&#xff09;常用的机器学习算法与实现 用Pyt…
阅读更多...
洛谷 P1725：琪露诺 ← 单调队列+DP

洛谷 P1725：琪露诺 ← 单调队列+DP

【题目来源】https://www.luogu.com.cn/problem/P1725【题目描述】 在幻想乡&#xff0c;琪露诺是以笨蛋闻名的冰之妖精。 某一天&#xff0c;琪露诺又在玩速冻青蛙&#xff0c;就是用冰把青蛙瞬间冻起来。但是这只青蛙比以往的要聪明许多&#xff0c;在琪露诺来之前就已经跑到…
阅读更多...
win11永久修改pdf默认打开方式

win11永久修改pdf默认打开方式

电脑总是重启或过一阵子就自动修改pdf文件打开方式为浏览器打开&#xff0c;按照传统方式 右键→属性&#xff0c;修改打开方式&#xff0c;不好使 得用更根本的方法&#xff01;打开设置&#xff0c;找到 应用→默认应用 &#xff08;或者 "winR"打开运行&#xff0…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023