mteacher/src/views/student/Register.vue

<template>
    <div class="register">
        <header>报名</header>
        <div class="banner">
            <img src="../../assets/images/register_banner.png" alt="">
        </div>

        <div class="reg-title">
            <i class="icon card_icon"></i> 请填写学生信息 <span>（必填）</span>
        </div>
        <van-cell-group>
            <van-field required label="姓名" input-align="right" placeholder="请输入姓名" 
                v-model="stu.name"></van-field>
            <van-field required label="性别" disabled v-model="stu.gender" input-align="right"
                 placeholder="请选择" @click="onChange('gender')" is-link></van-field>
            <van-field required type="number" label="身份证号" input-align="right"
                v-model="stu.idCardNo" placeholder="请输入身份证号"></van-field>
            <van-field required disabled label="乐团" input-align="right" 
                placeholder="请输入乐团" v-model="stu.band"></van-field>
            <van-field required label="年级" disabled input-align="right" v-model="stu.currentGrade" 
                placeholder="请选择" @click="classStatus = true" is-link></van-field>
            <van-field required label="班级" input-align="right" placeholder="请输入班级" 
                v-model="stu.currentClass"></van-field>
        </van-cell-group>

        <div class="reg-title">
            <i class="icon card_icon"></i> 请填写专业信息 <span>（必填）</span>
        </div>

        <van-cell-group>
            <van-field required label="声部" v-model="stu.major" @click="onChange('major')" 
                disabled is-link input-align="right" placeholder="请选择"></van-field>
            <van-field required label="乐器购买方式" v-model="stu.kitPurchaseMethod" @click="onChange('kitPurchaseMethod')" 
                disabled is-link input-align="right" placeholder="请选择"></van-field>
            <van-field required label="是否服从调配" v-model="stu.isAllowAdjust" disabled
                placeholder="请选择" @click="onChange('isAllowAdjust')" is-link input-align="right"></van-field>
        </van-cell-group>

        <div class="reg-title">
            <i class="icon card_icon"></i> 请填写家长信息 <span>（必填，至少1名联系人）</span>
        </div>

        <van-cell-group>
            <van-field required label="家长" input-align="right" placeholder="请输入家长姓名" v-model="stu.parentsName"></van-field>
            <van-field required label="手机" input-align="right" placeholder="请输入手机号" v-model="stu.parentsPhone"></van-field>
            <van-field label="单位" input-align="right" placeholder="请输入单位名称" v-model="stu.parentsCompany"></van-field>
            <van-field input-align="right"
                v-model="stu.remark" label="备注" type="textarea"
                placeholder="请输入备注" rows="2" autosize />
        </van-cell-group>

        <div class="btn-group">
            <van-button class="btn-submit" @click="onSubmit" size="large">提交</van-button>
        </div>

        
       <van-action-sheet
            v-model="sheetStatus"
            :actions="sheetActions"
            cancel-text="取消"
            @select="onSelect"
            @cancel="sheetStatus = false"/>

        <van-popup v-model="classStatus"  position="bottom">
            <van-picker :columns="dataList.currentGrade" 
                show-toolbar 
                @cancel="classStatus = false"
                @confirm="onClassConfirm" />
        </van-popup>
    </div>
</template>

<script>
import { getMusicGroupRegInfo, registerAdd } from '@/api/student'
export default {
    name: 'register',
    data() {
        return {
            sheetStatus: false, // 选项卡状态
            classStatus: false, // 年级弹窗状态
            stu: {
                name: null, // 姓名
                gender: null, // 性别
                idCardNo: null, // 身份证号
                band: '',// 乐团
                currentGrade: '', // 年级
                currentClass: null, // 班级
                major: '', // 专业
                kitPurchaseMethod: '团购',
                isAllowAdjust: '是', // 是否服从调配
                parentsName: null, // 家长
                parentsPhone: null, // 电话
                parentsCompany: null, // 单位
                remark: null, // 备注
            },
            stuIndex: {
                genderNo: null, // 性别编号
                majorNo: null, // 专业编号
                subNo: null, // 科目编号
                kitPurchaseMethod: 'GROUP',
                isAllowAdjustNo: 'YES', // 是否服从调配编号
            },
            selectName: '', // 选择是哪个字段
            sheetActions: [], // 上拉列表数据展示
            dataList: { // 上拉列表数据列表
                gender: [{ name: '男', index: 1 }, {name: '女', index: 0}],
                currentGrade: ['一年级','二年级','三年级','四年级','五年级','六年级','初一/七年级','初二/八年级','初三/九年级','高一','高二','高三'],
                isAllowAdjust: [{ name: '是', index: 'YES' }, {name: '否', index: 'NO'}],
                major: [],
                kitPurchaseMethod: [{ name: '团购', index: 'GROUP' }, {name: '自备', index: 'OWNED'}]
            }
        }
    },
    mounted() {
        let params = this.$route.query
        // 获取声部列表
        getMusicGroupRegInfo({ musicGroupId: params.musicGroupId }).then(res => {
            let result = res.data
            if(result.code == 200 && result.data) {
                this.stu.band = result.data.musicGroupName
                result.data.subjectList.forEach(item => {
                    let tempSubName = item.name.split('.').reverse()[0]
                    this.dataList.major.push({
                        name: tempSubName,
                        index: item.id,
                        subNo: item.subId
                    })
                })
            }
        })
    },
    methods: {
        onSelect(item) { // 选中子选项时赋值
            this.stu[this.selectName] = item.name
            this.sheetStatus = false
            // 根据不同的类型取到对应的编号
            if(this.selectName == 'gender') {
                this.stuIndex.genderNo = item.index
            } else if(this.selectName == 'isAllowAdjust') {
                this.stuIndex.isAllowAdjustNo = item.index
            } else if(this.selectName == 'major') {
                this.stuIndex.majorNo = item.index
                this.stuIndex.subNo = item.subNo
            } else if(this.selectName == 'kitPurchaseMethod') {
                this.stuIndex.kitPurchaseMethod = item.index
            }
        },
        onChange(name) { // 选择上拉弹窗时
            this.sheetStatus = true
            this.sheetActions = this.dataList[name]
            this.selectName = name
        },
        onClassConfirm(val) { // 年级赋值
            this.stu.currentGrade = val
            this.classStatus = false

        },
        onSubmit() {
            // 确定注册
            let checkResult = this.onCheckForm()
            if(checkResult) {
                this.$toast(checkResult)
                return false
            }
            
            let s = this.stu
            let params = {
                currentClass: s.currentClass,
                currentGrade: s.currentGrade,
                gender: this.stuIndex.genderNo,
                idCardNo: s.idCardNo,
                isAllowAdjust: this.stuIndex.isAllowAdjustNo,
                kitPurchaseMethod: this.stuIndex.kitPurchaseMethod,
                musicGroupId: this.$route.query.musicGroupId,
                name: s.name,
                parentsName: s.parentsName,
                parentsPhone: s.parentsPhone,
                subjectId: this.stuIndex.majorNo,
                parentsCompany: s.parentsCompany,
                remark: s.remark
            }
            registerAdd(params).then(res => {
                console.log(res)
                let result = res.data
                if(result.code == 200) {
                    this.$dialog.alert({
                        title: '提示',
                        message: '恭喜你，报名成功'
                    })
                } else {
                    this.$dialog.alert({
                        title: '提示',
                        message: result.msg
                    })
                }
            })
        },
        onCheckForm() {
            let student = this.stu
            let errorTextArr = {
                name: '请输入姓名',
                gender: '请选择性别', // 性别
                idCardNo: '请输入身份证号', // 学校
                currentGrade: '请选择年级', // 年级
                currentClass: '请输入班级', // 班级
                major: '请选择声部', // 专业
                kitPurchaseMethod: '请选择乐器购买方式',
                isAllowAdjust: '请选择是否服从调配', // 是否服从调配
                parentsName: '请输入家长姓名', // 家长
                parentsPhone: '请输入手机号', // 电话
                // parentsCompany: '请输入单位名称'
            }
            let idCardReg = /(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)|(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/
            for(let key in student) {
                if(!student[key] || student[key] == '') {
                    return errorTextArr[key]
                } else if(key == 'parentsPhone' && !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(student.parentsPhone))) {
                    return '电话输入有误'
                } else if(key == 'idCardNo' && !idCardReg.test(student.idCardNo)) {
                    return '身份证号输入有误'
                }
            }
            return ''
        }
    }
}
</script>

<style lang="less" scoped>
.register {
    margin-bottom: .3rem;
}

header {
    height: .40rem;
    line-height: .40rem;
    color: #000;
    font-size: .17rem;
    background: #fff;
    box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.07);
    text-align: center;
    margin-bottom: .06rem;
}
.banner {
    font-size: 0;
    img{
        width: 100%;
    }
}

.reg-title {
    padding: 0 .12rem;
    position: relative;
    height: .4rem;
    display: flex;
    align-items: center;
    color: #666;
    font-size: .14rem;
    span {
        color: #9B9B9B;
    }
    .card_icon {
        display: inline-block;
        width: .23rem;
        height: .2rem;
        margin-right: .1rem;
        background: url('../../assets/images/Shape.png') no-repeat center;
        background-size: contain;
    }
}

.btn-group {
    margin: .3rem .3rem 0;
    .btn-submit {
        background: #14928A;
        border-radius: 1rem;
        color: #fff;
        font-size: .18rem;
    }
}


/deep/.van-cell {
    font-size: .16rem;
    padding: .13rem .11rem;
    .van-field__control:disabled {
    color: #323233 !important;
}
}

/deep/.van-field--disabled .van-field__control {
    color: #444 !important;
}
/deep/.van-field__label, /deep/.van-cell__title {
    padding-left: .08rem;
    flex: 1 auto;
}
// .van-field--disabled {
    .van-field__controll {
         color: #323233;
    }
// }
</style>