页面效果

功能实现

问题组件：

js：

Component({
    properties: {
        list: {
            //原问卷内容, 真正的问题个数是长度减1， 第一个是概述
            type: Array,
            value: [],
        },
        //问卷类型
        questionType: {
            type: String,
            value: '脾胃',
        },
    },
    data: {
        indigestion: [],
        qusetionData: [],
        originIndex: 0,
        isShow: false,
    },
    observers: {
        list: function (val) {
            if (val && val.length) {
                let questionType = this.properties.questionType;
                this.setData({
                    indigestion: val,
                    qusetionData:
                        questionType == '情志'
                            ? val.slice(0, 1)
                            : val.slice(1, 2),
                });
            }
        },
    },
    methods: {
        /**
         * 已选的问题不可重新选择
         */
        async choose(e) {
            let dataset = e.currentTarget.dataset,
                { indigestion, qusetionData } = {
                    ...this.data,
                };
            // index0 ==父级的index
            let { index0, index, type, number, originIndex, value } = {
                ...dataset,
            };

            indigestion.forEach((e, key) => {
                if (e.number == number) {
                    originIndex = key;
                }
            });
            console.log('originIndex', originIndex);
            // 选择
            if (type == 'more') {
                //多选题
                if (qusetionData[index0].choose[index].checked) {
                    qusetionData[index0].choose[index].checked = false;
                } else {
                    qusetionData[index0].choose[index].checked = true;
                }
            } else {
                //单选题
                let choose = qusetionData[index0].choose;
                choose.forEach((ele, i) => {
                    if (ele.checked) {
                        delete ele.checked;
                    } else {
                        ele.checked = i == index;
                    }
                });
                qusetionData[index0].choose = choose;
            }

            let tmp = qusetionData[index0].choose.filter(ele => ele.checked);
            let link = value.link;
            if (tmp.length) {
                if (type !== 'more') {
                    indigestion[originIndex].flag = true;
                }

                // 多选时的拼接
                let str = qusetionData[index0].choose
                    .map(ele => {
                        if (ele.checked) {
                            return ele.name;
                        }
                    })
                    .filter(ele => ele)
                    .join('、');
                let str1 = qusetionData[index0].choose
                    .map(ele => {
                        if (ele.checked) {
                            return ele.value;
                        }
                    })
                    .filter(ele => ele)
                    .join('、');
                qusetionData[index0].answer = str;
                qusetionData[index0].chooseValue = str1;

                if (type !== 'more') {
                    // 单选且没到展示数，添加下一题
                    if (link != '结束') {
                        qusetionData.push(indigestion[link - 1]);
                    } else {
                        if (value.tzName) {
                            qusetionData[index0].tzName = value.tzName;
                        }
                        // 答完题后的答案
                        this.handleEnd(indigestion);
                    }
                }
            } else {
                delete indigestion[originIndex].flag;
            }

            indigestion[originIndex] = qusetionData[index0];
            qusetionData = qusetionData.filter(ele => ele);

            this.scrollNext();
            this.setData({
                originIndex,
                qusetionData,
                indigestion,
            });
        },
        scrollNext() {
            const query = wx.createSelectorQuery().in(this);
            query
                .select('.container')
                .boundingClientRect(function (rect) {
                    wx.pageScrollTo({ scrollTop: rect.height });
                })
                .exec();
        },
        handleEnd(indigestion) {
            const tmp = indigestion.filter(ele => ele.chooseValue);
            const arr = [];
            tmp.forEach(ele => {
                let obj = {
                    chooseValue: ele.chooseValue,
                    answer: ele.answer,
                    label: ele.label,
                    number: ele.number,
                };
                if (ele.level) {
                    obj.level = ele.level;
                }
                if (ele.tzName) {
                    obj.tzName = ele.tzName;
                }
                if (ele.disease) {
                    obj.disease = ele.disease;
                }
                arr.push(obj);
            });
            this.arr = arr;
            this.setData({
                isShow: true,
            });
        },
        // 多选确认
        confirm() {
            const { indigestion, qusetionData } = this.data;
            const index = qusetionData.length - 1;
            const question = qusetionData[index];
            const tmp = question.choose.filter(ele => ele.checked);
            // 如果选择过
            if (tmp.length) {
                question.flag = true;
                const select = question.choose.find(item => item.checked);
                if (!select) return;
                const { link } = select;
                // 添加下一题
                if (link != '结束') {
                    qusetionData.push(indigestion[link - 1]);
                } else {
                    this.handleEnd(indigestion);
                }

                this.scrollNext();
                this.setData({
                    qusetionData,
                });
            }
        },
        handleToResult() { //获取选择结果
            this.triggerEvent('handleToResult', {
                answer: this.arr,
            });
        },
    },
    lifetimes: {
        attached() {},
    },
});

wxml

<!-- 当前该做哪道题，common-active给谁赋值 -->
<view class="container">
    <view
        class="common"
        wx:for="{
    
    { qusetionData }}"
        wx:for-index="index0"
        wx:key="index0"
    >
        <view class="left">
            <image
                src="https://laikangland-dev.oss-cn-beijing.aliyuncs.com/20221223155345H234.png"
                mode="scaleToFill"
            ></image>
            <view
                >{
    
    { item.label }}（{
    
    {
                    item.type === 'more' ? '可多选' : '单选'
                }}）</view
            >
        </view>
        <view class="right" wx:if="{
    
    { !item.flag }}">
            <view
                data-index0="{
    
    { index0 }}"
                data-index="{
    
    { index }}"
                data-number="{
    
    { item.number }}"
                data-value="{
    
    { value }}"
                data-type="{
    
    { item.type }}"
                class="question {
    
    { value.checked ? 'active' : '' }}"
                wx:for="{
    
    { item.choose }}"
                wx:for-item="value"
                wx:key="index"
                catchtap="choose"
            >
                <view>{
    
    { value.value }}. {
    
    { value.name }}</view>
                <view class="info" wx:if="{
    
    { value.info }}">{
    
    {
                    value.info
                }}</view>
            </view>
            <view
                class="confirm-btn"
                wx:if="{
    
    { item.type === 'more' }}"
                data-index0="{
    
    { index0 }}"
                data-number="{
    
    { item.number }}"
                catchtap="confirm"
                >确定</view
            >
        </view>
        <view wx:elif="{
    
    { item.answer }}" class="answer">
            <view>{
    
    { item.answer }}</view>
        </view>
    </view>

    <view class="box" wx:if="{
    
    { isShow }}">
        <view class="info">您的测评结果已出，点击查看专属报告</view>
        <view class="btn" catchtap="handleToResult">查看结果</view>
    </view>
</view>

wxss

.common {
  margin: 40rpx 0rpx;
}
.common .left {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}
.common .left image {
  width: 74rpx;
  height: 76rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.common .left view {
  color: #222222;
  font-size: 32rpx;
  line-height: 44rpx;
  padding: 16rpx 4rpx 20rpx 20rpx;
  background: #FFFFFF;
  border-radius: 12rpx 12rpx 12rpx 0rpx;
}
.common .right {
  background: #fff;
  padding: 32rpx 40rpx;
  box-sizing: border-box;
  border-radius: 24rpx;
  margin-bottom: 40rpx;
}
.common .right .question {
  color: #222222;
  font-size: 32rpx;
  line-height: 44rpx;
  box-sizing: border-box;
  padding: 18rpx 24rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  background: #F8F8F8;
}
.common .right .question .info {
  color: #999;
  font-size: 28rpx;
}
.common .right .active {
  background: rgba(229, 160, 109, 0.14);
}
.common .right .question:last-child {
  margin-bottom: 0rpx;
}
.common .right .confirm-btn {
  width: 592rpx;
  height: 80rpx;
  background: linear-gradient(138deg, #FFA562 0%, #F6915A 100%);
  border-radius: 40rpx;
  font-size: 28rpx;
  line-height: 80rpx;
  text-align: center;
  color: #ffffff;
  margin: 12rpx auto 0;
}
.common .answer {
  display: flex;
  margin-bottom: 40rpx;
  justify-content: flex-end;
}
.common .answer view {
  color: #fff;
  width: fit-content;
  font-size: 32rpx;
  line-height: 44rpx;
  background: #E5A06D;
  border-radius: 12rpx 12rpx 0rpx 12rpx;
  padding: 16rpx 30rpx;
}
.common-active {
  opacity: 0;
}
.box {
  display: flex;
  background: #fff;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 50rpx 0rpx;
}
.box .info {
  color: #222222;
  font-size: 32rpx;
  font-weight: bolder;
  line-height: 44rpx;
  margin-bottom: 52rpx;
}
.box .btn {
  text-align: center;
  width: 250rpx;
  height: 72rpx;
  color: #fff;
  font-size: 28rpx;
  line-height: 72rpx;
  background: linear-gradient(138deg, #FFA562 0%, #F6915A 100%);
  border-radius: 36rpx;
}
@keyframes fadenum {
  /*设置内容由显示变为隐藏*/
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

父组件调用

<question list="{
    
    { list }}" questionType="{
    
    {questionType}}"  bindhandleToResult="handleToResult"/>

//handleToResult：接收子组件的数据，可在js中处理

对应的数据格式

let indigestion = [
    {
        label: '以下问卷内容旨在为您提供日常健康生活方式建议，请勿用作医疗途径。如有身体不适请及时就医。请您回顾近三个月到半年的身体状况。您的填写内容仅用作问卷检测，隐私信息概不泄露，请放心作答。',
        choose:[{
            name:'我已知晓以上声明',
            value: 'A',
            link: 2
        }],
        number: 1
    },
    {
        type: 'more',  //设置type为more，当前为多选题，否则为单选
        label: '您近6个月（半年）会出现有以下症状表现的，请选择', //问题描述
        choose:[{
            name: '餐后饱胀', //选项名称
            info: '食物长时间存留在胃内引起的不适感', //选项描述
            value: 'A', //选项值
            link: 3 //当前题要跳转到的下一题题号
        },{
            name: '早饱感',
            info: '指进食少量食物即感觉胃部饱满，不能继续进餐',
            value: 'B',
            link: 3
        },{
            name: '上腹疼痛',
            info: '肚脐以上，胃部疼痛',
            value: 'C',
            link: 3
        },{
            name: '上腹烧灼感',
            info: '肚脐以上，胃腹部有灼热感',
            value: 'D',
            link: 3
        }],
        number: 2 //题号
    },
    {
        label: '近3个月，您以上症状表现发生的频率是',
        choose:[{
            name: '一个月偶发一两次',
            value: 'A',
            link: 4
        },{
            name: '一个月发生4次（平均1次/周）',
            value: 'B',
            link: 4
        },{
            name: '一个月发生4次以上',
            value: 'C',
            link: 4
        }],
        number: 3
    },
    {
        label: '您以上的症状是否会自行缓解或消失吗？',
        choose:[{
            name: '可以缓解或消失',
            value: 'A',
            link: 5
        },{
            name: '不能缓解或消失，但能忍受，不影响正常生活',
            value: 'B',
            link: 5
        },
        // {
        //     name: '不能缓解或消失，已影响正常生活',
        //     value: 'C',
        //     link: '结束'
        // }
        ],
        number: 4
    },
    {
        label: '您平时是否感觉压力很大，焦虑、紧张、抑郁？',
        choose:[{
            name: '没感觉到压力大、焦虑、紧张或抑郁',
            value: 'A',
            link: 6
        },{
            name: '感觉到，但可承受或可自行疏导',
            value: 'B',
            link: 6
        },{
            name: '感觉到，同时不可承受或自行疏导',
            value: 'C',
            link: 6
        }],
        number: 5
    },
    {
        label: '您有去医院进行过胃肠功能相关检查吗？',
        choose:[{
            name: '有',
            value: 'A',
            link: 7
        },{
            name: '没有',
            value: 'B',
            link: 7
        }],
        number: 6
    },
    {
        label: '您平时是否总有胃中空虚感，疲乏，大便糖稀，肠鸣？',
        choose:[{
            name: '是',
            value: 'A',
            link: 8
        },{
            name: '否',
            value: 'B',
            link: 13
        }],
        number: 7
    },
    {
        label: '您平时胃部是否热敷或者按揉觉得舒适，胃痛或腹胀遇冷加重？',
        choose:[{
            name: '是',
            value: 'A',
            link: 9
        },{
            name: '否',
            value: 'B',
            link: 10
        }],
        number: 8
    },
    {
        label: '您平时是否口干、口苦、烦躁、小便黄',
        choose:[{
            name: '是',
            value: 'A',
            link: '结束',
            tzName: '寒热错杂证'  //对应症状
        },{
            name: '否',
            value: 'B',
            link: '结束',
            tzName: '脾胃虚寒证'
        }],
        number: 9
    },
    {
        label: '您平时是否经常反酸烧心或频繁打嗝？',
        choose:[{
            name: '是',
            value: 'A',
            link: 11
        },{
            name: '否',
            value: 'B',
            link: 12
        }],
        number: 10
    },
    {
        label: '您平时是否胁肋胀满，胃胀或腹痛情绪不佳时发作或加重？',
        choose:[{
            name: '是',
            value: 'A',
            link: '结束',
            tzName: '肝胃不和证'
        },{
            name: '否',
            value: 'B',
            link: '结束',
            tzName: '脾虚气滞证'
        }],
        number: 11
    },
    {
        label: '您平时是否口苦、口干、烦躁、小便黄？',
        choose:[{
            name: '是',
            value: 'A',
            link: '结束',
            tzName: '脾胃湿热证'
        },{
            name: '否',
            value: 'B',
            link: '结束',
            tzName: '脾虚气滞证'
        }],
        number: 12
    },
    {
        label: '您平时是否反酸烧心，频繁打嗝？',
        choose:[{
            name: '是',
            value: 'A',
            link: 14
        },{
            name: '否',
            value: 'B',
            link: 18
        }],
        number: 13
    },
    {
        label: '您平时是否胁肋胀满，胃胀或腹痛情绪不佳时发作或加重？',
        choose:[{
            name: '是',
            value: 'A',
            link: '结束',
            tzName: '肝胃不和证'
        },{
            name: '否',
            value: 'B',
            link: 15
        }],
        number: 14
    },
    {
        label: '您平时是否口苦、口干、烦躁、小便黄？',
        choose:[{
            name: '是',
            value: 'A',
            link: 16
        },{
            name: '否',
            value: 'B',
            link: 17
        }],
        number: 15
    },
    {
        label: '您平时胃部是否热敷或者按揉觉得舒适，胃痛或腹胀遇冷加重？',
        choose:[{
            name: '是',
            value: 'A',
            link: '结束',
            tzName: '寒热错杂证'
        },{
            name: '否',
            value: 'B',
            link: '结束',
            tzName: '脾胃湿热证'
        }],
        number: 16
    },
    {
        label: '您平时胃部是否热敷或者按揉觉得舒适，胃痛或腹胀遇冷加重？',
        choose:[{
            name: '是',
            value: 'A',
            link: '结束',
            tzName: '脾胃虚寒证'
        },{
            name: '否',
            value: 'B',
            link: '结束',
            tzName: '脾虚气滞证'
        }],
        number: 17
    },
    {
        label: '您平时是否口苦、口干、烦躁、小便黄？',
        choose:[{
            name: '是',
            value: 'A',
            link: 19
        },{
            name: '否',
            value: 'B',
            link: 20
        }],
        number: 18
    },
    {
        label: '您平时胃部是否热敷或者按揉觉得舒适，胃痛或腹胀遇冷加重？',
        choose:[{
            name: '是',
            value: 'A',
            link: '结束',
            tzName: '寒热错杂证'
        },{
            name: '否',
            value: 'B',
            link: '结束',
            tzName: '脾胃湿热证'
        }],
        number: 19
    },
    {
        label: '您平时胃部是否热敷或者按揉觉得舒适，胃痛或腹胀遇冷加重？',
        choose:[{
            name: '是',
            value: 'A',
            link: '结束',
            tzName:'脾胃虚寒证'
        },{
            name: '否',
            value: 'B',
            link: 21
        }],
        number: 20
    },
    {
        label: '您平时是否胁肋胀满，胃胀或腹痛情绪不佳时发作或加重？',
        choose:[{
            name: '是',
            value: 'A',
            link: '结束',
            tzName:'肝胃不和证'
        },{
            name: '否',
            value: 'B',
            link: '结束',
            tzName:'脾胃虚弱证'
        }],
        number: 21
    }
]
export default indigestion