优化writeReview页面:1. 添加文字评价和图片上传验证 2. 优化底部按钮样式

This commit is contained in:
davy 2025-04-10 00:34:21 +08:00
parent 09c4f250d5
commit aba7fe92d3

View File

@ -196,7 +196,8 @@
</button>
<button class="btn submit"
@click="submitForm"
:disabled="!isFormValid">
:disabled="!isFormValid"
:class="{'disabled': !isFormValid}">
发布评价
</button>
</template>
@ -613,20 +614,27 @@
left: 0;
right: 0;
bottom: 0;
padding: 24rpx 32rpx;
padding: 24rpx 32rpx env(safe-area-inset-bottom);
background: #FFFFFF;
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
display: flex;
gap: 24rpx;
.btn {
flex: 1;
height: 88rpx;
border-radius: 44rpx;
height: 96rpx;
border-radius: 48rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-size: 32rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
&.prev {
background: #F7F7F7;
@ -639,11 +647,16 @@
&.next,
&.submit {
background: #19367A;
background: linear-gradient(135deg, #19367A, #1E4B9E);
color: #FFFFFF;
box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
&:disabled {
&:disabled,
&.disabled {
background: #CCCCCC;
opacity: 0.7;
pointer-events: none;
box-shadow: none;
}
}
}
@ -700,7 +713,11 @@
}
},
isFormValid() {
return this.form.reviewContent.trim().length > 0;
// /
const hasContent = this.form.reviewContent.trim().length > 0;
const hasImage = !!this.form.reviewImg;
console.log('表单验证状态:', { hasContent, hasImage, isValid: hasContent && hasImage });
return hasContent && hasImage;
}
},
onLoad(options) {
@ -793,6 +810,7 @@
count: 1,
success: (res) => {
this.form.reviewImg = res.tempFilePaths[0];
console.log('图片上传成功:', this.form.reviewImg);
}
});
},
@ -800,12 +818,12 @@
if (!this.isFormValid) {
if (!this.form.reviewImg) {
uni.showToast({
title: '请上传至少一张图片',
title: '请上传图片',
icon: 'none'
});
} else if (this.form.reviewContent.trim().length < 15) {
} else if (this.form.reviewContent.trim().length === 0) {
uni.showToast({
title: '评价内容至少15个字',
title: '请填写评价内容',
icon: 'none'
});
}