ZhHealth/pages/evaluation/index.vue

<!--
 * @Description:测评模块引入插件
 * @Author: Aimee·Zhang
 * @Date: 2022-01-13 13:52:19
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-13 17:16:09
-->
<template>
    <view class="evaluation">
        <!-- 进度 -->
        <view class="percent">
            <u-icon name="arrow-left" :color="colorList[colorIndex]" size="14" label="上一题" :labelColor="colorList[colorIndex]" labelSize="14" :bold="true" space="3" v-if="page !== 1" @click="preQ" />
            <u-line-progress class="pre-ico" :percentage="percent" height="10" :showText="false" :activeColor="colorList[colorIndex]" />
            <span :style="{ color: colorList[colorIndex] }">{{ percent }}%</span>
        </view>
        <!-- 标题 -->
        <view class="title">{{ page }}.{{ currentInfo.title }}</view>
        <!-- 题目列表 -->
        <view class="lists">
            <view class="list-item">
                <u-radio-group placement="column" @change="groupChange" iconPlacement="right" class="radio-g" :value="currentId">
                    <u-radio class="radio-item" :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in currentInfo.options" :key="index" :label="item.title" :name="item.option_id" :activeColor="colorList[colorIndex]" />
                </u-radio-group>
            </view>
            <!-- 底部确认按钮 -->
            <view class="bottom-btn" :style="{ background: colorList[colorIndex] }" @click="next">下一步</view>
        </view>
    </view>
</template>
<script>
    import {
        evaluationsQuestion,
        evaluationsAnswers
    } from '@/apis/interfaces/evaluation.js';
    export default {
        components: {},
        data() {
            return {
                percent: 70,
                colorList: ['#34ce98', '#d04500', '#f4d000', '#55aa00', '#e58308', '#dc5a1d'],
                colorIndex: Math.floor(Math.random() * 6), // 基本案列数据
                currentInfo: {}, //当前题目的内容
                option_ids: [], // 答案id的数组
                has_more: false, // 是否有下一页
                page: 1,
                currentId: '' // 默认值
            };
        },
        onShow() {
            this.getList();
            uni.setNavigationBarColor({
                frontColor: '#ffffff', //文字颜色
                backgroundColor: `${this.colorList[this.colorIndex]}` //底部背景色
            });
        },
        methods: {
            // 答题列表
            getList() {
                evaluationsQuestion(this.$Route.query.id, this.page).then(res => {
                    this.currentInfo = res.data[0];
                    this.percent = Number(((res.page.current - 1) / res.page.total).toFixed(2)) * 100;
                    this.has_more = res.page.has_more;
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                });
            },
            groupChange(n) {
                this.currentId = n;
            },
            // 上一题
            preQ() {
                this.option_ids.pop();
                this.currentId = '';
                this.page = this.page - 1;
                this.getList();
            },
            //下一题
            next() {
                if (this.has_more) {
                    if (this.currentId === '') {
                        uni.showToast({
                            title: '请选择答案',
                            icon: 'none'
                        });
                        return;
                    }
                    this.option_ids.push(this.currentId);
                    this.currentId = '';
                    this.page = this.page + 1;
                    this.getList();
                } else {
                    if (this.option_ids.length !== this.page) {
                        this.option_ids.push(this.currentId);
                        this.currentId = '';
                    }
                    let data = {
                        option_ids: this.option_ids.toString(),
                        id: this.$Route.query.id
                    };
                    evaluationsAnswers(data)
                        .then(res => {
                            this.parent = 100;
                            uni.showToast({
                                title: '答题完成,立即查看结果',
                                icon: 'none',
                                mask: true
                            });
                            setTimeout(() => {
                                uni.navigateTo({
                                    url: `/pages/evaluation/result?id=${this.$Route.query.id}`
                                });
                            }, 1000);
                        })
                        .catch(err => {
                            uni.showToast({
                                title: err.message,
                                icon: "none",
                                duration: 2000,
                                mask: true
                            })
                        });
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .evaluation {
        padding: $padding $padding $padding * 4 $padding;

        .percent {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            font-size: $title-size - 2;

            .pre-ico {
                margin: $padding;
            }
        }

        .title {
            font-size: $title-size + 10;
            font-weight: bold;
            padding-top: $padding;
        }

        .lists {
            .radio-g {
                padding-top: $padding * 2;

                .radio-item {
                    background: #f9f9f9;
                    padding: $padding;
                    border-radius: $radius;
                    flex: 1;
                }
            }

            .bottom-btn {
                text-align: center;
                padding: 24rpx $padding;
                border-radius: $radius + 40;
                color: #fff;
                font-size: $title-size;
                position: fixed;
                bottom: $padding;
                width: calc(100% - 60rpx);
                box-sizing: border-box;
            }
        }
    }
</style>