qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 添加页面统一修改样式。

Browse Source
This commit is contained in:
tianyongbao
2026-02-08 14:27:39 +08:00
parent 98fd350b9e
commit 74b1dbd0af
12 changed files with 1684 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/pages/health/temperatureRecord/addEdit.vue
View File

@@ -3,25 +3,31 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
<u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
<view class="input-with-arrow">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
<u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
<view class="input-with-arrow">
<u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案"
inputAlign="left" :customStyle="getInputStyle('healthRecordName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="测量时间" prop="measureTime" required @click="selectDate()">
<u--input v-model="form.measureTime" disabled disabledColor="#ffffff" placeholder="请选择测量时间" inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
<view class="input-with-arrow">
<u--input v-model="form.measureTime" disabled disabledColor="#ffffff" placeholder="请选择测量时间" inputAlign="left" :customStyle="getInputStyle('measureTime')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="体温" required prop="temperature" >
<u--input v-model="form.temperature" type="number" placeholder="请填写体温"
inputAlign="right" border="none">
inputAlign="left" :customStyle="getInputStyle('temperature')">
<template #suffix>
<up-text
text="℃"
@@ -30,7 +36,7 @@
</u--input>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
<u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -102,7 +108,35 @@ rules: {
}
})
const { form, queryPersonParams, queryHealthRecordParams, rules} = toRefs(data)
// 错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
onLoad((option) => {
form.value.id = option.id
@@ -242,6 +276,12 @@ function submit() {
})
})
}
}).catch(errors => {
// 验证失败，记录错误字段
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>
@@ -281,6 +321,23 @@ function submit() {
.form-btn {
padding-top: 16rpx;
}
// 带箭头的输入框容器
.input-with-arrow {
position: relative;
width: 100%;
.arrow-icon {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 20rpx;
pointer-events: none;
z-index: 10;
}
}
}
}
</style>
@@ -299,4 +356,19 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
/* 强制让错误状态的输入框边框变红 */
.u-form-item--error .u--input,
.u-form-item--error .u-input,
.u-form-item--error .u-input__content,
.u-form-item--error .u-input__content__field-wrapper {
border: 2rpx solid #f56c6c !important;
background: #fef0f0 !important;
}
.u-form-item--error .u--textarea,
.u-form-item--error .u-textarea {
border: 2rpx solid #f56c6c !important;
background: #fef0f0 !important;
}
</style>