davy/zdtap-uniapp-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
davy 2025-04-10 00:34:21 +08:00
parent 09c4f250d5
commit aba7fe92d3
1 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
pages/index/writeReview.vue
View File

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