537 lines
12 KiB
Vue
537 lines
12 KiB
Vue
<template>
|
||
<view class="calculator-page">
|
||
<!-- 表单区域 -->
|
||
<view class="form-container">
|
||
<!-- 性别选择 -->
|
||
<view class="form-item">
|
||
<view class="form-label">性别：</view>
|
||
<view class="radio-group">
|
||
<view
|
||
class="radio-item"
|
||
:class="{ active: formData.gender === 'male' }"
|
||
@click="selectGender('male')"
|
||
>
|
||
<view class="radio-dot" :class="{ checked: formData.gender === 'male' }"></view>
|
||
<text class="radio-text" :class="{ active: formData.gender === 'male' }">男</text>
|
||
</view>
|
||
<view
|
||
class="radio-item"
|
||
:class="{ active: formData.gender === 'female' }"
|
||
@click="selectGender('female')"
|
||
>
|
||
<view class="radio-dot" :class="{ checked: formData.gender === 'female' }"></view>
|
||
<text class="radio-text" :class="{ active: formData.gender === 'female' }">女</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 年龄输入 -->
|
||
<view class="form-item">
|
||
<view class="form-label">年龄：</view>
|
||
<view class="input-wrapper" :class="{ 'input-focus': focusField === 'age', 'input-filled': formData.age }">
|
||
<input
|
||
class="form-input"
|
||
type="number"
|
||
v-model="formData.age"
|
||
placeholder="请输入年龄"
|
||
placeholder-style="color: #9fa5c0"
|
||
@focus="focusField = 'age'"
|
||
@blur="focusField = ''"
|
||
/>
|
||
<text class="input-unit">岁</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 身高输入 -->
|
||
<view class="form-item">
|
||
<view class="form-label">身高：</view>
|
||
<view class="input-wrapper" :class="{ 'input-focus': focusField === 'height', 'input-filled': formData.height }">
|
||
<input
|
||
class="form-input"
|
||
type="number"
|
||
v-model="formData.height"
|
||
placeholder="请输入身高"
|
||
placeholder-style="color: #9fa5c0"
|
||
@focus="focusField = 'height'"
|
||
@blur="focusField = ''"
|
||
/>
|
||
<text class="input-unit">cm</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 是否透析 -->
|
||
<view class="form-item">
|
||
<view class="form-label">是否透析：</view>
|
||
<view class="radio-group">
|
||
<view
|
||
class="radio-item"
|
||
:class="{ active: formData.dialysis === false }"
|
||
@click="selectDialysis(false)"
|
||
>
|
||
<view class="radio-dot" :class="{ checked: formData.dialysis === false }"></view>
|
||
<text class="radio-text" :class="{ active: formData.dialysis === false }">否</text>
|
||
</view>
|
||
<view
|
||
class="radio-item"
|
||
:class="{ active: formData.dialysis === true }"
|
||
@click="selectDialysis(true)"
|
||
>
|
||
<view class="radio-dot" :class="{ checked: formData.dialysis === true }"></view>
|
||
<text class="radio-text" :class="{ active: formData.dialysis === true }">是</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 干体重输入 -->
|
||
<view class="form-item">
|
||
<view class="form-label">干体重：</view>
|
||
<view class="input-wrapper" :class="{ 'input-focus': focusField === 'dryWeight', 'input-filled': formData.dryWeight }">
|
||
<input
|
||
class="form-input"
|
||
type="digit"
|
||
v-model="formData.dryWeight"
|
||
placeholder="请输入干体重"
|
||
placeholder-style="color: #9fa5c0"
|
||
@focus="focusField = 'dryWeight'"
|
||
@blur="focusField = ''"
|
||
/>
|
||
<text class="input-unit">kg</text>
|
||
</view>
|
||
<view class="form-hint">透析患者请输入透析后的干体重</view>
|
||
</view>
|
||
|
||
<!-- 血肌酐输入 -->
|
||
<view class="form-item">
|
||
<view class="form-label">血肌酐：</view>
|
||
<view class="input-wrapper" :class="{ 'input-focus': focusField === 'creatinine', 'input-filled': formData.creatinine }">
|
||
<input
|
||
class="form-input"
|
||
type="digit"
|
||
v-model="formData.creatinine"
|
||
placeholder="请输入血肌酐值"
|
||
placeholder-style="color: #9fa5c0"
|
||
@focus="focusField = 'creatinine'"
|
||
@blur="focusField = ''"
|
||
/>
|
||
<text class="input-unit">μmol/L</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 开始计算按钮 -->
|
||
<view class="footer-btn">
|
||
<view
|
||
class="calculate-btn"
|
||
:class="{ disabled: isCalculating || !isFormValid }"
|
||
@click="handleCalculate"
|
||
>
|
||
<text>{{ isCalculating ? '计算中...' : '开始计算' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部安全距离 -->
|
||
<view class="safe-bottom"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { checkLogin, toLogin } from '@/libs/login.js'
|
||
import { mapGetters } from 'vuex'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
formData: {
|
||
gender: 'male', // male: 男, female: 女
|
||
age: '',
|
||
height: '',
|
||
dialysis: false, // false: 否, true: 是
|
||
dryWeight: '',
|
||
creatinine: ''
|
||
},
|
||
isCalculating: false, // 计算中状态
|
||
pendingCalculate: false, // 登录后待执行计算
|
||
focusField: '' // 当前聚焦的输入框
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['userInfo', 'isLogin']),
|
||
// 表单是否有效（用于按钮状态）
|
||
isFormValid() {
|
||
return this.formData.age &&
|
||
this.formData.height &&
|
||
this.formData.dryWeight &&
|
||
this.formData.creatinine
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 尝试预填用户信息
|
||
this.prefillUserInfo()
|
||
},
|
||
onShow() {
|
||
// 页面显示时检查是否需要自动执行计算（登录返回后）
|
||
if (this.pendingCalculate && checkLogin()) {
|
||
this.pendingCalculate = false
|
||
// 延迟执行，确保页面完全显示
|
||
setTimeout(() => {
|
||
this.handleCalculate()
|
||
}, 300)
|
||
}
|
||
},
|
||
methods: {
|
||
// 预填用户信息
|
||
prefillUserInfo() {
|
||
if (this.isLogin && this.userInfo) {
|
||
// 预填性别
|
||
if (this.userInfo.sex !== undefined) {
|
||
// sex: 0-未知, 1-男, 2-女
|
||
if (this.userInfo.sex === 1) {
|
||
this.formData.gender = 'male'
|
||
} else if (this.userInfo.sex === 2) {
|
||
this.formData.gender = 'female'
|
||
}
|
||
}
|
||
// 如果有年龄信息
|
||
if (this.userInfo.age) {
|
||
this.formData.age = String(this.userInfo.age)
|
||
}
|
||
// 如果有身高信息
|
||
if (this.userInfo.height) {
|
||
this.formData.height = String(this.userInfo.height)
|
||
}
|
||
// 如果有体重信息
|
||
if (this.userInfo.weight) {
|
||
this.formData.dryWeight = String(this.userInfo.weight)
|
||
}
|
||
}
|
||
},
|
||
async handleCalculate() {
|
||
// 防止重复点击
|
||
if (this.isCalculating) {
|
||
return
|
||
}
|
||
|
||
// 检查登录状态
|
||
if (!checkLogin()) {
|
||
// 标记待执行，登录成功后自动触发
|
||
if (this.isFormValid) {
|
||
this.pendingCalculate = true
|
||
uni.showToast({
|
||
title: '请先登录后再计算',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
setTimeout(() => {
|
||
toLogin()
|
||
}, 500)
|
||
return
|
||
}
|
||
|
||
// 表单验证
|
||
if (!this.validateForm()) {
|
||
return
|
||
}
|
||
|
||
this.isCalculating = true
|
||
|
||
try {
|
||
const { calculateNutrition } = await import('@/api/tool.js');
|
||
const result = await calculateNutrition({
|
||
gender: this.formData.gender,
|
||
age: Number(this.formData.age),
|
||
height: Number(this.formData.height),
|
||
dialysis: this.formData.dialysis,
|
||
dryWeight: Number(this.formData.dryWeight),
|
||
creatinine: Number(this.formData.creatinine)
|
||
});
|
||
|
||
this.isCalculating = false
|
||
|
||
// 跳转到计算结果页，传递计算结果ID
|
||
uni.navigateTo({
|
||
url: `/pages/tool/calculator-result?id=${result.data.id || result.data.resultId}`
|
||
});
|
||
} catch (error) {
|
||
this.isCalculating = false
|
||
|
||
// 获取错误信息（error 可能是字符串、对象或 Error 实例）
|
||
const errorMsg = typeof error === 'string' ? error : (error.message || error.msg || '');
|
||
|
||
// 登录相关错误关键词
|
||
const loginErrorMessages = ['请先登录', '未登录', '登录已过期', '登录失效'];
|
||
const isLoginError = loginErrorMessages.some(msg => errorMsg.includes(msg)) ||
|
||
(error.code && [410000, 410001, 410002, 401].includes(error.code));
|
||
|
||
// 如果是登录相关错误，不显示错误提示（已跳转到登录页）
|
||
if (!isLoginError) {
|
||
console.error('计算失败:', error);
|
||
uni.showToast({
|
||
title: errorMsg || '计算失败，请重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
},
|
||
selectGender(gender) {
|
||
this.formData.gender = gender
|
||
},
|
||
selectDialysis(value) {
|
||
this.formData.dialysis = value
|
||
},
|
||
validateForm() {
|
||
const age = Number(this.formData.age)
|
||
const height = Number(this.formData.height)
|
||
const dryWeight = Number(this.formData.dryWeight)
|
||
const creatinine = Number(this.formData.creatinine)
|
||
|
||
if (!this.formData.age) {
|
||
uni.showToast({
|
||
title: '请输入年龄',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
if (!Number.isInteger(age) || age < 1 || age > 150) {
|
||
uni.showToast({
|
||
title: '请输入有效的年龄（1-150的整数）',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
if (!this.formData.height) {
|
||
uni.showToast({
|
||
title: '请输入身高',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
if (height < 50 || height > 250) {
|
||
uni.showToast({
|
||
title: '请输入有效的身高（50-250cm）',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
if (!this.formData.dryWeight) {
|
||
uni.showToast({
|
||
title: '请输入干体重',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
if (dryWeight < 20 || dryWeight > 300) {
|
||
uni.showToast({
|
||
title: '请输入有效的体重（20-300kg）',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
if (!this.formData.creatinine) {
|
||
uni.showToast({
|
||
title: '请输入血肌酐值',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
if (creatinine <= 0 || creatinine > 2000) {
|
||
uni.showToast({
|
||
title: '请输入有效的血肌酐值',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
return true
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.calculator-page {
|
||
min-height: 100vh;
|
||
background-color: #f4f5f7;
|
||
}
|
||
|
||
/* 表单容器 */
|
||
.form-container {
|
||
padding: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.form-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #2e3e5c;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 单选按钮组 */
|
||
.radio-group {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.radio-item {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
border: 2rpx solid #d0dbea;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
transition: all 0.3s;
|
||
|
||
&.active {
|
||
background: #fff5f0;
|
||
border-color: #ff6b35;
|
||
}
|
||
}
|
||
|
||
.radio-dot {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #d0dbea;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s;
|
||
|
||
&.checked {
|
||
border-color: #ff6b35;
|
||
background: #ff6b35;
|
||
|
||
&::after {
|
||
content: '';
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
background: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.radio-text {
|
||
font-size: 28rpx;
|
||
color: #9fa5c0;
|
||
transition: all 0.3s;
|
||
|
||
&.active {
|
||
color: #ff6b35;
|
||
}
|
||
}
|
||
|
||
/* 输入框 */
|
||
.input-wrapper {
|
||
position: relative;
|
||
height: 96rpx;
|
||
transition: all 0.3s ease;
|
||
|
||
&.input-focus .form-input {
|
||
border-color: #ff6b35;
|
||
box-shadow: 0 0 0 4rpx rgba(255, 107, 53, 0.1);
|
||
}
|
||
|
||
&.input-filled .form-input {
|
||
border-color: #9fa5c0;
|
||
}
|
||
|
||
&.input-focus.input-filled .form-input {
|
||
border-color: #ff6b35;
|
||
}
|
||
}
|
||
|
||
.form-input {
|
||
//width: 100%;
|
||
height: 96rpx;
|
||
background: #ffffff;
|
||
border: 2rpx solid #d0dbea;
|
||
border-radius: 24rpx;
|
||
padding: 0 24rpx;
|
||
padding-right: 96rpx;
|
||
font-size: 32rpx;
|
||
color: #3e5481;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.input-unit {
|
||
position: absolute;
|
||
right: 24rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 32rpx;
|
||
color: #9fa5c0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.form-hint {
|
||
font-size: 24rpx;
|
||
color: #99a1af;
|
||
margin-top: -16rpx;
|
||
}
|
||
|
||
/* 底部按钮 */
|
||
.footer-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #ffffff;
|
||
border-top: 1rpx solid #d0dbea;
|
||
padding: 32rpx;
|
||
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.calculate-btn {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
background: #ff6b35;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 20rpx 30rpx -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
&.disabled {
|
||
background: #d0dbea;
|
||
box-shadow: none;
|
||
pointer-events: none;
|
||
|
||
text {
|
||
color: #9fa5c0;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 底部安全距离 */
|
||
.safe-bottom {
|
||
height: calc(160rpx + env(safe-area-inset-bottom));
|
||
}
|
||
</style>
|