|
|
@@ -0,0 +1,245 @@
|
|
|
+<template>
|
|
|
+ <CustomNav title="患者建档信息" leftType="home" />
|
|
|
+ <view class="complete-container">
|
|
|
+ <view class="form-section">
|
|
|
+ <text class="section-title">患者建档信息</text>
|
|
|
+
|
|
|
+ <!-- 吸烟饮酒史 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="label">吸烟饮酒史</text>
|
|
|
+ <view class="radio-group">
|
|
|
+ <label class="radio-item" v-for="option in smokingOptions" :key="option.value">
|
|
|
+ <radio :value="option.value" :checked="smokingHistory === option.value" @change="smokingHistory = $event.detail.value" />
|
|
|
+ <text>{{ option.label }}</text>
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ <view class="radio-group">
|
|
|
+ <label class="radio-item" v-for="option in drinkingOptions" :key="option.value">
|
|
|
+ <radio :value="option.value" :checked="drinkingHistory === option.value" @change="drinkingHistory = $event.detail.value" />
|
|
|
+ <text>{{ option.label }}</text>
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 疾病诊断 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="label">疾病诊断</text>
|
|
|
+ <view class="disease-list">
|
|
|
+ <view class="disease-item" v-for="disease in diseases" :key="disease.key">
|
|
|
+ <text class="disease-label">{{ disease.label }}</text>
|
|
|
+ <switch :checked="diseaseHistory[disease.key]" @change="(e: any) => toggleDisease(disease.key, e.detail.value)" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 用药情况 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="label">用药情况</text>
|
|
|
+ <textarea
|
|
|
+ v-model="medicationHistory"
|
|
|
+ placeholder="请输入用药情况"
|
|
|
+ class="input"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 过敏史 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="label">过敏史</text>
|
|
|
+ <textarea
|
|
|
+ v-model="allergyHistory"
|
|
|
+ placeholder="请输入过敏史"
|
|
|
+ class="input"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 家族史 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="label">家族史</text>
|
|
|
+ <textarea
|
|
|
+ v-model="familyHistory"
|
|
|
+ placeholder="请输入家族史"
|
|
|
+ class="input"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 提交按钮 -->
|
|
|
+ <view class="submit-section">
|
|
|
+ <button class="submit-btn" @click="submitForm">提交</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
+import CustomNav from '@/components/CustomNav.vue'
|
|
|
+
|
|
|
+// 吸烟选项
|
|
|
+const smokingOptions = [
|
|
|
+ { label: '从不吸烟', value: 'never' },
|
|
|
+ { label: '已戒烟', value: 'quit' },
|
|
|
+ { label: '偶尔吸烟', value: 'occasional' },
|
|
|
+ { label: '经常吸烟', value: 'frequent' }
|
|
|
+]
|
|
|
+
|
|
|
+// 饮酒选项
|
|
|
+const drinkingOptions = [
|
|
|
+ { label: '从不饮酒', value: 'never' },
|
|
|
+ { label: '已戒酒', value: 'quit' },
|
|
|
+ { label: '偶尔饮酒', value: 'occasional' },
|
|
|
+ { label: '经常饮酒', value: 'frequent' }
|
|
|
+]
|
|
|
+
|
|
|
+// 疾病列表
|
|
|
+const diseases = [
|
|
|
+ { key: 'diabetes', label: '糖尿病' },
|
|
|
+ { key: 'hypertension', label: '高血压' },
|
|
|
+ { key: 'dyslipidemia', label: '血脂异常' },
|
|
|
+ { key: 'coronaryHeartDisease', label: '冠心病' },
|
|
|
+ { key: 'cerebralInfarction', label: '脑梗塞' }
|
|
|
+]
|
|
|
+
|
|
|
+// 响应式数据
|
|
|
+const smokingHistory = ref('')
|
|
|
+const drinkingHistory = ref('')
|
|
|
+const diseaseHistory = ref<Record<string, boolean>>({
|
|
|
+ diabetes: false,
|
|
|
+ hypertension: false,
|
|
|
+ dyslipidemia: false,
|
|
|
+ coronaryHeartDisease: false,
|
|
|
+ cerebralInfarction: false
|
|
|
+})
|
|
|
+const medicationHistory = ref('')
|
|
|
+const allergyHistory = ref('')
|
|
|
+const familyHistory = ref('')
|
|
|
+
|
|
|
+// 切换疾病状态
|
|
|
+const toggleDisease = (key: string, value: boolean) => {
|
|
|
+ diseaseHistory.value[key] = value
|
|
|
+}
|
|
|
+
|
|
|
+// 提交表单
|
|
|
+const submitForm = () => {
|
|
|
+ const formData = {
|
|
|
+ smokingHistory: smokingHistory.value,
|
|
|
+ drinkingHistory: drinkingHistory.value,
|
|
|
+ diseaseHistory: diseaseHistory.value,
|
|
|
+ medicationHistory: medicationHistory.value,
|
|
|
+ allergyHistory: allergyHistory.value,
|
|
|
+ familyHistory: familyHistory.value
|
|
|
+ }
|
|
|
+ console.log('提交的表单数据:', formData)
|
|
|
+ // 这里可以添加提交逻辑,比如调用API
|
|
|
+ uni.showToast({
|
|
|
+ title: '提交成功',
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.complete-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ /* 为固定在顶部的 CustomNav 留出空间(状态栏 + 导航栏 44px) */
|
|
|
+ padding-top: calc(var(--status-bar-height) + 44px + 40rpx);
|
|
|
+ /* 保留侧边与内部间距,使用 border-box 避免计算误差 */
|
|
|
+ padding-right: 40rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+ /* 底部安全区:使用项目中声明的 --window-bottom 或 fallback */
|
|
|
+ padding-bottom: calc(var(--window-bottom, 0px) + 40rpx);
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.form-section {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 600rpx;
|
|
|
+ box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.form-item {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.label {
|
|
|
+ display: block;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.radio-group {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 40rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.radio-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.disease-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.disease-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.disease-label {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.input {
|
|
|
+ width: 100%;
|
|
|
+ height: 120rpx;
|
|
|
+ border: 1rpx solid #ddd;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ max-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-section {
|
|
|
+ margin-top: 60rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn {
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(135deg, #07C160 0%, #00A854 100%);
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+</style>
|