zc_saas_h5/pages5/mockExam/examApply.vue

<template>
<!-- 模考报名页面 -->
    <view class="exam_apply">
        <image mode="widthFix" class="mock_bg" src="/pages5/static/mock_bg.png"></image>
		<u-navbar :is-back="false" title="模考报名" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
		</u-navbar>
        <!-- <nav-bar title="模考报名"></nav-bar> -->
        <u-line color="#D6D6DB" />
        <view class="mains">
            <u-form :model="examform" ref="uForm" :rules="rules" label-width='74'>
                <view class="items">
                    <view class="item_title">
                        <text class="star_red">*</text>
                        <text class="number">01</text>
                        <text class="category">姓名</text>
                    </view>
                    <u-form-item label=" " label-width="74" prop="userName" :border-bottom='false'>
                        <view class="inputs">
                            <input v-model.trim="examform.userName" class="uni-input" placeholder="请输入" />
                        </view>
                    </u-form-item>
                </view>

                <view class="items">
                    <view class="item_title">
                        <text class="star_red">*</text>
                        <text class="number">02</text>
                        <text class="category">性别</text>
                    </view>
                    <u-form-item label=" " label-width="74" prop="userSex" :border-bottom='false'>
                        <u-radio-group v-model="examform.userSex" :wrap='true' @change="radioGroupChange">
                            <u-radio value="1" name='1'>男</u-radio>
                            <u-radio value="2" name='2'>女</u-radio>
                        </u-radio-group>
                    </u-form-item>
                </view>

                <view class="items">
                    <view class="item_title">
                        <text class="star_red">*</text>
                        <text class="number">03</text>
                        <text class="category">企业名称</text>
                    </view>
                    <u-form-item label=" " label-width="74" prop="companyName" :border-bottom='false'>
                        <view class="inputs">
                            <input v-model.trim="examform.companyName" class="uni-input" placeholder="请输入" />
                        </view>
                    </u-form-item>
                </view>

                <view class="items">
                    <view class="item_title">
                        <text class="star_red">*</text>
                        <text class="number">04</text>
                        <text class="category">身份证号</text>
                    </view>
                    <u-form-item label=" " label-width="74" prop="userIdCard" :border-bottom='false'>
                        <view class="inputs">
                            <input v-model.trim="examform.userIdCard" class="uni-input" placeholder="请输入" />
                        </view>
                    </u-form-item>
                </view>

                <view class="items">
                    <view class="item_title">
                        <text class="star_red">*</text>
                        <text class="number">05</text>
                        <text class="category">手机号码</text>
                    </view>
                    <u-form-item label=" " label-width="74" prop="userPhone" :border-bottom='false'>
                        <view class="inputs">
                            <input v-model.trim="examform.userPhone" class="uni-input" placeholder="请输入" />
                        </view>
                    </u-form-item>
                </view>

                <view class="items">
                    <view class="item_title">
                        <text class="star_red">*</text>
                        <text class="number">06</text>
                        <text class="category">报考科目</text>
                    </view>
                    <u-form-item label=" " label-width="74" prop="userMajors" :border-bottom='false'>
                        <u-checkbox-group :wrap='true' @change="checkboxGroupChange">
                            <u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">
                                {{ item.name }}
                            </u-checkbox>
                        </u-checkbox-group>
                    </u-form-item>
                </view>
            </u-form>
            <!-- 提交按钮 -->
            <view class="btns">
                <view class="submits" @click="submit()">
                    提交
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'examApply',
    
    data() {
        var validatorMajor = (rule, value, callback) => {
            if (value.length) {
                callback()
            } else {
                callback(new Error("请选择报考科目"))
            }
        }
        return {
            examform: {
                userName: '',
                userSex: '',
                companyName: '',
                userIdCard: '',
                userPhone: '',
                userMajors: [],
            },
            rules: {
                userName: [{ required: true, message: '请输入姓名', trigger: ['blur', 'change']}],
                userSex: [{ required: true, message: '请选择性别', trigger: ['blur', 'change']}],
                companyName: [{ required: true, message: '请输入企业名称', trigger: ['blur', 'change']}],
                userIdCard: [{ required: true, message: '请输入身份证号', trigger: ['blur', 'change']}],
                userPhone: [{ required: true, message: '请输入手机号码', trigger: ['blur', 'change']}],
                userMajors: [{ validator: validatorMajor, trigger: ['blur', 'change']},
                            ],
            },
            checkboxList: [],
            activityId: '', // 活动id
            subLoading: true,
        }
    },
    onLoad(option) {
        console.log('option--: ', option)
        if (option.scene) {
            let tid = decodeURIComponent(option.scene)
            this.activityId = tid.split('=')[1]
            console.log('activityId: ', this.activityId)
        }
    },
    onShow() {
        // if (this.$method.isGoLogin()) { // 扫二维码进来的没登录需要跳到登录页，登录后返回
        //     return
        // }
        console.log('222222222222222')
        if (!uni.getStorageSync('user_account')) {
			uni.navigateTo({
				url: '/pages4/login/login?isBack=true'
			})
			return
		}
        this.getActivity()
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
    methods: {
        // 获取活动信息
        getActivity() {
            this.$http({
                url: `/apply/detail/${this.activityId}`,
                method: 'get'
            }).then((res) => {
                if (res.data.code == 200) {
                    if (res.data.data.majors) {
                        let majors = res.data.data.majors.split(',')
                        this.checkboxList = majors.map((item) => {
                            return {
                                name: '《' + item + '》',
                                checked: false
                            }
                        })
                        console.log('checkboxList:', this.checkboxList)
                    }
                }
            })
        },
		checkboxGroupChange(e) {
            this.examform.userMajors = e
		},
		radioGroupChange(e) {
			console.log(e, this.examform.userSex);
		},
        submit() {
            this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
                    if (!this.subLoading) {
                        return
                    }
                    this.subLoading = false
                    let params = {
                        activityId: this.activityId,
                        ...this.examform,
                    }
                    params.userMajors = this.examform.userMajors.join(',')
                    console.log('eret', params)
                    this.$http({
                        url: '/apply/launch',
                        method: 'post',
                        data: params,
                    }).then((res) => {
                        console.log('提交', res)
                        this.subLoading = true
                        if (res.data.code == 200) {
                            let data = res.data.data
                            uni.navigateTo({
                                url: '/pages5/mockExam/registrationSuccess?endTime='+data.endTime+'&startTime='+data.startTime
                            })
                        }
                    }).catch((err) => {
                        this.subLoading = true
                    })
				} else {
					console.log('验证失败');
				}
			})
            
        }
    },
}
</script>

<style>
page {
    background-color: #F7F7F9;
}
</style>
<style lang="scss" scoped>
.exam_apply {
    width: 100%;
    height: 100%;
    .mock_bg {
        width: 100%;
        height: 760rpx;
    }
    .mains {
        padding: 16rpx;
        background-color: #F7F7F9;
    }
    .items {
        padding: 40rpx 0rpx 40rpx 24rpx;
        background-color: #fff;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
        .star_red {
            color: #F84B39;
        }
        .number {
            font-size: 32rpx;
            font-weight: 800;
            color: #222222;
            margin: 0rpx 20rpx 0rpx 4rpx;
        }
        .category {
            font-size: 32rpx;
            font-weight: 400;
            color: #222222;
        }
        .inputs {
            width: 580rpx;
            height: 88rpx;
            background: #FFFFFF;
            border-radius: 8rpx;
            border: 2rpx solid #C2C2C2;
            display: flex;
            align-items: center;
            padding-left: 24rpx;
        }
    }
    .btns {
        width: 100%;
        display: flex;
        align-items: center;
        justify-items: center;
    }
    .submits {
        width: 686rpx;
        height: 96rpx;
        line-height: 96rpx;
        text-align: center;
        background: #3F8DFD;
        border-radius: 16rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #FFFFFF;
    }
}
</style>