项目描述:瑞德医生是为爱宠人士提供的一个专门宠物医生在线咨询平台,平台内提供了大量的成功治疗病例,同时宠物主可发起咨询,与宠物医生一对一在线对话,也可进入药品商城进行药物选购。该项目主要模块有在线问诊,宠物药品,专家问诊,宠物社区等
项目优化:
基于公共部分拆分的逻辑封装和类型声明文件使用骨架屏在真实内容渲染出来前显示,避免白屏现象,提高用户体验
按需引入第三方组件库
封装对 svg 地图、自定义导航栏、单选按钮、支付抽屉等组件封装 axios 请求,逻辑代码的分离
项目亮点:
第三方支付:
通过第三方支付实现我们订单的一个支付功能。我们通过点击支付弹出抽屉框,生成订单 ID ,并将后端需要的参数发送给服务器得到一个加密支付地址,我们通过 location.href 进行跳转到加密支付地址完成支付。前端通过 beforeEnter 给路由规则设置导航守卫,进行支付结果的拦截 Websocket 即时通信:
通过 socket.io()创建 socket 实例并简历连接,传入服务器基地址,token 和订单 ID 进行配置,通过 chatMsgList 监听默认聊天记录并判断消息类型、发送人身份实现消息渲染,使用 socket.emit()向服务器发送消息,socket.on()接收发送成功消息和对方消息,最后在 onUnmounted 钩子函数使用 socket.close()断开来连接