lex
/
orchestra-app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
							<!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 label="学校全称" v-model="forms.name" :rules="[{ required: true, message: '请填写学校全称' }]" name="name"
          placeholder="请填写学校全称" maxlength="50">
        </van-field>

        <van-field 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 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" :color="!(forms.schoolNature === 'PUBLIC') ? '#EAEAEA' : '#64A9FF'"
                :text-color="!(forms.schoolNature === 'PUBLIC') ? '#AAA' : '#FFF'" class="radioSection" round>
                <van-radio class="radioItem" name="PUBLIC"></van-radio>公办
              </van-tag>
              <van-tag size="large" type="primary" :color="!(forms.schoolNature === 'PRIVATE') ? '#EAEAEA' : '#64A9FF'"
                :text-color="!(forms.schoolNature === 'PRIVATE') ? '#AAA' : '#FFF'" class="radioSection" round>
                <van-radio class="radioItem" name="PRIVATE"></van-radio>民办
              </van-tag>
            </van-radio-group>
          </template>
        </van-field>

        <van-field 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"
                :color="!(forms.schoolSystem === 'fiveYearSystem') ? '#EAEAEA' : '#64A9FF'"
                :text-color="!(forms.schoolSystem === 'fiveYearSystem') ? '#AAA' : '#FFF'" class="radioSection" round>
                <van-radio class="radioItem" name="fiveYearSystem"></van-radio>五年制
              </van-tag>
              <van-tag size="large" type="primary"
                :color="!(forms.schoolSystem === 'sixYearSystem') ? '#EAEAEA' : '#64A9FF'"
                :text-color="!(forms.schoolSystem === 'sixYearSystem') ? '#AAA' : '#FFF'" class="radioSection" round>
                <van-radio class="radioItem" name="sixYearSystem"></van-radio>六年制
              </van-tag>
            </van-radio-group>
          </template>
        </van-field>

        <van-field label="邮箱地址" v-model="forms.email" :rules="[{validator: validatorEmail}]" name="email"
          placeholder="(非必填)请输入学校邮箱地址">
        </van-field>
      </van-cell-group>

      <div class="cell_title">主管领导</div>
      <van-cell-group inset class="cell-group">
        <van-field label="主管领导姓名" v-model="forms.emergencyContact" maxlength="5"
          :rules="[{ required: true, message: '请输入主管领导姓名' }]" :maxlength="5" name="emergencyContact"
          placeholder="请输入真实姓名">
        </van-field>

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

        <van-field 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 label="管理老师姓名" v-model="forms.educationalAdministrationUsername" maxlength="5"
          :rules="[{ required: true, message: '请输入管理老师姓名' }]" name="educationalAdministrationUsername"
          placeholder="请输入管理老师真实姓名">
        </van-field>

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

        <van-field 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: 100%;background-color: transparent;transform: translateY(-60%);" :close-on-click-overlay="false">
      <div class="submit-container">
        <p class="submit-title">提交成功</p>
        <p class="submit-tips">感谢您的参与!</p>
        <div @click="onLinkUrl" class="submit-btn"></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="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: /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-7]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/,
          emailPattern: /^\w+@([\da-z\.-]+)\.([a-z]+|[\u2E80-\u9FFF]+)$/,
          columns: [],
          pickerType: null, // 下拉类型
          forms: {
            name: null,
            regionCode: null,
            cityCode: null,
            cityCodeName: '',
            provinceCode: null,
            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()
        }
        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 || []

          var res = await axios.get('/api-school/open/sysArea/queryAllProvince')
          if (res.data.code === 200) {
            this.columns = res.data.data || []
          }
        } catch {
          vant.showDialog({
            message: '信息获取失败，请联系老师',
            theme: 'round-button',
            confirmButtonColor: '#64A9FF'
          })
        }
        this.setLoading(false)
      },
      methods: {
        validatorEmail(val) {
          console.log(val)
          if (val && !this.emailPattern.test(val)) {
            return '输入邮箱地址有误'
          }
        },
        onLinkUrl() {
          this.submitStatus = false
          window.location.href = window.location.origin + '/orchestra-student/#/download?type=manage'
        },
        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
          const selectedFirst = val.selectedOptions[0]
          this.forms.provinceCode = selectedFirst.code
          this.forms.cityCodeName = selectedFirst.name + '/' + selectedOptions.name
          const selectTwo = val.selectedOptions[2]
          if (selectTwo) {
            this.forms.regionCode = selectTwo.code
            this.forms.cityCodeName += '/' + selectTwo.name
          }


          this.showPicker = false
        }
      }
    })
    app.use(vant)
    app.mount('#app')
  </script>
</body>

</html>