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

264
src/pages/health/activity/addEdit.vue
View File

@@ -3,62 +3,76 @@
<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="name" required >
<u--input v-model="form.name" placeholder="请填写活动名称"
inputAlign="right" border="none"></u--input>
</u-form-item>
<u--input v-model="form.name" placeholder="请填写活动名称"
inputAlign="left" :customStyle="getInputStyle('name')"></u--input>
</u-form-item>
<u-form-item label="类型" prop="typeName" required @click="handleType">
<view class="input-with-arrow">
<u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
</u-form-item>
<u-form-item label="活动地点" required prop="place" >
<u--input v-model="form.place" placeholder="请填写活动地点"
inputAlign="right" border="none"></u--input>
</u-form-item>
<u-form-item label="成员" required prop="partner" >
<u--input v-model="form.partner" placeholder="请填写成员"
inputAlign="right" border="none"></u--input>
</u-form-item>
<u-form-item label="开始时间" prop="startTime" required @click="selectStartTime()">
<u--input v-model="form.startTime" disabled disabledColor="#ffffff" placeholder="请选择开始时间" inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="活动地点" required prop="place" >
<u--input v-model="form.place" placeholder="请填写活动地点"
inputAlign="left" :customStyle="getInputStyle('place')"></u--input>
</u-form-item>
<u-form-item label="成员" required prop="partner" >
<u--input v-model="form.partner" placeholder="请填写成员"
inputAlign="left" :customStyle="getInputStyle('partner')"></u--input>
</u-form-item>
<u-form-item label="开始时间" prop="startTime" required @click="selectStartTime()">
<view class="input-with-arrow">
<u--input v-model="form.startTime" disabled disabledColor="#ffffff" placeholder="请选择开始时间"
inputAlign="left" :customStyle="getInputStyle('startTime')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="结束时间" prop="endTime" @click="selectEndTime()">
<u--input v-model="form.endTime" 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.endTime" disabled disabledColor="#ffffff" placeholder="请选择结束时间"
inputAlign="left" :customStyle="getInputStyle('endTime')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<!-- <u-form-item label="活动时长" prop="exerciseTime" >
<u--input v-model="form.exerciseTime" placeholder="请填写活动时长"
inputAlign="right" border="none"></u--input>
</u-form-item> -->
<u-form-item label="活动量" prop="activityVolumeName" required @click="handleActivityVolume">
<!-- <u-form-item label="活动时长" prop="exerciseTime" >
<u--input v-model="form.exerciseTime" placeholder="请填写活动时长"
inputAlign="left" :customStyle="getInputStyle('exerciseTime')"></u--input>
</u-form-item> -->
<u-form-item label="活动量" prop="activityVolumeName" required @click="handleActivityVolume">
<view class="input-with-arrow">
<u--input v-model="form.activityVolumeName" disabled disabledColor="#ffffff" placeholder="请选择活动量"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
</u-form-item>
<u-form-item label="总费用" prop="totalCost" >
<u--input v-model="form.totalCost" type="number" placeholder="请填写总费用"
inputAlign="right" border="none">
<template #suffix>
<up-text
text="元"
></up-text>
</template></u--input>
</u-form-item>
<u-form-item label="费用明细" prop="costDetail" labelPosition="top">
<u--textarea v-model="form.costDetail" placeholder="请填写费用明细" border="none" ></u--textarea>
inputAlign="left" :customStyle="getInputStyle('activityVolumeName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="总费用" prop="totalCost" >
<u--input v-model="form.totalCost" type="number" placeholder="请填写总费用"
inputAlign="left" :customStyle="getInputStyle('totalCost')">
<template #suffix>
<up-text
text="元"
></up-text>
</template></u--input>
</u-form-item>
<u-form-item label="费用明细" prop="costDetail" labelPosition="top">
<u--textarea v-model="form.costDetail" height="80rpx" placeholder="请填写费用明细" inputAlign="left"
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
</u-form-item>
<u-form-item label="饮食" prop="foods" labelPosition="top">
<u--textarea v-model="form.foods" placeholder="请填写饮食" border="none" ></u--textarea>
<u--textarea v-model="form.foods" height="80rpx" placeholder="请填写饮食" inputAlign="left"
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
</u-form-item>
<u-form-item label="收获" prop="harvest" labelPosition="top">
<u--textarea v-model="form.harvest" placeholder="请填写收获" border="none"></u--textarea>
<u--textarea v-model="form.harvest" height="80rpx" placeholder="请填写收获" inputAlign="left"
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
</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" height="80rpx" placeholder="请填写备注" inputAlign="left"
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -67,38 +81,69 @@
</view>
</view>
<u-toast ref="uToast"></u-toast>
<u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel"
@confirm="handleTypeConfirm"></u-picker>
<u-picker itemHeight="88" :show="showActivityVolume" :columns="activityVolumeList" keyName="dictLabel" @cancel="handleActivityVolumeCancel"
@confirm="handleActivityVolumeConfirm"></u-picker>
<u-datetime-picker
:show="startTimeShow"
mode="datetime"
<u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel"
@confirm="handleTypeConfirm"></u-picker>
<u-picker itemHeight="88" :show="showActivityVolume" :columns="activityVolumeList" keyName="dictLabel" @cancel="handleActivityVolumeCancel"
@confirm="handleActivityVolumeConfirm"></u-picker>
<u-datetime-picker
:show="startTimeShow"
mode="datetime"
ref="startTimeRef"
@cancel="startTimeShow=false"
@confirm="startTimeConfirm"
itemHeight="88"
></u-datetime-picker>
@cancel="startTimeShow=false"
@confirm="startTimeConfirm"
itemHeight="88"
></u-datetime-picker>
<u-datetime-picker
:show="endTimeShow"
mode="datetime"
:show="endTimeShow"
mode="datetime"
ref="endTimeRef"
@cancel="endTimeShow=false"
@confirm="endTimeConfirm"
itemHeight="88"
></u-datetime-picker>
@cancel="endTimeShow=false"
@confirm="endTimeConfirm"
itemHeight="88"
></u-datetime-picker>
</view>
</template>
<script setup>
import { getActivity, addActivity, updateActivity } from '@/api/health/activity'
const { proxy } = getCurrentInstance()
import { getDicts } from '@/api/system/dict/data.js'
import { getDicts } from '@/api/system/dict/data.js'
import dayjs from 'dayjs'
import {onLoad,onReady} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
// 错误字段
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
}
const birthdayShow = ref(false)
const title = ref("活动记录")
const startTimeShow = ref(false)
@@ -251,37 +296,46 @@ function getData() {
function submit() {
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
updateActivity(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '修改成功', complete() {
uni.navigateTo({ url: `/pages/health/activity/list` })
}
})
})
}else {
form.value.id == null
addActivity(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '新增成功', complete() {
uni.navigateTo({ url: `/pages/health/activity/list` })
}
})
})
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
updateActivity(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '修改成功', complete() {
uni.navigateTo({ url: `/pages/health/activity/list` })
}
}else {
addActivity(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '新增成功', complete() {
uni.navigateTo({ url: `/pages/health/activity/list` })
}
})
})
})
}else {
form.value.id == null
addActivity(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '新增成功', complete() {
uni.navigateTo({ url: `/pages/health/activity/list` })
}
})
})
}
}else {
addActivity(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '新增成功', complete() {
uni.navigateTo({ url: `/pages/health/activity/list` })
}
})
})
}
}).catch(errors => {
// 验证失败，记录错误字段
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>
<style lang="scss" scoped>
@@ -319,6 +373,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>
@@ -337,4 +408,19 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
</style>
/* 强制让错误状态的输入框边框变红 */
.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>