0
点赞
收藏
分享

微信扫一扫

医疗急救卡-数据API

Brose 2022-03-25 阅读 157

 

 

 

使用小程序表单组件仿IOS健康App创建一个简易版的医疗急救卡

创建文件firstaidCard

首页设计

未创建医疗急救卡时,此时只显示一个”创建医疗急救卡“按钮;已经创建医疗急救卡:此时显示用户的医疗信息,最下方显示”打电话给紧急联系人“和”编辑医疗急救卡“两个按钮


 

<!--index.wxml-->
<!-- 尚未创建医疗急救卡显示该页面 -->
<view class="container">
<button>创建医疗急救卡</button>
</view>
/**index.wxss**/
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/**app.wxss**/
button{
  background-color: #FF2D55;
  color: white;
  margin:20rpx;/* 外边距 */
}

 

// index.js
// 获取应用实例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    myCard:true //预览后请改回false
    
  },
/**app.wxss**/
button{
  background-color: #FF2D55;
  color: white;
  margin:20rpx;/* 外边距 */
}


/* 标签样式 */
label{
  color: #FF2D55;
  margin-right: 25rpx; /*右边距*/
}

/* 水平布局 */
.row{
  display: flex;
  flex-direction: row; /*水平布局*/
}

/*垂直布局*/
.col{
  display: flex;
  flex-direction: column;/*垂直布局*/
}

/*条目盒子*/
.box{
  border-bottom: 1rpx solid silver;/*1rpx 宽的银色实线下边框*/
  margin: 10rpx 20rpx;
  padding: 10rpx; /*内边距*/
}

/* 文本样式 */
text{
  margin-right: 25rpx;
}
<!--index.wxml-->
<!-- 尚未创建医疗急救卡显示该页面 -->
<view class="container" wx:if="{{!myCard}}">
<button>创建医疗急救卡</button>
</view>

<!-- 医疗急救卡创建完成后显示该页面 -->
<view wx:else>
<view class="row box">
<label>出生日期</label>
<text>2000-01-01</text>
<label>血型</label>
<text>A型</text>
</view>

<view class="row box">
<label>身高</label>
<text>100cm</text>
<label>体重</label>
<text>50千克</text>
</view>

<view class="col box">
<label>医疗状况</label>
<text>无</text>
</view>

<view class="col box">
<label>医疗笔记</label>
<text>无</text>
</view>

<view class="col box">
<label>过敏反应</label>
<text>无</text>
</view>

<view class="col box">
<label>用药</label>
<text>无</text>
</view>

<view class="row box">
<label>器官捐赠者</label>
<text>否</text>
</view>

<view class="row box">
<label>紧急联系人</label>
<text>10086</text>
</view>

<button>打电话给紧急联系人</button>
<button>编辑医疗急救卡</button>
</view>

医疗急救卡创建页设计

用于展示医疗信息表单,主要内容是:

生日日期:点击弹出滚动选择器选择年,月,日

医疗状况:多行文本框

医疗笔记:多行文本框

过敏反应:多行文本框

血型:点击弹出滚动选择器选择血型

器官捐赠者:切换是或者否

身高:单行文本输入框,单位为厘米

体重:单行文本输入框,单位为厘米

紧急联系人号码:单行文本输入框,输入电话号码

当页面计划使用组件:

页面整体:<form>组件

选择器:<picker>

是否开关:<switch>

多行文本输入框:<textarea>组件

单行文本输入框:<input>组件

医疗急救卡是需要点击首页按钮跳转才可以显示。

可临时将app.json属性里的form与index路径对调,以确保form页面可以直接显示出来

将form页面替换Index,使form变成首页:

原来的首页:

将普通编译改变

form.wxml

<!--pages/form/form.wxml-->
<form bindsubmit="submitForm">
<view class="row box">
<label>出生日期</label>
<picker name='date' mode='date' bindchange='dateChange' value='{{date}}'>
<view>{{date}}</view>
</picker>
</view>

<view class="col box">
<label>医疗状况</label>
<textarea name='ylzk' auto-height value="{{ylzk}}" ></textarea> 
<!-- aoto-height 自适应高度 -->
<!-- <textarea> 多行文本框 -->
</view>

<view class="col box">
<label>医疗笔记</label>
<textarea name='ylbj' auto-height value="{{ylbj}}" ></textarea> 
</view>

<view class="col box">
<label>过敏反应</label>
<textarea name='gmfy' auto-height value="{{gmfy}}" ></textarea> 
</view>

<view class="col box">
<label>用药</label>
<textarea name='yy' auto-height value="{{yy}}" ></textarea> 
</view>

<view class="row box">
<label>血型</label>
<picker name='blood' range='{{bloodItems}}' bindchange='bloodChange' value='{{blood}}'>
<view>
{{blood}}型
</view>
</picker>
</view>

<view class="row box">
<label>器官捐赠者</label>
<switch name='qgjz' color="#FF2D55" checked="{{qgjz}}" auto-height value="qgjz" ></switch>
</view>

<view class="row box">
<label>身高</label>
<input name='height' class='shortInput' type="digit" value="{{height}}"></input>
<text>厘米</text>
<label>体重</label>
<input name='weight' class="shortInput" type="digit" value="{{weight}}"></input>
<text>千克</text>
</view>

<view class="row box">
<label>紧急联系人</label>
<input name='tel' class="longInput" type="number" value="{{tel}}"></input>
</view>

<button form-type="submit">完成创建</button>
<button bindtap="delMyCard">删除医疗急救卡</button>
</form>

 尚未创建医疗急救卡的首页只有点击”创建医疗急救卡“按钮跳转新页面的功能需要实现。

index.wxml

<!--index.wxml-->
<!-- 尚未创建医疗急救卡显示该页面 -->
<view class="container" wx:if="{{!myCard}}">
<button bindtap="goToForm">创建医疗急救卡</button>
</view>

 在JS中添加goToForm函数

// index.js
// 获取应用实例
Page({
  /* 页面的初始数据 */
  data: {
    myCard:true //预览后请改回false

  },
  /* 打开表单页面 */
  goToForm:function(){
    wx.navigateTo({
      url: '../form/form',
    })
  },

  

点击”创建医疗急救卡“按钮跳转急救卡创建页

医疗急救卡创建页的逻辑实现:

form.wxml:为两个组件添加bindchange事件

<!--pages/form/form.wxml-->
<form bindsubmit="submitForm">
<view class="row box">
<label>出生日期</label>
<picker name='date' mode='date' bindchange='dateChange' value='{{date}}'>
<view>{{date}}</view>
</picker>
</view>
.
.
.
.
.

<view class="row box">
<label>血型</label>
<picker name='blood' range='{{bloodItems}}' bindchange='bloodChange' value='{{blood}}'>
<view>
{{blood}}型
</view>
</picker>
</view>

 在form.js中添加dateChange和bloodChange


  // 更新日期
  dateChange:function(e){
    let value = e.detail.value; //获得选择的日期
    this.setData({date:value}); //将选项名称更新到WXML页面上
  },

  
  // 更新血型
  bloodChange:function(e){
    let i = e.detail.value; //获得血型的序号
    this.setData({blood:this.data.bloodItems[i]
    }); //将选项名称更新到WXML页面上
  },
// 此时可以将滚动选择器修改的内容到当前页面

表单提交

 

<form bindsubmit="submitForm">
.
.
.
</form>

 form.js中添加submitForm函数


// 提交表单
submitForm:function(e){
  // 同步保存数据
  wx.setStorageSync('myCard', e.detail.value)
  // 成功后返回首页
  wx.navigateBack()
},

 

删除医疗急救卡:

form.wxml

<button bindtap="delMyCard">删除医疗急救卡</button>

 form.js中添加delMyCard函数


// 删除医疗急救卡
delMyCard:function(){
// 同步删除数据
wx.removeStorageSync('myCard')
// 成功后返回首页
wx.navigateBack()
},

 读取本地缓存数据

index.js


onShow:function(){
// 同步获取本地缓存
let myCard = wx.getStorageSync('myCard')
// 更新动态数据
this.setData({myCard:myCard})
}

index.wxml


<!-- 医疗急救卡创建完成后显示该页面 -->
<view wx:else>
<view class="row box">
<label>出生日期</label>
<text>{{myCard.date}}</text>
<label>血型</label>
<text>{{myCard.blood}}</text>
</view>

<view class="row box">
<label>身高</label>
<text>{{myCard.height}}厘米</text>
<label>体重</label>
<text>{{myCard.weight}}千克</text>
</view>

<view class="col box">
<label>医疗状况</label>
<text>{{myCard.ylzk}}</text>
</view>

<view class="col box">
<label>医疗笔记</label>
<text>{{myCard.ylbj}}</text>
</view>

<view class="col box">
<label>过敏反应</label>
<text>{{myCard.gmfy}}</text>
</view>

<view class="col box">
<label>用药</label>
<text>{{myCard.yy}}</text>
</view>

<view class="row box">
<label>器官捐赠者</label>
<text>{{myCard.qgjz?'是':'否'}}</text>
</view>

<view class="row box">
<label>紧急联系人</label>
<text>{{myCard.tel}}</text>
</view>

 打电话给紧急联系人:

在index.wxml紧急联系人按钮,为其绑定自定义的tap事件


<button bindtap="makeCall">打电话给紧急联系人</button>

 index.js


    // 打电话给紧急联系人
    makeCall:function(){
      let tel = this.data.myCard.tel
      wx.makePhoneCall({
        phoneNumber: tel,
      })
    },

已实现拨打电话的模拟效果,如果使用带有电话卡的真机测试,就可以拨打真的电话

编辑医疗急救卡:

index.wxml


<button bindtap="goToForm">编辑医疗急救卡</button>

 form.js


onLoad:function(){
  let myCard = wx.getStorageSync('myCard')

  // 有数据
  if(myCard!=''){
    this.setData({
      date:myCard.date,
      ylzk:myCard.ylzk,
      ylbj:myCard.ylbj,
      gmfy:myCard.gmfy,
      yy:myCard.yy,
      blood:myCard.blood,
      qgjz:myCard.qgjz,
      height:myCard.height,
      weight:myCard.weight

    })
  }
}

打开医疗急救卡创建页时先读取一下本地缓存,如果有数据,则显示已经保存的数据等待新一轮编辑

完整代码:

app.json

{
  "pages":[
    "pages/index/index",
    "pages/form/form"
  ],
  "window": {
    "navigationBarBackgroundColor": "#FF2D55",
    "navigationBarTitleText": "医疗急救卡"
  }
}

 app.wxss

/**app.wxss**/
button{
  background-color: #FF2D55;
  color: white;
  margin:20rpx;/* 外边距 */
}


/* 标签样式 */
label{
  color: #FF2D55;
  margin-right: 25rpx; /*右边距*/
}

/* 水平布局 */
.row{
  display: flex;
  flex-direction: row; /*水平布局*/
}

/*垂直布局*/
.col{
  display: flex;
  flex-direction: column;/*垂直布局*/
}

/*条目盒子*/
.box{
  border-bottom: 1rpx solid silver;/*1rpx 宽的银色实线下边框*/
  margin: 10rpx 20rpx;
  padding: 10rpx; /*内边距*/
}

/* 文本样式 */
text{
  margin-right: 25rpx;
}

index.wxml

<!--index.wxml-->
<!-- 尚未创建医疗急救卡显示该页面 -->
<view class="container" wx:if="{{!myCard}}">
<button bindtap="goToForm">创建医疗急救卡</button>
</view>

<!-- 医疗急救卡创建完成后显示该页面 -->
<view wx:else>
<view class="row box">
<label>出生日期</label>
<text>{{myCard.date}}</text>
<label>血型</label>
<text>{{myCard.blood}}</text>
</view>

<view class="row box">
<label>身高</label>
<text>{{myCard.height}}厘米</text>
<label>体重</label>
<text>{{myCard.weight}}千克</text>
</view>

<view class="col box">
<label>医疗状况</label>
<text>{{myCard.ylzk}}</text>
</view>

<view class="col box">
<label>医疗笔记</label>
<text>{{myCard.ylbj}}</text>
</view>

<view class="col box">
<label>过敏反应</label>
<text>{{myCard.gmfy}}</text>
</view>

<view class="col box">
<label>用药</label>
<text>{{myCard.yy}}</text>
</view>

<view class="row box">
<label>器官捐赠者</label>
<text>{{myCard.qgjz?'是':'否'}}</text>
</view>

<view class="row box">
<label>紧急联系人</label>
<text>{{myCard.tel}}</text>
</view>

<button bindtap="makeCall">打电话给紧急联系人</button>
<button bindtap="goToForm">编辑医疗急救卡</button>
</view>

index.wxss

/**index.wxss**/
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

 index.js

// index.js
// 获取应用实例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    myCard:false //预览后请改回false

  },
  /* 打开表单页面 */
  goToForm:function(){
    wx.navigateTo({
      url: '../form/form',
    })
  },


  onShow:function(){
    // 同步获取本地缓存
    let myCard = wx.getStorageSync('myCard')
    // 更新动态数据
    this.setData({myCard:myCard})
    
    },

    // 打电话给紧急联系人
    makeCall:function(){
      let tel = this.data.myCard.tel
      wx.makePhoneCall({
        phoneNumber: tel,
      })
    },

})

form.wxml

<!--pages/form/form.wxml-->
<form bindsubmit="submitForm">
<view class="row box">
<label>出生日期</label>
<picker name='date' mode='date' bindchange='dateChange' value='{{date}}'>
<view>{{date}}</view>
</picker>
</view>

<view class="col box">
<label>医疗状况</label>
<textarea name='ylzk' auto-height value="{{ylzk}}" ></textarea> 
<!-- aoto-height 自适应高度 -->
<!-- <textarea> 多行文本框 -->
</view>

<view class="col box">
<label>医疗笔记</label>
<textarea name='ylbj' auto-height value="{{ylbj}}" ></textarea> 
</view>

<view class="col box">
<label>过敏反应</label>
<textarea name='gmfy' auto-height value="{{gmfy}}" ></textarea> 
</view>

<view class="col box">
<label>用药</label>
<textarea name='yy' auto-height value="{{yy}}" ></textarea> 
</view>

<view class="row box">
<label>血型</label>
<picker name='blood' range='{{bloodItems}}' bindchange='bloodChange' value='{{blood}}'>
<view>
{{blood}}型
</view>
</picker>
</view>

<view class="row box">
<label>器官捐赠者</label>
<switch name='qgjz' color="#FF2D55" checked="{{qgjz}}" auto-height value="qgjz" ></switch>
</view>

<view class="row box">
<label>身高</label>
<input name='height' class='shortInput' type="digit" value="{{height}}"></input>
<text>厘米</text>
<label>体重</label>
<input name='weight' class="shortInput" type="digit" value="{{weight}}"></input>
<text>千克</text>
</view>

<view class="row box">
<label>紧急联系人</label>
<input name='tel' class="longInput" type="number" value="{{tel}}"></input>
</view>

<button form-type="submit">完成创建</button>
<button bindtap="delMyCard">删除医疗急救卡</button>
</form>

 

 form.wxss

/* pages/form/form.wxss */
/* 单表,多行文本框样式 */
form,textarea{
  width: 100%;
}
/* 文本输入框样式 */
.shortInput{
  width: 100rpx;
}

.longInput{
  width: 100rpx;
}

form.js

// pages/form/form.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    date:'2000-01-01',
    ylzk:'无',
    ylbj:'无',
    gmfy:'无',
    yy:'无',
    blood:'A',
    qgjz:false, /* 器官捐赠者 */
    height:'100',
    weight:'50',
    bloodItems:['未知','A','B','C','O']
  },

  // 更新日期
  dateChange:function(e){
    let value = e.detail.value; //获得选择的日期
    this.setData({date:value}); //将选项名称更新到WXML页面上
  },

  
  // 更新血型
  bloodChange:function(e){
    let i = e.detail.value; //获得血型的序号
    this.setData({blood:this.data.bloodItems[i]
    }); //将选项名称更新到WXML页面上
  },
// 此时可以将滚动选择器修改的内容到当前页面

// 提交表单
submitForm:function(e){
  // 同步保存数据
  wx.setStorageSync('myCard', e.detail.value)
  // 成功后返回首页
  wx.navigateBack()
},

// 删除医疗急救卡
delMyCard:function(){
// 同步删除数据
wx.removeStorageSync('myCard')
// 成功后返回首页
wx.navigateBack()
},

onLoad:function(){
  let myCard = wx.getStorageSync('myCard')

  // 有数据
  if(myCard!=''){
    this.setData({
      date:myCard.date,
      ylzk:myCard.ylzk,
      ylbj:myCard.ylbj,
      gmfy:myCard.gmfy,
      yy:myCard.yy,
      blood:myCard.blood,
      qgjz:myCard.qgjz,
      height:myCard.height,
      weight:myCard.weight

    })
  }
}

})

 

 

举报

相关推荐

0 条评论