teacher_authorize.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <template>
  2. <view>
  3. <uni-forms ref="baseForm" :modelValue="baseFormData" labelWidth="75px" :rules="rules" validateTrigger="bind">
  4. <uni-forms-item label="真实姓名" name="name" required>
  5. <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" maxlength="6" trim="both" />
  6. </uni-forms-item>
  7. <uni-forms-item label="手机号" required>
  8. <button open-type="getPhoneNumber" type="primary" size="mini"
  9. @getphonenumber="getPhoneNumber">获取手机号</button>
  10. </uni-forms-item>
  11. <uni-forms-item label="微信号" name="weixinId" required>
  12. <uni-easyinput v-model="baseFormData.weixinId" placeholder="微信号(不便接听电话时微信沟通)" maxlength="25"
  13. trim="both" />
  14. </uni-forms-item>
  15. <uni-forms-item label="英文名" name="englishName">
  16. <uni-easyinput v-model="baseFormData.englishName" placeholder="请输入你的英文名" maxlength="25" trim="both" />
  17. </uni-forms-item>
  18. <uni-forms-item label="身份证号" name="idCard" required>
  19. <uni-easyinput v-model="baseFormData.idCard" type="idcard" placeholder="请输入你的身份证号" />
  20. </uni-forms-item>
  21. <uni-forms-item label="性别" name="sex" required>
  22. <uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
  23. </uni-forms-item>
  24. <uni-forms-item label="身份" name="identify" required>
  25. <uni-data-checkbox v-model="baseFormData.identify" :localdata="identifies" />
  26. </uni-forms-item>
  27. <uni-forms-item label="身份证照片" required>
  28. <text style="color: blue;">(说明:需要能看清楚证件号码、日期及头像)</text>
  29. <uni-file-picker @select="selectIdCardFront" limit="1" title="身份证正面" />
  30. <uni-file-picker @select="selcetIdCardBack" limit="1" title="身份证背面" />
  31. </uni-forms-item>
  32. <uni-forms-item label="学生/毕业证" required>
  33. <text style="color: blue;">(已毕业的需要上传毕业证)</text>
  34. <uni-file-picker limit="1" @select="selectDiplomaPhoto" />
  35. </uni-forms-item>
  36. <uni-forms-item label="头像" required>
  37. <text style="color: blue;">(说明:只能上传证件照,上传其他照片审核不予通过)</text>
  38. <uni-file-picker limit="1" @select="selectProfilePhoto" />
  39. </uni-forms-item>
  40. <uni-forms-item label="毕业/就读学校" name="school" required>
  41. <uni-easyinput v-model="baseFormData.school" placeholder="请输入学校全称" maxlength="30" trim="both" />
  42. </uni-forms-item>
  43. <uni-forms-item label="所学专业" name="major" required>
  44. <uni-easyinput v-model="baseFormData.major" placeholder="请输入专业名称" maxlength="20" trim="both" />
  45. </uni-forms-item>
  46. <uni-forms-item label="学历" name="education" required>
  47. <uni-data-select v-model="baseFormData.education" :localdata="educations" />
  48. </uni-forms-item>
  49. <uni-forms-item label="籍贯" name="nativePlace" required>
  50. <uni-easyinput v-model="baseFormData.nativePlace" placeholder="xx省xx市xx区" maxlength="30" trim="both" />
  51. </uni-forms-item>
  52. </uni-forms>
  53. <view>
  54. <button type="primary" @click="submit">提交审核</button>
  55. </view>
  56. <uni-popup ref="alertDialog" type="dialog">
  57. <uni-popup-dialog type="info" confirmText="确定" title="温馨提示" :content="authentication" @close="dialogClose" @confirm="dialogConfirm"></uni-popup-dialog>
  58. </uni-popup>
  59. </view>
  60. </template>
  61. <script>
  62. import { mapState, mapMutations } from 'vuex'
  63. export default {
  64. computed: {
  65. ...mapState('m_user', ['authentication'])
  66. },
  67. data() {
  68. return {
  69. isLoading: false, // 节流阀
  70. baseFormData: {
  71. name: '',
  72. weixinId: '',
  73. idCard: '511002200005061387',
  74. sex: '男',
  75. identify: '专职老师',
  76. school: '',
  77. major: '',
  78. education: '',
  79. nativePlace: '',
  80. education: '本科在读',
  81. diplomaPhoto: ''
  82. },
  83. sexs: [{
  84. text: '男',
  85. value: '男'
  86. }, {
  87. text: '女',
  88. value: '女'
  89. }],
  90. // 单选老师身份
  91. identifies: [{
  92. text: '专职老师',
  93. value: '专职老师'
  94. }, {
  95. text: '在校大学生',
  96. value: '在校大学生'
  97. }],
  98. educations: [{
  99. value: '专科在读',
  100. text: '专科在读'
  101. }, {
  102. value: '专科毕业',
  103. text: '专科毕业'
  104. }, {
  105. value: '本科在读',
  106. text: '本科在读'
  107. }, {
  108. value: '本科毕业',
  109. text: '本科毕业'
  110. }, {
  111. value: '硕士在读',
  112. text: '硕士在读'
  113. }, {
  114. value: '硕士毕业',
  115. text: '硕士毕业'
  116. }, {
  117. value: '博士在读',
  118. text: '博士在读'
  119. }, {
  120. value: '博士毕业',
  121. text: '博士毕业'
  122. }],
  123. rules: {
  124. name: {
  125. rules: [{
  126. required: true,
  127. errorMessage: '请输入姓名',
  128. }]
  129. },
  130. weixinId: {
  131. rules: [{
  132. required: true,
  133. errorMessage: '请输入微信号',
  134. }, {
  135. errorMessage: '请输入正确的微信号',
  136. pattern: '^[a-zA-Z][a-zA-Z\\d_-]{5,19}$',
  137. }]
  138. },
  139. idCard: {
  140. rules: [{
  141. required: true,
  142. errorMessage: '请输入身份证号',
  143. }, {
  144. errorMessage: '请输入正确的身份证号',
  145. pattern: '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
  146. }]
  147. },
  148. school: {
  149. rules: [{
  150. required: true,
  151. errorMessage: '请输入学校全称',
  152. }]
  153. },
  154. major: {
  155. rules: [{
  156. required: true,
  157. errorMessage: '请输入专业名称',
  158. }]
  159. },
  160. nativePlace: {
  161. rules: [{
  162. required: true,
  163. errorMessage: '请输入籍贯',
  164. },
  165. {
  166. pattern: '[\\u4e00-\\u9fa5]+[\\u7701]{1}[\\u4e00-\\u9fa5]+[\\u5E02]{1}[\\u4e00-\\u9fa5]+[\\u53BF|\\u533A]{1}',
  167. errorMessage: '请输入正确的格式:xx省xx市xx区/县',
  168. }
  169. ]
  170. }
  171. }
  172. };
  173. },
  174. created() {
  175. },
  176. mounted() {
  177. this.openDialog()
  178. },
  179. methods: {
  180. ...mapMutations('m_user', ['updateAuthentication']),
  181. openDialog() {
  182. // console.log(this.authentication)
  183. if (this.authentication !== '') {
  184. this.$refs.alertDialog.open()
  185. }
  186. },
  187. // 取消按钮
  188. dialogClose() {
  189. this.$refs.alertDialog.close()
  190. if (this.authentication === '正在审核中…') {
  191. uni.navigateBack()
  192. } else if (this.authentication === '认证成功,点击前往课程发布') {
  193. uni.navigateBack()
  194. } else {
  195. this.updateAuthentication('')
  196. }
  197. },
  198. // 确定按钮
  199. dialogConfirm() {
  200. this.$refs.alertDialog.close()
  201. if (this.authentication === '正在审核中…') {
  202. uni.navigateBack()
  203. } else if (this.authentication === '认证成功,点击前往课程发布') {
  204. uni.redirectTo({
  205. url: '/subpkg/course_publish/course_publish'
  206. })
  207. } else {
  208. this.updateAuthentication('')
  209. }
  210. },
  211. // 手机号
  212. async getPhoneNumber(e) {
  213. // console.log(e.detail.code)
  214. if (e.detail.code === undefined) return uni.$showMsg('获取手机号失败!')
  215. const query = {
  216. code: e.detail.code
  217. }
  218. const {
  219. data: result
  220. } = await uni.$http.get('/ucenter/mini-program-openid-uid/wxGetPhone', query)
  221. if (result.code === 20000) {
  222. this.baseFormData.phone = result.data.phone
  223. return uni.$showMsg('获取手机成功!')
  224. }
  225. },
  226. // 上传身份证正面
  227. selectIdCardFront(e) {
  228. this.getUploadPaths(e, 'this.baseFormData.idCardFront')
  229. },
  230. // 上传身份证背面
  231. selcetIdCardBack(e) {
  232. this.getUploadPaths(e, 'this.baseFormData.idCardBack')
  233. },
  234. // 上传毕业/学生证
  235. selectDiplomaPhoto(e) {
  236. this.getUploadPaths(e, 'this.baseFormData.diplomaPhoto')
  237. },
  238. // 上传头像
  239. selectProfilePhoto(e) {
  240. this.getUploadPaths(e, 'this.baseFormData.profilePhoto')
  241. },
  242. getUploadPaths(e, item) {
  243. var that = this
  244. wx.uploadFile({
  245. url: 'http://192.168.0.207:8222/file/upload',
  246. filePath: e.tempFilePaths[0],
  247. name: 'file',
  248. header: {
  249. token: uni.getStorageSync('token')
  250. },
  251. success(res) {
  252. const result = JSON.parse(res.data)
  253. const item1 = item.substring(item.lastIndexOf('.') + 1)
  254. // console.log(item1)
  255. that.baseFormData[item1] = result.data.path + '\\' + result.data.fileName
  256. // console.log(that.baseFormData)
  257. }
  258. })
  259. },
  260. submit() {
  261. if (this.isLoading) {
  262. return uni.$showMsg('操作过快,请耐心等待…')
  263. }
  264. this.isLoading = true
  265. this.$refs.baseForm.validate().then(res => {
  266. if (this.baseFormData.phone === undefined) return uni.$showMsg('手机号未获取!')
  267. if (this.baseFormData.idCardFront === undefined) return uni.$showMsg('身份证正面未上传!')
  268. if (this.baseFormData.idCardBack === undefined) return uni.$showMsg('身份证背面未上传!')
  269. if (this.baseFormData.diplomaPhoto === undefined) return uni.$showMsg('学生/毕业证未上传!')
  270. if (this.baseFormData.profilePhoto === undefined) return uni.$showMsg('头像未上传!')
  271. uni.request({
  272. url: 'http://192.168.0.207:8222/education/teacher-certifications/saveCertificationInfo',
  273. data: this.baseFormData,
  274. header: {
  275. token: uni.getStorageSync('token')
  276. },
  277. method: 'POST',
  278. success: res => {
  279. this.isLoading = false
  280. uni.$showMsg(res.data.message)
  281. this.updateAuthentication('正在审核中…')
  282. }
  283. })
  284. uni.navigateBack()
  285. }).catch(err => {
  286. this.isLoading = false
  287. // console.log(err)
  288. })
  289. this.isLoading = false
  290. }
  291. }
  292. }
  293. </script>
  294. <style lang="scss" scoped>
  295. .warning {
  296. color: red
  297. }
  298. </style>