psychological-competence/src/views/CognitiveAbilityTask/comprehensiveMemoryAbilityEnter.vue

<template>
    <div class="cma-warp">
        <div class="cma-first-line">
            <div class="cma-list-item" @click="goList(0)">
                <img src="../../assets/congnitiveAblitity/ability1.png" alt="">
                <p style="color: rgb(87, 172, 187)">(一)指向记忆</p>
            </div>
            <div class="cma-list-item" @click="goList(1)">
                <img src="../../assets/congnitiveAblitity/ability2.png" alt="">
                <p style="color: rgb(87, 172, 187)">(二)词汇联想</p>
            </div>
            <div class="cma-list-item" @click="goList(2)">
                <img src="../../assets/congnitiveAblitity/ability3.png" alt="">
                <p style="color: rgb(87, 172, 187)">(三)图像自由回忆</p>
            </div>
        </div>
        <div class="cma-second-line">
            <div class="cma-list-item" @click="goList(3)">
                <img src="../../assets/congnitiveAblitity/ability1.png" alt="">
                <p style="color: rgb(87, 172, 187)">(四)图片联想</p>
            </div>
            <div class="cma-list-item" @click="goList(4)">
                <img src="../../assets/congnitiveAblitity/ability2.png" alt="">
                <p style="color: rgb(87, 172, 187)">(五)人物特点回忆</p>
            </div>
            <div class="cma-list-item" @click="goList(5)">
                <img src="../../assets/congnitiveAblitity/ability3.png" alt="">
                <p style="color: rgb(87, 172, 187)">(六)视觉空间记忆</p>
            </div>
            <div class="cma-list-item" @click="goList(6)">
                <img src="../../assets/congnitiveAblitity/ability4.png" alt="">
                <p style="color: rgb(87, 172, 187)">(七)前瞻记忆</p>
            </div>
        </div>

      <go-back />
    </div>
</template>

<script>
import GoBack from "@/components/goBack/index.vue";

export default {
    name: "comprehensiveMemoryAbilityEnter",
  components: {GoBack},
    data() {
        return {
            subjectInfo: "",
            userId: "",
            taskId: "",
            webSocket: "",
            wholeProcess: "1", //0-流程测试1-分项测试是否进行全流程测试
            wholeProcessNo: null, //全流程延时记忆关卡
            phone: '',
        };
    },
    watch: {

    },
    created() {
        this.init();
    },
    mounted() {
        this.open();
    },
    computed: {

    },
    methods: {
        init() {
            this.subjectInfo = JSON.parse(sessionStorage.getItem("subjectInfo"));
            this.userId = sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f");
            this.phone = sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9e87");
            this.taskId = this.$route.query.taskId;
        },
        goList(id) {
            switch (id) {
                case 0:
                    this.$router.push("pointMemory");
                    break;
                case 1:
                    this.$router.push("lexicalAssociation");
                    break;
                case 2:
                    this.$router.push("imageFreeRecall");
                    break;
                case 3:
                    this.$router.push("imageAssociation");
                    break;
                case 4:
                    this.$router.push("peopleRecall");
                    break;
                case 5:
                    this.$router.push("visualSpatialMemory");
                    break;
                case 6:
                    this.$router.push("prospectRecall");
                    break;
            }
        },
        check() {
            this.$confirm('检测到你有未完成延时记忆，请选择继续测试还是重新开始测试？', '提示', {
                confirmButtonText: '继续测试',
                cancelButtonText: '重新开始',
                type: 'warning',
                closeOnClickModal: false,
                distinguishCancelAndClose: true,
            }).then(() => {
                //继续测试
                if (this.wholeProcess == '0') {
                    // switch (this.wholeProcessNo) {
                    //     case 8:
                    //         // this.$router.push("pointMemory");
                    //         this.$router.push({
                    //             path: 'pointMemory',
                    //             query: {
                    //                 wholeProcess: true
                    //             }
                    //         });
                    //         break;
                    //     case 9:
                    //         // this.$router.push("lexicalAssociation");
                    //         this.$router.push({
                    //             path: 'lexicalAssociation',
                    //             query: {
                    //                 wholeProcess: true
                    //             }
                    //         });
                    //         break;
                    //     case 10:
                    //         // this.$router.push("imageFreeRecall");
                    //         this.$router.push({
                    //             path: 'imageFreeRecall',
                    //             query: {
                    //                 wholeProcess: true
                    //             }
                    //         });
                    //         break;
                    //     case 11:
                    //         // this.$router.push("imageAssociation");
                    //         this.$router.push({
                    //             path: 'imageAssociation',
                    //             query: {
                    //                 wholeProcess: true
                    //             }
                    //         });
                    //         break;
                    //     case 12:
                    //         // this.$router.push("peopleRecall");
                    //         this.$router.push({
                    //             path: 'peopleRecall',
                    //             query: {
                    //                 wholeProcess: true
                    //             }
                    //         });
                    //         break;
                    // }

                    //如果是全流程默认进入第一个页面会自动分配未完成延时测试页面
                    this.$router.push({
                        path: 'pointMemory',
                        query: {
                            wholeProcess: '0'
                        }
                    });

                }


            }).catch(action => {
                if (action === 'close') {
                    this.$router.push({
                        name: "CognitiveAbility",
                    });
                } else {
                    //重新开始
                    this.Renew();
                }
            });
        },
        open() {
            this.$confirm('是否进行全流程测试？', '提示', {
                confirmButtonText: '全流程测试',
                cancelButtonText: '选择单个测试',
                type: 'warning',
                closeOnClickModal: false,
                distinguishCancelAndClose: true,
                beforeClose: (action, instance, done) => {
                    if (action == "close") {
                        this.$router.push({
                            name: "CognitiveAbility",
                        });
                        done();
                    } else {
                        done()
                    }
                }
            }).then(() => {
                //全流程
                this.wholeProcess = "0";

                // this.$router.push({
                //     path: 'pointMemory',
                //     query: {
                //         wholeProcess: true
                //     }
                // });

                //检测是否有延时测试
                this.checkProcess();

            }).catch(() => {

                //单个测试
                this.wholeProcess = "1";
                //检测是否有延时测试
                // this.checkProcess();

            });
        },
        checkProcess() {
            this.$http.post("memory/getIfUsable", {
                phone: this.phone,
                type: 'RTC_CHILD',
                testType: this.wholeProcess, //流程类型0-全流程，1-分项测试
            }, (msg) => {
                if (msg.msg == "需要先进行即时测试") {
                    if (this.wholeProcess == '0') {
                        this.$router.push({
                            path: 'pointMemory',
                            query: {
                                wholeProcess: '0'
                            }
                        });
                    }
                } else {
                    this.wholeProcessNo = msg.data.length;
                    //开启是否进行延时测试弹窗选择
                    this.check();


                }
            });
        },
        Renew() {
            this.$http.post("memory/clearMemory", {
                phone: this.phone,
                // questionNo: '',
                type: 'RTC_CHILD',
                testType: this.wholeProcess, //流程类型0-全流程，1-分项测试
            }, (msg) => {
                if (msg.code == 200) {

                    if (this.wholeProcess == '0') {
                        this.$router.push({
                            path: 'pointMemory',
                            query: {
                                wholeProcess: '0'
                            }
                        });
                    }

                }
            });
        },


    },
    beforeDestroy() {

    },
    destroyed() {

    },
}
</script>

<style scoped>
.cma-first-line,
.cma-second-line {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.cma-first-line {
    box-sizing: border-box;
    margin: 30px 0;
}

.cma-list-item {
    width: 180px;
    height: 221px;
    background: rgb(255, 255, 255);
    box-shadow: 0px 3px 6px rgb(87, 172, 187);
    border-radius: 4px;
    /*margin: 30px 38px;*/
}

.cma-list-item img {
    width: 100%;
}

.cma-list-item p {
    width: 180px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 90px;
    color: #333333;
    text-align: center;
    /*margin-left: 9px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>