# 微信长辈就医适老化SDK方案

# 一接入方案

微信提供一套前端的 SDK，接入方只需要类似于接入 VUE 一样提供一个 div 的选择器进行初始化后，在不同的页面步骤中传入对应的协议字段 SDK 就会在对应 div 中渲染出对应状态的适老化后的页面。

页面的样式以及交互全部由 SDK 进行处理，接入方只需要处理页面的逻辑部分（数据接口拉取、事件钩子回调逻辑等）。

# 二接入代码示例

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="no">
  <meta name="format-detection" content="telephone=no">
  <link rel="icon" href="//res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico">
  <link rel="dns-prefetch" href="//res.wx.qq.com">
  <title></title>
  <!-- 【必须】业务方代码，调用长辈就医SDK begin -->
  <script>
  // 开发者必须要完善下面的代码
  window.onElderMedicalSDKReady = function() {
    var elderMedicalSDK = window.elderMedicalSDK
    // 初始化SDK的回调函数
    elderMedicalSDK.init({
      onIndexPageMount: function() {
        // TODO: 从后台获取并设置院区的数据
        var branchList = []
        // 封装Promise给医院使用，可以组合一些异步的请求
        // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
        function getBranchList() {
            return new elderMedicalSDK.Promise(function(resolve, reject) {
              setTimeout(function() {
                resolve(branchList)
              }, 500)
        }
        getBranchList().then(function(branchList) {
          elderMedicalSDK.setBranchList({
            branchList: branchList,
            errcode: 0,
            errmsg: ''
          })
        })
      },
      // 选择院区点击
      onNoticePageMount: function(branch) {
        // 从后台获取就医须知的通知，并通过下面的函数设置
        elderMedicalSDK.setNotice({
          notice: '',
          errmsg: '',
          errcode: 0
        })
      },
      // 就医须知确认点击
      onDepartmentPageMount: function() {
        // TODO: 从后台获取就医科室，并通过下面的函数设置
        var regDept = []
        elderMedicalSDK.setDepartmentList({
          departmentList: regDept,
          errcode: 0,
          errmsg: ''
        })
      },
      // 选择科室点击
      onDoctorPageMount: function(dept) {
        // TODO: 从后台获取就医科室，并通过下面的函数设置
        var dateList = []
        elderMedicalSDK.setDoctorDateList({          dateList: dateList,
          errmsg: '',
          errcode: 0
        })
      },
      // 选择医生点击
      onPeriodPageMount: function(doctor) {
        // TODO: 从后台获取到该医生的某天的挂号的时间点，并通过下面的函数设置
        elderMedicalSDK.setDoctorTimePointInfo({
          doctorInfo: {},
          amList: [],
          pmList: [],
          errcode: 0,
          errmsg: ''
        })
      },
      onPayPageMount: function(payPageObj) {
        // TODO: 获取挂号的详情信息，比如就诊人等
      },
      onPayOrder: function(payOrder) {
        // TODO: 下单挂号并且跳转到支付的页面
      },
      onCertPayOrder: function(payOrder) {
        // TODO: 点击医保支付选项
      },
      onCancelOrder: function(payOrder) {
        // TODO: 点击退号按钮触发
      },
      // ...
    })
    // 判断下sdk是否是新版
    if (elderMedicalSDK.setOptions) {
      elderMedicalSDK.setOptions({
        showCancelOrder: false, // 挂号详情页面，是否显示取消挂号，默认是true表示显示
        notice: {
          checkedBgColor: 'red', // 就医须知-勾选框颜色
          btnBgColor: 'red' // 就医须知-按钮背景色
        },
        chooseDoctor: {
          chooseDateBgColor: 'red', // 选择医生-当前日期背景色
          recentTagColor: 'blue', // 选择医生-最近就诊字体颜色
          chooseDateColor: 'red', // 选择医生-日期有号文字颜色
          canRegColor: 'green', // 选择医生-剩余号数量颜色
          chooseDateColor: 'blue', // 选择医生-已满颜色
        },
        choosePeriod: {
          color: 'red', // 选择就诊时段-文字颜色
        },
        payDetail: {
          btnBgColor: 'red' // 确认挂号-按钮背景色
        }
      })
    }

  }
  </script>
  <!-- 【必须】业务方代码，调用长辈就医SDK end -->

  <!-- 【必须】引用长辈就医的SDK begin -->
  <script defer="defer" src="https://wximg.qq.com/cityservices/insuranceres/eldermedical/js/0.2.4/elder-medical-sdk-0.2.4.js"></script>
    <!-- 【必须】引用长辈就医的SDK end -->
</head>

<body>
  <!-- 【必须】长辈就医的SDK 会注入到此DOM结构 begin -->
  <div id="app"></div>
  <!-- 【必须】长辈就医的SDK 会注入到此DOM结构 end -->
</body>
</html>

# 三流程 & SDK协议介绍

# 1 挂号流程

# 1.1 选择院区

页面预览

该页面的数据通过 elderMedicalSDK.setBranchList(param) 设置（在onMount里面调用），参数param是Object对象，其定义如下：

字段名	参数描述	参数类型	必填	备注
branchList	所有的院区列表	Array[BranchItem]	是	BranchItem见下表
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

BranchItem定义：

字段名	参数描述	参数类型	必填	备注
name	院区名称	String	是
address	院区地址	String	是
ybCode	院区代码	String	是	院区的唯一标识，后面的科室需要根据此字段获取
phone	院区电话	String	否

选择院区触发 onNoticePageMount({ybCode})回调函数，会自动进入就医须知页面，BranchItem的定义参数如上。onNoticePageMount的实现里面，需要获取就医须知的内容，并通过elderMedicalSDK.setNotice(param) 接口来设置显示在页面

# 1.2 就医须知

页面预览

elderMedicalSDK.setNotice(param) 函数param的定义如下：

参数名	描述	类型	必填	备注
notice	就医须知内容	String	是
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

onDepartmentPageMount回调里面，需要通过后台获取下一步需要的科室信息，然后通过 elderMedicalSDK.setDepartmentList(deptList) 设置科室信息

# 1.3 选择科室

页面预览：

elderMedicalSDK.setDepartmentList(param) 入参param是Object，其定义：

字段名	描述	参数类型	是否必填	备注
departmentList	科室信息	Array[DepartmentItem]	DepartmentItem定义见下面
showRecent	是否支持最近就诊的医生	Boolean	否	默认true
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

DepartmentItem定义钩子：

字段名	描述	类型	必填	备注
deptId	科室唯一ID	String	是
deptName	科室名称	String	是
deptList	二级科室的列表	Array[DepartmentItem]	否	如果科室结构是二级的，则通过此字段传入

选择科室会触发回调onDoctorPageMount(item)，item是Object对象，包含deptId和deptName两个字段。onDoctorPageMount函数内通过后台后去到医生的可挂号的日期列表，然后通过elderMedicalSDK.setDoctorDateList(param)设置下一步的数据（进入下面的1.4）

如果是选择了最近就诊的医生，则触发回调onRecentDoctorPageMount()，onRecentDoctorPageMount函数内通过后台获取最近就诊的医生列表，然后通过elderMedicalSDK.setRecentDoctorList(param)设置下一步的数据（进入下面的步骤1.5）

# 1.4 选择医生

页面预览

elderMedicalSDK.setDoctorDateList(param) 的入参param是Object类型，定义如下：

字段名	描述	类型	必填	备注
dateList	挂号的医生列表	Array[DateDoctorItem]	是	DateDoctorItem定义如下
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

DateDoctorItem定义如下

参数名	描述	类型	必填	备注
date	可挂号的日期	String	是	格式示例“2022-10-10”
doctorList	该日期下的可挂号医生	Array[DoctorItem]	是	DoctorItem定义如下

DoctorItem定义如下

参数名	描述	类型	必填	备注
doctorId	医生唯一ID	String	是
deptId	医生所属科室ID	String	是
deptName	医生所属科室名字	String	是
hospSubname	所属院区的名字	String	否
ybCode	所属院区的院区码	String	否
doctorName	医生名字	String	是
gender	医生性别	String	是	取值F表示女性，M表示男性
titleId	医生职称ID	String	是
titleName	医生职称	String	是	示例“主任医师”
doctorDesc	医生描述	String	是
doctorPhoto	医生的照片URL	String	是	是http协议的照片链接
regProj	挂号项目代码	String	是
regFee	挂号费用	String	是	示例“30.00”，单位元
count	余号数量	number	是	可挂号的余号数量

选择日期会触发elderMedicalSDK.onDateClick(param)事件，param参数是Object，包含date字段，格式是“2022-10-22”，如果有需要拉一些其它数据，比如挂号费，可以在此接口重新拉取并通过updateDoctorDateList更新某一天的数据，传进来的参数和setDoctorDateList的参数一样，updateDoctorDateList会和setDoctorDateList合并。

选择了医生会触发elderMedicalSDK.onPeriodPageMount(periodPage)，参数periodPage的定义如下：

参数名	描述	类型	必填	备注
doctorId	医生唯一ID	String	是
ybCode	院区唯一ID	String	是
deptId	医生所属科室ID	String	是
regDate	选中的挂号的日期	String	是	示例“2022-10-22”
regProj	挂号项目代码	String	是
titleId	医生职称ID	String	是

在onPeriodPageMount该函数内需要后台获取该医生的对应日期的就诊时段，并通过接口 elderMedicalSDK.setDoctorTimePointInfo(timePointInfo) 来显示下面的内容

# 1.5 选择最近就诊的医生

页面预览

选择最近就诊的医生是先选择医生，再选择日期，所以触发的事件和选择医生的流程会有所区别，此页面通过 elderMedicalSDK.setRecentDoctorList(param) 设置医生数据，param的定义如下

字段名	描述	类型	必填	备注
doctorList	挂号的医生列表	Array[DoctorItem]	是	DoctorItem定义在选择医生章节
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

点击医生会弹起选择日期的半屏弹窗，同时会触发事件onRecentDoctorClick(param), param是DoctorItem对象，在该事件获取该医生的就诊的日期，然后通过 elderMedicalSDK.setRecentDoctorDateList(param) 设置排班日期，param是Object，定义如下：

字段名	描述	类型	必填	备注
dateList	日期列表	Array[DateItem]	是	只需要传date、count两个字段
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

半屏弹窗选择了日期之后，并进入选择时间的页面，同时会触发 onPeriodPageMount(param) 函数，param是Object，其定义如下：

字段名	描述	类型	必填
doctorId	医生唯一ID	String	是
ybCode	院区唯一ID	String	是
deptId	医生所属科室ID	String	是
regDate	选中的挂号的日期	String	是
regProj	挂号项目代码	String	是
titleId	医生职称ID	String	是

# 1.6 选择时间

页面预览如下，通过接口 elderMedicalSDK.setDoctorTimePointInfo(timePointInfo) 来设置下面的显示的内容

elderMedicalSDK.setDoctorTimePointInfo(param) 的入参param是Object类型，定义如下：

字段名	参数描述	参数类型	必填	备注
doctorInfo	医生的详细信息	DoctorItem	是	DoctorItem定义见上面
list	各个时间段可挂号的时段列表	Array[TimePointInfo]	是	TimePointInfo定义如下
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

TimePointInfo定义如下：

参数名	参数描述	参数类型	必填	备注
pointId	该时段的唯一ID	String	否
beginTime	该时段开始时间	String	是	示例“08:00”
endTime	该时段结束时间	String	是	示例“08:30”
timeType	时段的类型	String	是	在挂号的回调会带回去，例如am、pm之类的，由医院定义
timeTypeWording	该时段的显示文案	String	是	显示在页面的文案，例如上午、下午、全天之类的，由医院定义
leaveCount	该时段余号数量	number	是

选择之后会自动跳转到下面的页面，触发事件onPayPageMount(param)，param是Object，其定义如下

字段名	描述	类型	必填	备注
pointId	该时段的唯一ID	String	否	在点击某挂号时段的时候带过来
doctorId	医生唯一ID	String	是
ybCode	院区唯一ID	String	是
deptId	医生所属科室ID	String	是
regDate	选中的挂号的日期	String	是
regProj	挂号项目代码	String	是
titleId	医生职称ID	String	是
timePointBegin	就诊的开始时段	String	是	示例“08:30”
timePointEnd	就诊的结束时段	String	是	示例“09:00”
timeType	就诊时段的类型	String	是	在挂号的回调onPayOrder会带回去，例如am、pm之类的，由医院定义

在onPayPageMount需要通过接口setOrderPayInfo设置下面的挂号信息确认页面的信息

# 1.7 挂号信息确认

页面示例

页面的信息需要通过 elderMedicalSDK.setOrderPayInfo(param) 接口的参数param是Object对象，其定义如下

字段名	参数描述	参数类型	必填	备注
orderInfo	订单详情	OrderPayInfo	是	OrderPayInfo定义如下
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

OrderPayInfo类型定义：

字段名	描述	类型	必填	备注
deptId	科室ID	String	否	用于上报
deptName	科室名称	String	是
doctorId	医生ID	String	否	用于上报
doctorName	医生名称	String	是
fee	支付金额	String	是	例如“0.1”
ybCode	院区ID	String	否	用于上报
hospSubname	就诊分院区名称	String	是
orderId	订单ID	String	否
orderStatus	订单状态	Number	是	取值如下10 - 未挂号成功，未支付15 - 挂号成功，未支付20 - 已支付
rollbackStatus	取消订单状态	Number	否	默认为0取值如下0 - 未取消10 - 已取消订单，退款中20 - 已取消订单，退款成功30 - 已取消订单，退款失败
rollbackErrMsg	退款失败的原因	String	否	rollbackStatus为30，此字段返回退款失败的原因
rollbackTime	取消订单的时间	String	否	退款时间，取消订单状态下必填，unix时间戳
rollbackFee	退款金额	String	否	退款金额，取消订单状态下必填，例如“0.1”
payType	支付类型	Number	是	1表示自费、2表示医保
patName	就诊人姓名	String	是
regDate	就诊日期	String	是	例如"2022-10-19"
cardNumber	就诊凭条卡号	String	是	在支付成功之后再设置
timePointBegin	就诊时段开始时间	String	是	示例“08:30”
timePointEnd	就诊时段结束时间	String	是	示例“09:30”
visitingSeq	就诊序号	String	是
visitingRoomLoc	诊室位置	String	是
outpatientNum	门诊流水号	String	是
supportCertPay	是否支持医保支付	Boolean	否	默认是true
identityTypeList	身份类型	Array	否	IdentityType是包含text和value的对象

点击“支付”-“自费支付”触发elderMedicalSDK.onPayOrder(orderReq)，orderReq的定义如下（和上面的onPayPageMount事件的参数一样）：

字段名	描述	类型	必填	备注
doctorId	医生唯一ID	String	是
ybCode	院区唯一ID	String	是
deptId	医生所属科室ID	String	是
regDate	选中的挂号的日期	String	是
regProj	挂号项目代码	String	是
titleId	医生职称ID	String	是
timePointBegin	就诊的开始时段	String	是	示例“08:30”
timePointEnd	就诊的结束时段	String	是	示例“09:00”
timeType	就诊时段的类型	String	是	在挂号的回调onPayOrder会带回去，例如am、pm之类的，由医院定义
identityType	选中的身份类型	IdentityType	否	IdentityType是包含text和value的对象

开发者在此回调调起微信支付，用户支付完之后，开发者通过setOrderPayInfo设置支付的结果。如果报错了，则调用 elderMedicalSDK.setOrderErrorInfo(res) 来设置报错的信息，res包含type、errcode和errmsg三个字段。

elderMedicalSDK.setOrderErrorInfo(res) 的参数res定义如下：

字段名	参数描述	参数类型	必填	备注
type	错误的类型	String	是	取值为"pay"、"certpay"、"cancel"，分别表示挂号、医保支付、取消挂号三个场景
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

elderMedicalSDK.setOrderPayInfo(param) 接口的参数param是Object对象，其定义见上面的介绍。

点击“支付”-“医保支付”触发elderMedicalSDK.onCertPayOrder(payOrder)，此回调里面生成医保支付的订单，并跳转到医保支付的H5页面去支付。如果报错了，则调用 elderMedicalSDK.setOrderErrorInfo(res) 来设置报错的信息，res包含errcode和errmsg两个字段。

# 1.8 退号

交互示例

点击底部的取消挂号，会触发事件onCancelOrder(payOrder)，成功后开发者通过setOrderPayInfo设置支付的结果。如果报错了，则调用 elderMedicalSDK.setOrderErrorInfo(res) 来设置报错的信息，res包含type、errcode和errmsg三个字段。注意，这个号是已支付的号，必须要给用户退款，退款后rollbackStatus应该设置为30。

# 1.9 挂号记录

交互示例

页面的链接是https://hostname/path?query#/record-list

进入页面触发事件onRecordListPageMount({orderType})，orderType的值0表示挂号记录页面，1表示缴费记录页面，由于挂号记录和缴费记录页面UI类似，所以用了同一套事件，通过orderType参数区分。

在该事件获取到数据后，通过接口setRecordList(param)设置数据，参数是Object对象，具体定义如下：

字段名	参数描述	参数类型	必填	备注
list	订单详情	Array[Record]	是	Record定义如下
hasNext	是否有下一页	boolean	否	为true表示有下一页数据，滚到底部会触发分页事件onRecordListNextPage，没有分页可忽略此字段
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

Record定义：

字段名	参数描述	参数类型	必填	备注
orderId	订单id	string	是	挂号记录和缴费记录页面均需要
patName	就诊人	string	是	挂号记录和缴费记录页面均需要
doctorName	医生名称	string	是
deptName	科室名称	string	是
appointpmentTime	预约时间	string	是
rollbackStatus	取消状态	number	否	默认为0表示挂号成功
rollbackFee	取消金额	string	否	rollbackStatus非0有效
payTime	缴费时间	string	否	缴费时间，缴费记录页面有效
payFee	缴费金额	number	否	缴费的总金额，缴费记录页面有效，单位是分

如果hasNext为true，用户滚到底部会触发事件onRecordListNextPage，参数和onRecordListPageMount一样，在该事件通过concatRecordList(param)设置下一页的数据，参数和setRecordList一样。

用户点击某一项会进入挂号详情页面（如果是缴费页面进入缴费详情），即触发事件onPayPageMount（缴费详情触发onPayFeePageMount），该事件只会带orderId参数，请参考该事件用法。另外，如果需要跳转到医院原有的挂号详情页面，可以在该事件里面直接跳转即可。

# 2 缴费流程

# 2.1 待缴费订单

页面的链接是https://hostname/path?query#/pay-fee-list

进入页面会触发onPayFeeListPageMount()事件，进入页面之后，通过setPayFeeList(params)接口来设置页面数据，params的数据格式定义如下：

字段名	参数描述	参数类型	必填	备注
list	订单详情	Array[PayFee]	是	PayFee定义如下
hasNext	是否有下一页	boolean	否	为true表示有下一页数据，滚到底部会触发分页事件onPayFeeListNextPage，没有分页可忽略此字段
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

PayFee的定义如下：

字段名	参数描述	参数类型	必填	备注
treatmentType	门诊类型	String	是
deptName	就诊科室	String	是
doctorName	医生	String	是
time	开单时间	String	是
orderId	门诊流水号	String	是	唯一ID，点击“去支付”会带到缴费详情页面
unpaidFee	费用合计	number	是	单位是元

进入页面点击”去支付“，会进入缴费详情页面。

# 2.2 缴费详情

从待缴费列表或者缴费记录页面点击缴费项，会进入此页面，如果已缴费完成，则不展示自费支付和医保支付的按钮。

进入页面会触发onPayFeeDetailPageMount({orderId})，orderId是待缴费页面传入的门诊流水号。该页面通过setPayFeeDetail(params)设置数据，params的定义如下：

字段名	参数描述	参数类型	必填	备注
detail	订单详情	PayFeeOrderInfo	是	PayFeeOrderInfo定义如下
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

PayFeeOrderInfo类型定义：

字段名	描述	类型	必填	备注
orderId	订单ID	String	是	门诊缴费流水号
patName	就诊人姓名	String	是
visitingTypeName	就诊类型	String	是	取值为“自费”、“医保”、“省直医保”、“市直医保”、“其他”
deptId	科室ID	String	否	用于上报
deptName	科室名称	String	是
doctorId	医生ID	String	否	用于上报
doctorName	医生名称	String	是
fee	支付总金额	String	是	例如“0.1”
hospName	院区名称	String	是
prescribeTime	就诊日期	String	是	门诊缴费流水号
orderStatus	订单状态	Number	是	取值如下10 - 未挂号成功，未支付15 - 挂号成功，未支付20 - 已支付31 - 缴费失败
payFailMsg	缴费失败原因	String	否	在缴费失败的情况下必填
supportCertPay	是否支持医保支付	Boolean	否	默认是true
cardNumber	就诊卡号	String	是	在orderStatus为20的时候有效
notice	温馨提醒	String	是	在orderStatus为20的时候有效
bills	门诊费用	Array	否	门诊缴费明细
prescriptions	缴费处方单	Array	否	和bills两个字段二选一，是处方单列表

注意：bills和prescriptions两个字段二选一，如果是按处方单缴费，则传prescriptions字段。

Bill类型的定义如下：

字段名	参数描述	参数类型	必填	备注
projectName	缴费项目名称	String	是
uintPrice	单价	number	是
projectAmount	数量	String	是
totalPrice	总金额	String	是	单位“元”

Prescription类型的定义如下：

字段名	参数描述	参数类型	必填	备注
id	处方单号	String	是
doctorName	医生名称	String	是
time	开单时间	String	是	格式化好的时间
deptName	部门名称	String	是
totalPrice	总金额	String	是	总价，单位“元”
projects	收费项目列表	Array<FeeProject>	是	FeeProject定义如下

FeeProject类型的定义如下：

字段名	参数描述	参数类型	必填	备注
projectName	缴费项目名称	String	是
uintPrice	单价	number	是
projectAmount	数量	String	是	单位“元”

点击自费支付，触发事件onPayFeeDetailPayOrder(detail)，detail是PayFeeOrderInfo类型。点击医保支付，触发事件onPayFeeDetailCertPayOrder(detail)，detail也是PayFeeOrderInfo类型。

如果是按处方单选择缴费，则事件参数detail.prescriptions[0].checked属性为true，开发者需要根据此字段计算出用户勾选的总价进行支付。按处方单缴费的交互如下

在这些事件里面，可以下单、拉起微信支付/医保支付等进行支付并把支付结果通过updatePayFeeDetail(params)更新进来，params的定义同setPayFeeDetail，区别在于detail可以只传入修改的字段，比如只传入orderStatus。

如果支付失败，可以通过setPayFeeErrorInfo(params)来显示报错的弹窗，params的定义如下：

字段名	参数描述	参数类型	必填	备注
errcode	错误码	number	是	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	是	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

# 2.3 个人中心

页面的链接是https://hostname/path?query#/personal-center

点击挂号记录，会跳转到上面第九节的挂号记录页面，点击缴费记录会跳转到下一节的缴费记录的页面，默认会带页面的URL参数跳转过去。

# 2.4 缴费记录

由于UI方面缴费记录和挂号记录类似，所以接口和挂号记录页面类似，只是recordType取值为1，另外Record对象的定义不太一样，只有备注了缴费记录有效或者两者有效的才是此页面需要的字段。另外需要注意，这个页面是已缴费的记录才显示，待缴费的订单在第10节的页面显示。

# 3 报告查询

# 3.1 选择报告类型

页面的链接是https://hostname/path?query#/report-type

# 3.2 已发布报告

页面的链接是https://hostname/path?query#/report-list

进入已发布报告页面会触发onReportListPageMount({pageIndex, pageSize, days})事件，pageIndex和pageSize是分页参数。days是当前展示的报告的天数，比如最近一周的days是7。可通过setReportList(params)接口设置报告的列表数据，params的定义如下：

字段名	参数描述	参数类型	必填	备注
list	报告列表	Array[Report]	是	Report定义如下
hasNext	是否有下一页	boolean	否	为true表示有下一页数据，滚到底部会触发分页事件onReportListNextPage，没有分页可忽略此字段
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

Report定义如下：

字段名	参数描述	参数类型	必填	备注
reportName	报告名称	String	是	报告名称
inspectTime	检查时间	String	是	时间的格式为YYYY-MM-DD HH:SS
reportId	报告ID	String	是	报告唯一ID，会带到报告详情页面
reportType	报告类型	number	是	检验报告取值为1，检查报告取值为2，会带到报告详情页面

点击上面的查询日期，会触发事件onReportDateClick({days, pageIndex, pageSize})，在此事件里面重新拉一下数据。days是用户选择的日期，如果选择的是全部，则days的值是0，需要特殊处理一下。

点击下面的报告的某一项，会触发事件onReportItemClick(item)，参数item为上面的Report对象，如果需要跳转到自己的报告详情页面，可在此事件处理。

# 3.3 报告详情

进入此页面会触发事件onReportDetailPageMount({reportId, reportType})，reportId是报告的id，reportType的定义上面章节有说明。该页面获取报告的详细数据，并通过setReportDetail(params)接口设置，params的定义如下：

字段名	参数描述	参数类型	必填	备注
reportDetail	报告详情信息	ReportDetail	是	ReportDetail定义如下
errcode	返回码	number	否	是否成功，0表示成功，不填默认表示成功
errmsg	错误信息	String	否	当errcode为非0时候，此字段表示错误信息，前端会显示此错误信息

ReportDetail定义如下：

字段名	参数描述	参数类型	必填	备注
outpatientDetail	就诊信息	OutpatientDetail	是	OutpatientDetail定义如下
list	报告内容	Array<ReportCheckContent \| ReportInspectContent>	是	当值type为1，数组的每一项为ReportInspectContent，当type为2，数组的每一项为ReportCheckContent
type	报告类型	number	是	定义同上面的reportType。检验报告取值为1，检查报告取值为2

OutpatientDetail定义如下：

字段名	参数描述	参数类型	必填
patName	就诊人	String	是
deptName	开方科室	String	是
doctorName	开方医生	String	是
inspectTime	报告时间	String	是
reportId	报告单号	String	是

检验报告的内容ReportInspectContent定义如下：

字段名	参数描述	参数类型	必填
itemName	项目名称	String	是
refRange	参考值	String	是
result	结果	String	是

检查报告的内容ReportCheckContent定义如下：

字段名	参数描述	参数类型	必填
checkPart	检查部位	String	是
checkSituation	检查所见	String	是
option	诊断意见	String	是
advice	医嘱	String	是
checkMethod	检查方法	String	是

# 4 自定义页面颜色及按钮展示

通过elderMedicalSDK.setOptions(options)，可以设置页面的一些选项，例如页面的一些颜色，挂号详情页面，是否显示取消挂号的按钮，参数options的结构可参考：

if (elderMedicalSDK.setOptions) {
  elderMedicalSDK.setOptions({
    autoJumpReportDetail: false, // 报告列表页面，是否自动跳转报告详情页面
    showCancelOrder: false, // 挂号详情页面，是否显示取消挂号，默认是true表示显示
    notice: {
      checkedBgColor: 'red', // 就医须知-勾选框颜色
      btnBgColor: 'red' // 就医须知-按钮背景色
    },
    chooseDoctor: {
      chooseDateBgColor: 'red', // 选择医生-当前日期背景色
      recentTagColor: 'blue', // 选择医生-最近就诊字体颜色
      chooseDateColor: 'red', // 选择医生-日期有号文字颜色
      canRegColor: 'green', // 选择医生-剩余号数量颜色
      chooseDateColor: 'blue', // 选择医生-已满颜色
    },
    choosePeriod: {
      color: 'red', // 选择就诊时段-文字颜色
    },
    payDetail: {
      btnBgColor: 'red' // 确认挂号-按钮背景色
    },
    ignoreNoticePage: false, // 是否跳过就医须知页面
  })
}

具体字段可参考如下截图

# 5 设置页面loading状态

从版本0.1.8开始支持

页面的loading默认是1s消失，通过elderMedicalSDK.setOptions({manualHideLoading:{}})，可以手动设置页面的loading状态，目前支持报告列表页面：

if (elderMedicalSDK.setOptions) {
  elderMedicalSDK.setOptions({
    manualHideLoading: {
      reportList: true, // 报告列表页面，手动隐藏loading
    }
  })
}

然后可在onReportListPageMount回调里面，通过**elderMedicalSDK.setHideLoading()**隐藏loading

# 6 弹窗样式

从版本0.2.0开始支持

# 6.1 基础弹窗

elderMedicalSDK.setDialogInfo({
  show: true,
  title: '标题',
  content: '内容',
  showCancel: false, // 是否显示取消按钮
  cancelText: '取消',
  confirmText: '确定',
  cancel: function() { // 点击取消按钮触发
    console.log('dialogInfo dialog cancel')
  },
  confirm: function() { // 点击确定按钮触发
    console.log('dialogInfo dialog confirm')
  }
})

# 6.2 半屏弹窗

elderMedicalSDK.setHalfDialogInfo({
  show: false,
  title: '标题',
  content: '内容',

  showCancel: false,
  cancelText: '取消',
  confirmText: '我知道了',
  confirmColor: 'red', // 确定按钮的文本色
  checkedColor: 'red', // 勾选框的颜色
  confirmBackgroundColor: 'red', // 确定按钮的背景色
  close: function() { // 关闭半屏弹窗触发
    console.log('HalfDialogInfo dialog close')
  },
  cancel: function() { // 点击取消按钮触发
    console.log('HalfDialogInfo dialog cancel')
  },
  confirm: function() { // 点击确定按钮触发
    console.log('HalfDialogInfo dialog confirm')
  }
})

# 7 关于JSSDK

开发者需要调用wx.config来初始化JSSDK并通过 elderMedicalSDK.jssdkReady() 来通知SDK已ready。初始化的参数jsapiList需要传接口hideAllNonBaseMenuItem，在SDK里面需要调用此接口。例如：

wx.config({
    jsapiList: ["hideAllNonBaseMenuItem"],
    // ...
})
wx.ready(function() {
    elderMedicalSDK.jssdkReady()
})

# 微信长辈就医适老化SDK方案

# 一 接入方案

# 二 接入代码示例

# 三 流程 & SDK协议介绍

# 1 挂号流程

# 1.1 选择院区

# 1.2 就医须知

# 1.3 选择科室

# 1.4 选择医生

# 1.5 选择最近就诊的医生

# 1.6 选择时间

# 1.7 挂号信息确认

# 1.8 退号

# 1.9 挂号记录

# 2 缴费流程

# 2.1 待缴费订单

# 2.2 缴费详情

# 2.3 个人中心

# 2.4 缴费记录

# 3 报告查询

# 3.1 选择报告类型

# 3.2 已发布报告

# 3.3 报告详情

# 4 自定义页面颜色及按钮展示

# 5 设置页面loading状态

# 6 弹窗样式

# 6.1 基础弹窗

# 6.2 半屏弹窗

# 7 关于JSSDK

# 四 H5 整体方案示图

# 一接入方案

# 二接入代码示例

# 三流程 & SDK协议介绍