246 lines
7.5 KiB
Vue
246 lines
7.5 KiB
Vue
<template>
|
|
<view class="health-form">
|
|
<Navbar title="健康信息" :showRightText="true" :isBack="false" />
|
|
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
|
|
<u-form-item label="身高" prop="height" borderBottom required labelWidth="200rpx">
|
|
<u--input
|
|
v-model.number="form.height"
|
|
border="none"
|
|
placeholder="请输入身高cm"
|
|
type="number"
|
|
></u--input>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="体重" prop="weight" borderBottom required labelWidth="200rpx">
|
|
<u--input
|
|
v-model.number="form.weight"
|
|
border="none"
|
|
placeholder="请输入体重kg"
|
|
type="number"
|
|
></u--input>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="体型控制" prop="bodyType" borderBottom labelWidth="200rpx" @click="showSelector('bodyType')">
|
|
<u--input
|
|
v-model="displayBodyTypeName"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
placeholder="请选择"
|
|
border="none"
|
|
></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="BMI" prop="bmi" borderBottom labelWidth="200rpx">
|
|
<u--input
|
|
v-model="form.bmi"
|
|
disabled
|
|
border="none"
|
|
disabledColor="#ffffff"
|
|
placeholder="请输入身高、体重"
|
|
></u--input>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="劳动强度" prop="laborIntensity" borderBottom required labelWidth="200rpx" @click="showSelector('laborIntensity')">
|
|
<u--input
|
|
v-model="displayLaborIntensityName"
|
|
disabled
|
|
border="none"
|
|
disabledColor="#ffffff"
|
|
placeholder="请选择"
|
|
></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="是否住院" prop="housing" borderBottom labelWidth="200rpx" @click="showSelector('housing')">
|
|
<u--input
|
|
v-model="displayHousingName"
|
|
disabled
|
|
border="none"
|
|
disabledColor="#ffffff"
|
|
placeholder="请选择"
|
|
></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="医嘱" borderBottom labelWidth="200rpx">
|
|
<text class="u-content-color">暂无医嘱信息</text>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="过敏源" prop="allergies" borderBottom labelWidth="200rpx">
|
|
<u--input
|
|
v-model="form.allergies"
|
|
border="none"
|
|
placeholder="请输入过敏源"
|
|
></u--input>
|
|
</u-form-item>
|
|
</u--form>
|
|
|
|
<view class="chronic-diseases">
|
|
<text class="chronic-diseases__label">慢性病</text>
|
|
<u-checkbox-group v-model="form.chronicDiseases" borderBottom placement="column" iconSize="16">
|
|
<u-checkbox
|
|
v-for="(item, index) in chronicDiseaseOptions"
|
|
:key="index"
|
|
:name="item.value"
|
|
:label="item.label"
|
|
shape="circle"
|
|
></u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
|
|
<view class="submit-btn">
|
|
<u-button type="warning" text="保存" @click="handleSubmit"></u-button>
|
|
</view>
|
|
|
|
<u-action-sheet
|
|
v-if="currentSelector"
|
|
:show="selectorVisible"
|
|
:actions="getSelectorOptions(currentSelector)"
|
|
:title="getSelectorTitle(currentSelector)"
|
|
description="如果选择保密会报错"
|
|
@close="hideSelector"
|
|
@select="handleSelectorSelect"
|
|
>
|
|
</u-action-sheet>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
height: null,
|
|
weight: null,
|
|
bodyType: '',
|
|
bmi: '',
|
|
laborIntensity: '',
|
|
housing: '',
|
|
allergies: '',
|
|
chronicDiseases: []
|
|
},
|
|
selectorVisible: false,
|
|
currentSelector: null,
|
|
selectors: {
|
|
bodyType: { options: [{ name: '偏瘦', value: '1' }, { name: '正常', value: '2' }, { name: '偏胖', value: '3' }], title: '请选择体型' },
|
|
laborIntensity: { options: [{ name: '轻度', value: '1' }, { name: '中度', value: '2' }, { name: '重度', value: '3' }], title: '请选择劳动强度' },
|
|
housing: { options: [{ name: '自住', value: '1' }, { name: '租房', value: '2' }], title: '请选择住房类型' }
|
|
},
|
|
chronicDiseaseOptions: [
|
|
{ label: '糖尿病', value: 'diabetes' },
|
|
{ label: '肾结石', value: 'kidney_stone' },
|
|
{ label: '心脏疾病', value: 'heart_disease' },
|
|
{ label: '痛风', value: 'gout' }
|
|
],
|
|
rules: {
|
|
height: { type: 'number', required: true, message: '请输入身高', trigger: ['blur', 'change'] },
|
|
weight: { type: 'number', required: true, message: '请输入体重', trigger: ['blur', 'change'] },
|
|
laborIntensity: { type: 'string', required: true, message: '请选择劳动强度', trigger: ['blur', 'change'] }
|
|
},
|
|
displayBodyTypeName: '',
|
|
displayLaborIntensityName: '',
|
|
displayHousingName: ''
|
|
}
|
|
},
|
|
watch: {
|
|
'form.height': 'calculateBMI',
|
|
'form.weight': 'calculateBMI',
|
|
'form.bodyType': 'updateDisplayBodyTypeName',
|
|
'form.laborIntensity': 'updateDisplayLaborIntensityName',
|
|
'form.housing': 'updateDisplayHousingName'
|
|
},
|
|
methods: {
|
|
calculateBMI() {
|
|
if (this.form.height && this.form.weight) {
|
|
const heightInMeters = this.form.height / 100
|
|
const bmi = (this.form.weight / (heightInMeters * heightInMeters)).toFixed(1)
|
|
this.form.bmi = bmi
|
|
}
|
|
},
|
|
showSelector(selector) {
|
|
this.currentSelector = selector;
|
|
this.selectorVisible = true;
|
|
},
|
|
hideSelector() {
|
|
this.currentSelector = null;
|
|
this.selectorVisible = false;
|
|
},
|
|
getSelectorOptions(selector) {
|
|
return this.selectors[selector]?.options || [];
|
|
},
|
|
getSelectorTitle(selector) {
|
|
return this.selectors[selector]?.title || '';
|
|
},
|
|
handleSelectorSelect(e) {
|
|
this.form[this.currentSelector] = e.value;
|
|
this.hideSelector();
|
|
},
|
|
updateDisplayBodyTypeName() {
|
|
this.displayBodyTypeName = this.getDisplayName('bodyType', this.form.bodyType);
|
|
},
|
|
updateDisplayLaborIntensityName() {
|
|
this.displayLaborIntensityName = this.getDisplayName('laborIntensity', this.form.laborIntensity);
|
|
},
|
|
updateDisplayHousingName() {
|
|
this.displayHousingName = this.getDisplayName('housing', this.form.housing);
|
|
},
|
|
getDisplayName(selector, value) {
|
|
const options = this.selectors[selector]?.options || [];
|
|
const selectedOption = options.find(option => option.value === value);
|
|
return selectedOption ? selectedOption.name : '';
|
|
},
|
|
handleSubmit() {
|
|
this.$refs.uForm.validate().then(valid => {
|
|
if (valid) {
|
|
console.log('Form submitted:', this.form);
|
|
uni.$u.toast('保存成功');
|
|
} else {
|
|
uni.$u.toast('请填写完整信息');
|
|
}
|
|
}).catch(errors => {
|
|
console.error('Validation failed:', errors);
|
|
uni.$u.toast('请检查并修正错误');
|
|
});
|
|
},
|
|
hideKeyboard() {
|
|
uni.hideKeyboard();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.health-form {
|
|
padding: 20rpx;
|
|
background-color: #ffffff;
|
|
|
|
.chronic-diseases {
|
|
margin-top: 20rpx;
|
|
|
|
&__label {
|
|
font-size: 28rpx;
|
|
color: $u-main-color;
|
|
margin-bottom: 20rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.submit-btn {
|
|
margin-top: 40rpx;
|
|
}
|
|
}
|
|
|
|
::v-deep .u-form-item {
|
|
min-height: 100rpx;
|
|
|
|
&__body__right__content__slot {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
::v-deep .u-checkbox {
|
|
margin-bottom: 16rpx;
|
|
}
|
|
</style>
|