fix: 功能样式,统一优化完善。

This commit is contained in:
tianyongbao
2026-06-28 12:06:05 +08:00
parent a506f2de98
commit f353971554
39 changed files with 1096 additions and 374 deletions

View File

@@ -9,55 +9,55 @@
<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="180rpx"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
<u-form-item label="信用卡" prop="onlineLendName" required @click="handleOnlineLend">
<view class="input-with-arrow">
<u--input v-model="form.onlineLendName" readonly disabledColor="#ffffff" placeholder="请选择信用卡"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('onlineLendName')"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
<u-form-item label="分期金额" prop="installmentAmount" required >
<u--input v-model="form.installmentAmount" type="number" placeholder="请填写分期金额"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('installmentAmount')"></u--input>
</u-form-item>
<u-form-item label="分期日期" prop="installmentDate" required @click="selectDate()">
<view class="input-with-arrow">
<u--input v-model="form.installmentDate" readonly disabledColor="#ffffff" placeholder="请选择分期日期" inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u--input v-model="form.installmentDate" readonly disabledColor="#ffffff" placeholder="请选择分期日期" inputAlign="left" :customStyle="getInputStyle('installmentDate')"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
<u-form-item label="分期期数" prop="period" required >
<u--input v-model="form.period" type="number" placeholder="请填写分期期数"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('period')"></u--input>
</u-form-item>
<u-form-item label="余额" prop="balance" required >
<u--input v-model="form.balance" type="number" placeholder="请填写余额"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('balance')"></u--input>
</u-form-item>
<u-form-item label="结清状态" prop="settleStateName" required @click="handleShowTeam">
<view class="input-with-arrow">
<u--input v-model="form.settleStateName" readonly disabledColor="#ffffff" placeholder="请选择结清状态"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('settleStateName')"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
<u-form-item label="总利息" prop="totalInterest" required >
<u--input v-model="form.totalInterest" type="number" placeholder="请填写总利息"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('totalInterest')"></u--input>
</u-form-item>
<u-form-item label="已还期数" prop="repaidPeriod" required >
<u--input v-model="form.repaidPeriod" type="number" placeholder="请填写已还期数"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('repaidPeriod')"></u--input>
</u-form-item>
<u-form-item label="利率" prop="interestRate" >
<u--input v-model="form.interestRate" placeholder="请填写利率"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('interestRate')"></u--input>
</u-form-item>
<u-form-item label="关闭日期" prop="closeDate" @click="selectCloseDate()">
<view class="input-with-arrow">
<u--input v-model="form.closeDate" readonly disabledColor="#ffffff" placeholder="请选择关闭日期" inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u--input v-model="form.closeDate" readonly disabledColor="#ffffff" placeholder="请选择关闭日期" inputAlign="left" :customStyle="getInputStyle('closeDate')"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -126,6 +126,19 @@ const inputBaseStyle = {
width: '100%',
boxSizing: 'border-box'
}
const errorFields = ref([])
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 data = reactive({
form: {
@@ -265,7 +278,8 @@ onLoad((option) => {
}
function submit() {
proxy.$refs['uForm'].validate().then(() => {
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
updateInstallmentHistory(form.value).then(res => {
proxy.$refs['uToast'].show({
@@ -283,6 +297,11 @@ onLoad((option) => {
})
})
}
}).catch(errors => {
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>