医疗急救卡-数据API

 

 

 

使用小程序表单组件仿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>