lex
/
orchestra-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!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/manageTeacher.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>

        <div class="phoneTips">
          <van-icon name="warning" size="16" />
          提示：手机号码将成为您管乐团管理端登录账
        </div>
        <van-field required label="手机号码" v-model="forms.phone" :rules="[{ required: true, message: '请输入学校手机号码' }]"
          name="phone" placeholder="请输入学校手机号码">
        </van-field>

        <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="#64A9FF" v-model="forms.gender" direction="horizontal">
              <van-tag size="large" type="primary" :plain="!(forms.gender === 1)" color="#64A9FF" class="radioSection">
                <van-radio class="radioItem" :name="1"></van-radio>男
              </van-tag>
              <van-tag size="large" type="primary" :plain="!(forms.gender === 0)" color="#64A9FF" class="radioSection">
                <van-radio class="radioItem" :name="0"></van-radio>女
              </van-tag>
            </van-radio-group>
          </template>
        </van-field>
      </van-cell-group>

      <div class="protocol">
        <van-checkbox v-model="checked" icon-size="16" style="margin-right: 6px"></van-checkbox>
        <span @click="() => { checked = !checked }">请认真阅读并勾选</span><span class="c">《乐团伴学老师注册协议》</span>
      </div>

      <van-button size="large" block round class="btn-submit" color="#64A9FF" :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="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-banner.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="#64A9FF" 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>
    var app = Vue.createApp({
      data() {
        return {
          showPicker: false,
          submitStatus: false,
          id: getQueryVariable('id'),
          name: getQueryVariable('name'),
          pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
          columns: [],
          pickerType: null, // 下拉类型
          forms: {
            realName: '',
            phone: null,
            gender: 1,
            idCardNo: null,
          },
          btnLoading: false,
          checkPhone: false,
          checked: true
        }
      },
      async mounted() {
        if (document.querySelector('#m_loading')) {
          document.querySelector('#m_loading').remove()
        }
        if (!this.id) {
          vant.showToast('信息获取失败，请联系老师')
        }
        try {
          this.setLoading(true)
        } 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/schoolStaff/registerTeacher', {
              ...forms,
              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()
          }
        },
        onSelectCity() {
          this.showPicker = true
        },
        onConfirm(val) {
          const selectedOptions = val.selectedOptions[1]
          this.forms.cityCode = selectedOptions.code
          this.forms.cityCodeName = selectedOptions.name
          this.showPicker = false
        }
      }
    })
    app.use(vant)
    app.mount('#app')
  </script>
</body>

</html>