manageTeacher.html 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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/manageTeacher.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. <p class="tips">
  41. <img src="./images/manageTeacher/school-logo.png" />
  42. <span v-html="decodeURI(name)"></span>
  43. </p>
  44. </div>
  45. <van-form validate-first scroll-to-error @submit="onSubmit" ref='form' class="form">
  46. <van-cell-group inset class="cell-group">
  47. <van-field required label="真实姓名" v-model="forms.realName" :rules="[{ required: true, message: '请填写真实姓名' }]"
  48. name="realName" placeholder="请填写真实姓名" maxlength="50">
  49. </van-field>
  50. <div class="phoneTips">
  51. <van-icon name="warning" size="16" />
  52. 提示:手机号码将成为您管乐团登录账
  53. </div>
  54. <van-field required label="手机号码" v-model="forms.phone" type="tel" maxlength="11" minlength="11"
  55. :rules="[{ required: true, message: '请输入手机号码' },{ pattern, message: '输入手机号有误' }]" name="phone"
  56. placeholder="请输入学校手机号码">
  57. </van-field>
  58. <van-field required label="身份证号码" v-model="forms.idCardNo" :rules="[
  59. { required: true, message: '请输入身份证号' },
  60. {
  61. pattern:
  62. /^[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]$/,
  63. message: '请输入正确的身份证号'
  64. }
  65. ]" name="idCardNo" placeholder="请输入身份证号码">
  66. </van-field>
  67. <van-field required label="性别" name="gender" :rules="[{ required: true, message: '请选择性别' }]">
  68. <template #input>
  69. <van-radio-group checked-color="#64A9FF" v-model="forms.gender" direction="horizontal">
  70. <van-tag size="large" type="primary" :plain="!(forms.gender === 1)" color="#64A9FF" class="radioSection"
  71. round>
  72. <van-radio class="radioItem" :name="1"></van-radio>男
  73. </van-tag>
  74. <van-tag size="large" type="primary" :plain="!(forms.gender === 0)" color="#64A9FF" class="radioSection"
  75. round>
  76. <van-radio class="radioItem" :name="0"></van-radio>女
  77. </van-tag>
  78. </van-radio-group>
  79. </template>
  80. </van-field>
  81. </van-cell-group>
  82. <div class="protocol">
  83. <van-checkbox v-model="checked" icon-size="16" style="margin-right: 6px"></van-checkbox>
  84. <span @click="() => { checked = !checked }">请认真阅读并勾选</span><span class="c">《乐团伴学老师注册协议》</span>
  85. </div>
  86. <van-button size="large" block round class="btn-submit" color="#64A9FF" :loading="btnLoading"
  87. native-type="submit">完成</van-button>
  88. </van-form>
  89. <van-popup v-model:show="showPicker" position="bottom" round>
  90. <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm"
  91. :columns-field-names="{ text: 'name', value: 'code', children: 'areas' }" />
  92. </van-popup>
  93. <van-popup v-model:show="submitStatus" round style="width: 75%" :close-on-click-overlay="false">
  94. <div class="stautsS">
  95. <img class="icon-close" src="./images/initiation/icon-close.png" @click="submitStatus = false" />
  96. <img src="./images/manageTeacher/top-banner.png" class="submit-img" />
  97. <div class="submit-container">
  98. <p class="submit-title">恭喜您已成功登记为</p>
  99. <p class="submit-o">{{ decodeURI(name) }} <span>【管理老师】</span></p>
  100. <p class="submit-tips">请下载管乐团管理端APP</p>
  101. <van-button type="primary" color="#64A9FF" block round @click="submitStatus = false">立即下载</van-button>
  102. </div>
  103. </div>
  104. </van-popup>
  105. </div>
  106. <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  107. <script src="./js/vue.global.min.js"></script>
  108. <script src="./js/vant.min.js"></script>
  109. <script src="./js/axios.js"></script>
  110. <script type="text/javascript" src="./js/utils.js"></script>
  111. <script>
  112. var app = Vue.createApp({
  113. data() {
  114. return {
  115. showPicker: false,
  116. submitStatus: false,
  117. id: getQueryVariable('id'),
  118. name: getQueryVariable('name'),
  119. pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
  120. columns: [],
  121. pickerType: null, // 下拉类型
  122. forms: {
  123. realName: '',
  124. phone: null,
  125. gender: 1,
  126. idCardNo: null,
  127. },
  128. btnLoading: false,
  129. checkPhone: false,
  130. checked: true
  131. }
  132. },
  133. async mounted() {
  134. if (document.querySelector('#m_loading')) {
  135. document.querySelector('#m_loading').remove()
  136. }
  137. if (!this.id) {
  138. vant.showToast('信息获取失败,请联系老师')
  139. }
  140. try {
  141. this.setLoading(true)
  142. } catch {
  143. vant.showDialog({
  144. message: '信息获取失败,请联系老师',
  145. theme: 'round-button',
  146. confirmButtonColor: '#64A9FF'
  147. })
  148. }
  149. this.setLoading(false)
  150. },
  151. methods: {
  152. async onSubmit() {
  153. if (!this.checked) {
  154. vant.showToast('请阅读并同意协议')
  155. return
  156. }
  157. this.btnLoading = true
  158. try {
  159. var forms = this.forms
  160. var res = await axios.post('/api-school/open/schoolStaff/registerTeacher', {
  161. ...forms,
  162. schoolId: this.id,
  163. })
  164. if (res.data.code === 200) {
  165. this.submitStatus = true
  166. } else {
  167. vant.showToast(res.data.message)
  168. }
  169. } catch {
  170. vant.showToast('保存失败,请重试')
  171. }
  172. this.btnLoading = false
  173. },
  174. setLoading(status) {
  175. if (status) {
  176. vant.showLoadingToast({
  177. duration: 0, // 持续展示 toast
  178. message: '加载中...',
  179. forbidClick: true,
  180. loadingType: 'spinner',
  181. })
  182. } else {
  183. vant.closeToast()
  184. }
  185. },
  186. onSelectCity() {
  187. this.showPicker = true
  188. },
  189. onConfirm(val) {
  190. const selectedOptions = val.selectedOptions[1]
  191. this.forms.cityCode = selectedOptions.code
  192. this.forms.cityCodeName = selectedOptions.name
  193. this.showPicker = false
  194. }
  195. }
  196. })
  197. app.use(vant)
  198. app.mount('#app')
  199. </script>
  200. </body>
  201. </html>