|
@@ -1,334 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
-
|
|
|
-<head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
- <meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
- <meta name="format-detection" content="telephone=no">
|
|
|
- <meta name="mobile-web-app-capable" content="yes">
|
|
|
- <meta name="msapplication-tap-highlight" content="no">
|
|
|
- <meta name="fragment" content="!">
|
|
|
- <meta name="viewport"
|
|
|
- content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, viewport-fit=cover">
|
|
|
- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
|
- <meta http-equiv="Pragma" content="no-cache" />
|
|
|
- <meta http-equiv="Expires" content="0" />
|
|
|
- <meta http-equiv="Cache" content="no-cache">
|
|
|
- <meta name="description" content="">
|
|
|
-
|
|
|
- <link rel="icon" href="../favicon.ico">
|
|
|
- <title>乐团伴学指导注册</title>
|
|
|
- <!-- 引入样式文件 -->
|
|
|
- <link rel="stylesheet" href="./js/vant-index.css" />
|
|
|
- <link rel="stylesheet" href="./css/companionTeacher.css">
|
|
|
- <script src="./js/flexible.js"></script>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
- <style>
|
|
|
- </style>
|
|
|
- <div id="m_loading" class="m-toast m-toast--middle m-toast--loading" style="z-index: 2001;">
|
|
|
- <div class="m-loading m-loading--circular m-toast__loading"><span
|
|
|
- class="m-loading__spinner m-loading__spinner--circular"><svg viewBox="25 25 50 50" class="m-loading__circular">
|
|
|
- <circle cx="50" cy="50" r="20" fill="none"></circle>
|
|
|
- </svg></span></div>
|
|
|
- <div class="m-toast__text">加载中...</div>
|
|
|
- </div>
|
|
|
- <div id="app">
|
|
|
- <div class="title">
|
|
|
- <!-- 欢迎使用管乐团双师训练系统
|
|
|
- <p class="tips">办乐团就用管乐团!</p> -->
|
|
|
- <p class="tips">
|
|
|
- <img src="./images/manageTeacher/school-logo.png" />
|
|
|
- <span v-html="decodeURI(name)"></span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <van-form validate-first scroll-to-error @submit="onSubmit" ref='form' class="form">
|
|
|
- <van-cell-group inset class="cell-group">
|
|
|
- <van-field required label="真实姓名" v-model="forms.realName" :rules="[{ required: true, message: '请填写真实姓名' }]"
|
|
|
- name="realName" placeholder="请填写真实姓名" maxlength="50">
|
|
|
- </van-field>
|
|
|
-
|
|
|
- <van-field required label="手机号码" v-model="forms.phone" type="tel" maxlength="11" minlength="11"
|
|
|
- :rules="[{ required: true, message: '请输入手机号码' },{ pattern, message: '输入手机号有误' }]" name="phone"
|
|
|
- placeholder="请输入学校手机号码">
|
|
|
- </van-field>
|
|
|
- <div class="phoneTips">
|
|
|
- <van-icon name="warning" size="16" />
|
|
|
- 提示:手机号码将成为您管乐团管理端登录账
|
|
|
- </div>
|
|
|
-
|
|
|
- <van-field required label="身份证号码" v-model="forms.idCardNo" :rules="[
|
|
|
- { required: true, message: '请输入身份证号' },
|
|
|
- {
|
|
|
- pattern:
|
|
|
- /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
|
|
|
- message: '请输入正确的身份证号'
|
|
|
- }
|
|
|
- ]" name="idCardNo" placeholder="请输入身份证号码">
|
|
|
- </van-field>
|
|
|
-
|
|
|
- <van-field required label="性别" name="gender" :rules="[{ required: true, message: '请选择性别' }]">
|
|
|
- <template #input>
|
|
|
- <van-radio-group checked-color="#FF8057" v-model="forms.gender" direction="horizontal">
|
|
|
- <van-tag size="large" type="primary" :plain="!(forms.gender === 1)" color="#FF8057" class="radioSection"
|
|
|
- round>
|
|
|
- <van-radio class="radioItem" :name="1"></van-radio>男
|
|
|
- </van-tag>
|
|
|
- <van-tag size="large" type="primary" :plain="!(forms.gender === 0)" color="#FF8057" class="radioSection"
|
|
|
- round>
|
|
|
- <van-radio class="radioItem" :name="0"></van-radio>女
|
|
|
- </van-tag>
|
|
|
- </van-radio-group>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
-
|
|
|
- <van-field required label="所在城市" v-model="forms.cityCodeName" readonly name="cityCodeName"
|
|
|
- @click="showPicker = true" :rules="[{ required: true, message: '请选择所在城市', trigger: 'onChange' }]"
|
|
|
- placeholder="请选择所在城市">
|
|
|
- <template #right-icon>
|
|
|
- <van-icon name="arrow" :color="checkPhone ? '#aaa' : '#323233'" size="16"></van-icon>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
-
|
|
|
- <van-field required label="声部(可多选)" v-model="forms.showSubjectIds" readonly name="showSubjectIds"
|
|
|
- @click="showSubject = true" :rules="[{ required: true, message: '请选择声部', trigger: 'onChange' }]"
|
|
|
- placeholder="请选择声部">
|
|
|
- <template #right-icon>
|
|
|
- <van-icon name="arrow" :color="checkPhone ? '#aaa' : '#323233'" size="16"></van-icon>
|
|
|
- </template>
|
|
|
- <template #input>
|
|
|
- <div class="subjectPlaceholder" style="color:#c8c9cc" v-if="forms.subjectIds.length <= 0">请选择声部</div>
|
|
|
- <div v-else>
|
|
|
- <van-tag closeable size="medium" color="#FF8057" v-for="(item, index) in selectSubjects"
|
|
|
- @close="onSubjectRemove(item, index)">{{ item.text }}</van-tag>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- <van-field required label="验证码" v-model="forms.smsValidCode" name="smsValidCode"
|
|
|
- :rules="[{ required: true, message: '请输入验证码', trigger: 'onChange' }]" placeholder="请输入验证码">
|
|
|
- <template #button>
|
|
|
- <van-button type="primary" round size="small" color="#ff8057">发送验证码</van-button>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- </van-cell-group>
|
|
|
-
|
|
|
- <div class="protocol">
|
|
|
- <van-checkbox v-model="checked" icon-size="16" style="margin-right: 6px" checked-color="#FF8057"></van-checkbox>
|
|
|
- <span @click="() => { checked = !checked }">请认真阅读并勾选</span><span class="c">《乐团伴学指导注册协议》</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <van-button size="large" block round class="btn-submit" color="#FF8057" :loading="btnLoading"
|
|
|
- native-type="submit">完成</van-button>
|
|
|
- </van-form>
|
|
|
-
|
|
|
- <van-popup v-model:show="showPicker" position="bottom" round>
|
|
|
- <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm"
|
|
|
- :columns-field-names="{ text: 'name', value: 'code', children: 'areas' }" />
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <van-popup v-model:show="showSubject" position="bottom" round>
|
|
|
- <van-picker show-toolbar :columns="columnSubject" @cancel="showSubject = false" @confirm="onConfirmSubject" />
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <van-popup v-model:show="submitStatus" round style="width: 75%" :close-on-click-overlay="false">
|
|
|
- <div class="stautsS">
|
|
|
- <img class="icon-close" src="./images/initiation/icon-close.png" @click="submitStatus = false" />
|
|
|
- <img src="./images/manageTeacher/top-banner1.png" class="submit-img" />
|
|
|
- <div class="submit-container">
|
|
|
- <p class="submit-title">恭喜您已成功登记为</p>
|
|
|
- <p class="submit-o">{{ decodeURI(name) }} <span>【伴学指导】</span></p>
|
|
|
- <p class="submit-tips">请下载管乐团老师端APP进行授课</p>
|
|
|
- <van-button type="primary" color="#FF8057" block round @click="submitStatus = false">立即下载</van-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </van-popup>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
|
|
- <script src="./js/vue.global.min.js"></script>
|
|
|
- <script src="./js/vant.min.js"></script>
|
|
|
- <script src="./js/axios.js"></script>
|
|
|
- <script type="text/javascript" src="./js/utils.js"></script>
|
|
|
- <script type="text/javascript" src="./js/area.js"></script>
|
|
|
- <script>
|
|
|
- var app = Vue.createApp({
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showPicker: false,
|
|
|
- showSubject: false,
|
|
|
- submitStatus: false,
|
|
|
- id: getQueryVariable('id'),
|
|
|
- name: getQueryVariable('name'),
|
|
|
- pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
|
|
|
- columns: [],
|
|
|
- pickerType: null, // 下拉类型
|
|
|
- selectSubjects: [], // 选中的声部
|
|
|
- forms: {
|
|
|
- realName: '',
|
|
|
- phone: null,
|
|
|
- gender: 1,
|
|
|
- idCardNo: null,
|
|
|
- cityCode: null,
|
|
|
- cityCodeName: '',
|
|
|
- provinceCode: null,
|
|
|
- showSubjectIds: '',
|
|
|
- subjectIds: [],
|
|
|
- smsValidCode: '',
|
|
|
- },
|
|
|
- btnLoading: false,
|
|
|
- checkPhone: false,
|
|
|
- checked: true,
|
|
|
- columnSubject: []
|
|
|
- }
|
|
|
- },
|
|
|
- async mounted() {
|
|
|
- if (document.querySelector('#m_loading')) {
|
|
|
- document.querySelector('#m_loading').remove()
|
|
|
- }
|
|
|
- if (!this.id) {
|
|
|
- vant.showToast('信息获取失败,请联系老师')
|
|
|
- }
|
|
|
- try {
|
|
|
- this.setLoading(true)
|
|
|
- const tempareas = []
|
|
|
- areas.forEach(item => {
|
|
|
- const temp = {
|
|
|
- name: item.name,
|
|
|
- code: item.code,
|
|
|
- areas: []
|
|
|
- }
|
|
|
- if (item.areas && item.areas.length > 0) {
|
|
|
- item.areas.forEach(child => {
|
|
|
- temp.areas.push({
|
|
|
- name: child.name,
|
|
|
- code: child.code,
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- tempareas.push(temp)
|
|
|
- })
|
|
|
- this.columns = tempareas || []
|
|
|
-
|
|
|
- var res = await axios.post('/api-school/open/subject/page', {
|
|
|
- page: 1,
|
|
|
- rows: 50
|
|
|
- })
|
|
|
- if (res.data.code === 200) {
|
|
|
- var rows = res.data.data.rows || []
|
|
|
- var tempSubjects = []
|
|
|
- rows.forEach(item => {
|
|
|
- tempSubjects.push({
|
|
|
- text: item.name,
|
|
|
- value: item.id
|
|
|
- })
|
|
|
- })
|
|
|
- this.columnSubject = tempSubjects
|
|
|
- } else {
|
|
|
- vant.showToast(res.data.message)
|
|
|
- }
|
|
|
- } catch {
|
|
|
- vant.showDialog({
|
|
|
- message: '信息获取失败,请联系老师',
|
|
|
- theme: 'round-button',
|
|
|
- confirmButtonColor: '#64A9FF'
|
|
|
- })
|
|
|
- }
|
|
|
- this.setLoading(false)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async onSubmit() {
|
|
|
- if (!this.checked) {
|
|
|
- vant.showToast('请阅读并同意协议')
|
|
|
- return
|
|
|
- }
|
|
|
- this.btnLoading = true
|
|
|
- try {
|
|
|
- var forms = this.forms
|
|
|
- var res = await axios.post('/api-school/open/schoolTeacherStudent/registerTeacher', {
|
|
|
- ...forms,
|
|
|
- subjectIds: forms.subjectIds.join(','),
|
|
|
- smsValidCode: 666666,
|
|
|
- schoolId: this.id,
|
|
|
- })
|
|
|
- if (res.data.code === 200) {
|
|
|
- this.submitStatus = true
|
|
|
- } else {
|
|
|
- vant.showToast(res.data.message)
|
|
|
- }
|
|
|
- } catch {
|
|
|
- vant.showToast('保存失败,请重试')
|
|
|
- }
|
|
|
- this.btnLoading = false
|
|
|
- },
|
|
|
- setLoading(status) {
|
|
|
- if (status) {
|
|
|
- vant.showLoadingToast({
|
|
|
- duration: 0, // 持续展示 toast
|
|
|
- message: '加载中...',
|
|
|
- forbidClick: true,
|
|
|
- loadingType: 'spinner',
|
|
|
- })
|
|
|
- } else {
|
|
|
- vant.closeToast()
|
|
|
- }
|
|
|
- },
|
|
|
- onConfirm(val) {
|
|
|
- const selectedOptions = val.selectedOptions[1]
|
|
|
- this.forms.cityCode = selectedOptions.code
|
|
|
- this.forms.cityCodeName = selectedOptions.name
|
|
|
- const selectedFirst = val.selectedOptions[0]
|
|
|
- this.forms.provinceCode = selectedFirst.code
|
|
|
- this.showPicker = false
|
|
|
- },
|
|
|
- onSubjectRemove(item, index) {
|
|
|
- vant.showDialog({
|
|
|
- title: '提示',
|
|
|
- message: '您是否删除选中的声部',
|
|
|
- confirmButtonColor: '#ff8057',
|
|
|
- showCancelButton: true,
|
|
|
- }).then(() => {
|
|
|
- this.selectSubjects.splice(index, 1)
|
|
|
- var tempSubjectIds = []
|
|
|
- this.selectSubjects.forEach(subject => {
|
|
|
- tempSubjectIds.push(subject.value)
|
|
|
- })
|
|
|
- this.forms.subjectIds = tempSubjectIds
|
|
|
- this.forms.showSubjectIds = tempSubjectIds.join(',')
|
|
|
- })
|
|
|
- },
|
|
|
- // 选择声部
|
|
|
- onConfirmSubject(val) {
|
|
|
- // console.log(val, 'val', val.selectedOptions[0])
|
|
|
- var selected = val.selectedOptions[0]
|
|
|
- var isCheck = false
|
|
|
- this.selectSubjects.forEach(subject => {
|
|
|
- if (subject.value === selected.value) {
|
|
|
- isCheck = true
|
|
|
- }
|
|
|
- })
|
|
|
- // 判断是否有选择一样的数据
|
|
|
- if (isCheck) {
|
|
|
- this.showSubject = false
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- this.selectSubjects.push(val.selectedOptions[0])
|
|
|
- var tempSubjectIds = []
|
|
|
- this.selectSubjects.forEach(subject => {
|
|
|
- tempSubjectIds.push(subject.value)
|
|
|
- })
|
|
|
- this.forms.subjectIds = tempSubjectIds
|
|
|
- this.forms.showSubjectIds = tempSubjectIds.join(',')
|
|
|
- this.showSubject = false
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- app.use(vant)
|
|
|
- app.mount('#app')
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-
|
|
|
-</html>
|