AiSkinMeasurementMp/pages/questionnaire-survey/index.vue

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

                <!-- 步骤2内容 -->
                <!-- <view v-show="currentStep === 1" class="step-content">
                    <view class="question">
                        <text class="title">第2步/共2步</text>
                        <text class="subtitle">请根据真实感受如实填写资料</text>
                        <text class="question-text">伤口受伤的类别是？</text>
                        <u-radio-group v-model="formData.category">
                            <u-radio v-for="(item, index) in categories" :key="index" :name="item" class="radio-item">{{
                                item
                                }}</u-radio>
                        </u-radio-group>
                    </view>
                </view> -->
            </view>

            <view class="question">
                <view class="root">
                    <u--image src="https://uviewui.com/album/1.jpg" mode="widthFix" shape="circle" width="50px"
                        height="50px"></u--image>
                    <view class="question-text">
                        <text>伤口受伤的部位是？</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: selectCurrent === index}" v-for="(item, index) in list" :key="index"  @click="onClick(item, index)">
                                <text>{{ item.name }}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>

            </view>




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

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

<script>
export default {
    data() {
        return {
            currentStep: 0, // 当前步骤
            steps: [{ name: '步骤1' }, { name: '步骤2' }],
            parts: ['面部', '颈部', '胸部', '背部', '四肢', '腹部', '手部和足部', '其它'],
            categories: ['烧伤', '割伤', '烫伤', '手术后（含剖腹产）'],
            formData: {
                part: '',
                category: ''
            },
            selectCurrent: null,
            list: [
                { name: '面部', value: 1, },
                { name: '面部', value: 1, },
                { name: '面部', value: 1, },
                { name: '面部', value: 1, }, 
                { name: '面部', value: 1, }, 
                { name: '面部', value: 1, },
                { name: '面部', value: 1, },
            ]
        };
    },
    methods: {
        onClick(item, index) {
            this.selectCurrent = index;
            this.formData.part = item.name
        },
        handleNext() {
            if (this.currentStep === 0) {
                if (!this.formData.part) {
                    return uni.showToast({ title: '请选择受伤部位', icon: 'none' });
                }
                this.currentStep++;
            } else {
                if (!this.formData.category) {
                    return uni.showToast({ title: '请选择受伤类别', icon: 'none' });
                }
                // 提交逻辑
                uni.showToast({ title: '提交成功', icon: 'success' });
                console.log('提交数据：', this.formData);
            }
        }
    }
};
</script>

<style scoped lang="scss">
/* 容器样式 */
.container {
    position: relative;
    background: #fff;
    overflow: hidden;
    .main { 
       
        .steps {
            padding: 24rpx 32rpx;
            background: $cus-theme-color;
            .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: 36rpx;
                        color: #333;
                        font-weight: bold;
                        .count {
                            font-size: 40rpx;
                            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 $cus-theme-color;
                    background-color: #e6e6fa; 
                    color: #000000; 
                    border-radius: 20rpx; 
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
                    font-weight: b;
                    /* 外层箭头（作为边框） */
                    .arrow-border {
                        position: absolute;
                        top: 20%;
                        left: -26rpx;
                        transform: translateX(-50%); 
                        border-width: 25rpx; 
                        border-style: solid;
                        border-color: transparent $cus-theme-color 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 #e6e6fa transparent transparent; /* 白色背景 */
                        margin-top: 3rpx; /* 与大三角形重叠 */
                        margin-left: 10rpx; /* 与大三角形重叠 */
                        z-index: 999;
                    }
                }
                
            }
            .question-content {
                margin: 40rpx 0;
                padding: 20rpx 0;
                max-height: 65vh;
                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