wxdaya/src/views/register.vue

<template>
    <div class="register">
        <header>报名</header>
        <div class="banner">
            <img src="../assets/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="姓名" placeholder="请输入姓名" v-model="stu.name"></van-field>
            <van-cell required title="性别" v-model="stu.sex" @click="onChange('sex')" is-link value="请选择"></van-cell>
            <van-cell required title="生日" v-model="stu.birthday" @click="birthdayStatus = true" is-link value="请选择"></van-cell>
            <van-field required disabled label="乐团" placeholder="" v-model="stu.band"></van-field>
            <!-- <van-cell title="学校" v-model="stu.school" @click="onChange('school')" is-link value="请选择"></van-cell> -->
            <van-cell required title="年级" v-model="stu.class" @click="onChange('class')" is-link value="请选择"></van-cell>
            <van-field required label="班级" placeholder="请输入班级" v-model="stu.grade"></van-field>
        </van-cell-group>

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

        <van-cell-group>
            <van-cell required title="声部" v-model="stu.major" @click="onChange('major')" is-link value="请选择"></van-cell>
            <van-cell required title="是否服从调配" v-model="stu.adjust" @click="onChange('adjust')" is-link value="请选择"></van-cell>
        </van-cell-group>

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

        <van-cell-group>
            <van-field required label="家长" placeholder="请输入家长姓名" v-model="stu.patriarch"></van-field>
            <van-field required disabled label="手机" placeholder="请输入手机号" v-model="stu.phone"></van-field>
            <van-field label="单位" placeholder="请输入单位名称" v-model="stu.company"></van-field>
            <van-field
                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 :class="[selectName=='class'?'height3':'']"
            v-model= "sheetStatus"
            :actions= "sheetActions"
            @select= "onSelect"
            @cancel= "sheetStatus = false"
        />

        <van-popup v-model="birthdayStatus" position="bottom">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                :min-date="minDate"
                :formatter="formatter"
                @confirm= "onConfirmDate"
                @cancel= "birthdayStatus = false"
            />  
        </van-popup>
    </div>
</template>

<script>
import { Field, CellGroup, Cell, ActionSheet, Button, DatetimePicker, Popup, Toast, Dialog } from 'vant'
import cityName from '../assets/front_ciry'
import qs from 'qs'
export default {
    name: 'register',
    components: { Field, CellGroup, Cell, ActionSheet, Button, DatetimePicker, Popup, Toast, Dialog },
    data() {
        return {
            currentDate: new Date(), // 当前时间
            minDate: new Date(1980, 1, 1), // 最小日期时间
            sheetStatus: false, // 选项卡状态
            birthdayStatus: false, // 日期选择状态
            stu: {
                name: '', // 姓名
                sex: '请选择', // 性别
                birthday: '请选择', // 生日
                city: '请选择', // 城市
                band: '',// 乐团
                // school: '', // 学校
                class: '请选择', // 年级
                grade: '', // 班级
                major: '请选择', // 专业
                adjust: '是', // 是否服从调配
                patriarch: '', // 家长
                phone: '', // 电话
                company: '', // 单位
                remark: '', // 备注
            },
            stuIndex: {
                sexNo: null, // 性别编号
                majorNo: null, // 专业编号
                subNo: null, // 科目编号
                adjustNo: 1, // 是否服从调配编号
            },
            selectName: '', // 选择是哪个字段
            sheetActions: [], // 上拉列表数据展示
            dataList: { // 上拉列表数据列表
                sex: [{ name: '男', index: 0 }, {name: '女', index: 1}],
                // school: [
                //     { name: '小学' },
                //     { name: '初中' },
                //     { name: '高中' },
                // ],
                class: [
                    { name: '一年级' },
                    { name: '二年级' },
                    { name: '三年级' },
                    { name: '四年级' },
                    { name: '五年级' },
                    { name: '六年级' },
                    { name: '初一/七年级' },
                    { name: '初二/八年级' },
                    { name: '初三/九年级' },
                    { name: '高一' },
                    { name: '高二' },
                    { name: '高三' },
                ],
                adjust: [{ name: '是', index: 1 }, {name: '否', index: 0}],
            }
        }
    },
    mounted() {
        let params = this.$route.query
        this.stu.phone = params.phone
        this.stu.city = cityName(params.cityId)
        this.stu.band = params.schoolName
        let arr = []
        axios.post('/user/getCourses', qs.stringify({clazzId: params.classId})).then((res) => {
            (res.data.data).forEach(element => {
                let tempSubName = element.subName.split('.').reverse()[0]
                arr.push({
                    name: tempSubName,
                    index: element.id,
                    subNo: element.subId
                })
            })

            this.dataList.major = arr
        })
    },
    methods: {
        // 选中子选项时赋值
        onSelect(item) {
            this.stu[this.selectName] = item.name
            this.sheetStatus = false
            // 根据不同的类型取到对应的编号
            if(this.selectName == 'sex') {
                this.stuIndex.sexNo = item.index
            } else if(this.selectName == 'adjust') {
                this.stuIndex.adjustNo = item.index
            } else if(this.selectName == 'major') {
                this.stuIndex.majorNo = item.index
                this.stuIndex.subNo = item.subNo
            }
        },
        onChange(name) {
            this.sheetStatus = true
            this.sheetActions = this.dataList[name]
            this.selectName = name
        },
        formatter(type, value) { // 格式化时间
            if (type === 'year') {
                return `${value}年`;
            } else if (type === 'month') {
                return `${value}月`
            } else if (type === 'day') {
                return `${value}日`
            }
            return value
        },
        onConfirmDate() {
            // 生日赋值
            this.birthdayStatus = false
            this.stu.birthday = this.dateFormat(this.currentDate)
        },
        dateFormat(date) {
            let cur = new Date(date)
            return `${cur.getFullYear()}-${cur.getMonth() + 1}-${cur.getDate()}` 
        },
        onSubmit() {
            // 确定注册
            let checkResult = this.onCheckForm()
            if(checkResult) {
                Toast(checkResult)
                return false
            }
            
            let s = this.stu
            let params = this.$route.query

            axios.post('/user/userApply', qs.stringify({
                name: s.name,
                sex: this.stuIndex.sexNo,
                birthday: s.birthday,
                city: s.city,
                classId: params.classId,
                courseId: this.stuIndex.majorNo,
                subId: this.stuIndex.subNo,
                branchId: params.branchId,
                schoolId: params.schoolId,
                grade: s.class,
                gClass: s.grade,
                isAdjust: this.stuIndex.adjustNo,
                patriarchPhone: s.phone,
                patriarchName: s.patriarch,
                patriarchUnit: s.company,
                remark: s.remark
            })).then((res) => {
                let result = res.data
                if(result.code == 200) {
                    Dialog.alert({
                        title: '提示',
                        message: '恭喜您，已报名成功',
                        confirmButtonColor: '#269a93'
                    }).then(() => {
                        // 判断是否开启缴费
                        if(params.status == 2) {
                            this.$router.push({
                                path: 'home',
                                query: {
                                    branchId: params.branchId,
                                    stuId: result.data,
                                    classId: params.classId,
                                    cityId: params.cityId,
                                    schoolId: params.schoolId
                                }
                            })
                        } else {
                            // 跳转到登录页面
                            this.$router.push({ path: 'login', query: {
                                schoolId: params.schoolId, // 学校编号
                                cityId: params.cityId // 城市编号
                            }})
                        }
                    })
                } else {
                    Toast(result.msg)
                }
            })
        },
        onCheckForm() {
            let student = this.stu
            let errorTextArr = {
                name: '请输入姓名',
                sex: '请选择性别', // 性别
                birthday: '请选择生日', // 生日
                // school: '请选择学校', // 学校
                class: '请选择年级', // 年级
                grade: '请输入班级', // 班级
                major: '请选择声部', // 专业
                adjust: '请选择是否服从调配', // 是否服从调配
                patriarch: '请输入家长姓名', // 家长
                phone: '请输入电话', // 电话
                // company: '请输入单位名称'
            }
            for(let key in student) {
                if(student[key] == '' || student[key] == '请选择') {
                    return errorTextArr[key]
                }
            }
            return ''
        }
    }
}
</script>

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

.height3 {
    height: 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/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;
    }
}

.van-cell {
    font-size: .16rem;
    padding: .13rem .11rem;
}

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