lex
/
orchestra-app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
							<!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/schoolRegister.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>
    </div>
    <van-form validate-first scroll-to-error @submit="onSubmit" ref='form' class="form">

      <div class="cell_title">学校信息</div>
      <van-cell-group inset class="cell-group">
        <van-field required label="学校全称" v-model="forms.name" :rules="[{ required: true, message: '请填写学校全称' }]"
          name="name" placeholder="请填写学校全称" maxlength="50">
        </van-field>

        <van-field required label="所在城市" v-model="forms.cityCodeName" readonly name="cityCodeName" @click="onSelectCity"
          :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="办学性质" name="schoolNature" :rules="[{ required: true, message: '请选择办学性质' }]">
          <template #input>
            <van-radio-group checked-color="#64A9FF" v-model="forms.schoolNature" direction="horizontal">
              <van-tag size="large" type="primary" :plain="!(forms.schoolNature === 'PUBLIC')" color="#64A9FF"
                class="radioSection">
                <van-radio class="radioItem" name="PUBLIC"></van-radio>公办
              </van-tag>
              <van-tag size="large" type="primary" :plain="!(forms.schoolNature === 'PRIVATE')" color="#64A9FF"
                class="radioSection">
                <van-radio class="radioItem" name="PRIVATE"></van-radio>民办
              </van-tag>
            </van-radio-group>
          </template>
        </van-field>

        <van-field required label="学年制" name="schoolSystem" :rules="[{ required: true, message: '请选择学年制' }]">
          <template #input>
            <van-radio-group checked-color="#64A9FF" v-model="forms.schoolSystem" direction="horizontal">
              <van-tag size="large" type="primary" :plain="!(forms.schoolSystem === 'fiveYearSystem')" color="#64A9FF"
                class="radioSection">
                <van-radio class="radioItem" name="fiveYearSystem"></van-radio>六年制
              </van-tag>
              <van-tag size="large" type="primary" :plain="!(forms.schoolSystem === 'sixYearSystem')" color="#64A9FF"
                class="radioSection">
                <van-radio class="radioItem" name="sixYearSystem"></van-radio>五年制
              </van-tag>
            </van-radio-group>
          </template>
        </van-field>

        <van-field required label="邮箱地址" v-model="forms.email" :rules="[{ required: true, message: '请输入学校邮箱地址' }]"
          name="email" placeholder="请输入学校邮箱地址">
        </van-field>
      </van-cell-group>

      <div class="cell_title">负责人</div>
      <van-cell-group inset class="cell-group">
        <van-field required label="负责人姓名" v-model="forms.emergencyContact" maxlength="20"
          :rules="[{ required: true, message: '请输入负责人姓名' }]" :maxlength="20" name="emergencyContact"
          placeholder="请输入负责人姓名">
        </van-field>

        <van-field required type="tel" v-model="forms.emergencyContactPhone" maxlength="11" minlength="11"
          label="负责人手机号" name="emergencyContactPhone"
          :rules="[{ required: true, message: '请输入负责人手机号' },{ pattern, message: '输入负责人手机号有误' }]"
          placeholder="请输入负责人手机号码">
        </van-field>

        <van-field required label="在校职位" v-model="forms.emergencyContactPosition" maxlength="20"
          :rules="[{ required: true, message: '请输入负责人在校职位' }]" name="emergencyContactPosition" placeholder="请输入负责人在校职位">
        </van-field>
      </van-cell-group>


      <div class="cell_title">乐团管理老师</div>
      <van-cell-group inset class="cell-group">
        <van-field required label="管理老师姓名" v-model="forms.educationalAdministrationUsername" maxlength="20"
          :rules="[{ required: true, message: '请输入管理老师姓名' }]" name="educationalAdministrationUsername"
          placeholder="请输入管理老师姓名">
        </van-field>

        <van-field required type="tel" v-model="forms.educationalAdministrationPhone" maxlength="11" minlength="11"
          label="管理老师手机号" name="educationalAdministrationPhone"
          :rules="[{ required: true, message: '请输入管理老师手机号' },{ pattern, message: '输入管理老师手机号有误' }]"
          placeholder="请输入管理老师手机号">
        </van-field>

        <van-field required label="在校职位" v-model="forms.educationalAdministrationPosition" maxlength="20"
          :rules="[{ required: true, message: '请输入乐团管理老师在校职位' }]" name="educationalAdministrationPosition"
          placeholder="请输入乐团管理老师在校职位">
        </van-field>
      </van-cell-group>

      <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="submit-container">
        <img class="icon-close" src="./images/initiation/icon-close.png" @click="submitStatus = false" />
        <img src="./images/initiation/popup-submit.png" class="submit-img" />
        <p class="submit-tips">提交成功，感谢您的参与！</p>
        <van-button type="primary" color="#64A9FF" block round @click="submitStatus = false">确认</van-button>
      </div>
    </van-popup>
  </div>

  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="./js/vue.global.min.js"></script>
  <script src="./js/vant.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/umi-request@1.4.0/dist/index.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 classList = []
    for (var i = 1; i <= 40; i++) {
      classList.push({ text: i + '班', value: i })
    }
    var app = Vue.createApp({
      data() {
        return {
          showPicker: false,
          submitStatus: false,
          pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
          columns: [],
          pickerType: null, // 下拉类型
          forms: {
            name: null,
            cityCode: null,
            cityCodeName: '',
            schoolSystem: null,
            schoolNature: null,
            email: null,
            educationalAdministrationUsername: null,
            educationalAdministrationPosition: null,
            educationalAdministrationPhone: null,
            emergencyContact: null,
            emergencyContactPhone: null,
            emergencyContactPosition: null
          },
          btnLoading: false,
          checkPhone: false
        }
      },
      async mounted() {
        if (document.querySelector('#m_loading')) {
          document.querySelector('#m_loading').remove()
        }
        if (!this.orchestraId) {
          vant.showToast('信息获取失败，请联系老师')
        }
        try {
          this.setLoading(true)
          console.log(areas)
          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 || []
        } catch {
          vant.showDialog({
            message: '信息获取失败，请联系老师',
            theme: 'round-button',
            confirmButtonColor: '#64A9FF'
          })
        }
        this.setLoading(false)
      },
      methods: {
        async onSubmit() {
          this.btnLoading = true
          try {
            var forms = this.forms
            var res = await axios.post('/api-school/open/school/save', {
              ...forms
            })
            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>