|
@@ -59,6 +59,70 @@
|
|
|
<view v-for="opt in allergyOptions" :key="opt" class="chip-item-wrap" :class="{ 'chip-active': inner.allergySymptoms && inner.allergySymptoms.indexOf(opt) >= 0 }" @click="toggleChip('allergySymptoms', opt)"><text>{{ opt }}</text></view>
|
|
<view v-for="opt in allergyOptions" :key="opt" class="chip-item-wrap" :class="{ 'chip-active': inner.allergySymptoms && inner.allergySymptoms.indexOf(opt) >= 0 }" @click="toggleChip('allergySymptoms', opt)"><text>{{ opt }}</text></view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ===== 按性别动态:女性专属 ===== -->
|
|
|
|
|
+ <view v-if="isFemale">
|
|
|
|
|
+ <view class="form-card">
|
|
|
|
|
+ <view class="card-head"><text class="card-title">月经周期</text><text class="card-hint">单选</text></view>
|
|
|
|
|
+ <view class="chip-row">
|
|
|
|
|
+ <view v-for="opt in menstrualOptions" :key="opt" class="chip-item" :class="{ 'chip-active': inner.menstrualCycle === opt }" @click="setField('menstrualCycle', opt)"><text>{{ opt }}</text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="form-card">
|
|
|
|
|
+ <view class="card-head"><text class="card-title">特殊时期</text><text class="card-hint">单选</text></view>
|
|
|
|
|
+ <view class="chip-row">
|
|
|
|
|
+ <view v-for="opt in specialPeriodOptions" :key="opt" class="chip-item" :class="{ 'chip-active': inner.specialPeriod === opt }" @click="setField('specialPeriod', opt)"><text>{{ opt }}</text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ===== 按年龄动态:儿童专属 ===== -->
|
|
|
|
|
+ <view v-if="isChild">
|
|
|
|
|
+ <view class="form-card">
|
|
|
|
|
+ <view class="card-head"><text class="card-title">生长发育</text><text class="card-hint">单选</text></view>
|
|
|
|
|
+ <view class="chip-row">
|
|
|
|
|
+ <view v-for="opt in growthOptions" :key="opt" class="chip-item" :class="{ 'chip-active': inner.growthDevelopment === opt }" @click="setField('growthDevelopment', opt)"><text>{{ opt }}</text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="form-card">
|
|
|
|
|
+ <view class="card-head"><text class="card-title">挑食情况</text><text class="card-hint">单选</text></view>
|
|
|
|
|
+ <view class="chip-row">
|
|
|
|
|
+ <view v-for="opt in pickyEatingOptions" :key="opt" class="chip-item" :class="{ 'chip-active': inner.pickyEating === opt }" @click="setField('pickyEating', opt)"><text>{{ opt }}</text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ===== 按年龄动态:老年专属 ===== -->
|
|
|
|
|
+ <view v-if="isElderly">
|
|
|
|
|
+ <view class="form-card">
|
|
|
|
|
+ <view class="card-head"><text class="card-title">骨质疏松风险</text><text class="card-hint">单选</text></view>
|
|
|
|
|
+ <view class="chip-row">
|
|
|
|
|
+ <view v-for="opt in osteoporosisOptions" :key="opt" class="chip-item" :class="{ 'chip-active': inner.osteoporosisRisk === opt }" @click="setField('osteoporosisRisk', opt)"><text>{{ opt }}</text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="form-card">
|
|
|
|
|
+ <view class="card-head"><text class="card-title">跌倒风险</text><text class="card-hint">单选</text></view>
|
|
|
|
|
+ <view class="chip-row">
|
|
|
|
|
+ <view v-for="opt in fallRiskOptions" :key="opt" class="chip-item" :class="{ 'chip-active': inner.fallRisk === opt }" @click="setField('fallRisk', opt)"><text>{{ opt }}</text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ===== 按年龄动态:青少年专属 ===== -->
|
|
|
|
|
+ <view v-if="isTeenager">
|
|
|
|
|
+ <view class="form-card">
|
|
|
|
|
+ <view class="card-head"><text class="card-title">屏幕时间</text><text class="card-hint">单选</text></view>
|
|
|
|
|
+ <view class="chip-row">
|
|
|
|
|
+ <view v-for="opt in screenTimeOptions" :key="opt" class="chip-item" :class="{ 'chip-active': inner.screenTime === opt }" @click="setField('screenTime', opt)"><text>{{ opt }}</text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="form-card">
|
|
|
|
|
+ <view class="card-head"><text class="card-title">情绪状态</text><text class="card-hint">单选</text></view>
|
|
|
|
|
+ <view class="chip-row">
|
|
|
|
|
+ <view v-for="opt in teenMoodOptions" :key="opt" class="chip-item" :class="{ 'chip-active': inner.teenMood === opt }" @click="setField('teenMood', opt)"><text>{{ opt }}</text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -66,27 +130,86 @@
|
|
|
export default {
|
|
export default {
|
|
|
name: 'LifestyleStep',
|
|
name: 'LifestyleStep',
|
|
|
props: {
|
|
props: {
|
|
|
- value: { type: Object, default: function() { return {} } }
|
|
|
|
|
|
|
+ value: { type: Object, default: function() { return {} } },
|
|
|
|
|
+ profile: { type: Object, default: function() { return {} } }
|
|
|
},
|
|
},
|
|
|
data: function() {
|
|
data: function() {
|
|
|
return {
|
|
return {
|
|
|
- inner: { mood: '', sleepDuration: '', bedtime: '', bowelFrequency: '', bowelForm: '', antibioticHistory: '', allergySymptoms: [] }
|
|
|
|
|
|
|
+ inner: {
|
|
|
|
|
+ mood: '', sleepDuration: '', bedtime: '', bowelFrequency: '', bowelForm: '', antibioticHistory: '', allergySymptoms: [],
|
|
|
|
|
+ menstrualCycle: '', specialPeriod: '', growthDevelopment: '', pickyEating: '', osteoporosisRisk: '', fallRisk: '', screenTime: '', teenMood: ''
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
|
|
+ isFemale: function() {
|
|
|
|
|
+ var g = this.profile && this.profile.gender
|
|
|
|
|
+ return g === 'female' || g === '女'
|
|
|
|
|
+ },
|
|
|
|
|
+ isChild: function() {
|
|
|
|
|
+ var age = this.profile && this.profile.age
|
|
|
|
|
+ return age != null && Number(age) > 0 && Number(age) < 12
|
|
|
|
|
+ },
|
|
|
|
|
+ isTeenager: function() {
|
|
|
|
|
+ var age = this.profile && this.profile.age
|
|
|
|
|
+ return age != null && Number(age) >= 12 && Number(age) < 18
|
|
|
|
|
+ },
|
|
|
|
|
+ isElderly: function() {
|
|
|
|
|
+ var age = this.profile && this.profile.age
|
|
|
|
|
+ return age != null && Number(age) >= 60
|
|
|
|
|
+ },
|
|
|
moodOptions: function() { return ['良好', '一般', '低落', '焦虑'] },
|
|
moodOptions: function() { return ['良好', '一般', '低落', '焦虑'] },
|
|
|
sleepOptions: function() { return ['<6小时', '6-7小时', '7-8小时', '>8小时'] },
|
|
sleepOptions: function() { return ['<6小时', '6-7小时', '7-8小时', '>8小时'] },
|
|
|
bedtimeOptions: function() { return ['22:00前', '22:00-24:00', '24:00后'] },
|
|
bedtimeOptions: function() { return ['22:00前', '22:00-24:00', '24:00后'] },
|
|
|
bowelFreqOptions: function() { return ['每天1次(正常)', '隔天1次', '每周2-3次', '每周<2次'] },
|
|
bowelFreqOptions: function() { return ['每天1次(正常)', '隔天1次', '每周2-3次', '每周<2次'] },
|
|
|
bowelFormOptions: function() { return ['干硬颗粒', '条状干硬', '正常香蕉状', '软便', '水样'] },
|
|
bowelFormOptions: function() { return ['干硬颗粒', '条状干硬', '正常香蕉状', '软便', '水样'] },
|
|
|
antibioticOptions: function() { return ['无', '曾使用过(未用完疗程)', '按疗程使用完', '频繁使用(近2年≥3次)'] },
|
|
antibioticOptions: function() { return ['无', '曾使用过(未用完疗程)', '按疗程使用完', '频繁使用(近2年≥3次)'] },
|
|
|
- allergyOptions: function() { return ['无', '反复皮疹', '鼻痒/打喷嚏', '眼痒/流泪', '哮喘样症状', '食物过敏'] }
|
|
|
|
|
|
|
+ allergyOptions: function() { return ['无', '反复皮疹', '鼻痒/打喷嚏', '眼痒/流泪', '哮喘样症状', '食物过敏'] },
|
|
|
|
|
+ menstrualOptions: function() { return ['规律(28-32天)', '不规律', '已停经', '尚未开始'] },
|
|
|
|
|
+ specialPeriodOptions: function() { return ['无', '备孕中', '怀孕', '哺乳期'] },
|
|
|
|
|
+ growthOptions: function() { return ['正常(在生长曲线内)', '偏慢', '偏快', '不清楚'] },
|
|
|
|
|
+ pickyEatingOptions: function() { return ['无挑食', '轻微挑食', '明显挑食', '严重挑食'] },
|
|
|
|
|
+ osteoporosisOptions: function() { return ['无风险', '有风险(曾骨折/骨密度低)', '不清楚'] },
|
|
|
|
|
+ fallRiskOptions: function() { return ['近1年无跌倒', '近1年跌倒1次', '近1年跌倒2次及以上'] },
|
|
|
|
|
+ screenTimeOptions: function() { return ['<1小时/天', '1-3小时/天', '3-5小时/天', '>5小时/天'] },
|
|
|
|
|
+ teenMoodOptions: function() { return ['开朗', '一般', '易怒', '低落'] }
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
|
- value: { deep: true, handler: function(val) { this.syncFromValue(val) } }
|
|
|
|
|
|
|
+ value: { deep: true, handler: function(val) { this.syncFromValue(val) } },
|
|
|
|
|
+ profile: { deep: true, handler: function(val) { this.syncProfile(val) } }
|
|
|
|
|
+ },
|
|
|
|
|
+ created: function() {
|
|
|
|
|
+ this.syncFromValue(this.value)
|
|
|
|
|
+ this.syncProfile(this.profile)
|
|
|
},
|
|
},
|
|
|
- created: function() { this.syncFromValue(this.value) },
|
|
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ // 切换成员/更新 profile 时:仅清除当前性别/年龄不再适用的专属字段,
|
|
|
|
|
+ // 保留适用字段的已存答案(先由 syncFromValue 回填,这里只做减法)
|
|
|
|
|
+ syncProfile: function(p) {
|
|
|
|
|
+ if (!p) return
|
|
|
|
|
+ var g = p.gender
|
|
|
|
|
+ var age = p.age != null ? Number(p.age) : null
|
|
|
|
|
+ var isFemale = g === 'female' || g === '女'
|
|
|
|
|
+ var isChild = age != null && age > 0 && age < 12
|
|
|
|
|
+ var isTeen = age != null && age >= 12 && age < 18
|
|
|
|
|
+ var isElderly = age != null && age >= 60
|
|
|
|
|
+ if (!isFemale) {
|
|
|
|
|
+ this.inner.menstrualCycle = ''
|
|
|
|
|
+ this.inner.specialPeriod = ''
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!isChild) {
|
|
|
|
|
+ this.inner.growthDevelopment = ''
|
|
|
|
|
+ this.inner.pickyEating = ''
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!isTeen) {
|
|
|
|
|
+ this.inner.screenTime = ''
|
|
|
|
|
+ this.inner.teenMood = ''
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!isElderly) {
|
|
|
|
|
+ this.inner.osteoporosisRisk = ''
|
|
|
|
|
+ this.inner.fallRisk = ''
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
syncFromValue: function(val) {
|
|
syncFromValue: function(val) {
|
|
|
if (!val) return
|
|
if (!val) return
|
|
|
this.inner.mood = val.mood || ''
|
|
this.inner.mood = val.mood || ''
|
|
@@ -96,6 +219,15 @@ export default {
|
|
|
this.inner.bowelForm = val.bowelForm || ''
|
|
this.inner.bowelForm = val.bowelForm || ''
|
|
|
this.inner.antibioticHistory = val.antibioticHistory || ''
|
|
this.inner.antibioticHistory = val.antibioticHistory || ''
|
|
|
this.inner.allergySymptoms = Array.isArray(val.allergySymptoms) ? val.allergySymptoms.slice() : []
|
|
this.inner.allergySymptoms = Array.isArray(val.allergySymptoms) ? val.allergySymptoms.slice() : []
|
|
|
|
|
+ // 兼容:按成员加载时若已有答案则回填(不在此处重置)
|
|
|
|
|
+ this.inner.menstrualCycle = val.menstrualCycle || ''
|
|
|
|
|
+ this.inner.specialPeriod = val.specialPeriod || ''
|
|
|
|
|
+ this.inner.growthDevelopment = val.growthDevelopment || ''
|
|
|
|
|
+ this.inner.pickyEating = val.pickyEating || ''
|
|
|
|
|
+ this.inner.osteoporosisRisk = val.osteoporosisRisk || ''
|
|
|
|
|
+ this.inner.fallRisk = val.fallRisk || ''
|
|
|
|
|
+ this.inner.screenTime = val.screenTime || ''
|
|
|
|
|
+ this.inner.teenMood = val.teenMood || ''
|
|
|
},
|
|
},
|
|
|
setField: function(field, value) {
|
|
setField: function(field, value) {
|
|
|
this.inner[field] = value
|
|
this.inner[field] = value
|
|
@@ -115,7 +247,15 @@ export default {
|
|
|
bowelFrequency: this.inner.bowelFrequency,
|
|
bowelFrequency: this.inner.bowelFrequency,
|
|
|
bowelForm: this.inner.bowelForm,
|
|
bowelForm: this.inner.bowelForm,
|
|
|
antibioticHistory: this.inner.antibioticHistory,
|
|
antibioticHistory: this.inner.antibioticHistory,
|
|
|
- allergySymptoms: (this.inner.allergySymptoms || []).slice()
|
|
|
|
|
|
|
+ allergySymptoms: (this.inner.allergySymptoms || []).slice(),
|
|
|
|
|
+ menstrualCycle: this.inner.menstrualCycle,
|
|
|
|
|
+ specialPeriod: this.inner.specialPeriod,
|
|
|
|
|
+ growthDevelopment: this.inner.growthDevelopment,
|
|
|
|
|
+ pickyEating: this.inner.pickyEating,
|
|
|
|
|
+ osteoporosisRisk: this.inner.osteoporosisRisk,
|
|
|
|
|
+ fallRisk: this.inner.fallRisk,
|
|
|
|
|
+ screenTime: this.inner.screenTime,
|
|
|
|
|
+ teenMood: this.inner.teenMood
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -135,6 +275,4 @@ export default {
|
|
|
.chip-row-wrap { display: flex; flex-wrap: wrap; }
|
|
.chip-row-wrap { display: flex; flex-wrap: wrap; }
|
|
|
.chip-item, .chip-item-wrap { padding: 12rpx 28rpx; border-radius: 999rpx; background: #F1F5F9; font-size: 24rpx; color: #334155; margin: 0 16rpx 14rpx 0; }
|
|
.chip-item, .chip-item-wrap { padding: 12rpx 28rpx; border-radius: 999rpx; background: #F1F5F9; font-size: 24rpx; color: #334155; margin: 0 16rpx 14rpx 0; }
|
|
|
.chip-active { background: #FFF3E0; color: #F97316; font-weight: 600; }
|
|
.chip-active { background: #FFF3E0; color: #F97316; font-weight: 600; }
|
|
|
-.custom-row { margin-top: 10rpx; }
|
|
|
|
|
-.custom-hint { font-size: 22rpx; color: #F97316; }
|
|
|
|
|
</style>
|
|
</style>
|