lex
/
orchestra-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
							<!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>