这是我的代码， 小程序上面的checkbox 颜色不是我传的 没生效 怎么处理 ：
<template>
<view class="">
<!-- <fu-custom bgColor="bg-white" :isBack="true">
<block slot="content">调查问卷</block>
</fu-custom> -->
<view class="container" v-if="surveyData != null">
<!-- <view class="header">
<text class="title">{{surveyData.title}}</text>
<text class="desc">{{surveyData.description}}</text>
</view> -->
<image :src="STATIC_URL+'/wenjuan/logo.png'" mode="widthFix" style="width:289rpx; margin-left: -25px; margin-top: 10px;"></image>
<image :src="STATIC_URL+'/wenjuan/title.png'" mode="widthFix" style="width: 626rpx; margin-top: 27px; margin-left: 15px;"></image>
<view class="content">
<view v-for="(q, qIndex) in surveyData.questions" :key="q.id" class="question-card">
<text class="q-title">{{q.id}}. {{q.title}}</text>
<!-- 单选问题 -->
<radio-group v-if="q.type === 'radio'" @change="(e) => handleRadioChange(q.id, e.detail.value)">
<label v-for="(opt, oIndex) in q.options" :key="opt.id" class="option-item">
<radio :value="opt.id" :checked="answers[q.id] === opt.id" style="transform:scale(0.7)" color="#745127"/>
<text class="answ">{{opt.text}}</text>
</label>
</radio-group>
<!-- 多选问题（修复版） -->
<checkbox-group v-if="q.type === 'checkbox'"
@change="(e) => handleCheckboxChange(q.id, e.detail.value)">
<view v-for="(opt, oIndex) in q.options" :key="opt.id" class="option-wrapper">
<label class="option-item">
<checkbox :value="opt.id" :checked="answers[q.id] && answers[q.id].includes(opt.id)" style="transform:scale(0.7)" color="#745127" activeBackgroundColor='#745127'/>
<text class="answ">{{opt.text}}</text>
</label>
<!-- 修复：移出label外的输入框 -->
<input v-show="opt.is_text_input && answers[q.id] && answers[q.id].includes(opt.id)"
v-model="textAnswers[`q_${q.id}_o_${opt.id}`]" class="text-input" placeholder="请输入详细内容"
@input="(e) => handleTextInput(q.id, opt.id, e.detail.value)" />
</view>
</checkbox-group>
</view>
</view>
<button class="submit-btn" @click="validateBeforeSubmit">提交问卷</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
STATIC_URL: 'https://le.chuzhongyun.com/xcx/static/',
surveyData: null,
answers: {}, // 多选答案 {qId: [optId1, optId2]}
textAnswers: {}, // 填空答案 {q_1_o_5: "用户输入的内容"}
submitted: false
}
},
onLoad() {
uni.showLoading()
this.$api.get('/v1/68ed0f5d30188').then(res => {
console.log(res);
this.surveyData = res.data.data
uni.hideLoading()
})
},
methods: {
handleRadioChange(qId, optionId) {
this.$set(this.answers, qId, optionId);
},
handleCheckboxChange(qId, optionIds) {
this.$set(this.answers, qId, optionIds || []);
// 优化：使用findIndex替代嵌套查找
const question = this.surveyData.questions.find(q => q.id === qId);
if (!question) return;
const hasOther = question.options.some(
opt => opt.is_text_input && optionIds.includes(opt.id)
);
if (!hasOther) {
question.options.forEach(opt => {
if (opt.is_text_input) {
const key = `q_${qId}_o_${opt.id}`;
if (this.textAnswers[key]) {
this.$delete(this.textAnswers, key);
}
}
});
}
},
handleTextInput(qId, optId, value) {
this.$set(this.textAnswers, `q_${qId}_o_${optId}`, value);
},
// 新增校验方法
validateForm() {
let isValid = true;
const errors = [];
this.surveyData.questions.forEach(q => {
// 单选问题校验
if (q.type === 'radio' && !this.answers[q.id]) {
isValid = false;
errors.push({
qId: q.id,
msg: '单选题未答'
});
}
// 多选问题校验
if (q.type === 'checkbox') {
const minSelect = q.minSelect || 1;
if (!this.answers[q.id] || this.answers[q.id].length < minSelect) {
isValid = false;
errors.push({
qId: q.id,
msg: `至少需要选择${minSelect}项（当前选择${this.answers[q.id]?.length || 0}项）`
});
}
}
});
return {
isValid,
errors
};
},
// 修改提交方法
async validateBeforeSubmit() {
this.submitted = true; // 触发校验显示
const {
isValid
} = this.validateForm();
if (!isValid) {
uni.showToast({
title: '请完整回答所有问题',
icon: 'none',
duration: 2000
});
return;
}
// 新增：检查"其他"选项的文本输入
const missingTextErrors = [];
this.surveyData.questions.forEach(q => {
if (q.type === 'checkbox') {
q.options.forEach(opt => {
if (opt.is_text_input) {
const isSelected = this.answers[q.id]?.includes(opt.id);
const hasText = this.textAnswers[`q_${q.id}_o_${opt.id}`]?.trim();
if (isSelected && !hasText) {
missingTextErrors.push({
qId: q.id,
message: '请填写"其他"选项的内容'
});
}
}
});
}
});
if (missingTextErrors.length > 0) {
uni.showToast({
title: '请完整填写所有内容',
icon: 'none',
duration: 2000
});
return;
}
await this.handleSubmit();
},
async handleSubmit() {
console.log(this.answers);
}
}
}
</script>
<style>
.container {
width: 750rpx;
height: 7588rpx;
padding: 20rpx;
background-image: url('https://le.chuzhongyun.com/xcx/static/wenjuan/bg.jpg');
background-size: 750rpx 7588rpx;
}
.content{
margin-left: 15px;
margin-top: 33px;
}
.header {
padding: 30rpx;
/* background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); */
background: rgba(106, 17, 203, 0.8);
/* 半透明渐变 */
border-radius: 16rpx;
margin-bottom: 30rpx;
}
.title {
font-size: 36rpx;
color: #fff;
font-weight: bold;
margin-bottom: 10rpx;
}
.answ{
font-size: 13px;
}
.desc {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
}
.question-card {
/* background: #fff; */
/* border-radius: 16rpx; */
/* padding: 30rpx; */
margin-bottom: 11px;
/* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); */
}
.q-title {
font-size: 14px;
font-weight: bold;
margin-bottom: 15rpx;
display: block;
}
.option-item {
display: flex;
align-items: center;
/* padding: 20rpx 0; */
}
.submit-btn {
margin: 40rpx 0;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #fff;
border-radius: 50rpx;
}
.text-input {
margin-top: 15rpx;
/* 保持与选项的垂直间距 */
margin-left: 50rpx;
/* 新增：左对齐复选框区域 */
padding: 20rpx 15rpx;
/* 增大垂直内边距 */
border: 1rpx solid #ddd;
border-radius: 8rpx;
width: calc(100% - 50rpx);
/* 宽度适配左侧margin */
min-height: 80rpx;
/* 新增：设置最小高度 */
box-sizing: border-box;
font-size: 28rpx;
/* 新增：调整字体大小 */
line-height: 1.5;
/* 新增：设置行高 */
}
.option-item {
position: relative;
padding-right: 30rpx;
}
.option-wrapper {
/* margin-bottom: 25rpx; */
/* 增大选项间距 */
position: relative;
}
</style>
最新发布
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
