<template> <div> <div class="addchild_group" v-if="step==2"> <img class="bg" src="@/assets/home/bg2.png" alt=""> <p class="title">学校激活认证</p> <p class="des">认证通过后,学生研学记录可同步到学校!</p> <div class="phone_content"> <div class="item"> <p class="phone_title">手机号</p> <div class="flex"> <input class="code phone" type="tel" maxlength="11" v-model="phone" placeholder="请输入家校联系预留手机号"> <span class="getcode" @click="getCode">{{codeText}}</span> </div> </div> <div class="item"> <p class="phone_title">验证码</p> <input class="code" type="text" v-model="code" placeholder="请输入验证码"> </div> <button class="submit" @click="checkPhoneAndCode">完成</button> </div> </div> <div class="addchild_group" v-if="step==1"> <img class="bg" src="@/assets/home/bg2.png" alt=""> <p class="title">添加学生信息</p> <p class="des">完善相关信息可帮助获得最佳使用体验</p> <div class="content"> <div class="name">学生信息</div> <div class="item" style="width:48%;display:inline-flex;margin-right:4%;"> <input type="text" placeholder="请输入学生姓名" v-model="studentName"> </div> <div class="item" @click="handleYear" style="width:48%;display:inline-flex;"> <p :class="!year||yearDisable?'nodata':''">{{year?year:'入学年份'}}</p> <img src="@/assets/more.png" alt=""> </div> <div class="item" @click="showUserTypeSelect=true" style="width:48%;display:inline-flex;margin-right:4%;"> <p :class="!userType?'nodata':''">{{userType?userType:'当前阶段'}}</p> <img src="@/assets/more.png" alt=""> </div> <div class="item" @click="showUserClassSelect=true" style="width:48%;display:inline-flex;"> <p :class="!classType?'nodata':''">{{classType?classType:'班级'}}</p> <img src="@/assets/more.png" alt=""> </div> <div class="item" @click="showAreaSelect=true"> <p :class="!area?'nodata':''">{{area?area:'请选择地区'}}</p> <img src="@/assets/more.png" alt=""> </div> <div class="item"> <input type="text" placeholder="请选择学校" readonly v-model="school"> <button type="info" class="btn" @click="chooseSchool">选择学校</button> </div> <button class="submit" @click="submit">完成</button> </div> </div> <van-popup v-model="showUserTypeSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true"> <van-picker title="当前阶段" show-toolbar :columns="userTypeArr" value-key="label" @cancel="showUserTypeSelect = false" @confirm="selectUserTypeOver" /> </van-popup> <van-popup v-model="showYearSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true"> <van-picker title="入学年份" show-toolbar :columns="yearArr" value-key="label" @cancel="showYearSelect = false" @confirm="selectYearOver" /> </van-popup> <van-popup v-model="showAreaSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true"> <van-area title="地区" :area-list="areaList" @cancel="showAreaSelect = false" @confirm="selectAreaOver" /> </van-popup> <van-popup v-model="showUserClassSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true"> <van-picker title="班级" show-toolbar :columns="classTypeArr" value-key="label" @cancel="showUserClassSelect = false" @confirm="selectClassTypeOver" /> </van-popup> <van-popup v-model="chooseSchoolisShow" round get-container="body" :safe-area-inset-bottom="true"> <div v-if="chooseSchoolisShow"> <chooseSchool v-model="chooseSchoolisShow" @schoolData='schoolData'></chooseSchool> </div> </van-popup> </div> </template> <script> import chooseSchool from '@/views/Home/component/chooseSchool' var codeInterval; export default { components: { chooseSchool }, props: ['step', 'travelerNum'], data () { return { phone: '', codeText: '获取验证码',//获取验证码按钮文字 code: '',//验证码 studentName: '', showDialog: true, year: '',//入学年份 yearDisable: false, showYearSelect: false, yearArr: [], userType: '', userTypeVal: '',//所处阶段1-小学 2-初中 3-高中 showUserTypeSelect: false, userTypeArr: [ { label: '幼儿园', value: 0 }, { label: '小学', value: 1 }, { label: '初中', value: 2 }, { label: '高中', value: 3 }], classType: '', classTypeVal: '',//班级 showUserClassSelect: false, classTypeArr: [{ label: '1班', value: '1班' }, { label: '2班', value: '2班' }, { label: '3班', value: '3班' }, { label: '4班', value: '4班' }, { label: '5班', value: '5班' }, { label: '6班', value: '6班' }, { label: '7班', value: '7班' }, { label: '8班', value: '8班' }, { label: '9班', value: '9班' }, { label: '10班', value: '10班' }, { label: '11班', value: '11班' }, { label: '12班', value: '12班' }, { label: '13班', value: '13班' }, { label: '14班', value: '14班' }, { label: '15班', value: '15班' }, { label: '16班', value: '16班' }, { label: '17班', value: '17班' }, { label: '18班', value: '18班' }, { label: '19班', value: '19班' }, { label: '20班', value: '20班' }, { label: '21班', value: '21班' }, { label: '22班', value: '22班' }, { label: '23班', value: '23班' }, { label: '24班', value: '24班' }, { label: '25班', value: '25班' }, { label: '26班', value: '26班' }, { label: '27班', value: '27班' }, { label: '28班', value: '28班' }, { label: '29班', value: '29班' }, { label: '30班', value: '30班' }, { label: '31班', value: '31班' }, { label: '32班', value: '32班' }, { label: '33班', value: '33班' }, { label: '34班', value: '34班' }, { label: '35班', value: '35班' }, { label: '36班', value: '36班' }, { label: '37班', value: '37班' }, { label: '38班', value: '38班' }, { label: '39班', value: '39班' }, { label: '40班', value: '40班' }, { label: '41班', value: '41班' }, { label: '42班', value: '42班' }, { label: '43班', value: '43班' }, { label: '44班', value: '44班' }, { label: '45班', value: '45班' }, { label: '46班', value: '46班' }, { label: '47班', value: '47班' }, { label: '48班', value: '48班' }, { label: '49班', value: '49班' }, { label: '50班', value: '50班' } ], area: '', areaCode: '', showAreaSelect: false, areaList: [], searchSchool: '', school: '', schoolId: '', appId: '', chooseSchoolisShow: false } }, mounted () { let userInfo = sessionStorage.getItem('userInfo') this.userInfo = JSON.parse(userInfo); this.initYearArr() this.GetSysAreaList() }, methods: { // 获取验证码 getCode () { if (this.codeText != '获取验证码') return; if (!this.phone) { this.$toast('请输入手机号') return; } if (!this.checkPhone(this.phone)) { this.$toast('请输入正确的手机号') return; } this.$toast.loading({ message: '加载中', duration: 0, forbidClick: true }) this.yxAxios.post(`https://proxy.shunzhi.net/sxh/wx/getMsg?phone=${this.phone}`).then((res) => { this.$toast.clear() if (res.data.success) { let i = 60; codeInterval = setInterval(() => { if (i == 0) { this.codeText = `获取验证码`; clearInterval(codeInterval); return; } this.codeText = `重试(${i})`; i-- }, 1000) } else { this.$toast.fail(res.data.message) } }) }, // 获取手机号白名单信息 checkPhoneAndCode () { if (!this.phone) { this.$toast('请输入手机号') return; } if (!this.checkPhone(this.phone)) { this.$toast('请输入正确的手机号') return; } if (!this.code) { this.$toast('请输入验证码') return; } this.$toast.loading({ message: '加载中', duration: 0, forbidClick: true }) this.yxAxios.post(`${this.baseUrl}/prod/user/info/checkPhone`, { "code": this.code, "phone": this.phone, "travelerNum": this.travelerNum }).then((res) => { this.$toast.clear() if (res.data.code == 200) { this.$toast.success('认证成功') this.$emit('complete') } else { this.$toast.fail(res.data?.message) } }) }, // 初始化入学年份选项 initYearArr () { // 页面创建时执行 let year = new Date().getFullYear(), Month = new Date().getMonth() + 1, yearArr = []; if (Month > 8) { // 如果月份大于8,那么当年的学年的高考年份要+1,如果月份小于7,那么当前的年份就是今年高考的年份 year = year } for (let index = year; index > year - 6; index--) { yearArr.push({ value: index, label: index }) } this.yearArr = yearArr }, selectYearOver (value) { this.year = value.label; this.showYearSelect = false; }, handleYear () { if (!this.yearDisable) { this.showYearSelect = true; } }, selectUserTypeOver (value) { this.userType = value.label; this.userTypeVal = value.value; this.showUserTypeSelect = false; }, //班级选择 selectClassTypeOver (value) { this.classType = value.label; this.classTypeVal = value.value; this.showUserClassSelect = false; }, // 获取地区列表 GetSysAreaList () { this.yxAxios.get(`https://proxy.shunzhi.net/h5/MyVoluntary/GetSysAreaList?areaCode=33`).then((res) => { if (res.data.success) { let data = res.data.data; let obj = { province_list: { 330000: '浙江省' }, city_list: {}, county_list: {} }; if (data) { data.forEach((n, i) => { obj.city_list[n.area_code + '00'] = n.area_name; if (n.areaList.length > 0) { n.areaList.forEach((k, j) => { obj.county_list[k.area_code] = k.area_name; }) } }); this.areaList = obj; } } else { this.$toast.fail(res.message) } }) }, selectAreaOver (value) { let data = value; var city = data[1].code; city = city.substring(0, city.length - 2); // console.log(city) this.area = data[0].name + ',' + data[1].name + ',' + data[2].name; this.areaCode = [data[0].code, city, data[2].code]; this.quCode = data[2].code; this.school = '', this.schoolId = '', this.showAreaSelect = false }, submit () { if (!this.studentName) { this.$toast('请输入姓名'); } else if (!this.userType) { this.$toast('请选择阶段'); } else if (!this.classType) { this.$toast('请选择班级'); } else if (!this.year) { this.$toast('请选择入学年份'); } else if (!this.area) { this.$toast('请选择地区'); } else if (!this.school) { this.$toast('请选择学校'); } else { let postData = { contactsName: this.studentName, contactsMobile: this.userInfo?.phone, contactsType: 1, province: this.area.split(',')[0],//省份 city: this.area.split(',')[1],//城市 area: this.area.split(',')[2],//地区 schoolName: this.school,//学校名称 enrollYear: this.year,//入学年份 travelerType: this.userTypeVal,//1-小学 2-初中 3-高中 loginMobile: this.userInfo?.phone, className: this.classType //班级 } this.$toast.loading({ message: '加载中', duration: 0, forbidClick: true }) this.yxAxios.post(`${this.baseUrl}/prod/user/info/addStudent`, postData).then((res) => { this.$toast.clear() if (res.data.code == 200) { this.$toast.success('添加学生成功') this.$emit('complete') } else { this.$toast.fail(res.data?.message) } }) } }, //选择学校 chooseSchool () { // this.$router.push({name: 'chooseSchool'}) this.chooseSchoolisShow = true }, schoolData (val) { this.school = val.text; this.schoolId = val.id; }, checkPhone (phone) { if ((/^1[3456789]\d{9}$/.test(phone))) { return true } else { return false } }, }, destroyed () { clearInterval(codeInterval); }, } </script> <style lang="scss" scoped> .addchild_group { width: 638px; height: 836px; background: #ffffff; border-radius: 24px; position: relative; .bg { width: 100%; position: absolute; top: 0; left: 0; } .title { position: relative; width: 100%; padding-top: 70px; padding-bottom: 8px; text-align: center; font-size: 34px; font-weight: bold; color: #0857ff; } .des { position: relative; width: 100%; box-sizing: border-box; padding: 0 15%; text-align: center; font-size: 24px; color: #6596ff; } .content { width: 100%; box-sizing: border-box; padding: 0 40px; position: absolute; top: 236px; left: 0; .name { width: 558px; height: 50px; font-size: 28px; color: #000; padding-left: 20px; box-sizing: border-box; } .item { width: 558px; height: 72px; border-radius: 36px; background: #f7f7f7; box-sizing: border-box; font-size: 28px; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; p { color: #333333; &.nodata { color: #999999; } } img { width: 40px; } input { width: 100%; background: transparent; border: 0; color: #333333; padding: 0; &::-webkit-input-placeholder { color: #999999; } } .btn { width: 240px; height: 55px; float: right; font-size: 28px; background: linear-gradient(135deg, #cdf8cf 0%, #8af36f 100%); box-shadow: 0px 4px 8px 0px rgba(189, 189, 189, 0.5), 0px 8px 12px 0px rgba(89, 199, 171, 0.5); border-radius: 34px; border: transparent; color: #333333; } } .school_select { font-size: 28px; padding: 0 32px; margin-bottom: 28px; } .submit { width: 294px; height: 72px; border: 0; background: linear-gradient(135deg, #99c2ff 0%, #1f59ff 100%); box-shadow: 0px 4px 8px 0px rgba(189, 189, 189, 0.5), 0px 8px 12px 0px rgba(87, 137, 255, 0.5); border-radius: 34px; font-size: 34px; color: #ffffff; margin: 0 auto; display: block; } } .child_content { position: relative; margin-top: 40px; .child_box { height: 500px; overflow: auto; padding-left: 100px; .child_item { position: relative; margin-bottom: 50px; p { font-size: 28px; padding: 8px 0; span { display: inline-block; width: 140px; margin-right: 28px; color: #999; } } .checkbox { position: absolute; top: 115px; right: 20px; } } } .submit { width: 438px; height: 78px; background: #3385ff; border-radius: 37px; border-radius: 39px; border: 0; font-size: 34px; color: #ffffff; margin: 0 auto; display: block; } } .phone_content { width: 100%; position: absolute; top: 180px; left: 0; box-sizing: border-box; padding: 40px; .item { border-bottom: 1px solid #e2e2e2; margin-bottom: 30px; } .phone_title { font-size: 34px; font-weight: bold; margin-bottom: 28px; } .flex { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .code { border: 0; background: transparent; font-size: 28px; margin-bottom: 32px; width: 100%; } .phone { margin: 0; } .getcode { flex-shrink: 0; color: #5789ff; font-size: 28px; padding: 10px; } .submit { width: 438px; height: 78px; background: #3385ff; border-radius: 37px; border-radius: 39px; border: 0; font-size: 34px; color: #ffffff; margin: 0 auto; margin-top: 120px; display: block; } } } /deep/.van-search { background: transparent; padding: 0; width: 100%; } /deep/.van-search__content { padding: 0; } .schoolBoxF { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; background-color: #fff; } </style>