index.tsx 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922
  1. import {
  2. computed,
  3. defineComponent,
  4. nextTick,
  5. onMounted,
  6. reactive,
  7. ref
  8. } from 'vue';
  9. import styles from './index.module.less';
  10. // import infoTitle from '../images/info-title.png';
  11. import {
  12. Button,
  13. CountDown,
  14. Field,
  15. Form,
  16. Picker,
  17. Popup,
  18. Radio,
  19. RadioGroup,
  20. Tag,
  21. showToast
  22. } from 'vant';
  23. import OWxTip from '@/components/m-wx-tip';
  24. import MProtocol from '@/components/m-protocol';
  25. import MImgCode from '@/components/m-img-code';
  26. import { browser, checkPhone } from '@/helpers/utils';
  27. import request from '@/helpers/request';
  28. import { useStudentRegisterStore } from '@/store/modules/student-register-store';
  29. import { setLoginInit, state } from '@/state';
  30. // import iconGift from '../images/icon-gift.png';
  31. import vipGiftIcon from '../images/vip-gift-icon.png';
  32. import { useRoute, useRouter } from 'vue-router';
  33. import MSticky from '@/components/m-sticky';
  34. import MMessageTip from '@/components/m-message-tip';
  35. import SelectStudent from '../modal/select-student';
  36. const classList: any = [];
  37. for (let i = 1; i <= 40; i++) {
  38. classList.push({ text: i + '班', value: i });
  39. }
  40. export default defineComponent({
  41. name: 'register-modal',
  42. emits: ['close', 'submit'],
  43. setup() {
  44. const route = useRoute();
  45. const router = useRouter();
  46. const studentRegisterStore = useStudentRegisterStore();
  47. // 初始化学校编号
  48. studentRegisterStore.setShoolId(route.query.sId as any);
  49. const countDownRef = ref();
  50. const gradeList = computed(() => {
  51. let tempList: any = [];
  52. const five = [
  53. { text: '一年级', value: 1 },
  54. { text: '二年级', value: 2 },
  55. { text: '三年级', value: 3 },
  56. { text: '四年级', value: 4 },
  57. { text: '五年级', value: 5 }
  58. ];
  59. const one = [{ text: '六年级', value: 6 }];
  60. const three = [
  61. { text: '七年级', value: 7 },
  62. { text: '八年级', value: 8 },
  63. { text: '九年级', value: 9 }
  64. ];
  65. if (forms.gradeYear === 'FIVE_YEAR_SYSTEM') {
  66. tempList.push([...five]);
  67. } else if (forms.gradeYear === 'SIX_YEAR_SYSTEM') {
  68. tempList.push([...five, ...one]);
  69. } else if (forms.gradeYear === 'THREE_YEAR_SYSTEM') {
  70. tempList.push([...three]);
  71. } else if (forms.gradeYear === 'FORE_YEAR_SYSTEM') {
  72. tempList.push([...one, ...three]);
  73. } else {
  74. tempList.push([...five, ...one, ...three]);
  75. }
  76. return tempList;
  77. });
  78. const forms = reactive({
  79. countDownStatus: true,
  80. countDownTime: 1000 * 120, // 倒计时时间
  81. modelValue: false, // 是否选中协议
  82. imgCodeStatus: false,
  83. gradeNumText: '',
  84. currentClassText: '',
  85. gradeStatus: false,
  86. classStatus: false,
  87. loading: false,
  88. schoolId: route.query.sId as any,
  89. details: {} as any,
  90. multi_user_limit: 1, // 限制注册学生数量
  91. showSelectStudent: false, // 选择学生
  92. studentList: [], // 手机号关联学生列表
  93. studentItem: {} as any, // 选择的学生
  94. isRegister: 'create' as 'create' | 'update' | '', // 是否注册学生
  95. isTipRegister: true, // 是否显示名字不一致 - 默认显示
  96. isChangeSchool: false, // 是否切换学校
  97. gradeYear: null,
  98. schoolType: null,
  99. giftVipDay: null,
  100. showTips: false,
  101. showButton: false,
  102. showMessage: '请使用微信打开',
  103. showOtherSchool: false,
  104. showOtherMessage: '',
  105. gradePopupShow: false,
  106. gradePopupIndex: [] as any, // 年级下拉索引
  107. classPopupShow: false,
  108. classPopupIndex: [] as any // 班级下拉索引
  109. });
  110. const otherParams = reactive({
  111. showOtherSchool: false,
  112. showCloseButton: true, // 是否显示关闭按钮
  113. showOtherMessage: '',
  114. /** limit 超限制,change 更换学生,nickname 名称不一致 */
  115. otherType: '' as 'limit' | 'change' | 'nickname',
  116. showCancelButton: true,
  117. cancelButtonColor: '',
  118. cancelButtonText: '取消',
  119. showConfirmButton: true,
  120. confirmButtonColor: '',
  121. confirmButtonText: '确定',
  122. messageAlign: 'left' as 'center' | 'left' | 'right'
  123. });
  124. const studentInfo = reactive({
  125. autoRegister: true,
  126. multiUser: true, // 是否为多用户
  127. client_id: 'cooleshow-student',
  128. client_secret: 'cooleshow-student',
  129. extra: {
  130. nickname: '',
  131. currentGradeNum: '',
  132. currentClass: '',
  133. gender: 1,
  134. registerType: '', // 报名类型
  135. giftVipDay: 0 // 赠送会员天数
  136. },
  137. grant_type: 'password',
  138. loginType: 'SMS',
  139. password: '',
  140. username: ''
  141. });
  142. const onCodeSend = () => {
  143. forms.countDownStatus = false;
  144. nextTick(() => {
  145. countDownRef.value.start();
  146. });
  147. };
  148. const onSendCode = () => {
  149. // 发送验证码
  150. if (!checkPhone(studentInfo.username)) {
  151. return showToast('请输入正确的手机号码');
  152. }
  153. forms.imgCodeStatus = true;
  154. };
  155. const validatePhone = computed(() => {
  156. return checkPhone(studentInfo.username) ? true : false;
  157. });
  158. const onFinished = () => {
  159. forms.countDownStatus = true;
  160. countDownRef.value.reset();
  161. };
  162. const onSubmit = async () => {
  163. try {
  164. if (checkForm() || checkSubmit()) return;
  165. forms.loading = true;
  166. const { extra, loginType, autoRegister, password, multiUser, ...res } =
  167. studentInfo;
  168. let tLoginType = loginType,
  169. tAutoRegister = autoRegister,
  170. tPassword = password,
  171. tMultiUser = multiUser;
  172. if (forms.isRegister === 'update') {
  173. tLoginType = 'TOKEN';
  174. tAutoRegister = false;
  175. tPassword = forms.studentItem.token;
  176. tMultiUser = false;
  177. }
  178. // const { extra, ...res } = studentInfo;
  179. const result = await request.post('/edu-app/userlogin', {
  180. hideLoading: false,
  181. requestType: 'form',
  182. data: {
  183. loginType: tLoginType,
  184. autoRegister: tAutoRegister,
  185. password: tPassword,
  186. multiUser: tMultiUser,
  187. ...res,
  188. extra: JSON.stringify({
  189. ...extra,
  190. schoolId: forms.schoolId
  191. })
  192. }
  193. });
  194. if (result.code === 5436) {
  195. forms.showTips = true;
  196. forms.showMessage = '二维码已经失效,详情请咨询学校老师';
  197. forms.showButton = false;
  198. } else if (result.code === 5435) {
  199. forms.showTips = true;
  200. forms.showMessage = '报名信息更新,请刷新后重新提交';
  201. forms.showButton = true;
  202. } else {
  203. studentRegisterStore.setToken(
  204. result.data.token_type + ' ' + result.data.access_token
  205. );
  206. setLoginInit();
  207. const { extra, username } = studentInfo;
  208. const registerResult = await request.post(
  209. '/edu-app/student/register',
  210. {
  211. data: {
  212. schoolId: forms.schoolId,
  213. clientType: 'STUDENT',
  214. schoolVerify: true,
  215. ...extra,
  216. mobile: username,
  217. newRegUser: forms.isRegister === 'create' ? true : false
  218. }
  219. }
  220. );
  221. if (registerResult.code !== 200) {
  222. if (registerResult.code === 5436) {
  223. forms.showTips = true;
  224. forms.showMessage = '二维码已经失效,详情请咨询学校老师';
  225. forms.showButton = false;
  226. } else if (registerResult.code === 5435) {
  227. forms.showTips = true;
  228. forms.showMessage = registerResult.message;
  229. forms.showButton = true;
  230. }
  231. return;
  232. }
  233. setTimeout(() => {
  234. showToast('报名成功');
  235. // router.push('/download');
  236. }, 100);
  237. setTimeout(() => {
  238. if (browser().weixin) {
  239. // 关闭微信
  240. (window as any).WeixinJSBridge.call('closeWindow');
  241. }
  242. }, 1000);
  243. }
  244. } catch {
  245. // 重置信息 - 如果是新建则不提示
  246. changeTipStatus(forms.isRegister === 'create' ? false : true, false);
  247. } finally {
  248. forms.loading = false;
  249. }
  250. };
  251. const checkForm = () => {
  252. if (!checkPhone(studentInfo.username)) {
  253. showToast('请输入正确的手机号码');
  254. return true;
  255. } else if (!studentInfo.password) {
  256. showToast('请输入验证码');
  257. return true;
  258. } else if (!studentInfo.extra.nickname) {
  259. showToast('请输入学生姓名');
  260. return true;
  261. } else if (![0, 1].includes(studentInfo.extra.gender)) {
  262. showToast('请选择性别');
  263. return true;
  264. } else if (!studentInfo.extra.currentGradeNum) {
  265. showToast('请选择所在年级');
  266. return true;
  267. } else if (!studentInfo.extra.currentClass) {
  268. showToast('请选择所在班级');
  269. return true;
  270. }
  271. return false;
  272. };
  273. const getUserInfos = async () => {
  274. if (
  275. studentInfo.password.length !== 6 ||
  276. !checkPhone(studentInfo.username)
  277. ) {
  278. return;
  279. }
  280. try {
  281. const { data } = await request.get(
  282. `/edu-app/open/student/studentInfo?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
  283. );
  284. forms.studentList = data || [];
  285. if (forms.studentList.length > 0) {
  286. const firstStudent: any = forms.studentList[0];
  287. forms.studentItem = firstStudent;
  288. studentInfo.extra.nickname = firstStudent.nickname;
  289. const tempGrade: any = gradeList.value[0] || [];
  290. tempGrade?.forEach((i: any) => {
  291. if (i.value === firstStudent.currentGradeNum) {
  292. forms.gradeNumText = i.text;
  293. studentInfo.extra.currentGradeNum = firstStudent.currentGradeNum;
  294. }
  295. });
  296. classList.forEach((i: any) => {
  297. if (i.value === firstStudent.currentClass) {
  298. forms.currentClassText = i.text;
  299. studentInfo.extra.currentClass = firstStudent.currentClass;
  300. }
  301. });
  302. studentInfo.extra.gender = firstStudent.gender;
  303. forms.isRegister = 'update';
  304. changeTipStatus(true, false);
  305. } else {
  306. forms.isRegister = 'create';
  307. changeTipStatus(false, false);
  308. forms.studentItem = [];
  309. }
  310. } catch {
  311. //
  312. }
  313. };
  314. // 格式化提示状态
  315. const changeTipStatus = (register: boolean, school: boolean) => {
  316. forms.isTipRegister = register;
  317. forms.isChangeSchool = school;
  318. };
  319. //
  320. const checkSubmit = () => {
  321. const { extra } = studentInfo;
  322. if (
  323. forms.studentItem.nickname !== extra.nickname &&
  324. forms.isTipRegister
  325. ) {
  326. otherParams.showOtherMessage =
  327. '学生姓名与上次提交信息不一致,请确认修改学生信息或创建新的学生账号';
  328. otherParams.showOtherSchool = true;
  329. otherParams.showCancelButton = true;
  330. otherParams.showCloseButton = true;
  331. otherParams.cancelButtonColor =
  332. 'linear-gradient( 224deg, #3FE1E6 0%, #00CDD4 100%)';
  333. otherParams.cancelButtonText = '新建学生';
  334. otherParams.confirmButtonColor =
  335. 'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
  336. otherParams.confirmButtonText = '修改信息';
  337. otherParams.otherType = 'nickname';
  338. otherParams.messageAlign = 'left';
  339. return true;
  340. }
  341. // 判断新建学员是否上限了
  342. if (
  343. forms.isRegister === 'create' &&
  344. forms.studentList.length >= forms.multi_user_limit
  345. ) {
  346. otherParams.showOtherMessage = `同一手机号最多创建${forms.multi_user_limit}个学生`;
  347. otherParams.showOtherSchool = true;
  348. otherParams.showCancelButton = false;
  349. otherParams.showCloseButton = true;
  350. otherParams.confirmButtonColor =
  351. 'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
  352. otherParams.confirmButtonText = '我知道了';
  353. otherParams.otherType = 'limit';
  354. otherParams.messageAlign = 'center';
  355. return true;
  356. }
  357. // 判断是否为同一个学校
  358. if (
  359. forms.studentItem.schoolId &&
  360. forms.studentItem.schoolId !== forms.details.id &&
  361. !forms.isChangeSchool &&
  362. forms.isRegister === 'update'
  363. ) {
  364. otherParams.showOtherMessage = `您已绑定【${
  365. forms.studentItem?.schoolName || ''
  366. }】,提交后将更换到<span style="color: #2B85FF">【${
  367. forms.details.name || ''
  368. }】</span>,是否确认提交?`;
  369. otherParams.showOtherSchool = true;
  370. otherParams.showCancelButton = true;
  371. otherParams.showCloseButton = false;
  372. otherParams.cancelButtonColor = '';
  373. otherParams.cancelButtonText = '取消';
  374. otherParams.confirmButtonColor = '';
  375. otherParams.confirmButtonText = '确定';
  376. otherParams.otherType = 'change';
  377. otherParams.messageAlign = 'left';
  378. return true;
  379. }
  380. return false;
  381. };
  382. const getRegisterGoods = async () => {
  383. try {
  384. const { data } = await request.get('/edu-app/open/school/detail', {
  385. params: {
  386. id: forms.schoolId
  387. },
  388. noAuthorization: true // 是否请求接口的时候添加toekn
  389. });
  390. forms.giftVipDay = data.giftVipDay;
  391. forms.schoolType = data.schoolType;
  392. forms.gradeYear = data.gradeYear;
  393. studentInfo.extra.giftVipDay = data.giftVipDay;
  394. studentInfo.extra.registerType = data.registerType;
  395. forms.details = data;
  396. if (browser().weixin) {
  397. if (data.registerType !== 'GIFT_VIP_DAY' || data.status === 0) {
  398. forms.showTips = true;
  399. forms.showMessage = '二维码已经失效,详情请咨询学校老师';
  400. forms.showButton = false;
  401. }
  402. } else {
  403. forms.showTips = true;
  404. }
  405. } catch {}
  406. };
  407. onMounted(async () => {
  408. try {
  409. // 获取支付类型
  410. const { data } = await request.get(
  411. '/edu-app/open/paramConfig/queryByParamNameList',
  412. {
  413. requestType: 'form',
  414. params: {
  415. paramNames: 'multi_user_limit'
  416. }
  417. }
  418. );
  419. if (data && Array.isArray(data)) {
  420. data.forEach((item: any) => {
  421. if (item.paramName === 'multi_user_limit') {
  422. forms.multi_user_limit = item.paramValue
  423. ? Number(item.paramValue)
  424. : 1;
  425. }
  426. });
  427. }
  428. await getRegisterGoods();
  429. } catch {}
  430. });
  431. /** 手机号变更时清空验证码信息,用户信息 */
  432. const phoneChangeEmptyInfo = () => {
  433. studentInfo.password = '';
  434. studentInfo.extra.nickname = '';
  435. studentInfo.extra.currentGradeNum = '';
  436. studentInfo.extra.currentClass = '';
  437. studentInfo.extra.gender = 1;
  438. forms.currentClassText = '';
  439. forms.gradeNumText = '';
  440. forms.studentList = []; // 手机号关联学生列表
  441. forms.studentItem = {}; // 选择的学生
  442. forms.isRegister = 'create'; // 是否注册学生
  443. forms.isTipRegister = true; // 是否显示名字不一致 - 默认显示
  444. forms.isChangeSchool = false; // 是否切换学校
  445. };
  446. return () => (
  447. <div class={styles.registerModal}>
  448. {/* {forms.giftVipDay ? (
  449. <div class={styles.memberNumer}>
  450. <img src={iconGift} class={styles.iconGift} />
  451. <p>
  452. 现在报名立即赠送乐器AI学练工具有效期{' '}
  453. <span>{forms.giftVipDay}</span> 天
  454. </p>
  455. </div>
  456. ) : (
  457. ''
  458. )} */}
  459. <div class={styles.studentRegisterContainer}>
  460. <div
  461. class={[
  462. styles.studentSection,
  463. styles.studentSectionForm,
  464. styles.noSendDay
  465. ]}>
  466. <div class={styles.title3}></div>
  467. <Form labelAlign="left" class={styles.registerForm}>
  468. <Field
  469. clearable={false}
  470. label="联系方式(直接监护人)"
  471. placeholder="请输入手机号码"
  472. type="tel"
  473. required
  474. autocomplete="off"
  475. inputAlign="right"
  476. class={styles.username}
  477. v-model={studentInfo.username}
  478. border={false}
  479. maxlength={11}
  480. onUpdate:modelValue={() => {
  481. phoneChangeEmptyInfo();
  482. }}>
  483. {{
  484. label: () => (
  485. <div>
  486. 联系方式
  487. <p class={styles.tips}>(直接监护人)</p>
  488. </div>
  489. )
  490. }}
  491. </Field>
  492. <div class={['van-hairline--bottom', styles.fieldTipsGroup]}>
  493. <div class={[styles.fieldTips]}>
  494. 手机号是音乐数字课堂的唯一登录账户
  495. </div>
  496. </div>
  497. <Field
  498. center
  499. clearable={false}
  500. required
  501. inputAlign="right"
  502. label="验证码"
  503. placeholder="请输入验证码"
  504. autocomplete="off"
  505. type="number"
  506. v-model={studentInfo.password}
  507. maxlength={6}
  508. onUpdate:modelValue={(val: any) => {
  509. getUserInfos();
  510. }}>
  511. {{
  512. button: () =>
  513. forms.countDownStatus ? (
  514. <span
  515. class={[
  516. styles.codeText,
  517. !validatePhone.value ? styles.codeTextDisabled : ''
  518. ]}
  519. onClick={onSendCode}>
  520. 获取验证码
  521. </span>
  522. ) : (
  523. <CountDown
  524. ref={(el: any) => (countDownRef.value = el)}
  525. auto-start={false}
  526. class={styles.countDown}
  527. time={forms.countDownTime}
  528. onFinish={onFinished}
  529. format="ss秒后重试"
  530. />
  531. )
  532. }}
  533. </Field>
  534. </Form>
  535. </div>
  536. <div
  537. class={[
  538. styles.studentSection,
  539. styles.studentSectionForm,
  540. styles.noSendDay
  541. ]}>
  542. <div class={styles.title1}></div>
  543. <Form labelAlign="left" class={styles.registerForm}>
  544. {/* 大于等于2,则可以切换学生 */}
  545. {forms.studentList.length > 1 && (
  546. <div
  547. class={[
  548. styles.selectStudentGroup,
  549. forms.showSelectStudent && styles.selectStudentGroupChecked
  550. ]}
  551. onClick={() => (forms.showSelectStudent = true)}>
  552. <i
  553. class={[
  554. styles.studentIcon,
  555. !forms.studentItem.userId && styles.studentIconAdd
  556. ]}></i>
  557. <span>
  558. {forms.studentItem.userId
  559. ? forms.studentItem.nickname
  560. : '新增学生'}
  561. </span>
  562. </div>
  563. )}
  564. <Field
  565. clearable={false}
  566. label="学生姓名"
  567. placeholder="请输入学生姓名"
  568. autocomplete="off"
  569. maxlength={14}
  570. v-model={studentInfo.extra.nickname}
  571. required
  572. input-align="right"
  573. />
  574. <Field
  575. clearable={false}
  576. label="学生性别"
  577. placeholder="请选择性别"
  578. autocomplete="off"
  579. required
  580. input-align="right">
  581. {{
  582. input: () => (
  583. <RadioGroup
  584. checked-color="#ffcb75"
  585. v-model={studentInfo.extra.gender}
  586. direction="horizontal">
  587. <Tag
  588. size="large"
  589. type="primary"
  590. color={
  591. !(studentInfo.extra.gender === 1)
  592. ? '#F5F6FA'
  593. : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
  594. }
  595. textColor={
  596. !(studentInfo.extra.gender === 1) ? '#626264' : '#fff'
  597. }
  598. class={styles.radioSection}
  599. round>
  600. <Radio class={styles.radioItem} name={1}></Radio>男
  601. </Tag>
  602. <Tag
  603. size="large"
  604. type="primary"
  605. color={
  606. !(studentInfo.extra.gender === 0)
  607. ? '#F5F6FA'
  608. : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
  609. }
  610. textColor={
  611. !(studentInfo.extra.gender === 0) ? '#626264' : '#fff'
  612. }
  613. class={styles.radioSection}
  614. round>
  615. <Radio class={styles.radioItem} name={0}></Radio>女
  616. </Tag>
  617. </RadioGroup>
  618. )
  619. }}
  620. </Field>
  621. <Field
  622. clearable={false}
  623. label="所在年级"
  624. placeholder="请选择年级"
  625. isLink
  626. readonly
  627. clickable={false}
  628. modelValue={forms.gradeNumText}
  629. // onClick={() => (forms.gradeStatus = true)}
  630. required
  631. input-align="right"
  632. onClick={() => {
  633. forms.gradePopupIndex = [studentInfo.extra.currentGradeNum];
  634. forms.gradeStatus = true;
  635. }}
  636. />
  637. <Field
  638. clearable={false}
  639. label="所在班级"
  640. placeholder="请选择班级"
  641. isLink
  642. readonly
  643. clickable={false}
  644. modelValue={forms.currentClassText}
  645. // onClick={() => (forms.classStatus = true)}
  646. onClick={() => {
  647. forms.classPopupIndex = [studentInfo.extra.currentClass];
  648. forms.classStatus = true;
  649. }}
  650. required
  651. input-align="right"
  652. />
  653. {studentInfo.extra.registerType === 'GIFT_VIP_DAY' &&
  654. forms.giftVipDay &&
  655. Number(forms.giftVipDay) > 0 ? (
  656. <div class={styles.giftTips}>
  657. <img src={vipGiftIcon} />
  658. <span>
  659. 现在报名立即赠送乐器AI学练工具有效期
  660. <i>{forms.giftVipDay}</i>天
  661. </span>
  662. </div>
  663. ) : null}
  664. </Form>
  665. </div>
  666. </div>
  667. {/* <MProtocol
  668. center
  669. v-model:modelValue={forms.modelValue}
  670. prototcolType="REGISTER"
  671. /> */}
  672. <MSticky position="bottom">
  673. <div class={styles.paymentContainer}>
  674. <div class={styles.traditionBtn}>
  675. <Button
  676. type="primary"
  677. class={styles.submitBtn}
  678. color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
  679. round
  680. onClick={() => onSubmit()}
  681. disabled={forms.loading}
  682. loading={forms.loading}>
  683. 提交注册
  684. </Button>
  685. </div>
  686. </div>
  687. </MSticky>
  688. {forms.imgCodeStatus ? (
  689. <MImgCode
  690. v-model:value={forms.imgCodeStatus}
  691. phone={studentInfo.username}
  692. type="REGISTER"
  693. onClose={() => {
  694. forms.imgCodeStatus = false;
  695. }}
  696. onSendCode={onCodeSend}
  697. />
  698. ) : null}
  699. {/* 年级 */}
  700. <Popup
  701. v-model:show={forms.gradeStatus}
  702. position="bottom"
  703. round
  704. safeAreaInsetBottom
  705. lazyRender={false}
  706. class={'popupBottomSearch'}
  707. onOpen={() => {
  708. forms.gradePopupShow = true;
  709. }}
  710. onClosed={() => {
  711. forms.gradePopupShow = false;
  712. }}>
  713. {forms.gradePopupShow && (
  714. <Picker
  715. showToolbar
  716. v-model={forms.gradePopupIndex}
  717. columns={gradeList.value as any}
  718. onCancel={() => (forms.gradeStatus = false)}
  719. onConfirm={(val: any) => {
  720. const selectedOption = val.selectedOptions[0];
  721. studentInfo.extra.currentGradeNum = selectedOption.value;
  722. forms.gradeNumText = selectedOption.text;
  723. forms.gradeStatus = false;
  724. }}
  725. />
  726. )}
  727. </Popup>
  728. {/* 班级 */}
  729. <Popup
  730. v-model:show={forms.classStatus}
  731. position="bottom"
  732. round
  733. class={'popupBottomSearch'}
  734. onOpen={() => {
  735. forms.classPopupShow = true;
  736. }}
  737. onClosed={() => {
  738. forms.classPopupShow = false;
  739. }}>
  740. {forms.classPopupShow && (
  741. <Picker
  742. showToolbar
  743. v-model={forms.classPopupIndex}
  744. columns={classList}
  745. onCancel={() => (forms.classStatus = false)}
  746. onConfirm={(val: any) => {
  747. const selectedOption = val.selectedOptions[0];
  748. studentInfo.extra.currentClass = selectedOption.value;
  749. forms.currentClassText = selectedOption.text;
  750. forms.classStatus = false;
  751. }}
  752. />
  753. )}
  754. </Popup>
  755. {/* 是否在微信中打开 */}
  756. <OWxTip
  757. v-model:show={forms.showTips}
  758. message={forms.showMessage}
  759. showButton={forms.showButton}
  760. buttonText="刷新"
  761. onConfirm={async () => {
  762. forms.showTips = false;
  763. await getRegisterGoods();
  764. studentInfo.password = '';
  765. window.scrollTo({
  766. top: 0,
  767. behavior: 'smooth'
  768. });
  769. }}
  770. />
  771. <MMessageTip
  772. show={otherParams.showOtherSchool}
  773. // showCloseButton={otherParams.showCloseButton}
  774. messageAlign={otherParams.messageAlign}
  775. message={otherParams.showOtherMessage}
  776. showCancelButton={otherParams.showCancelButton}
  777. cancelButtonColor={otherParams.cancelButtonColor}
  778. cancelButtonText={otherParams.cancelButtonText}
  779. confirmButtonColor={otherParams.confirmButtonColor}
  780. confirmButtonText={otherParams.confirmButtonText}
  781. onClose={() => (otherParams.showOtherSchool = false)}
  782. onCancel={() => {
  783. otherParams.showOtherSchool = false;
  784. if (otherParams.otherType === 'nickname') {
  785. forms.isRegister = 'create'; // 新建
  786. changeTipStatus(false, false);
  787. onSubmit();
  788. }
  789. }}
  790. onConfirm={() => {
  791. otherParams.showOtherSchool = false;
  792. // 名字
  793. if (otherParams.otherType === 'nickname') {
  794. forms.isRegister = 'update'; // 修改
  795. changeTipStatus(false, false);
  796. // 直接注册
  797. onSubmit();
  798. } else if (otherParams.otherType === 'change') {
  799. // 学校更换
  800. forms.isChangeSchool = true;
  801. // 直接注册
  802. onSubmit();
  803. } else if (otherParams.otherType === 'limit') {
  804. // 人数超限制
  805. changeTipStatus(
  806. forms.isRegister === 'create' && !forms.studentItem.userId
  807. ? false
  808. : true,
  809. false
  810. );
  811. }
  812. }}
  813. />
  814. <Popup
  815. v-model:show={forms.showSelectStudent}
  816. round
  817. position="bottom"
  818. safeAreaInsetBottom
  819. closeable>
  820. <SelectStudent
  821. studentItem={forms.studentItem}
  822. list={forms.studentList}
  823. onClose={() => (forms.showSelectStudent = false)}
  824. onConfirm={(val: any) => {
  825. if (val.userId) {
  826. forms.studentItem = val;
  827. const firstStudent = val;
  828. studentInfo.extra.nickname = firstStudent.nickname;
  829. const tempGrade: any = gradeList.value[0] || [];
  830. studentInfo.extra.currentGradeNum = '';
  831. forms.gradeNumText = '';
  832. tempGrade?.forEach((i: any) => {
  833. if (i.value === firstStudent.currentGradeNum) {
  834. // forms.instrumentCode = i.instrumentCode;
  835. forms.gradeNumText = i.text;
  836. studentInfo.extra.currentGradeNum =
  837. firstStudent.currentGradeNum;
  838. // if (forms.schoolInstrumentSetType === 'CLASS') {
  839. // forms.classList = i.classList;
  840. // }
  841. }
  842. });
  843. forms.currentClassText = '';
  844. studentInfo.extra.currentClass = '';
  845. classList.forEach((i: any) => {
  846. if (i.value === firstStudent.currentClass) {
  847. forms.currentClassText = i.text;
  848. studentInfo.extra.currentClass = firstStudent.currentClass;
  849. }
  850. });
  851. studentInfo.extra.gender = firstStudent.gender;
  852. forms.isRegister = 'update';
  853. changeTipStatus(true, false);
  854. forms.showSelectStudent = false;
  855. } else {
  856. // 判断新建学员是否上限了
  857. if (forms.studentList.length >= forms.multi_user_limit) {
  858. otherParams.showOtherMessage = `同一手机号最多创建${forms.multi_user_limit}个学生`;
  859. otherParams.showOtherSchool = true;
  860. otherParams.showCancelButton = false;
  861. otherParams.showCloseButton = true;
  862. otherParams.confirmButtonColor =
  863. 'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
  864. otherParams.confirmButtonText = '我知道了';
  865. otherParams.otherType = 'limit';
  866. otherParams.messageAlign = 'center';
  867. return true;
  868. } else {
  869. forms.studentItem = val;
  870. forms.isRegister = 'create';
  871. changeTipStatus(false, false);
  872. studentInfo.extra.nickname = '';
  873. studentInfo.extra.currentGradeNum = '';
  874. studentInfo.extra.currentClass = '';
  875. studentInfo.extra.gender = 1;
  876. forms.currentClassText = '';
  877. forms.gradeNumText = '';
  878. forms.showSelectStudent = false;
  879. }
  880. }
  881. }}
  882. />
  883. </Popup>
  884. </div>
  885. );
  886. }
  887. });