saas_pc/src/pages/person-center/my-course/components/AppointTest.vue

<template>
    <div class="appoint_test">
        <el-dialog
            title="预约考试"
            :visible.sync="appointModal"
            width="600px"
            class="appoint-modal"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="cancel"
        >
            <div v-if="appointItem.examApplyGoodsList && appointItem.examApplyGoodsList.length" class="appoint-modal">
                <div v-for="(appointChild, appointIndex) in appointItem.examApplyGoodsList" :key="appointIndex"  class="appoint_item" >
                    <div class="names">{{ appointChild.applyName }}</div>
                    <div class="btns" @click="confirmAppoint(appointChild)">预约</div>
                </div>
                <!-- <el-radio
                    v-for="(appointChild, appointIndex) in appointItem.examApplyGoodsList"
                    v-model="applyId"
                    :key="appointIndex"
                    :label="appointChild.applyId"
                >
                    {{ appointChild.applyName }}
                </el-radio> -->
            </div>
            <div v-else class="no_data">暂无考试预约~</div>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="confirmAppoint">立即预约</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'appoint_test',
    props: {
        appointModal: {
            type: Boolean,
            default: false,
        },
        appointItem: {
            type: Object,
            default: () => {}
        },
    },
    data() {
        return {
            applyId: "",
        }
    },
    methods: {
        cancel() {
            this.$emit('update:appointModal', false)
        },
        confirmAppoint(item) {
            // if (!this.applyId) {
            //     this.$message.warning("请选择要预约的考试");
            //     return;
            // }
            var data = {
                goodsId: this.appointItem.goodsId,
                gradeId: this.appointItem.gradeId,
                applyId: item.applyId,
                orderGoodsId: this.appointItem.orderGoodsId,
            };
            this.$request.getApplysubscribe(data).then((res) => {
                this.$router.push({
                    path: "/person-center/my-classhour/appointment",
                    query: {
                    goodsId: this.appointItem.goodsId,
                    gradeId: this.appointItem.gradeId,
                    orderGoodsId: this.appointItem.orderGoodsId,
                    applyId: item.applyId,
                    },
                });
            }).catch((err) => {
                this.$message({
                    type: "warning",
                    message: err.msg,
                });
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.appoint_item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
    border-bottom: 1px solid #F0F0F0;
    .names {
        font-size: 14px;
        font-weight: 500;
        color: #303030;
    }
    .btns {
        width: 54px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: #FFF5EC;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        color: #F67205;
        cursor: pointer;
    }
    .no_data {
        text-align: center;
        font-size: 16px;
        margin-bottom: 20px;
    }
}
</style>