667 lines
18 KiB
Vue
667 lines
18 KiB
Vue
<template>
|
|
<view>
|
|
<view class="express">
|
|
<!-- Step Navigation -->
|
|
<view class="strideList">
|
|
<view class="strideItem" :class="{active: step == 1}" @tap="changeItem(1)">基础<br />信息</view>
|
|
|
|
<view class="icons">
|
|
<image
|
|
:src="step != 2 ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_2.png'"
|
|
mode="widthFix" />
|
|
</view>
|
|
|
|
<view class="strideItem" :class="{active: step == 2}" @tap="changeItem(2)">病历<br />信息</view>
|
|
|
|
<view class="icons">
|
|
<image
|
|
:src="step != 3 ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_2.png'"
|
|
mode="widthFix" />
|
|
</view>
|
|
|
|
<view class="strideItem" :class="{active: step == 3}" @tap="changeItem(3)">生活<br />方式</view>
|
|
|
|
<view class="icons">
|
|
<image
|
|
:src="step != 4 ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_2.png'"
|
|
mode="widthFix" />
|
|
</view>
|
|
|
|
<view class="strideItem" :class="{active: step == 4}" @tap="changeItem(4)">授权<br />用户</view>
|
|
</view>
|
|
|
|
<!-- Step 1: Basic Information -->
|
|
<view class="basic" v-if="step == 1">
|
|
<view class="basic_row">
|
|
<view class="basic_row_tit">姓名</view>
|
|
<view class="basic_row_con">
|
|
<input v-model="name" placeholder="请填写您的姓名" placeholder-style="color: #999999;font-size: 26rpx" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic_row">
|
|
<view class="basic_row_tit">电话</view>
|
|
<view class="basic_row_con">
|
|
<input v-model="phone" type="number" maxlength="11" placeholder="请填写您的电话"
|
|
placeholder-style="color: #999999;font-size: 26rpx" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic_row">
|
|
<view class="basic_row_tit">性别</view>
|
|
<view class="basic_row_con">
|
|
<view class="sex" :class="{active2: sex == 'man'}" @tap="changeSex('man')">
|
|
<view class="cir"></view>男
|
|
</view>
|
|
|
|
<view class="sex" :class="{active2: sex == 'woman'}" @tap="changeSex('woman')">
|
|
<view class="cir"></view>女
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic_row">
|
|
<view class="basic_row_tit">出生日期</view>
|
|
<view class="basic_row_con" @tap="changeShow">
|
|
<input v-model="time" disabled placeholder="请选择您的出生日期"
|
|
placeholder-style="color: #999999;font-size: 26rpx" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic_row">
|
|
<view class="basic_row_tit">身高</view>
|
|
<view class="basic_row_con">
|
|
<input v-model="height" placeholder="请填写身高(单位cm)" placeholder-style="color: #999999;font-size: 26rpx" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic_row none">
|
|
<view class="basic_row_tit">体重</view>
|
|
<view class="basic_row_con">
|
|
<input v-model="weight" placeholder="请填写体重(单位Kg)" placeholder-style="color: #999999;font-size: 26rpx" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn" @click="headerStepClick">下一步</view>
|
|
</view>
|
|
|
|
<!-- Step 2: Medical Information -->
|
|
<view class="infomation" v-if="step == 2">
|
|
<view class="basic_row">
|
|
<view class="basic_row_tit">血值类型</view>
|
|
<view class="basic_row_con" @tap="changeShow2('bloodType', '血脂类型')">
|
|
<input v-model="bloodType" disabled placeholder="请选择您的血值类型"
|
|
placeholder-style="color: #999999;font-size: 26rpx" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic_row">
|
|
<view class="basic_row_tit">糖尿病类型</view>
|
|
<view class="basic_row_con" @tap="changeShow2('diabetesType', '糖尿病类型')">
|
|
<input v-model="diabetesType" disabled placeholder="请选择您的糖尿病类型"
|
|
placeholder-style="color: #999999;font-size: 26rpx" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic_row">
|
|
<view class="basic_row_tit">血压类型</view>
|
|
<view class="basic_row_con" @tap="changeShow2('bloodPressure', '血压类型')">
|
|
<input v-model="bloodPressure" disabled placeholder="请选择您的血压类型"
|
|
placeholder-style="color: #999999;font-size: 26rpx" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic_row2">
|
|
<view class="basic_row_tit">既往病史</view>
|
|
<view class="illnessList">
|
|
<view class="illnessItem" :class="{checked: pastCase === 'a'}" @tap="headerInputClick2('pastCase', 'a')">胸闷
|
|
</view>
|
|
<view class="illnessItem" :class="{checked: pastCase === 'b'}" @tap="headerInputClick2('pastCase', 'b')">心慌
|
|
</view>
|
|
<view class="illnessItem" :class="{checked: pastCase === 'c'}" @tap="headerInputClick2('pastCase', 'c')">头晕
|
|
</view>
|
|
<view class="illnessItem" :class="{checked: pastCase === 'd'}" @tap="headerInputClick2('pastCase', 'd')">痛风
|
|
</view>
|
|
<view class="illnessItem" :class="{checked: pastCase === 'e'}" @tap="headerInputClick2('pastCase', 'e')">
|
|
脑血管疾病</view>
|
|
<view class="illnessItem" :class="{checked: pastCase === 'f'}" @tap="headerInputClick2('pastCase', 'f')">
|
|
急性并发症</view>
|
|
<view class="illnessItem" :class="{checked: pastCase === 'g'}" @tap="headerInputClick2('pastCase', 'g')">
|
|
心脏疾病</view>
|
|
<view class="illnessItem" :class="{checked: pastCase === 'h'}" @tap="headerInputClick2('pastCase', 'h')">其他
|
|
</view>
|
|
<!-- 其他病史选项... -->
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic_row2">
|
|
<view class="basic_row_tit">既往用药</view>
|
|
<view class="drugList">
|
|
<view class="drugItem" :class="{checked: pharmacy === 'a'}" @tap="headerInputClick2('pharmacy', 'a')">他汀类降脂药
|
|
</view>
|
|
<view class="drugItem" :class="{checked: pharmacy === 'b'}" @tap="headerInputClick2('pharmacy', 'b')">中药降脂
|
|
</view>
|
|
<view class="drugItem" :class="{checked: pharmacy === 'c'}" @tap="headerInputClick2('pharmacy', 'c')">中药降酸药
|
|
</view>
|
|
<view class="drugItem" :class="{checked: pharmacy === 'd'}" @tap="headerInputClick2('pharmacy', 'd')">其他
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic_row none">
|
|
<view class="basic_row_tit">用药时间</view>
|
|
<view class="basic_row_con">
|
|
<view class="sex" :class="{active2: drugTime == '3'}" @tap="changeTime('3')">
|
|
<view class="cir"></view>3年
|
|
</view>
|
|
<view class="sex" :class="{active2: drugTime == '1'}" @tap="changeTime('1')">
|
|
<view class="cir"></view>一年以内
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn" @click="headerStepClick">下一步</view>
|
|
</view>
|
|
|
|
<!-- Step 3: Lifestyle -->
|
|
<view class="life" v-if="step == 3">
|
|
<!-- 生活方式表单内容... -->
|
|
|
|
|
|
<view class="basic_row3" style="margin-top: 20rpx;">
|
|
<view class="basic_row_tit">吸烟情况</view>
|
|
<view class="basic_row_con3">
|
|
<view class="sex" :class="{ active2: smoke === 'no' }" @click="handleSelect('smoke', 'no')">
|
|
<view class="cir"></view>从不
|
|
</view>
|
|
<view class="sex" :class="{ active2: smoke === 'ring' }" @click="handleSelect('smoke', 'ring')">
|
|
<view class="cir"></view>已戒烟
|
|
</view>
|
|
<view class="sex" :class="{ active2: smoke === 'yes' }" @click="handleSelect('smoke', 'yes')">
|
|
<view class="cir"></view>吸烟
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 饮酒情况 -->
|
|
<view class="basic_row3">
|
|
<view class="basic_row_tit">饮酒情况</view>
|
|
<view class="basic_row_con3">
|
|
<view class="sex" :class="{ active2: drink === 'no' }" @click="handleSelect('drink', 'no')">
|
|
<view class="cir"></view>从不
|
|
</view>
|
|
<view class="sex" :class="{ active2: drink === 'once' }" @click="handleSelect('drink', 'once')">
|
|
<view class="cir"></view>偶尔
|
|
</view>
|
|
<view class="sex" :class="{ active2: drink === 'yes' }" @click="handleSelect('drink', 'yes')">
|
|
<view class="cir"></view>经常
|
|
</view>
|
|
<view class="sex" :class="{ active2: drink === 'ring' }" @click="handleSelect('drink', 'ring')">
|
|
<view class="cir"></view>戒酒
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日常工作 -->
|
|
<view class="basic_row3">
|
|
<view class="basic_row_tit">日常工作</view>
|
|
<view class="basic_row_con3">
|
|
<view class="sex" :class="{ active2: dailyWork === 'easy' }" @click="handleSelect('dailyWork', 'easy')">
|
|
<view class="cir"></view>轻体力劳动
|
|
</view>
|
|
<view class="sex" :class="{ active2: dailyWork === 'in' }" @click="handleSelect('dailyWork', 'in')">
|
|
<view class="cir"></view>中体力劳动
|
|
</view>
|
|
<view class="sex" :class="{ active2: dailyWork === 'repeat' }" @click="handleSelect('dailyWork', 'repeat')">
|
|
<view class="cir"></view>重体力劳动
|
|
</view>
|
|
<view class="sex" :class="{ active2: dailyWork === 'rest' }" @click="handleSelect('dailyWork', 'rest')">
|
|
<view class="cir"></view>休息
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 运动情况 -->
|
|
<view class="basic_row3">
|
|
<view class="basic_row_tit">运动情况</view>
|
|
<view class="basic_row_con3">
|
|
<view class="sex" :class="{ active2: motion === 'lack' }" @click="handleSelect('motion', 'lack')">
|
|
<view class="cir"></view>≤2次
|
|
</view>
|
|
<view class="sex" :class="{ active2: motion === 'once' }" @click="handleSelect('motion', 'once')">
|
|
<view class="cir"></view>3-5次
|
|
</view>
|
|
<view class="sex" :class="{ active2: motion === 'days' }" @click="handleSelect('motion', 'days')">
|
|
<view class="cir"></view>每天
|
|
</view>
|
|
<view class="sex" :class="{ active2: motion === 'no' }" @click="handleSelect('motion', 'no')">
|
|
<view class="cir"></view>无运动
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 睡眠情况 -->
|
|
<view class="basic_row3 none">
|
|
<view class="basic_row_tit">睡眠情况</view>
|
|
<view class="basic_row_con3">
|
|
<view class="sex" :class="{ active2: sleep === 'law' }" @click="handleSelect('sleep', 'law')">
|
|
<view class="cir"></view>规律
|
|
</view>
|
|
<view class="sex" :class="{ active2: sleep === 'noLaw' }" @click="handleSelect('sleep', 'noLaw')">
|
|
<view class="cir"></view>熬夜
|
|
</view>
|
|
<view class="sex" :class="{ active2: sleep === 'overturn' }" @click="handleSelect('sleep', 'overturn')">
|
|
<view class="cir"></view>黑白颠倒
|
|
</view>
|
|
<view class="sex" :class="{ active2: sleep === 'rest' }" @click="handleSelect('sleep', 'rest')">
|
|
<view class="cir"></view>其他
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="btn" @click="headerStepClick">下一步</view>
|
|
</view>
|
|
|
|
<!-- Step 4: Authorization -->
|
|
<view class="user" v-if="step == 4">
|
|
<!-- 授权表单内容... -->
|
|
|
|
<view class="basic_row3 none">
|
|
<view class="basic_row_tit">档案授权</view>
|
|
<view class="basic_row_con2">
|
|
<view
|
|
class="sex"
|
|
:class="{ active2: accredit === 'owner' }"
|
|
@click="handleSelect('accredit', 'owner')"
|
|
>
|
|
<view class="cir"></view>对所有人员开放
|
|
</view>
|
|
<view
|
|
class="sex"
|
|
:class="{ active2: accredit === 'family' }"
|
|
@click="handleSelect('accredit', 'family')"
|
|
>
|
|
<view class="cir"></view>对家庭成员开放
|
|
</view>
|
|
<view
|
|
class="sex"
|
|
:class="{ active2: accredit === 'serve' }"
|
|
@click="handleSelect('accredit', 'serve')"
|
|
>
|
|
<view class="cir"></view>对服务人员开放
|
|
</view>
|
|
<view
|
|
class="sex"
|
|
:class="{ active2: accredit === 'oneself' }"
|
|
@click="handleSelect('accredit', 'oneself')"
|
|
>
|
|
<view class="cir"></view>只允许自己查看
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="btn" bind:tap="headerSubmitClick">提交</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Date Picker Popup -->
|
|
<u-popup :show="show" mode="bottom" round close-on-click-overlay>
|
|
<view style="width: 100%;">
|
|
<u-datetime-picker mode="date" :show="show" :formatter="formatter" @cancel="onClose"
|
|
@confirm="onInput"></u-datetime-picker>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
<!-- Blood Type Picker Popup -->
|
|
<u-popup :show="show2" mode="bottom" round close-on-click-overlay>
|
|
<view style="width: 100%;">
|
|
<u-picker :columns="columns" :show="show2" :title="PopupTitle" @confirm="onInput2" @cancel="onClose2"
|
|
show-toolbar></u-picker>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
step: 1,
|
|
name: '',
|
|
phone: '',
|
|
sex: '',
|
|
time: '',
|
|
height: '',
|
|
weight: '',
|
|
bloodType: '',
|
|
diabetesType: '',
|
|
bloodPressure: '',
|
|
pastCase: '',
|
|
pharmacy: '',
|
|
drugTime: '',
|
|
smoke: '',
|
|
drink: '',
|
|
dailyWork: '',
|
|
motion: '',
|
|
sleep: '',
|
|
accredit: '',
|
|
show: false,
|
|
show2: false,
|
|
currentDate: new Date().getTime(),
|
|
popupType: '',
|
|
PopupTitle: '',
|
|
columns: [], // Your picker options
|
|
formatter(type, value) {
|
|
if (type === 'year') {
|
|
return `${value}年`;
|
|
}
|
|
if (type === 'month') {
|
|
return `${value}月`;
|
|
}
|
|
if (type === 'day') {
|
|
return `${value}日`;
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
changeItem(step) {
|
|
this.step = step;
|
|
},
|
|
changeSex(sex) {
|
|
this.sex = sex;
|
|
},
|
|
changeTime(time) {
|
|
this.drugTime = time;
|
|
},
|
|
changeShow() {
|
|
this.show = true;
|
|
console.log(this.show, 'asdasd');
|
|
},
|
|
changeShow2(type, title) {
|
|
this.popupType = type;
|
|
this.PopupTitle = title;
|
|
this.show2 = true;
|
|
},
|
|
headerInputClick(e) {
|
|
this[e.currentTarget.dataset.name] = e.detail.value;
|
|
},
|
|
headerInputClick2(name, val) {
|
|
this[name] = val;
|
|
},
|
|
headerStepClick() {
|
|
this.step++;
|
|
},
|
|
headerSubmitClick() {
|
|
// Submit logic
|
|
},
|
|
onClose() {
|
|
this.show = false;
|
|
},
|
|
onClose2() {
|
|
this.show2 = false;
|
|
},
|
|
onInput(e) {
|
|
this.time = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
|
this.show = false;
|
|
},
|
|
onInput2(e) {
|
|
this[this.popupType] = e[0];
|
|
this.show2 = false;
|
|
},
|
|
handleSelect(name,val) {
|
|
console.log(name,val);
|
|
this[name] = val;
|
|
return;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.strideList {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 0 43rpx;
|
|
}
|
|
|
|
.strideItem {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background: #D9D9D9;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.icons {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
|
|
.active {
|
|
background: #FF512A;
|
|
|
|
}
|
|
|
|
.strideList {
|
|
margin-top: 42rpx;
|
|
}
|
|
|
|
|
|
.basic {
|
|
margin: 0 20rpx;
|
|
margin-top: 62rpx;
|
|
}
|
|
|
|
.basic_row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1rpx solid #E6E6E6;
|
|
height: 90rpx;
|
|
}
|
|
|
|
.basic_row_tit {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #222222;
|
|
}
|
|
|
|
.basic_row_con {
|
|
text-align: right;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.basic_row_con input {
|
|
height: 90rpx;
|
|
}
|
|
|
|
.sex {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #222222;
|
|
margin-left: 40rpx;
|
|
}
|
|
|
|
.cir {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 50%;
|
|
border: 1rpx solid #555555;
|
|
margin-right: 16rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.active2 .cir {
|
|
background-color: #ff512a;
|
|
border: none;
|
|
}
|
|
|
|
.none {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.btn {
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
width: 650rpx;
|
|
height: 80rpx;
|
|
background: #FF512A;
|
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
margin-top: 64rpx;
|
|
}
|
|
|
|
.infomation {
|
|
margin: 0 20rpx;
|
|
margin-top: 92rpx;
|
|
padding-bottom: 60rpx;
|
|
}
|
|
|
|
.basic_row2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 30rpx;
|
|
}
|
|
|
|
|
|
|
|
.illnessItem {
|
|
width: 150rpx;
|
|
height: 50rpx;
|
|
background: #F0F0F0;
|
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.illnessList {
|
|
margin-top: 30rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.basic_row2 .ipts {
|
|
border-bottom: 1rpx solid #E6E6E6;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.drugList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 25rpx;
|
|
}
|
|
|
|
.drugItem {
|
|
background: #F0F0F0;
|
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
white-space: nowrap;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
padding: 10rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.checked {
|
|
background: #FF512A;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
|
|
.life {
|
|
margin: 0 52rpx;
|
|
}
|
|
|
|
.life .basic_row {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
min-height: 90rpx;
|
|
}
|
|
|
|
.life .basic_row_tit {
|
|
white-space: nowrap;
|
|
margin-right: 32rpx;
|
|
}
|
|
|
|
.life .basic_row_con {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
|
|
.life .sex {
|
|
margin: 15rpx 0;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.basic_row_con3 {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
.basic_row3 {
|
|
min-height: 90rpx;
|
|
display: flex;
|
|
padding-top: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
align-items: flex-start;
|
|
border-bottom: 1rpx solid #E6E6E6;
|
|
}
|
|
|
|
.basic_row_con3 .sex {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.life .none {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.user {
|
|
margin: 0 52rpx;
|
|
margin-top: 92rpx;
|
|
}
|
|
|
|
.user .none {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.user .sex {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
</style> |