schoolRegister.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <meta name="format-detection" content="telephone=no">
  9. <meta name="mobile-web-app-capable" content="yes">
  10. <meta name="msapplication-tap-highlight" content="no">
  11. <meta name="fragment" content="!">
  12. <meta name="viewport"
  13. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, viewport-fit=cover">
  14. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  15. <meta http-equiv="Pragma" content="no-cache" />
  16. <meta http-equiv="Expires" content="0" />
  17. <meta http-equiv="Cache" content="no-cache">
  18. <meta name="description" content="">
  19. <link rel="icon" href="../favicon.ico">
  20. <title>管乐团入驻学校登记</title>
  21. <!-- 引入样式文件 -->
  22. <link rel="stylesheet" href="./js/vant-index.css" />
  23. <link rel="stylesheet" href="./css/schoolRegister.css">
  24. <script src="./js/flexible.js"></script>
  25. </head>
  26. <body>
  27. <style>
  28. </style>
  29. <div id="m_loading" class="m-toast m-toast--middle m-toast--loading" style="z-index: 2001;">
  30. <div class="m-loading m-loading--circular m-toast__loading"><span
  31. class="m-loading__spinner m-loading__spinner--circular"><svg viewBox="25 25 50 50" class="m-loading__circular">
  32. <circle cx="50" cy="50" r="20" fill="none"></circle>
  33. </svg></span></div>
  34. <div class="m-toast__text">加载中...</div>
  35. </div>
  36. <div id="app">
  37. <div class="title">
  38. 欢迎使用管乐团双师训练系统
  39. <p class="tips">办乐团就用管乐团!</p>
  40. </div>
  41. <van-form validate-first scroll-to-error @submit="onSubmit" ref='form' class="form">
  42. <div class="cell_title">学校信息</div>
  43. <van-cell-group inset class="cell-group">
  44. <van-field required label="学校全称" v-model="forms.name" :rules="[{ required: true, message: '请填写学校全称' }]"
  45. name="name" placeholder="请填写学校全称" maxlength="50">
  46. </van-field>
  47. <van-field required label="所在城市" v-model="forms.cityCodeName" readonly name="cityCodeName" @click="onSelectCity"
  48. :rules="[{ required: true, message: '请选择所在城市', trigger: 'onChange' }]" placeholder="请选择所在城市">
  49. <template #right-icon>
  50. <van-icon name="arrow" :color="checkPhone ? '#aaa' : '#323233'" size="16"></van-icon>
  51. </template>
  52. </van-field>
  53. <van-field required label="办学性质" name="schoolNature" :rules="[{ required: true, message: '请选择办学性质' }]">
  54. <template #input>
  55. <van-radio-group checked-color="#64A9FF" v-model="forms.schoolNature" direction="horizontal">
  56. <van-tag size="large" type="primary" :plain="!(forms.schoolNature === 'PUBLIC')" color="#64A9FF"
  57. class="radioSection">
  58. <van-radio class="radioItem" name="PUBLIC"></van-radio>公办
  59. </van-tag>
  60. <van-tag size="large" type="primary" :plain="!(forms.schoolNature === 'PRIVATE')" color="#64A9FF"
  61. class="radioSection">
  62. <van-radio class="radioItem" name="PRIVATE"></van-radio>民办
  63. </van-tag>
  64. </van-radio-group>
  65. </template>
  66. </van-field>
  67. <van-field required label="学年制" name="schoolSystem" :rules="[{ required: true, message: '请选择学年制' }]">
  68. <template #input>
  69. <van-radio-group checked-color="#64A9FF" v-model="forms.schoolSystem" direction="horizontal">
  70. <van-tag size="large" type="primary" :plain="!(forms.schoolSystem === 'fiveYearSystem')" color="#64A9FF"
  71. class="radioSection">
  72. <van-radio class="radioItem" name="fiveYearSystem"></van-radio>五年制
  73. </van-tag>
  74. <van-tag size="large" type="primary" :plain="!(forms.schoolSystem === 'sixYearSystem')" color="#64A9FF"
  75. class="radioSection">
  76. <van-radio class="radioItem" name="sixYearSystem"></van-radio>六年制
  77. </van-tag>
  78. </van-radio-group>
  79. </template>
  80. </van-field>
  81. <van-field required label="邮箱地址" v-model="forms.email"
  82. :rules="[{ required: true, message: '请输入学校邮箱地址' }, { pattern: emailPattern, message: '输入邮箱地址有误' }]"
  83. name="email" placeholder="请输入学校邮箱地址">
  84. </van-field>
  85. </van-cell-group>
  86. <div class="cell_title">负责人</div>
  87. <van-cell-group inset class="cell-group">
  88. <van-field required label="负责人姓名" v-model="forms.emergencyContact" maxlength="20"
  89. :rules="[{ required: true, message: '请输入负责人姓名' }]" :maxlength="20" name="emergencyContact"
  90. placeholder="请输入负责人姓名">
  91. </van-field>
  92. <van-field required type="tel" v-model="forms.emergencyContactPhone" maxlength="11" minlength="11"
  93. label="负责人手机号" name="emergencyContactPhone"
  94. :rules="[{ required: true, message: '请输入负责人手机号' },{ pattern, message: '输入负责人手机号有误' }]"
  95. placeholder="请输入负责人手机号码">
  96. </van-field>
  97. <van-field required label="在校职位" v-model="forms.emergencyContactPosition" maxlength="20"
  98. :rules="[{ required: true, message: '请输入负责人在校职位' }]" name="emergencyContactPosition" placeholder="请输入负责人在校职位">
  99. </van-field>
  100. </van-cell-group>
  101. <div class="cell_title">乐团管理老师</div>
  102. <van-cell-group inset class="cell-group">
  103. <van-field required label="管理老师姓名" v-model="forms.educationalAdministrationUsername" maxlength="20"
  104. :rules="[{ required: true, message: '请输入管理老师姓名' }]" name="educationalAdministrationUsername"
  105. placeholder="请输入管理老师姓名">
  106. </van-field>
  107. <van-field required type="tel" v-model="forms.educationalAdministrationPhone" maxlength="11" minlength="11"
  108. label="管理老师手机号" name="educationalAdministrationPhone"
  109. :rules="[{ required: true, message: '请输入管理老师手机号' },{ pattern, message: '输入管理老师手机号有误' }]"
  110. placeholder="请输入管理老师手机号">
  111. </van-field>
  112. <van-field required label="在校职位" v-model="forms.educationalAdministrationPosition" maxlength="20"
  113. :rules="[{ required: true, message: '请输入乐团管理老师在校职位' }]" name="educationalAdministrationPosition"
  114. placeholder="请输入乐团管理老师在校职位">
  115. </van-field>
  116. </van-cell-group>
  117. <van-button size="large" block round class="btn-submit" color="#64A9FF" :loading="btnLoading"
  118. native-type="submit">完成</van-button>
  119. </van-form>
  120. <van-popup v-model:show="showPicker" position="bottom" round>
  121. <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm"
  122. :columns-field-names="{ text: 'name', value: 'code', children: 'areas' }" />
  123. </van-popup>
  124. <van-popup v-model:show="submitStatus" round style="width: 75%" :close-on-click-overlay="false">
  125. <div class="submit-container">
  126. <!-- <img class="icon-close" src="./images/initiation/icon-close.png" @click="onLinkUrl" /> -->
  127. <img src="./images/initiation/popup-submit.png" class="submit-img" />
  128. <p class="submit-tips">提交成功,感谢您的参与!</p>
  129. <van-button type="primary" color="#64A9FF" block round @click="onLinkUrl">确认</van-button>
  130. </div>
  131. </van-popup>
  132. </div>
  133. <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  134. <script src="./js/vue.global.min.js"></script>
  135. <script src="./js/vant.min.js"></script>
  136. <!-- <script src="https://cdn.jsdelivr.net/npm/umi-request@1.4.0/dist/index.min.js"></script> -->
  137. <script src="./js/axios.js"></script>
  138. <script type="text/javascript" src="./js/utils.js"></script>
  139. <!-- <script type="text/javascript" src="./js/area.js"></script> -->
  140. <script>
  141. // 乐团交付,乐团停止或关闭,有新的交付团;则不允许报名
  142. var classList = []
  143. for (var i = 1; i <= 40; i++) {
  144. classList.push({ text: i + '班', value: i })
  145. }
  146. var app = Vue.createApp({
  147. data() {
  148. return {
  149. showPicker: false,
  150. submitStatus: false,
  151. pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
  152. emailPattern: /^\w+@([\da-z\.-]+)\.([a-z]+|[\u2E80-\u9FFF]+)$/,
  153. columns: [],
  154. pickerType: null, // 下拉类型
  155. forms: {
  156. name: null,
  157. cityCode: null,
  158. cityCodeName: '',
  159. provinceCode: null,
  160. schoolSystem: null,
  161. schoolNature: null,
  162. email: null,
  163. educationalAdministrationUsername: null,
  164. educationalAdministrationPosition: null,
  165. educationalAdministrationPhone: null,
  166. emergencyContact: null,
  167. emergencyContactPhone: null,
  168. emergencyContactPosition: null
  169. },
  170. btnLoading: false,
  171. checkPhone: false
  172. }
  173. },
  174. async mounted() {
  175. if (document.querySelector('#m_loading')) {
  176. document.querySelector('#m_loading').remove()
  177. }
  178. try {
  179. this.setLoading(true)
  180. // console.log(areas)
  181. // const tempareas = []
  182. // areas.forEach(item => {
  183. // const temp = {
  184. // name: item.name,
  185. // code: item.code,
  186. // areas: []
  187. // }
  188. // if (item.areas && item.areas.length > 0) {
  189. // item.areas.forEach(child => {
  190. // temp.areas.push({
  191. // name: child.name,
  192. // code: child.code,
  193. // })
  194. // })
  195. // }
  196. // tempareas.push(temp)
  197. // })
  198. // this.columns = tempareas || []
  199. var res = await axios.get('/api-school/open/school/city')
  200. if (res.data.code === 200) {
  201. this.columns = res.data.data || []
  202. }
  203. } catch {
  204. vant.showDialog({
  205. message: '信息获取失败,请联系老师',
  206. theme: 'round-button',
  207. confirmButtonColor: '#64A9FF'
  208. })
  209. }
  210. this.setLoading(false)
  211. },
  212. methods: {
  213. onLinkUrl() {
  214. this.submitStatus = false
  215. window.location.href = window.location.origin + '/orchestra-student/#/download?type=manage'
  216. },
  217. async onSubmit() {
  218. this.btnLoading = true
  219. try {
  220. var forms = this.forms
  221. var res = await axios.post('/api-school/open/school/save', {
  222. ...forms
  223. })
  224. if (res.data.code === 200) {
  225. this.submitStatus = true
  226. } else {
  227. vant.showToast(res.data.message)
  228. }
  229. } catch {
  230. vant.showToast('保存失败,请重试')
  231. }
  232. this.btnLoading = false
  233. },
  234. setLoading(status) {
  235. if (status) {
  236. vant.showLoadingToast({
  237. duration: 0, // 持续展示 toast
  238. message: '加载中...',
  239. forbidClick: true,
  240. loadingType: 'spinner',
  241. })
  242. } else {
  243. vant.closeToast()
  244. }
  245. },
  246. onSelectCity() {
  247. this.showPicker = true
  248. },
  249. onConfirm(val) {
  250. const selectedOptions = val.selectedOptions[1]
  251. this.forms.cityCode = selectedOptions.code
  252. this.forms.cityCodeName = selectedOptions.name
  253. const selectedFirst = val.selectedOptions[0]
  254. this.forms.provinceCode = selectedFirst.code
  255. this.showPicker = false
  256. }
  257. }
  258. })
  259. app.use(vant)
  260. app.mount('#app')
  261. </script>
  262. </body>
  263. </html>