AiSkinMeasurementMp/pages/details/index.vue

<template>
    <view class="container">
        <view class="main">
            <!-- 步骤1内容 -->
            <view class="steps">
                <view class="step-content">
                    <view class="step-banner">
                <text class="title">第<text class="count">{{ currentStep + 1 }}</text>步/共{{details.total}}步</text>
                        <text class="subtitle">请根据真实感受如实填写资料</text>
                    </view>
                </view>
            </view>

            <view class="question">
                <view class="root">
                    <u--image :src="aiRootPath" mode="widthFix" shape="circle" width="50px"
                        height="50px"></u--image>
                    <view class="question-text">
                        <text>{{ details.list[currentStep].question}}</text>
                        <view class="arrow-border"></view>
                        <view class="arrow-background"></view>
                    </view>

                </view>

                <view class="question-content">
                    <scroll-view :scroll-y="true">
                    <view class="select-list">
                            <view  class="select-item"  :class="{active: details.list[currentStep].answerIndex === index}" v-for="(item, index) in questionList" :key="index"  @click="onClick(item, index)">
                                <text>{{ item }}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>

            </view>




            <!-- 按钮操作区 -->
            <view class="action-buttons">
               

                <u-button @click="handleNext" shape="circle" :color="bgthemeColor" :type="currentStep === 0 ? '' : 'default'"
                    :custom-style="{ padding: '40rpx', fontWeight: 'bold'}">
                    <text :style="{color: themeColor, fontSize: '32rpx', fontWeight: 'bold'}"> {{ currentStep === 2 ? '提交测评' : '下一步' }}</text>
                </u-button>
                <u-button v-if="currentStep > 0" shape="circle" @click="handlePre" class="prev-btn" :custom-style="{ marginTop: '20rpx', color: '#000', fontWeight: 'bold', padding: '40rpx', }">
                    <text :style="{color: bgthemeColor, fontSize: '32rpx', fontWeight: 'bold'}"> 上一步</text></u-button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentStep: 0, // 当前步骤
            steps: [{ name: '步骤1' }, { name: '步骤2' }],
            parts: ['面部', '颈部', '胸部', '背部', '四肢', '腹部', '手部','足部', '其它'],
            categories: ['烧伤', '割伤', '烫伤', '手术后（含剖腹产）'],
            formData: {
                part: '',
                category: '',
                feel: '',
            },
            aiRootPath: require('../../static/tabbar/ai_root.png'),
            selectCurrent: null,
            details: {
                total: 3,
                list: [
                    {
                        data: ['面部', '颈部', '胸部', '背部', '四肢', '腹部', '手部和足部', '其它'],
                        stepIndex: 0,
                        question: '伤口受伤的部位是？',
                        answer: '',
                        answerIndex: null
                    },
                    {
                        data: ['烧伤', '割伤', '烫伤', '手术后（含剖腹产）','跌碰撞伤', '青春痘', '宠物抓伤', '其他'],
                        stepIndex: 1,
                        question: '伤口受伤的类别是？',
                        answer: '',
                        answerIndex: null
                    },
                    {
                        data: ['红肿程度', '痕痒程度', '其他'],
                        stepIndex: 2,
                        question: '伤口受伤的感受是？',
                        answer: '',
                        answerIndex: null
                    },
                ]
                
            },
            questionList: []
        };
    },
    computed: {
		themeColor() {
			return this.$themeColor
		},
		bgthemeColor() {
			return '#000'
		},
	},
    onLoad() {
        this.questionList = this.details.list[this.currentStep].data
    },
    methods: {
        onClick(item, index) {
            console.log("item", item, index);
            this.details.list[this.currentStep].answer = item;
            this.details.list[this.currentStep].answerIndex = index;
        },
        handleNext() {
            if (this.currentStep === 0) {
                if (! this.details.list[this.currentStep].answer) {
                    return uni.showToast({ title: '请选择伤口部位', icon: 'none' });
                }
                this.currentStep++;
                this.questionList = this.details.list[this.currentStep].data
            } else if(this.currentStep === 1){
                if (! this.details.list[this.currentStep].answer) {
                    return uni.showToast({ title: '请选择伤口类别', icon: 'none' });
                }
                this.currentStep++;
                this.questionList = this.details.list[this.currentStep].data
            } else if(this.currentStep === 2){
                if (! this.details.list[this.currentStep].answer) {
                    return uni.showToast({ title: '请选择伤口感受', icon: 'none' });
                }
                // 提交逻辑
                this.onSubmit();
            }
        },
        handlePre() {
            this.currentStep--;
            this.questionList = this.details.list[this.currentStep].data
        },
        onSubmit() {
            let that = this;
            uni.showLoading({
                title: '提交中',
                mask: true,
            })
            // 模拟提交 TODO
            setTimeout(() => {
                uni.showToast({ title: '提交成功', icon: 'success' });
                console.log('提交数据：', that.formData);
                let now = new Date();
                // 模拟缓存一个本地数据
                let mockList = [
                    {
                        date: that.$util.formateDate('mm-dd', now),
                        time: that.$util.formateDate('HH:MM', now),
                        day: that.$util.getDayName(),
                        year: that.$util.formateDate('yyyy', now),
                        imageSrc: that.$store.state.user.photoPath,
                        evaluation: '伤口减小，肉芽无增生，皮肤逐渐变浅'
                    }
                ]
                that.$store.commit('setResultList', mockList);
                that.$store.commit('saveAll');
                // 跳转详情
                uni.reLaunch({ url: '/pages/details/result' })
            }, 1500)
        }
    }
};
</script>

<style scoped lang="scss">
/* 容器样式 */
.container {
    position: relative;
    background: #fff;
    overflow: hidden;
    .main { 
       
        .steps {
            padding: 24rpx 32rpx;
            background: #F3D4A3;
            .step-content {
                background: #fff;
                border-radius: 20rpx;
                padding: 30rpx;
                .step-banner {
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-direction: column;
                    .title {
                        font-size: 30rpx;
                        font-family: Source Han Sans CN;
                        color: #333;
                        font-weight: bold;
                        .count {
                            font-size: 40rpx;
                            font-family: Source Han Sans CN;
                            color: $cus-theme-color;
                        }
                    }
                    .subtitle {
                        margin-top: 10rpx;
                        font-size: 28rpx;
                        color: $uni-text-color-grey;
                    }
                }
            }
        }
        .question {
            padding: 40rpx;
            .root {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .question-text {
                    position: relative; /* 相对定位 */
                    margin-left: 40rpx;
                    padding: 20rpx;
                    border: 4rpx solid #FDF2D4;
                    background-color: #FDF2D4; 
                    color: #000000; 
                    border-radius: 20rpx; 
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
                    font-weight: b;
                    text {
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        font-size: 30rpx;
                        color: #1F1F1F;
                    }
                    /* 外层箭头（作为边框） */
                    .arrow-border {
                        position: absolute;
                        top: 20%;
                        left: -26rpx;
                        transform: translateX(-50%); 
                        border-width: 25rpx; 
                        border-style: solid;
                        border-color: transparent #FDF2D4 transparent transparent; /* 浅紫色边框 */
                        z-index: 99;
                    }

                    /* 内层箭头（作为背景） */
                    .arrow-background {
                        position: absolute;
                        top: 20%; 
                        left: -29rpx;
                        transform: translateX(-50%); 
                        border-width: 22rpx; /* 小三角形 */
                        border-style: solid;
                        border-color:  transparent #FDF2D4 transparent transparent; /* 白色背景 */
                        margin-top: 3rpx; /* 与大三角形重叠 */
                        margin-left: 10rpx; /* 与大三角形重叠 */
                        z-index: 999;
                    }
                }
                
            }
            .question-content {
                margin: 40rpx 0;
                padding: 20rpx 0;
                max-height: 52vh;
                overflow: scroll;
                .select-list {
                    .select-item {
                        border-radius: 60rpx;
                        padding: 30rpx 50rpx;
                        margin: 20rpx 0;
                        background-color: $uni-bg-color-grey;
                        font-weight: bold;
                        &.active {
                            background-color: $cus-theme-color;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}

/* 单选项样式 */
.radio-item {
    margin-bottom: 32rpx;
    padding: 24rpx;
    border-radius: 12rpx;
    background: #f8f8f8;
}

/* 按钮容器 */
.action-buttons {
    position: relative;
    padding: 0 40rpx;
    margin: 20rpx 0 60rpx 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/* 适配不同屏幕尺寸 */
@media (min-width: 768px) {
    .container {
        max-width: 600px;
        margin: 0 auto;
    }
}
</style>s