AiSkinMeasurementMp/pages/details/index.vue

<template>
    <view class="container">
        <!-- 问卷题目 -->
        <view class="question" v-if="currentQuestion">
            <text class="question-text">{{ currentQuestion.text }}</text>
            <view class="options">
                <u-radio-group v-model="currentAnswer">
                    <u-radio v-for="(option, index) in currentQuestion.options" :key="index" :name="option">
                        {{ option }}
                    </u-radio>
                </u-radio-group>
            </view>
        </view>

        <!-- 上一步和下一步按钮 -->
        <view class="buttons">
            <u-button type="primary" @click="prevQuestion" :disabled="currentIndex === 0">
                上一步
            </u-button>
            <u-button type="primary" @click="nextQuestion" :disabled="currentIndex === questions.length - 1">
                下一步
            </u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            questions: [
                {
                    text: '1. 您的性别是？',
                    options: ['男', '女']
                },
                {
                    text: '2. 您的年龄是？',
                    options: ['18岁以下', '18-25岁', '26-35岁', '36岁以上']
                },
                {
                    text: '3. 您的职业是？',
                    options: ['学生', '上班族', '自由职业', '其他']
                }
            ],
            currentIndex: 0,
            currentAnswer: ''
        };
    },
    computed: {
        currentQuestion() {
            return this.questions[this.currentIndex];
        }
    },
    methods: {
        prevQuestion() {
            if (this.currentIndex > 0) {
                this.currentIndex--;
                this.currentAnswer = ''; // 清空当前答案
            }
        },
        nextQuestion() {
            if (this.currentIndex < this.questions.length - 1) {
                this.currentIndex++;
                this.currentAnswer = ''; // 清空当前答案
            }
        }
    }
};
</script>

<style scoped>
.container {
    padding: 20px;
}

.question-text {
    font-size: 18px;
    margin-bottom: 20px;
}

.options {
    margin-top: 10px;
}

.buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
</style>