index.tsx 85 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503
  1. import {
  2. Image,
  3. Cell,
  4. Tag,
  5. Button,
  6. Popup,
  7. showToast,
  8. Form,
  9. Field,
  10. CountDown,
  11. RadioGroup,
  12. Radio,
  13. Picker,
  14. closeToast
  15. } from 'vant';
  16. import {
  17. computed,
  18. defineComponent,
  19. nextTick,
  20. onMounted,
  21. onUnmounted,
  22. reactive,
  23. ref,
  24. watch
  25. } from 'vue';
  26. import TCPlayer from 'tcplayer.js';
  27. import 'tcplayer.js/dist/tcplayer.css';
  28. import qs from 'query-string';
  29. import {
  30. state as baseState,
  31. goWechatAuth,
  32. setLogin,
  33. setLoginInit
  34. } from '@/state';
  35. import styles from './index.module.less';
  36. import MSticky from '@/components/m-sticky';
  37. // import MVideo from '@/components/m-video';
  38. import { useRoute, useRouter } from 'vue-router';
  39. import { useStudentRegisterStore } from '@/store/modules/student-register-store';
  40. import request from '@/helpers/request';
  41. import requestStudent from './request';
  42. import {
  43. browser,
  44. checkPhone,
  45. getHttpOrigin,
  46. getUrlCode,
  47. moneyFormat
  48. } from '@/helpers/utils';
  49. import deepClone from '@/helpers/deep-clone';
  50. import OWxTip from '@/components/m-wx-tip';
  51. import MDialog from '@/components/m-dialog';
  52. // import f1 from './images/new/f-1.png';
  53. // import f2 from './images/new/f-2.png';
  54. // import f3 from './images/new/f-3.png';
  55. // import iconTip2 from './images/new/icon-tip2.png';
  56. // import functionBg from './images/new/function-bg.png';
  57. // import tuangou from './images/new/tuangou.png';
  58. import icon3 from './images/new/icon-3.png';
  59. // import icon5 from './images/new/icon-7.png';
  60. // import icon6 from './images/new/icon-6.png';
  61. import giftTip from './images/new/icon-9.png';
  62. import iconGift from './images/new/icon-gift.png';
  63. import vipGiftTIps from './images/new/vip_gift_tips.png';
  64. import icon10 from './images/new/icon-n-10.png';
  65. import icon11 from './images/new/icon-n-11.png';
  66. import dayjs from 'dayjs';
  67. // import MMessageTip from '@/components/m-message-tip';
  68. import { CurrentTime, useCountDown, usePageVisibility } from '@vant/use';
  69. import Payment from '../adapay/payment';
  70. import QrcodePayment from './qrcode-payment';
  71. import MImgCode from '@/components/m-img-code';
  72. import { beforeSubmit } from './order-state';
  73. import { useInterval, useIntervalFn } from '@vueuse/core';
  74. import MPopup from '@/components/m-popup';
  75. import UserAuth from './component/user-auth';
  76. import MMessageTip from '@/components/m-message-tip';
  77. import SelectStudent from './modal/select-student';
  78. import { Timer } from './timer';
  79. import useAuthCode from '@/hooks/useAuthCode';
  80. const classList: any = [];
  81. for (let i = 1; i <= 40; i++) {
  82. classList.push({ text: i + '班', value: i });
  83. }
  84. const GRADE_ENUM = {
  85. '1': '一年级',
  86. '2': '二年级',
  87. '3': '三年级',
  88. '4': '四年级',
  89. '5': '五年级',
  90. '6': '六年级',
  91. '7': '七年级',
  92. '8': '八年级',
  93. '9': '九年级'
  94. } as any;
  95. const getGradeList = (gradeYear: string, instrumentCode?: string) => {
  96. let tempList: any = [];
  97. const five = [
  98. { text: '一年级', value: 1, instrumentCode },
  99. { text: '二年级', value: 2, instrumentCode },
  100. { text: '三年级', value: 3, instrumentCode },
  101. { text: '四年级', value: 4, instrumentCode },
  102. { text: '五年级', value: 5, instrumentCode }
  103. ];
  104. const one = [{ text: '六年级', value: 6, instrumentCode }];
  105. const three = [
  106. { text: '七年级', value: 7, instrumentCode },
  107. { text: '八年级', value: 8, instrumentCode },
  108. { text: '九年级', value: 9, instrumentCode }
  109. ];
  110. if (gradeYear === 'FIVE_YEAR_SYSTEM') {
  111. tempList.push(...[...five]);
  112. } else if (gradeYear === 'SIX_YEAR_SYSTEM') {
  113. tempList.push(...[...five, ...one]);
  114. } else if (gradeYear === 'THREE_YEAR_SYSTEM') {
  115. tempList.push(...[...three]);
  116. } else if (gradeYear === 'FORE_YEAR_SYSTEM') {
  117. tempList.push(...[...one, ...three]);
  118. } else {
  119. tempList.push(...[...five, ...one, ...three]);
  120. }
  121. return tempList;
  122. };
  123. export const vipGiftPeriodType = {
  124. DAY: '天',
  125. MONTH: '个月',
  126. YEAR: '年'
  127. } as any;
  128. export default defineComponent({
  129. name: 'student-register',
  130. setup() {
  131. const route = useRoute();
  132. const pageVisibility = usePageVisibility();
  133. const studentRegisterStore = useStudentRegisterStore();
  134. const authCode = useAuthCode();
  135. const router = useRouter();
  136. // 初始化学校编号
  137. studentRegisterStore.setShoolId(route.query.sId as any);
  138. const countDownRef = ref();
  139. const mstickyRef = ref();
  140. const forms = reactive({
  141. schoolId: route.query.sId as any,
  142. paymentType: '', // 支付类型
  143. paymentChannel: '',
  144. multi_user_limit: 1, // 限制注册学生数量
  145. // popupShow: false,
  146. registerDetails: {} as any,
  147. details: [] as any,
  148. // schoolType: '', // 学校类型
  149. gradeYear: '', // 学制
  150. schoolInstrumentSetType: null as any,
  151. // bugGoods: false, // 是否购买AI
  152. isRegister: 'create' as 'create' | 'update' | '', // 是否注册学生
  153. isTipRegister: false, // 是否显示名字不一致 - 默认显示
  154. isChangeSchool: false, // 是否切换学校
  155. registerType: '', // 报名类型
  156. detailVip: {} as any,
  157. giftVipDay: 0, // 赠送天数
  158. submitLoading: false,
  159. // showMore: true,
  160. showTips: false,
  161. showButton: false,
  162. showMessage: '请使用微信扫描二维码',
  163. countDownStatus: true,
  164. countDownTime: 1000 * 120, // 倒计时时间
  165. // modelValue: false, // 是否选中协议
  166. imgCodeStatus: false,
  167. gradeNumText: '',
  168. currentClassText: '',
  169. gradeStatus: false,
  170. classStatus: false,
  171. loading: false,
  172. dialogStatus: false,
  173. dialogMessage: '',
  174. confirmButtonText: '确定',
  175. cancelButtonText: '取消',
  176. messageAlign: 'center' as 'left' | 'center' | 'right',
  177. showDuration: true,
  178. dialogConfirmStatus: false,
  179. contract_sign: false, // 是否实名认证
  180. countDownTimePay: 60 * 1000,
  181. dialogConfig: {} as any,
  182. showSelectStudent: false, // 选择学生
  183. studentList: [], // 手机号关联学生列表
  184. studentItem: {} as any, // 选择的学生
  185. joinType: '' as 'digitalize' | 'tradition',
  186. gradeList: [] as any,
  187. classList: [] as any,
  188. saveUserId: null as any,
  189. saveId: null as any,
  190. openId: null as any,
  191. code: null as any,
  192. intervalFnRef: null as any, // 页面订时器
  193. registerExpireTime: null as any, // 结束时间
  194. instrumentCode: null as any, // 乐器编码
  195. activeOverTime: 0, // 活动结束时间
  196. activeOverStatus: true, // 活动是否结束 默认已结束
  197. gradePopupShow: false,
  198. gradePopupIndex: [] as any, // 年级下拉索引
  199. classPopupShow: false,
  200. classPopupIndex: [] as any // 班级下拉索引
  201. });
  202. const otherParams = reactive({
  203. showOtherSchool: false,
  204. showCloseButton: true, // 是否显示关闭按钮
  205. showOtherMessage: '',
  206. /** limit 超限制,change 更换学生,nickname 名称不一致 */
  207. otherType: '' as 'limit' | 'change' | 'nickname' | 'member',
  208. showCancelButton: true,
  209. cancelButtonColor: '',
  210. cancelButtonText: '取消',
  211. showConfirmButton: true,
  212. confirmButtonColor: '',
  213. confirmButtonText: '确定',
  214. messageAlign: 'left' as 'center' | 'left' | 'right'
  215. });
  216. const state = reactive({
  217. showQrcode: false,
  218. qrCodeUrl: '',
  219. pay_channel: '',
  220. orderInfo: {} as any, // 订单信息
  221. authShow: false,
  222. orderNo: null as any,
  223. config: {} as any,
  224. paymentStatus: false,
  225. orderTimer: null as any
  226. });
  227. const studentInfo = reactive({
  228. autoRegister: true,
  229. multiUser: true, // 是否为多用户
  230. client_id: 'cooleshow-student',
  231. client_secret: 'cooleshow-student',
  232. extra: {
  233. nickname: '',
  234. currentGradeNum: '' as any,
  235. currentClass: '' as any,
  236. gender: 1 as any,
  237. registerType: null as any, // 报名类型
  238. giftVipDay: 0 // 赠送会员天数
  239. },
  240. grant_type: 'password',
  241. loginType: 'SMS',
  242. password: '',
  243. username: ''
  244. });
  245. const videoForms = reactive({
  246. introductionVideo: '',
  247. introductionVideoTime: 0, // 视频总时长
  248. videoBrowsePoint: 0, // 视频最后观看点
  249. player: null as any,
  250. playerSpeed: 1,
  251. intervalFnRef: null as any,
  252. videoDetails: [] as any, // 节点列表
  253. pointVideo: {} as any, // 需要处理有效的时间段
  254. pointVideoTime: 0 // 有效时长
  255. });
  256. // 播放视频总时长
  257. const videoIntervalRef = useInterval(1000, {
  258. controls: true
  259. });
  260. videoIntervalRef.pause();
  261. const timer = new Timer();
  262. // 页面定时
  263. const pageTimer = useInterval(1000, { controls: true });
  264. pageTimer.pause();
  265. /**
  266. * 格式化视屏播放有效时间 - 合并区间
  267. * @param intervals [[], []]
  268. * @example [[4, 8],[0, 4],[10, 30]]
  269. * @returns [[0, 8], [10, 30]]
  270. */
  271. const formatEffectiveTime = (intervals: any[]) => {
  272. const res: any = [];
  273. intervals.sort((a, b) => a[0] - b[0]);
  274. let prev = intervals[0];
  275. for (let i = 1; i < intervals.length; i++) {
  276. const cur = intervals[i];
  277. if (prev[1] >= cur[0]) {
  278. // 有重合
  279. prev[1] = Math.max(cur[1], prev[1]);
  280. } else {
  281. // 不重合,prev推入res数组
  282. res.push(prev);
  283. prev = cur; // 更新 prev
  284. }
  285. }
  286. res.push(prev);
  287. return res;
  288. };
  289. /**
  290. * 获取数据有效期
  291. * @param intervals [[], []]
  292. * @returns 0s
  293. */
  294. const formatTimer = (intervals: any[]) => {
  295. const afterIntervals = formatEffectiveTime(intervals);
  296. // console.log(afterIntervals, 'afterIntervals')
  297. let time = 0;
  298. afterIntervals.forEach((t: any) => {
  299. time += t[1] - t[0];
  300. });
  301. return time;
  302. };
  303. const overCountDown = useCountDown({
  304. time: forms.activeOverTime,
  305. onFinish() {
  306. forms.activeOverStatus = true;
  307. if (forms.submitLoading) return;
  308. applyOver();
  309. }
  310. });
  311. /** 报名结束提示 */
  312. const applyOver = () => {
  313. forms.showTips = true;
  314. forms.showMessage = `<p style="color: #F44541">报名已截止,感谢您的参与</p>`;
  315. forms.showButton = false;
  316. forms.intervalFnRef?.pause();
  317. };
  318. const onCodeSend = () => {
  319. forms.countDownStatus = false;
  320. nextTick(() => {
  321. countDownRef.value.start();
  322. });
  323. };
  324. const onSendCode = () => {
  325. // 发送验证码
  326. if (!checkPhone(studentInfo.username)) {
  327. return showToast('请输入正确的手机号码');
  328. }
  329. forms.imgCodeStatus = true;
  330. };
  331. const validatePhone = computed(() => {
  332. return checkPhone(studentInfo.username) ? true : false;
  333. });
  334. const onFinished = () => {
  335. forms.countDownStatus = true;
  336. countDownRef.value.reset();
  337. };
  338. const orderType = computed(() => {
  339. return state.orderInfo.orderType;
  340. });
  341. const getRegisterGoods = async () => {
  342. try {
  343. const { data } = await request.get(
  344. '/edu-app/open/userOrder/registerGoods/' + forms.schoolId,
  345. {
  346. noAuthorization: true // 是否请求接口的时候添加toekn
  347. }
  348. );
  349. // 默认选中商品
  350. studentRegisterStore.setVip(data.details || []);
  351. forms.details = deepClone(data.details || []);
  352. forms.registerDetails = data;
  353. forms.registerExpireTime = data.registerExpireTime; // '2024-03-27 17:33:52'; //
  354. if (forms.registerExpireTime) {
  355. if (dayjs(new Date()).isBefore(forms.registerExpireTime)) {
  356. // 活动没有结束
  357. forms.activeOverStatus = false;
  358. // 默认返回毫秒
  359. forms.activeOverTime = dayjs(forms.registerExpireTime).diff(
  360. dayjs(new Date())
  361. );
  362. overCountDown.reset(forms.activeOverTime);
  363. overCountDown.start();
  364. } else {
  365. applyOver();
  366. forms.activeOverStatus = true;
  367. }
  368. }
  369. if (forms.details.length > 0) {
  370. forms.detailVip = forms.details[0];
  371. // forms.giftVipDay = forms.details[0].membershipDays;
  372. }
  373. forms.giftVipDay = data.giftVipDay || 0;
  374. forms.gradeYear = data.gradeYear;
  375. forms.schoolInstrumentSetType = data.schoolInstrumentSetType;
  376. forms.registerType = data.registerType;
  377. studentInfo.extra.registerType = data.registerType;
  378. const schoolInstrumentList = data.schoolInstrumentList || [];
  379. if (data.schoolInstrumentSetType === 'SCHOOL') {
  380. const instrumentCode = schoolInstrumentList[0]?.instrumentCode;
  381. forms.gradeList = getGradeList(data.gradeYear, instrumentCode);
  382. forms.classList = classList;
  383. } else if (data.schoolInstrumentSetType === 'GRADE') {
  384. schoolInstrumentList.forEach((item: any) => {
  385. forms.gradeList.push({
  386. text: GRADE_ENUM[item.gradeNum],
  387. value: item.gradeNum,
  388. instrumentId: item.instrumentId,
  389. instrumentCode: item.instrumentCode
  390. });
  391. });
  392. forms.gradeList.sort((a: any, b: any) => a.value - b.value);
  393. forms.classList = classList;
  394. } else if (data.schoolInstrumentSetType === 'CLASS') {
  395. // 班级
  396. const tempGradeList: any[] = [];
  397. schoolInstrumentList.forEach((item: any) => {
  398. if (!tempGradeList.includes(item.gradeNum)) {
  399. tempGradeList.push(item.gradeNum);
  400. }
  401. });
  402. const lastGradeList: any[] = [];
  403. tempGradeList.forEach((temp: any) => {
  404. const list = {
  405. text: GRADE_ENUM[temp],
  406. value: temp,
  407. instrumentId: '',
  408. instrumentCode: '',
  409. instrumentName: '',
  410. classList: [] as any
  411. };
  412. schoolInstrumentList.forEach((item: any) => {
  413. if (temp === item.gradeNum) {
  414. list.instrumentId = item.instrumentId;
  415. list.instrumentCode = item.instrumentCode;
  416. list.instrumentName = item.instrumentName;
  417. list.classList.push({
  418. text: item.classNum + '班',
  419. value: item.classNum,
  420. instrumentCode: item.instrumentCode
  421. });
  422. }
  423. });
  424. // 排序班级
  425. list.classList.sort((a: any, b: any) => a.value - b.value);
  426. lastGradeList.push(list);
  427. });
  428. lastGradeList.sort((a: any, b: any) => a.value - b.value);
  429. forms.gradeList = lastGradeList;
  430. forms.classList = [];
  431. } else {
  432. forms.gradeList = getGradeList(data.gradeYear);
  433. forms.classList = classList;
  434. }
  435. if (browser().weixin) {
  436. // if (
  437. // data.schoolStatus === 0 &&
  438. // forms.schoolId == '1770035687490105346'
  439. // ) {
  440. // forms.showTips = true;
  441. // forms.showMessage = `<p style="color: #F44541">报名已截止,感谢您的参与</p>`;
  442. // forms.showButton = false;
  443. // return;
  444. // }
  445. if (data.registerType !== 'BUG_GOODS' || data.schoolStatus === 0) {
  446. forms.showTips = true;
  447. forms.showMessage = '二维码已经失效,详情请咨询学校老师';
  448. forms.showButton = false;
  449. return;
  450. }
  451. } else {
  452. forms.showTips = true;
  453. return;
  454. }
  455. // 判断是否有倒计时,倒计时是滞结束
  456. if (!forms.registerExpireTime || !forms.activeOverStatus) {
  457. pagePointInit();
  458. }
  459. } catch {}
  460. };
  461. // 计算金额
  462. const calcPrice = computed(() => {
  463. let amount: number = 0; //现价
  464. let originAmount: number = 0; // 原价
  465. const vipList: any[] = studentRegisterStore.getVip;
  466. vipList.forEach((vip: any) => {
  467. amount += Number(vip.currentPrice);
  468. originAmount += Number(vip.originalPrice);
  469. });
  470. // const goodsList: any[] = studentRegisterStore.getGoods;
  471. // goodsList.forEach((good: any) => {
  472. // amount += Number(good.price) * good.quantity;
  473. // originAmount += Number(good.originalPrice) * good.quantity;
  474. // });
  475. return {
  476. amount,
  477. originAmount
  478. };
  479. });
  480. // 格式化提示状态
  481. const changeTipStatus = (register: boolean, school: boolean) => {
  482. forms.isTipRegister = register;
  483. forms.isChangeSchool = school;
  484. };
  485. const checkForm = (status = true) => {
  486. if (!checkPhone(studentInfo.username)) {
  487. status && showToast('请输入正确的手机号码');
  488. return true;
  489. } else if (!studentInfo.password) {
  490. status && showToast('请输入验证码');
  491. return true;
  492. } else if (!studentInfo.extra.nickname) {
  493. status && showToast('请输入学生姓名');
  494. return true;
  495. } else if (![0, 1].includes(studentInfo.extra.gender)) {
  496. status && showToast('请选择性别');
  497. return true;
  498. } else if (!studentInfo.extra.currentGradeNum) {
  499. status && showToast('请选择所在年级');
  500. return true;
  501. } else if (!studentInfo.extra.currentClass) {
  502. status && showToast('请选择所在班级');
  503. return true;
  504. }
  505. return false;
  506. };
  507. //
  508. const checkSubmit = () => {
  509. const { extra } = studentInfo;
  510. // console.log(
  511. // forms.studentItem.nickname,
  512. // extra.nickname,
  513. // forms.isRegister,
  514. // forms.isTipRegister,
  515. // 'isRegister'
  516. // );
  517. if (
  518. forms.studentItem.nickname !== extra.nickname &&
  519. forms.isTipRegister
  520. ) {
  521. otherParams.showOtherMessage =
  522. '学生姓名与上次提交信息不一致,请确认修改学生信息或创建新的学生账号';
  523. otherParams.showOtherSchool = true;
  524. otherParams.showCancelButton = true;
  525. otherParams.showCloseButton = true;
  526. otherParams.cancelButtonColor =
  527. 'linear-gradient( 224deg, #3FE1E6 0%, #00CDD4 100%)';
  528. otherParams.cancelButtonText = '新建学生';
  529. otherParams.confirmButtonColor =
  530. 'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
  531. otherParams.confirmButtonText = '修改信息';
  532. otherParams.otherType = 'nickname';
  533. otherParams.messageAlign = 'left';
  534. return true;
  535. }
  536. // 判断新建学员是否上限了
  537. if (
  538. forms.isRegister === 'create' &&
  539. forms.studentList.length >= forms.multi_user_limit
  540. ) {
  541. otherParams.showOtherMessage = `同一手机号最多创建${forms.multi_user_limit}个学生`;
  542. otherParams.showOtherSchool = true;
  543. otherParams.showCancelButton = false;
  544. otherParams.showCloseButton = true;
  545. otherParams.confirmButtonColor =
  546. 'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
  547. otherParams.confirmButtonText = '我知道了';
  548. otherParams.otherType = 'limit';
  549. otherParams.messageAlign = 'center';
  550. return true;
  551. }
  552. // 判断是否为同一个学校
  553. if (
  554. forms.studentItem.schoolId &&
  555. forms.studentItem.schoolId !== forms.registerDetails.schoolId &&
  556. !forms.isChangeSchool &&
  557. forms.isRegister === 'update'
  558. ) {
  559. otherParams.showOtherMessage = `您已绑定<span style="color: #2B85FF">【${
  560. forms.studentItem?.schoolName || ''
  561. }】</span>,提交后将更换到
  562. <span style="color: #2B85FF">【${
  563. forms.registerDetails.schoolName || ''
  564. }】</span>
  565. ,是否确认提交?`;
  566. otherParams.showOtherSchool = true;
  567. otherParams.showCloseButton = false;
  568. otherParams.showCancelButton = true;
  569. otherParams.cancelButtonColor = '';
  570. otherParams.cancelButtonText = '取消';
  571. otherParams.confirmButtonColor = '';
  572. otherParams.confirmButtonText = '确定';
  573. otherParams.otherType = 'change';
  574. otherParams.messageAlign = 'left';
  575. return true;
  576. }
  577. return false;
  578. };
  579. /**
  580. * 登记成功之后购买
  581. */
  582. const onSubmit = async () => {
  583. forms.submitLoading = true;
  584. forms.intervalFnRef.pause();
  585. try {
  586. if (checkForm() || checkSubmit()) {
  587. forms.submitLoading = false;
  588. return;
  589. }
  590. const { extra, loginType, autoRegister, password, multiUser, ...res } =
  591. studentInfo;
  592. /*
  593. 新用户:
  594. autoRegister: true
  595. loginType: 'SMS'
  596. 已存在用户:
  597. autoRegister: false
  598. loginType: 'TOKEN'
  599. password: xxx
  600. */
  601. let tLoginType = loginType,
  602. tAutoRegister = autoRegister,
  603. tPassword = password,
  604. tMultiUser = multiUser;
  605. if (forms.isRegister === 'update') {
  606. tLoginType = 'TOKEN';
  607. tAutoRegister = false;
  608. tPassword = forms.studentItem.token;
  609. tMultiUser = false;
  610. }
  611. const result = await request.post('/edu-app/userlogin', {
  612. requestType: 'form',
  613. data: {
  614. loginType: tLoginType,
  615. autoRegister: tAutoRegister,
  616. password: tPassword,
  617. multiUser: tMultiUser,
  618. ...res,
  619. extra: JSON.stringify({
  620. ...extra,
  621. giftVipDay: forms.giftVipDay || 0,
  622. schoolId: forms.schoolId
  623. })
  624. }
  625. });
  626. if (result.code !== 200) {
  627. if (result.code === 5436) {
  628. forms.showTips = true;
  629. forms.showMessage = '二维码已经失效,详情请咨询学校老师';
  630. forms.showButton = false;
  631. } else if (result.code === 5435) {
  632. forms.showTips = true;
  633. forms.showMessage = result.message;
  634. forms.showButton = true;
  635. } else if (result.code === 5437) {
  636. forms.showTips = true;
  637. forms.showMessage = `<p style="color: #F44541">报名已截止,感谢您的参与</p>`; //result.message;
  638. forms.showButton = false;
  639. }
  640. } else {
  641. studentRegisterStore.setToken(
  642. result.data.token_type + ' ' + result.data.access_token
  643. );
  644. setLoginInit();
  645. let joinType = 'NOT_REGISTER';
  646. if (forms.joinType === 'digitalize') {
  647. joinType = 'SELECT_INSTRUMENT';
  648. }
  649. if (forms.joinType === 'tradition') {
  650. joinType = 'NOT_BUY_INSTRUMENT';
  651. }
  652. // 单独存入时间,为了解决视频播放统计不全的问题
  653. await updateStat(pageTimer.counter.value);
  654. // 更新时间
  655. const id = await updateStat(
  656. pageTimer.counter.value,
  657. joinType,
  658. result.data.userId,
  659. forms.schoolId
  660. );
  661. forms.saveId = id;
  662. forms.saveUserId = id;
  663. pageTimer.counter.value = 0;
  664. // 获取用户信息
  665. const res = await request.get('/edu-app/user/getUserInfo', {
  666. requestType: 'form'
  667. });
  668. setLogin(res.data);
  669. await onRegisterSubmit();
  670. }
  671. } catch {
  672. // 重置信息 - 如果是新建则不提示
  673. changeTipStatus(forms.isRegister === 'create' ? false : true, false);
  674. } finally {
  675. forms.submitLoading = false;
  676. forms.intervalFnRef.resume();
  677. }
  678. };
  679. const updateStudentInfo = async () => {
  680. try {
  681. const { extra, username } = studentInfo;
  682. const registerResult = await request.post('/edu-app/student/register', {
  683. data: {
  684. schoolId: forms.schoolId,
  685. clientType: 'STUDENT',
  686. ...extra,
  687. giftVipFlag: forms.registerDetails.giftVipFlag || false,
  688. giftVipDay: forms.giftVipDay || 0,
  689. schoolVerify: true,
  690. firstVipDay: forms.detailVip.membershipDays || 0,
  691. mobile: username,
  692. newRegUser: forms.isRegister === 'create' ? true : false
  693. }
  694. });
  695. if (registerResult.code !== 200) {
  696. if (registerResult.code === 5436) {
  697. forms.showTips = true;
  698. forms.showMessage = '二维码已经失效,详情请咨询学校老师';
  699. forms.showButton = false;
  700. } else if (registerResult.code === 5435) {
  701. forms.showTips = true;
  702. forms.showMessage = registerResult.message;
  703. forms.showButton = true;
  704. } else if (registerResult.code === 5437) {
  705. forms.showTips = true;
  706. forms.showMessage = `<p style="color: #F44541">报名已截止,感谢您的参与</p>`; //result.message;
  707. forms.showButton = false;
  708. }
  709. return false;
  710. } else {
  711. return true;
  712. }
  713. } catch {}
  714. };
  715. // 登记成功之后购买
  716. const onRegisterSubmit = async () => {
  717. try {
  718. // 请求是否有待支付订单,如果有则自动关闭
  719. const status = await paymentOrderUnpaid();
  720. if (status) return;
  721. const schoolInfo = await request.get(
  722. '/edu-app/userPaymentOrder/registerStatus/' + forms.schoolId
  723. );
  724. const vipList = studentRegisterStore.getVip;
  725. // 传统方式
  726. if (forms.joinType === 'tradition') {
  727. const updateStatus = await updateStudentInfo();
  728. if (!updateStatus) return;
  729. setTimeout(() => {
  730. showToast('报名成功');
  731. // router.push('/download');
  732. }, 100);
  733. setTimeout(() => {
  734. if (browser().weixin) {
  735. // 关闭微信
  736. (window as any).WeixinJSBridge.call('closeWindow');
  737. }
  738. }, 1000);
  739. return;
  740. }
  741. if (schoolInfo.data.hasBuyCourse && vipList.length > 0) {
  742. // forms.dialogConfirmStatus = true;
  743. otherParams.showOtherMessage = `该学员已购买会员,是否再次购买?`;
  744. otherParams.showOtherSchool = true;
  745. otherParams.showCloseButton = false;
  746. otherParams.showCancelButton = true;
  747. otherParams.cancelButtonColor = '';
  748. otherParams.cancelButtonText = '取消';
  749. otherParams.confirmButtonColor = '';
  750. otherParams.confirmButtonText = '确定';
  751. otherParams.otherType = 'member';
  752. otherParams.messageAlign = 'center';
  753. return;
  754. }
  755. await paymentContinue();
  756. } catch {
  757. // 重置信息 - 如果是新建则不提示
  758. changeTipStatus(forms.isRegister === 'create' ? false : true, false);
  759. }
  760. };
  761. const getUserInfos = async () => {
  762. if (
  763. studentInfo.password.length !== 6 ||
  764. !checkPhone(studentInfo.username)
  765. ) {
  766. return;
  767. }
  768. try {
  769. // 15907120131;
  770. const { data } = await request.get(
  771. `/edu-app/open/student/studentInfo?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER&activationCodeFlag=1`
  772. );
  773. forms.studentList = data || [];
  774. if (forms.studentList.length > 0) {
  775. const firstStudent: any = forms.studentList[0];
  776. forms.studentItem = firstStudent;
  777. studentInfo.extra.nickname = firstStudent.nickname;
  778. const tempGrade: any = forms.gradeList || [];
  779. tempGrade?.forEach((i: any) => {
  780. if (i.value === firstStudent.currentGradeNum) {
  781. forms.instrumentCode = i.instrumentCode;
  782. forms.gradeNumText = i.text;
  783. studentInfo.extra.currentGradeNum = firstStudent.currentGradeNum;
  784. if (forms.schoolInstrumentSetType === 'CLASS') {
  785. forms.classList = i.classList;
  786. }
  787. }
  788. });
  789. forms.classList.forEach((i: any) => {
  790. if (i.value === firstStudent.currentClass) {
  791. forms.currentClassText = i.text;
  792. studentInfo.extra.currentClass = firstStudent.currentClass;
  793. }
  794. });
  795. studentInfo.extra.gender = firstStudent.gender;
  796. forms.isRegister = 'update';
  797. changeTipStatus(true, false);
  798. } else {
  799. forms.isRegister = 'create';
  800. changeTipStatus(false, false);
  801. forms.studentItem = [];
  802. }
  803. } catch {
  804. //
  805. }
  806. };
  807. // 查询未支付订单
  808. const paymentOrderUnpaid = async () => {
  809. let result = false;
  810. try {
  811. const { data } = await request.get(
  812. '/edu-app/userPaymentOrder/schoolRegisterOrder?schoolId=' +
  813. forms.schoolId
  814. );
  815. // 判断是否有待支付订单
  816. if (data && data.length > 0) {
  817. let isPadding = false; // 是否有待支付订单
  818. let paddingConfig = {} as any;
  819. let paddingData = {} as any;
  820. let isFinal = false; // 是否有完成订单
  821. let finalConfig = {} as any;
  822. data.forEach((element: any) => {
  823. // 判断是否待支付
  824. if (element.status === 'PAYING' || element.status === 'WAIT_PAY') {
  825. isPadding = true;
  826. paddingConfig = element.paymentConfig;
  827. paddingData = element;
  828. }
  829. if (
  830. element.status === 'PAID' ||
  831. element.status === 'PART_REFUNDED' ||
  832. element.status === 'REFUNDED'
  833. ) {
  834. isFinal = true;
  835. finalConfig = element.paymentConfig;
  836. }
  837. });
  838. // 判断是否有完成订单 并且选择 自备
  839. if (isFinal && forms.joinType === 'tradition') {
  840. const studentResult = await updateStudentInfo();
  841. if (!studentResult) return;
  842. setTimeout(() => {
  843. showToast('您已通过数字化方式报名成功');
  844. }, 100);
  845. return true;
  846. }
  847. // 提交报名信息时,判断该手机号是否存在待支付订单,若存则判断本次提交的报名方式,若本次提交的是团购则提示【您有待支付的报名订单,是否继续支付 重新下单/继续支付】,点击重新下单时,关闭老订单,创建新订单;若本次提交的是自备,则提示 【您有数字化方式报名的待支付订单,请关闭订单后重新报名 取消/关闭】取消则停留在当前界面,关闭则关闭订单,并停留在当前界面,用户需要再次点击报名按钮提交信息
  848. if (isPadding && forms.joinType === 'tradition') {
  849. forms.dialogStatus = true;
  850. forms.dialogMessage =
  851. '您有数字化方式报名的待支付订单,请关闭订单后重新报名';
  852. forms.cancelButtonText = '取消';
  853. forms.confirmButtonText = '关闭';
  854. forms.dialogConfig = paddingConfig;
  855. forms.messageAlign = 'left';
  856. return true;
  857. }
  858. if (isPadding && forms.joinType === 'digitalize') {
  859. // 最终确认,有待支付订单直接去支付,没有则才会创建订单
  860. // state.config = paddingConfig?.paymentConfig;
  861. // state.orderNo = paddingConfig?.orderNo;
  862. // const updateStatus = await updateStudentInfo();
  863. // if (!updateStatus) return;
  864. // await lastSubmit();
  865. // 为了处理,有待支付订单,然后后台改了金额,会导致金额不一致
  866. forms.dialogConfig = paddingConfig;
  867. const cancelStatus = await cancelPaymentOrder();
  868. if (cancelStatus) {
  869. await paymentContinue();
  870. }
  871. return true;
  872. }
  873. return false;
  874. } else {
  875. return false;
  876. }
  877. } catch {
  878. // 重置信息 - 如果是新建则不提示
  879. changeTipStatus(forms.isRegister === 'create' ? false : true, false);
  880. }
  881. return result;
  882. };
  883. // 重新下单
  884. const resetOrderPayment = async () => {
  885. try {
  886. const orderNo = forms.dialogConfig?.orderNo;
  887. if (!orderNo) return;
  888. await request.post(
  889. '/edu-app/userPaymentOrder/cancelPayment/' + orderNo
  890. );
  891. await onRegisterSubmit();
  892. } catch {
  893. //
  894. }
  895. };
  896. // 取消订单
  897. const cancelPaymentOrder = async () => {
  898. try {
  899. const orderNo = forms.dialogConfig?.orderNo;
  900. if (!orderNo) return;
  901. await request.post(
  902. '/edu-app/userPaymentOrder/cancelPayment/' + orderNo
  903. );
  904. return true;
  905. } catch {
  906. return false;
  907. }
  908. };
  909. const paymentContinue = async () => {
  910. try {
  911. const vipList = studentRegisterStore.getVip;
  912. const goodsList = studentRegisterStore.getGoods;
  913. const params: any[] = [];
  914. vipList.forEach((vip: any) => {
  915. params.push({
  916. giftVipDay: vip.membershipDays,
  917. giftPeriod: vip.giftPeriod,
  918. goodsId: vip.goodsId,
  919. goodsNum: 1,
  920. goodsType: vip.goodsType,
  921. paymentCashAmount: vip.currentPrice, // 现金支付金额
  922. paymentCouponAmount: 0 // 优惠券金额
  923. });
  924. });
  925. goodsList.forEach((goods: any) => {
  926. params.push({
  927. goodsId: goods.productId,
  928. goodsNum: goods.quantity,
  929. goodsType: 'INSTRUMENTS',
  930. paymentCashAmount: goods.price, // 现金支付金额
  931. paymentCouponAmount: 0, // 优惠券金额
  932. goodsSkuId: goods.productSkuId
  933. });
  934. });
  935. // 创建订单
  936. const updateStatus = await updateStudentInfo();
  937. // console.log(updateStatus, 'updateStatus');
  938. if (!updateStatus) return;
  939. const result = await request.post(
  940. '/edu-app/userPaymentOrder/executeOrder',
  941. {
  942. // hideLoading: false,
  943. data: {
  944. buryId: forms.saveUserId,
  945. registerType: forms.registerType,
  946. paymentType: forms.paymentType,
  947. bizId: forms.schoolId, // 乐团编号
  948. orderType: 'SCHOOL_REGISTER',
  949. paymentCashAmount: calcPrice.value.amount || 0,
  950. paymentCouponAmount: 0,
  951. goodsInfos: params,
  952. orderName: '学生登记',
  953. orderDesc: '学生登记'
  954. }
  955. }
  956. );
  957. if (result.code === 5436) {
  958. forms.showTips = true;
  959. forms.showMessage = '二维码已经失效,详情请咨询学校老师';
  960. forms.showButton = false;
  961. } else if (result.code === 5435) {
  962. forms.showTips = true;
  963. forms.showMessage = result.message;
  964. forms.showButton = true;
  965. } else {
  966. state.config = {
  967. ...result.data.paymentConfig,
  968. paymentType: result.data.paymentType
  969. };
  970. state.orderNo = result.data.orderNo;
  971. await lastSubmit();
  972. }
  973. } catch (e: any) {
  974. console.log(e, 'any');
  975. // 重置信息 - 如果是新建则不提示
  976. changeTipStatus(forms.isRegister === 'create' ? false : true, false);
  977. }
  978. };
  979. const lastSubmit = async () => {
  980. try {
  981. const users = baseState.user.data;
  982. // 判断是否需要实名认证, 姓名,卡号 - 参数设置可以控制
  983. if (
  984. forms.contract_sign &&
  985. (!users?.account.realName || !users?.account.idCardNo)
  986. ) {
  987. state.authShow = true;
  988. return;
  989. }
  990. const { data } = await request.post(
  991. '/edu-app/userPaymentOrder/updateReceiveAddress',
  992. {
  993. // hideLoading: false,
  994. data: {
  995. orderNo: state.orderNo,
  996. orderType: 'SCHOOL_REGISTER'
  997. }
  998. }
  999. );
  1000. state.pay_channel = data.paymentChannel;
  1001. if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
  1002. router.replace({
  1003. path: '/payment-result',
  1004. query: {
  1005. orderNo: state.orderNo
  1006. }
  1007. });
  1008. } else {
  1009. onCallback();
  1010. }
  1011. } catch {
  1012. // 重置信息 - 如果是新建则不提示
  1013. changeTipStatus(forms.isRegister === 'create' ? false : true, false);
  1014. }
  1015. };
  1016. /**
  1017. * @description 回调,判断是否有支付渠道,如果有则直接去支付
  1018. * @returns void
  1019. */
  1020. const onCallback = () => {
  1021. const pt = state.pay_channel;
  1022. // 判断是否有支付方式
  1023. if (pt) {
  1024. const payCode: string = beforeSubmit(state.pay_channel);
  1025. onConfirm({
  1026. payCode,
  1027. pay_channel: pt
  1028. });
  1029. } else {
  1030. if (orderType.value === 'VIP') {
  1031. state.paymentStatus = true;
  1032. } else {
  1033. // 直接去拉取微信支付
  1034. onConfirm({
  1035. payCode: 'payResult',
  1036. pay_channel: forms.paymentChannel
  1037. });
  1038. }
  1039. }
  1040. };
  1041. const onConfirm = (val: any) => {
  1042. const config: any = state.config;
  1043. state.pay_channel = val.pay_channel;
  1044. const params = qs.stringify({
  1045. pay_channel: val.pay_channel,
  1046. wxAppId: config.wxAppId,
  1047. alipayAppId: config.alipayAppId,
  1048. paymentType: forms.paymentType,
  1049. body: config.body,
  1050. price: config.price,
  1051. orderNo: config.merOrderNo,
  1052. userId: config.userId
  1053. });
  1054. // console.log(params, state.config);
  1055. // return;
  1056. if (val.payCode === 'payResult') {
  1057. window.location.href =
  1058. getHttpOrigin() + '/classroom-app/#/payResult?' + params;
  1059. } else {
  1060. state.qrCodeUrl =
  1061. getHttpOrigin() + '/classroom-app/#/payDefine?' + params;
  1062. state.showQrcode = true;
  1063. state.paymentStatus = false;
  1064. setTimeout(() => {
  1065. getPaymentOrderStatus();
  1066. }, 300);
  1067. }
  1068. };
  1069. // 放弃支付时,则取消订单
  1070. const onBackOut = async () => {
  1071. try {
  1072. await request.post(
  1073. '/edu-app/userPaymentOrder/cancelPayment/' + state.orderNo
  1074. );
  1075. // router.back();
  1076. } catch {
  1077. //
  1078. }
  1079. };
  1080. // 轮询查询订单状态
  1081. const getPaymentOrderStatus = async () => {
  1082. // 循环查询订单
  1083. // const orderNo = state.orderNo
  1084. const orderTimer = setInterval(async () => {
  1085. // 判断是否在当前路由,如果不是则清除定时器
  1086. if (route.name != 'student-register-form') {
  1087. clearInterval(orderTimer);
  1088. return;
  1089. }
  1090. state.orderTimer = orderTimer;
  1091. try {
  1092. const { data } = await request.post(
  1093. '/edu-app/open/userOrder/paymentStatus/' + state.orderNo,
  1094. {
  1095. hideLoading: true
  1096. }
  1097. );
  1098. if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
  1099. // 默认关闭支付二维码弹窗
  1100. state.showQrcode = false;
  1101. clearInterval(state.orderTimer);
  1102. setTimeout(() => {
  1103. router.replace({
  1104. path: '/payment-result',
  1105. query: {
  1106. orderNo: state.orderNo
  1107. }
  1108. });
  1109. }, 100);
  1110. }
  1111. } catch {
  1112. //
  1113. clearInterval(state.orderTimer);
  1114. }
  1115. }, 5000);
  1116. };
  1117. // 实名认证成功
  1118. const onAuthSuccess = () => {
  1119. //
  1120. state.authShow = false;
  1121. paymentContinue(); // 实名成功后自动支付
  1122. };
  1123. /**
  1124. * 页面停留时间
  1125. * @param pageBrowseTime 停留时间
  1126. * @param joinType 加入方式
  1127. * @param userId 用户编号
  1128. * @param schoolId 学校编号
  1129. */
  1130. const updateStat = async (
  1131. pageBrowseTime = 5,
  1132. joinType?: string,
  1133. userId?: string,
  1134. schoolId?: string
  1135. ) => {
  1136. try {
  1137. const params = {
  1138. id: forms.saveId,
  1139. useTime: pageBrowseTime, // 固定5秒
  1140. joinType,
  1141. userId,
  1142. schoolId
  1143. };
  1144. let otherParams = {};
  1145. if (!userId && videoForms.player.duration() > 0) {
  1146. const videoBrowseData =
  1147. moreTime.value.length > 0
  1148. ? formatEffectiveTime(moreTime.value)
  1149. : [];
  1150. const time =
  1151. videoBrowseData.length > 0 ? formatTimer(videoBrowseData) : 0;
  1152. // console.log(moreTime.value, videoBrowseData, 'video', time);
  1153. // const videoCountTime = videoIntervalRef?.counter.value
  1154. // 判断 视屏播放时间大于视屏播放有效时间则说明数据有问题,进行重置数据
  1155. const rate = Math.floor(
  1156. (Math.round(time) / Math.floor(videoForms.player.duration())) * 100
  1157. );
  1158. otherParams = {
  1159. videoBrowseData: JSON.stringify(videoBrowseData), // 视屏播放数据
  1160. videoBrowseDataTime: time || 0, // 有效的视频观看时长
  1161. videoBrowsePercentage: rate || 0, // 有效的视频观看时长百分比
  1162. videoBrowseTime: timer.getTime(), // 视频观看时长
  1163. videoBrowsePoint: videoForms.player.currentTime() // 视频最后观看点 - 向下取整
  1164. };
  1165. }
  1166. // console.log(
  1167. // videoIntervalRef.counter.value,
  1168. // timer.getTime(),
  1169. // videoForms.player.currentTime(),
  1170. // videoBrowseData,
  1171. // 'timer count'
  1172. // );
  1173. const { data } = await requestStudent.post(
  1174. '/edu-app/open/studentRegisterPointRecord/update',
  1175. {
  1176. data: {
  1177. ...params,
  1178. ...otherParams
  1179. }
  1180. }
  1181. );
  1182. // 不相同则说明不是一个人,数据重置
  1183. if (data !== forms.saveId) {
  1184. moreTime.value = [];
  1185. }
  1186. forms.saveId = data;
  1187. return data;
  1188. } catch {
  1189. //
  1190. }
  1191. };
  1192. // const getAppIdAndCode = async (url?: string) => {
  1193. // try {
  1194. // const { data } = await request.get(
  1195. // '/edu-app/open/paramConfig/wechatAppId'
  1196. // );
  1197. // // 判断是否有微信appId
  1198. // if (data) {
  1199. // closeToast();
  1200. // goWechatAuth(data, url);
  1201. // }
  1202. // } catch {
  1203. // //
  1204. // }
  1205. // };
  1206. // if (browser().weixin) {
  1207. // //授权
  1208. // const openId = sessionStorage.getItem('active-open-id');
  1209. // forms.openId = openId;
  1210. // const code = getUrlCode();
  1211. // if (!code) {
  1212. // const newUrl =
  1213. // getHttpOrigin() +
  1214. // window.location.pathname +
  1215. // '#' +
  1216. // route.path +
  1217. // '?' +
  1218. // qs.stringify({
  1219. // ...route.query
  1220. // });
  1221. // getAppIdAndCode(newUrl);
  1222. // return '';
  1223. // } else {
  1224. // forms.code = code;
  1225. // }
  1226. // }
  1227. const formatTimerTo = (num: number): string => {
  1228. if (num > 9) {
  1229. return num + '';
  1230. } else {
  1231. return '0' + num;
  1232. }
  1233. };
  1234. /**
  1235. * 视屏累计时长
  1236. * 1、视屏开始播放时-开始计时
  1237. * 2、视频暂停时暂停-停止计时
  1238. * 3、视频加载时-停止计时
  1239. * 4、视频倍数播放时,时间正常计时
  1240. * 5、点击视频进度或拖动进度时,时间暂停
  1241. */
  1242. const _init = () => {
  1243. const Button = TCPlayer.getComponent('Button');
  1244. const BigPlayButton = TCPlayer.getComponent('BigPlayButton');
  1245. BigPlayButton.prototype.createEl = function () {
  1246. const el = Button.prototype.createEl.call(this);
  1247. const _html =
  1248. '<button><svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle stroke="#FFFFFF" stroke-width="1.0112392" fill-opacity="0.3" fill="#000000" stroke-linecap="square" cx="21" cy="21" r="20.5056196"></circle><g transform="translate(13.000000, 12.000000)" fill="#FFFFFF"><path d="M11.7432433,3.46351367 L18.2071084,14.4520843 C18.7734418,15.4148511 18.4520691,16.6544316 17.4893024,17.2207649 C17.1784947,17.403593 16.8244584,17.5 16.4638651,17.5 L3.53613489,17.5 C2.41915092,17.5 1.51365649,16.5945056 1.51365649,15.4775216 C1.51365649,15.1169283 1.6100635,14.762892 1.79289156,14.4520843 L8.25675667,3.46351367 C8.82309003,2.50074696 10.0626705,2.17937423 11.0254373,2.74570759 C11.3218389,2.92006148 11.5688894,3.16711204 11.7432433,3.46351367 Z" id="三角形" transform="translate(10.000000, 9.000000) rotate(-270.000000) translate(-10.000000, -9.000000) "></path></g></g></svg></button>';
  1249. el.appendChild(
  1250. TCPlayer.dom.createEl('div', {
  1251. className: 'vjs-button-icon',
  1252. innerHTML: _html
  1253. })
  1254. );
  1255. return el;
  1256. };
  1257. videoForms.player = TCPlayer('register-video', {
  1258. appID: '',
  1259. controls: true,
  1260. plugins: {}
  1261. }); // player-container-id 为播放器容器 ID,必须与 html 中一致
  1262. if (videoForms.player) {
  1263. videoForms.player.src(
  1264. videoForms.introductionVideo ||
  1265. 'https://oss.dayaedu.com/ktyq/1719222831427bbef9504.mp4'
  1266. ); // url 播放地址
  1267. videoForms.player.poster(
  1268. 'https://oss.dayaedu.com/ktyq/17158281330381317fd87.png'
  1269. );
  1270. videoForms.player.on('ready', (item: any) => {
  1271. // console.log('ready', item);
  1272. // videoForms.player.pause()
  1273. });
  1274. videoForms.player.on('loadedmetadata', () => {
  1275. console.log('loadedmetadata');
  1276. // videoForms.loading = false;
  1277. videoForms.player.currentTime(videoForms.videoBrowsePoint);
  1278. });
  1279. // 速度变化时
  1280. videoForms.player.on('ratechange', () => {
  1281. videoForms.playerSpeed =
  1282. videoForms.playerSpeed < videoForms.player.playbackRate()
  1283. ? videoForms.player.playbackRate()
  1284. : videoForms.playerSpeed;
  1285. });
  1286. videoForms.player.on('seeking', () => {
  1287. console.log('seeking');
  1288. videoIntervalRef.isActive.value && videoIntervalRef.pause();
  1289. timer.pause();
  1290. });
  1291. // // 拖动结束时
  1292. videoForms.player.on('seeked', () => {
  1293. console.log('seeked');
  1294. videoIntervalRef.isActive.value && videoIntervalRef.pause();
  1295. timer.pause();
  1296. });
  1297. // 正在搜索中
  1298. videoForms.player.on('waiting', () => {
  1299. // console.log('waiting pause')
  1300. videoIntervalRef.isActive.value && videoIntervalRef.pause();
  1301. timer.pause();
  1302. });
  1303. // 如何视频在缓存不会触发
  1304. videoForms.player.on('timeupdate', () => {
  1305. // console.log('timeupdate', videoForms.player.currentTime());
  1306. // 判断视频计时器是否暂停,如果暂停则恢复
  1307. // 添加 「videoForms.player.playing」 是由会跳转到上次播放时间,会触发些方法
  1308. if (
  1309. !videoIntervalRef.isActive.value &&
  1310. videoForms.player.currentTime() > 0 &&
  1311. !videoForms.player.paused()
  1312. ) {
  1313. // console.log('timeupdate play')
  1314. videoIntervalRef.resume();
  1315. timer.resume();
  1316. }
  1317. });
  1318. // 视屏播放时暂停
  1319. videoForms.player.on('ended', () => {
  1320. videoForms.player.pause();
  1321. });
  1322. // 开始播放
  1323. videoForms.player.on('play', () => {
  1324. console.log('play');
  1325. forms.showDuration = false;
  1326. // 判断视频计时器是否暂停,如果暂停则恢复
  1327. videoIntervalRef.resume();
  1328. timer.resume();
  1329. });
  1330. // 暂停播放
  1331. videoForms.player.on('pause', () => {
  1332. console.log('pause', videoIntervalRef.isActive.value);
  1333. videoIntervalRef.pause();
  1334. timer.pause();
  1335. });
  1336. videoForms.player.on('fullscreenchange', () => {
  1337. if (videoForms.player.isFullscreen()) {
  1338. console.log('fullscreen');
  1339. const i = document.createElement('i');
  1340. i.id = 'fullscreen-back';
  1341. i.className = 'van-icon van-icon-arrow-left video-back';
  1342. i.addEventListener('click', () => {
  1343. videoForms.player.exitFullscreen();
  1344. });
  1345. document.getElementsByClassName('video-js')[0].appendChild(i);
  1346. } else {
  1347. console.log('exitfullscreen');
  1348. const i = document.getElementById('fullscreen-back');
  1349. i && i.remove();
  1350. }
  1351. });
  1352. }
  1353. };
  1354. // 保存零时时间
  1355. const moreTime: any = ref([]); // 多个观看时间段
  1356. let tempTime: any = []; // 临时存储时间
  1357. const currentTimer = useInterval(1000, { controls: true });
  1358. // 监听播放状态,
  1359. watch(
  1360. () => videoIntervalRef.isActive.value,
  1361. (newVal: boolean) => {
  1362. console.log(videoIntervalRef.isActive.value, 'videoIntervalRef');
  1363. initVideoCount(newVal);
  1364. }
  1365. );
  1366. /**
  1367. * 初始化视频时长
  1368. * @param newVal 播放状态
  1369. * @param repeat 是否为定时发送的
  1370. */
  1371. const initVideoCount = (newVal: any, repeat = false) => {
  1372. // console.log('watch', videoForms.player.currentTime())
  1373. const initTime = deepClone(tempTime);
  1374. if (repeat) {
  1375. if (tempTime.length > 0) {
  1376. // console.log('join video', tempTime, 'initTime', initTime)
  1377. tempTime[1] =
  1378. Math.floor(videoForms.player.currentTime() * 1000) / 1000;
  1379. // tempTime[1] = videoForms.player.currentTime();
  1380. }
  1381. } else {
  1382. if (newVal) {
  1383. // console.log(
  1384. // videoForms.player.currentTime(),
  1385. // 'videoForms.player.currentTime()'
  1386. // );
  1387. tempTime[0] =
  1388. Math.floor(videoForms.player.currentTime() * 1000) / 1000;
  1389. // tempTime[0] = videoForms.player.currentTime();
  1390. } else {
  1391. tempTime[1] =
  1392. Math.floor(videoForms.player.currentTime() * 1000) / 1000;
  1393. // tempTime[1] = videoForms.player.currentTime();
  1394. }
  1395. }
  1396. // console.log(
  1397. // newVal,
  1398. // repeat,
  1399. // tempTime,
  1400. // tempTime.length,
  1401. // 'videoIntervalRef.isActive.value in'
  1402. // );
  1403. // console.log(videoForms.player.playbackRate(), 'speed');
  1404. if (tempTime.length >= 2) {
  1405. // console.log(tempTime, 'tempTime', moreTime.value)
  1406. // 处理在短时间内的时间差 【视屏拖动,点击可能会导致时间差太大】
  1407. const diffTime =
  1408. tempTime[1] -
  1409. tempTime[0] -
  1410. currentTimer.counter.value * videoForms.playerSpeed >
  1411. 2;
  1412. // console.log(diffTime, 'diffTime', currentTimer.counter.value, videoForms.playerSpeed, 'value')
  1413. // 结束时间,如果 大于开始时间则清除
  1414. if (tempTime[1] >= tempTime[0] && !diffTime)
  1415. moreTime.value.push(tempTime);
  1416. if (repeat) {
  1417. tempTime = deepClone(initTime);
  1418. } else {
  1419. tempTime = [];
  1420. currentTimer.counter.value = 0;
  1421. }
  1422. }
  1423. };
  1424. watch(pageVisibility, (value: any) => {
  1425. if (value == 'hidden') {
  1426. videoForms.player.pause();
  1427. }
  1428. });
  1429. const pagePointInit = async () => {
  1430. try {
  1431. if (!forms.openId) return;
  1432. const { data } = await request.post(
  1433. '/edu-app/open/studentRegisterPointRecord/save',
  1434. {
  1435. data: {
  1436. // code: forms.code,
  1437. schoolId: forms.schoolId,
  1438. openId: forms.openId
  1439. }
  1440. }
  1441. );
  1442. forms.saveId = data.id;
  1443. forms.openId = data.openId;
  1444. moreTime.value = data.videoBrowseData
  1445. ? JSON.parse(data.videoBrowseData)
  1446. : [];
  1447. videoForms.videoBrowsePoint = data.videoBrowsePoint || 0;
  1448. if (videoForms.player) {
  1449. videoForms.player.currentTime(data.videoBrowsePoint || 0);
  1450. }
  1451. // sessionStorage.setItem('active-open-id', data.openId);
  1452. // 间隔多少时间同步数据
  1453. forms.intervalFnRef = useIntervalFn(async () => {
  1454. // 页面时间恢复
  1455. forms.intervalFnRef.pause();
  1456. pageTimer.counter.value = 0;
  1457. pageTimer.resume();
  1458. // 同步数据时先进行有效时间进行保存
  1459. initVideoCount(false, true);
  1460. updateStat();
  1461. timer.resetTime();
  1462. videoIntervalRef.counter.value = 0;
  1463. forms.intervalFnRef.resume();
  1464. }, 5000);
  1465. } catch {}
  1466. };
  1467. /** 手机号变更时清空验证码信息,用户信息 */
  1468. const phoneChangeEmptyInfo = () => {
  1469. studentInfo.password = '';
  1470. studentInfo.extra.nickname = '';
  1471. studentInfo.extra.currentGradeNum = '';
  1472. studentInfo.extra.currentClass = '';
  1473. studentInfo.extra.gender = 1;
  1474. forms.currentClassText = '';
  1475. forms.gradeNumText = '';
  1476. forms.studentList = []; // 手机号关联学生列表
  1477. forms.studentItem = {}; // 选择的学生
  1478. forms.isRegister = 'create'; // 是否注册学生
  1479. forms.isTipRegister = false; // 是否显示名字不一致 - 默认显示
  1480. forms.isChangeSchool = false; // 是否切换学校
  1481. };
  1482. onMounted(async () => {
  1483. const openId = await authCode.getOpenId(
  1484. getHttpOrigin() +
  1485. window.location.pathname +
  1486. '#' +
  1487. route.path +
  1488. '?' +
  1489. qs.stringify({
  1490. ...route.query
  1491. })
  1492. );
  1493. forms.openId = openId;
  1494. try {
  1495. // 获取支付类型
  1496. let expireDay = null;
  1497. const { data } = await request.get(
  1498. '/edu-app/open/paramConfig/queryByParamNameList',
  1499. {
  1500. requestType: 'form',
  1501. params: {
  1502. paramNames:
  1503. 'payment_service_provider,contract_sign,multi_user_limit,qr_code_expire_time'
  1504. }
  1505. }
  1506. );
  1507. if (data && Array.isArray(data)) {
  1508. data.forEach((item: any) => {
  1509. if (item.paramName === 'contract_sign') {
  1510. forms.contract_sign = item.paramValue === '1' ? true : false;
  1511. } else if (item.paramName === 'payment_service_provider') {
  1512. // forms.paymentType = item.paramValue || '';
  1513. const provider = JSON.parse(item.paramValue);
  1514. forms.paymentType = provider.vendor;
  1515. forms.paymentChannel = provider.channel;
  1516. } else if (item.paramName === 'multi_user_limit') {
  1517. forms.multi_user_limit = item.paramValue
  1518. ? Number(item.paramValue)
  1519. : 1;
  1520. } else if (item.paramName === 'qr_code_expire_time') {
  1521. expireDay = item.paramValue ? Number(item.paramValue) : null;
  1522. }
  1523. });
  1524. }
  1525. const createT = route.query.t;
  1526. if (createT && expireDay !== null) {
  1527. if (dayjs(Number(createT)).add(expireDay, 'day').isBefore(dayjs())) {
  1528. forms.showTips = true;
  1529. forms.showMessage = '二维码已经失效,详情请咨询学校老师';
  1530. forms.showButton = false;
  1531. }
  1532. }
  1533. // 初始化视频播放器
  1534. _init();
  1535. await getRegisterGoods();
  1536. } catch {}
  1537. });
  1538. onUnmounted(() => {
  1539. forms.intervalFnRef?.pause(); // 暂停回调
  1540. });
  1541. return () => (
  1542. <div class={styles['student-register']}>
  1543. <div class={styles.studentRegisterContainer}>
  1544. {!forms.activeOverStatus && (
  1545. <div class={styles.countdownSection}>
  1546. <div class={styles.timer}>
  1547. <img src={icon3} class={styles.timerTitle} />
  1548. <div class={styles.timerAll}>
  1549. <span>{formatTimerTo(overCountDown.current.value.days)}</span>
  1550. <span>
  1551. {formatTimerTo(overCountDown.current.value.hours)}
  1552. </span>
  1553. <span>
  1554. {formatTimerTo(overCountDown.current.value.minutes)}
  1555. </span>
  1556. <span>
  1557. {formatTimerTo(overCountDown.current.value.seconds)}
  1558. </span>
  1559. </div>
  1560. </div>
  1561. <div class={styles.timerTip}>
  1562. 为了确保您能顺利参与学习,请在规定时间内报名。
  1563. </div>
  1564. </div>
  1565. )}
  1566. <div class={[styles.studentSection, styles.studentSectionForm]}>
  1567. <div class={styles.title4}></div>
  1568. <div class={styles['video-content']}>
  1569. <video
  1570. id="register-video"
  1571. class={styles['video']}
  1572. src={'https://oss.dayaedu.com/ktyq/1719222831427bbef9504.mp4'}
  1573. playsinline={true}
  1574. poster={
  1575. 'https://oss.dayaedu.com/ktyq/17158281330381317fd87.png'
  1576. }
  1577. preload="auto"></video>
  1578. {forms.showDuration && (
  1579. <span class={styles.videoDuration}>1:24</span>
  1580. )}
  1581. </div>
  1582. </div>
  1583. <div
  1584. class={[
  1585. styles.studentSection,
  1586. styles.studentSectionForm,
  1587. forms.giftVipDay <= 0 && styles.noSendDay
  1588. ]}
  1589. // style={{ display: 'none' }}
  1590. >
  1591. <div class={styles.title1}></div>
  1592. <Form labelAlign="left" class={styles.registerForm}>
  1593. <Field
  1594. clearable={false}
  1595. label="联系方式(直接监护人)"
  1596. placeholder="请输入手机号码"
  1597. type="tel"
  1598. required
  1599. autocomplete="off"
  1600. inputAlign="right"
  1601. class={styles.username}
  1602. v-model={studentInfo.username}
  1603. border={false}
  1604. maxlength={11}
  1605. onUpdate:modelValue={() => {
  1606. phoneChangeEmptyInfo();
  1607. }}>
  1608. {{
  1609. label: () => (
  1610. <div>
  1611. 联系方式
  1612. {/* (直接监护人) */}
  1613. <p class={styles.tips}>(直接监护人)</p>
  1614. </div>
  1615. )
  1616. }}
  1617. </Field>
  1618. <div class={['van-hairline--bottom', styles.fieldTipsGroup]}>
  1619. <div class={[styles.fieldTips]}>
  1620. 手机号是音乐数字课堂的唯一登录账户
  1621. </div>
  1622. </div>
  1623. <Field
  1624. center
  1625. clearable={false}
  1626. required
  1627. inputAlign="right"
  1628. label="验证码"
  1629. placeholder="请输入验证码"
  1630. autocomplete="off"
  1631. type="number"
  1632. v-model={studentInfo.password}
  1633. maxlength={6}
  1634. onUpdate:modelValue={(val: any) => {
  1635. getUserInfos();
  1636. }}>
  1637. {{
  1638. button: () =>
  1639. forms.countDownStatus ? (
  1640. <span
  1641. class={[
  1642. styles.codeText,
  1643. !validatePhone.value ? styles.codeTextDisabled : ''
  1644. ]}
  1645. onClick={onSendCode}>
  1646. 获取验证码
  1647. </span>
  1648. ) : (
  1649. <CountDown
  1650. ref={(el: any) => (countDownRef.value = el)}
  1651. auto-start={false}
  1652. class={styles.countDown}
  1653. time={forms.countDownTime}
  1654. onFinish={onFinished}
  1655. format="ss秒后重试"
  1656. />
  1657. )
  1658. }}
  1659. </Field>
  1660. {/* 大于等于2,则可以切换学生 */}
  1661. {/* {forms.studentList.length > 1 && (
  1662. <div
  1663. class={[
  1664. styles.selectStudentGroup,
  1665. forms.showSelectStudent && styles.selectStudentGroupChecked
  1666. ]}
  1667. onClick={() => (forms.showSelectStudent = true)}>
  1668. <i
  1669. class={[
  1670. styles.studentIcon,
  1671. !forms.studentItem.userId && styles.studentIconAdd
  1672. ]}></i>
  1673. <span>
  1674. {forms.studentItem.userId
  1675. ? forms.studentItem.nickname
  1676. : '新增学生'}
  1677. </span>
  1678. </div>
  1679. )} */}
  1680. <Field
  1681. clearable={false}
  1682. required
  1683. inputAlign="right"
  1684. label="学生姓名"
  1685. placeholder="请输入学生姓名"
  1686. autocomplete="off"
  1687. maxlength={14}
  1688. v-model={studentInfo.extra.nickname}>
  1689. {{
  1690. extra: () =>
  1691. forms.studentList.length > 1 && (
  1692. <div
  1693. class={[
  1694. styles.selectStudentGroup,
  1695. forms.showSelectStudent &&
  1696. styles.selectStudentGroupChecked
  1697. ]}
  1698. onClick={() => (forms.showSelectStudent = true)}>
  1699. <span>
  1700. {forms.studentItem.userId ? '切换' : '新增'}
  1701. </span>
  1702. </div>
  1703. )
  1704. }}
  1705. </Field>
  1706. <Field
  1707. clearable={false}
  1708. required
  1709. inputAlign="right"
  1710. label="学生性别"
  1711. placeholder="请选择性别"
  1712. autocomplete="off"
  1713. // v-model={studentInfo.extra.nickname}
  1714. >
  1715. {{
  1716. input: () => (
  1717. <RadioGroup
  1718. checked-color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
  1719. v-model={studentInfo.extra.gender}
  1720. direction="horizontal">
  1721. <Tag
  1722. size="large"
  1723. type="primary"
  1724. color={
  1725. !(studentInfo.extra.gender === 1)
  1726. ? '#F5F6FA'
  1727. : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
  1728. }
  1729. textColor={
  1730. !(studentInfo.extra.gender === 1) ? '#626264' : '#fff'
  1731. }
  1732. class={styles.radioSection}>
  1733. <Radio class={styles.radioItem} name={1}></Radio>男
  1734. </Tag>
  1735. <Tag
  1736. size="large"
  1737. type="primary"
  1738. color={
  1739. !(studentInfo.extra.gender === 0)
  1740. ? '#F5F6FA'
  1741. : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
  1742. }
  1743. textColor={
  1744. !(studentInfo.extra.gender === 0) ? '#626264' : '#fff'
  1745. }
  1746. class={styles.radioSection}>
  1747. <Radio class={styles.radioItem} name={0}></Radio>女
  1748. </Tag>
  1749. </RadioGroup>
  1750. )
  1751. }}
  1752. </Field>
  1753. <Field
  1754. clearable={false}
  1755. required
  1756. inputAlign="right"
  1757. label="所在年级"
  1758. placeholder="请选择年级"
  1759. isLink
  1760. readonly
  1761. clickable={false}
  1762. modelValue={forms.gradeNumText}
  1763. onClick={() => {
  1764. forms.gradePopupIndex = [studentInfo.extra.currentGradeNum];
  1765. forms.gradeStatus = true;
  1766. }}
  1767. />
  1768. <Field
  1769. clearable={false}
  1770. required
  1771. inputAlign="right"
  1772. label="所在班级"
  1773. placeholder="请选择班级"
  1774. isLink
  1775. readonly
  1776. clickable={false}
  1777. modelValue={forms.currentClassText}
  1778. onClick={() => {
  1779. if (
  1780. forms.schoolInstrumentSetType === 'CLASS' &&
  1781. forms.classList.length <= 0
  1782. ) {
  1783. showToast('请先选择年级');
  1784. return;
  1785. }
  1786. forms.classPopupIndex = [studentInfo.extra.currentClass];
  1787. forms.classStatus = true;
  1788. }}
  1789. />
  1790. {forms.giftVipDay > 0 && forms.registerDetails.giftVipFlag ? (
  1791. <div class={styles.memberNumer}>
  1792. <img src={iconGift} class={styles.iconGift} />
  1793. <p>
  1794. 注册成功即可获得乐器AI学练工具
  1795. <span>{forms.giftVipDay || 0}</span>天有效期
  1796. </p>
  1797. </div>
  1798. ) : (
  1799. ''
  1800. )}
  1801. </Form>
  1802. </div>
  1803. <div class={styles.studentSection}>
  1804. <div class={styles.title2}></div>
  1805. <div class={styles.goodsGroup}>
  1806. <div
  1807. class={[
  1808. styles.goodsItem,
  1809. styles.digitalize,
  1810. forms.joinType === 'digitalize' && styles.checked
  1811. ]}
  1812. onClick={() => {
  1813. //
  1814. if (checkForm()) {
  1815. showToast('请将资料填写完整');
  1816. return;
  1817. }
  1818. forms.joinType = 'digitalize';
  1819. nextTick(() => {
  1820. mstickyRef.value?.onChnageHeight();
  1821. setTimeout(() => {
  1822. window.scrollTo(0, 1000);
  1823. }, 50);
  1824. });
  1825. }}>
  1826. <div class={styles.goodsInner}>
  1827. <i class={styles.proposalTip}></i>
  1828. 数字化方式
  1829. </div>
  1830. </div>
  1831. <div
  1832. class={[
  1833. styles.goodsItem,
  1834. styles.tradition,
  1835. forms.joinType === 'tradition' && styles.checked1
  1836. ]}
  1837. onClick={() => {
  1838. if (checkForm()) {
  1839. showToast('请将资料填写完整');
  1840. return;
  1841. }
  1842. forms.joinType = 'tradition';
  1843. nextTick(() => {
  1844. mstickyRef.value?.onChnageHeight();
  1845. setTimeout(() => {
  1846. window.scrollTo(0, 1000);
  1847. }, 50);
  1848. });
  1849. }}>
  1850. <div class={styles.goodsInner}>传统方式</div>
  1851. </div>
  1852. </div>
  1853. {forms.joinType && (
  1854. <div class={styles.goodsTypeGroup}>
  1855. {forms.joinType === 'digitalize' && (
  1856. <img src={icon10} class={styles.showImg} />
  1857. )}
  1858. {forms.joinType === 'tradition' && (
  1859. <img src={icon11} class={styles.showImg} />
  1860. )}
  1861. </div>
  1862. )}
  1863. </div>
  1864. {forms.detailVip.membershipDays && forms.joinType === 'digitalize' ? (
  1865. <div class={styles.vipGiftContainer}>
  1866. <img src={vipGiftTIps} class={styles.iconGift} />
  1867. <p>
  1868. 现在购买额外赠送有效期
  1869. <div>
  1870. <span class={styles.vipGiftNum}>
  1871. {forms.detailVip.membershipDays || 0}
  1872. </span>
  1873. <span class={styles.vipGiftPreviod}>
  1874. {vipGiftPeriodType[forms.detailVip.giftPeriod]}
  1875. </span>
  1876. </div>
  1877. </p>
  1878. </div>
  1879. ) : (
  1880. ''
  1881. )}
  1882. {/* {forms.joinType === 'digitalize' && (
  1883. <div class={[styles.goodsExtra]}>
  1884. <i class={styles.iconArrow}></i>
  1885. <Cell border={false} class={styles.goodsCell}>
  1886. {{
  1887. icon: () => (
  1888. <Image
  1889. class={styles.img}
  1890. src={forms.detailVip.goodsUrl || tuangou}
  1891. />
  1892. ),
  1893. title: () => (
  1894. <div class={styles.section}>
  1895. <div class={styles.sectionContent}>
  1896. <h2>
  1897. <img src={icon5} class={styles.goodsName} />
  1898. <Tag class={styles.brandName}>
  1899. 12个月
  1900. </Tag>
  1901. </h2>
  1902. <p class={[styles.model]}>
  1903. <p>
  1904. <i></i>解决学生不会练、不知练的对错
  1905. </p>
  1906. <p>
  1907. <i></i>家长无法辅导、无需再额外请老师
  1908. </p>
  1909. </p>
  1910. <img src={icon6} class={styles.sendInstrument} />
  1911. </div>
  1912. </div>
  1913. )
  1914. }}
  1915. </Cell>
  1916. {forms.detailVip.membershipDays ? (
  1917. <div class={styles.memberNumer}>
  1918. <img src={iconGift} class={styles.iconGift} />
  1919. <p>
  1920. 首次购买赠送乐器AI学练工具
  1921. <span>{forms.detailVip.membershipDays || 0}</span>天有效期
  1922. </p>
  1923. </div>
  1924. ) : (
  1925. ''
  1926. )}
  1927. </div>
  1928. )}
  1929. {forms.joinType === 'tradition' && (
  1930. <div class={styles.goodsTradition}>
  1931. <i class={styles.iconArrow}></i>
  1932. <div class={styles.goodsTitle}></div>
  1933. <div class={styles.steps}>
  1934. <div class={styles.step}>
  1935. <span class={styles.nums}>
  1936. <span class={styles.numInner}>1</span>
  1937. </span>
  1938. <div class={styles.stepContent}>
  1939. <span>AI工具标准:</span>
  1940. 可以学练音乐教材中的乐曲,通过手机应用商店准备。
  1941. </div>
  1942. </div>
  1943. {['Panpipes', 'Ocarina', 'Tenor Recorder', 'Woodwind'].includes(
  1944. forms.instrumentCode
  1945. ) && (
  1946. <div class={styles.step}>
  1947. <span class={styles.nums}>
  1948. <span class={styles.numInner}>2</span>
  1949. </span>
  1950. <div class={styles.stepContent}>
  1951. <span>
  1952. {forms.instrumentCode === 'Panpipes' && '排箫'}
  1953. {forms.instrumentCode === 'Ocarina' && '陶笛'}
  1954. {forms.instrumentCode === 'Tenor Recorder' && '竖笛'}
  1955. {forms.instrumentCode === 'Woodwind' && '葫芦丝'}
  1956. 标准:
  1957. </span>
  1958. {forms.instrumentCode === 'Panpipes' &&
  1959. '管数不限,建议20管以上C调加嘴排箫(不需要重复更换),黑色,选择单一原调(调性多很难掌握);'}
  1960. {forms.instrumentCode === 'Ocarina' &&
  1961. 'C调、蓝色、十二孔高音、树脂或陶土均可;'}
  1962. {forms.instrumentCode === 'Tenor Recorder' &&
  1963. 'C调、木质、高音德式八孔;'}
  1964. {forms.instrumentCode === 'Woodwind' &&
  1965. 'C调、红木色、树脂或木质;'}
  1966. </div>
  1967. </div>
  1968. )}
  1969. </div>
  1970. </div>
  1971. )} */}
  1972. {forms.joinType && (
  1973. <MSticky position="bottom" ref={mstickyRef}>
  1974. <div class={styles.paymentContainer}>
  1975. {forms.joinType === 'digitalize' && (
  1976. <>
  1977. <div class={styles.payemntPrice}>
  1978. <img src={giftTip} class={styles.giftTip} />
  1979. <div>
  1980. <span class={styles.needPrice}>
  1981. <i style="font-style: normal">¥ </i>
  1982. <span>{moneyFormat(calcPrice.value.amount)}</span>
  1983. <i class={styles.unit} style="font-style: normal">
  1984. /年
  1985. </i>
  1986. </span>
  1987. {calcPrice.value.originAmount >
  1988. calcPrice.value.amount ? (
  1989. <del class={styles.allPrice}>
  1990. ¥ {moneyFormat(calcPrice.value.originAmount)}
  1991. </del>
  1992. ) : (
  1993. ''
  1994. )}
  1995. </div>
  1996. </div>
  1997. <div
  1998. class={styles.paymentBtn}
  1999. onClick={() => {
  2000. onSubmit();
  2001. }}>
  2002. <Button
  2003. round
  2004. disabled={forms.submitLoading}
  2005. loading={forms.submitLoading}>
  2006. 立即支付
  2007. </Button>
  2008. </div>
  2009. </>
  2010. )}
  2011. {forms.joinType === 'tradition' && (
  2012. <div
  2013. class={styles.traditionBtn}
  2014. onClick={() => {
  2015. onSubmit();
  2016. }}>
  2017. <Button
  2018. round
  2019. disabled={forms.submitLoading}
  2020. loading={forms.submitLoading}>
  2021. 提交报名
  2022. </Button>
  2023. </div>
  2024. )}
  2025. </div>
  2026. </MSticky>
  2027. )}
  2028. </div>
  2029. {forms.imgCodeStatus ? (
  2030. <MImgCode
  2031. v-model:value={forms.imgCodeStatus}
  2032. phone={studentInfo.username}
  2033. type="REGISTER"
  2034. onClose={() => {
  2035. forms.imgCodeStatus = false;
  2036. }}
  2037. onSendCode={onCodeSend}
  2038. />
  2039. ) : null}
  2040. {/* 年级 */}
  2041. <Popup
  2042. v-model:show={forms.gradeStatus}
  2043. position="bottom"
  2044. round
  2045. safeAreaInsetBottom
  2046. lazyRender={false}
  2047. class={'popupBottomSearch'}
  2048. onOpen={() => {
  2049. forms.gradePopupShow = true;
  2050. }}
  2051. onClosed={() => {
  2052. forms.gradePopupShow = false;
  2053. }}>
  2054. {forms.gradePopupShow && (
  2055. <Picker
  2056. showToolbar
  2057. v-model={forms.gradePopupIndex}
  2058. columns={forms.gradeList}
  2059. onCancel={() => (forms.gradeStatus = false)}
  2060. onConfirm={(val: any) => {
  2061. const selectedOption = val.selectedOptions[0];
  2062. studentInfo.extra.currentGradeNum = selectedOption.value;
  2063. forms.gradeNumText = selectedOption.text;
  2064. forms.gradeStatus = false;
  2065. if (
  2066. ['SCHOOL', 'GRADE'].includes(forms.schoolInstrumentSetType)
  2067. ) {
  2068. forms.instrumentCode = selectedOption.instrumentCode;
  2069. }
  2070. if (forms.schoolInstrumentSetType === 'CLASS') {
  2071. forms.classList = selectedOption.classList;
  2072. }
  2073. if (
  2074. ['CLASS', 'GRADE'].includes(forms.schoolInstrumentSetType)
  2075. ) {
  2076. forms.currentClassText = '';
  2077. studentInfo.extra.currentClass = '';
  2078. }
  2079. }}
  2080. />
  2081. )}
  2082. </Popup>
  2083. {/* 班级 */}
  2084. <Popup
  2085. v-model:show={forms.classStatus}
  2086. position="bottom"
  2087. round
  2088. class={'popupBottomSearch'}
  2089. onOpen={() => {
  2090. forms.classPopupShow = true;
  2091. }}
  2092. onClosed={() => {
  2093. forms.classPopupShow = false;
  2094. }}>
  2095. {forms.classPopupShow && (
  2096. <Picker
  2097. showToolbar
  2098. v-model={forms.classPopupIndex}
  2099. columns={forms.classList}
  2100. onCancel={() => (forms.classStatus = false)}
  2101. onConfirm={(val: any) => {
  2102. const selectedOption = val.selectedOptions[0];
  2103. studentInfo.extra.currentClass = selectedOption.value;
  2104. forms.currentClassText = selectedOption.text;
  2105. forms.classStatus = false;
  2106. if (['CLASS'].includes(forms.schoolInstrumentSetType)) {
  2107. forms.instrumentCode = selectedOption.instrumentCode;
  2108. }
  2109. }}
  2110. />
  2111. )}
  2112. </Popup>
  2113. {/* 已经购买过样品 */}
  2114. {/* <MDialog
  2115. title="提示"
  2116. v-model:show={forms.dialogConfirmStatus}
  2117. message={'已购买会员,是否确认购买?'}
  2118. primaryColor="#FF8057"
  2119. allowHtml={true}
  2120. confirmButtonText="确定"
  2121. showCancelButton
  2122. onConfirm={async () => {
  2123. await paymentContinue();
  2124. }}
  2125. onCancel={() => {
  2126. //取消支付,判断是否有结束时间,是否已经结束
  2127. if (forms.registerExpireTime && forms.activeOverStatus) {
  2128. applyOver();
  2129. }
  2130. }}
  2131. /> */}
  2132. <MDialog
  2133. title="提示"
  2134. v-model:show={forms.dialogStatus}
  2135. message={forms.dialogMessage}
  2136. allowHtml={true}
  2137. primaryColor="#FF8057"
  2138. showCancelButton={true}
  2139. messageAlign={forms.messageAlign}
  2140. confirmButtonText={forms.confirmButtonText}
  2141. cancelButtonText={forms.cancelButtonText}
  2142. onConfirm={async () => {
  2143. if (forms.joinType === 'tradition') {
  2144. //
  2145. await cancelPaymentOrder();
  2146. //取消支付,判断是否有结束时间,是否已经结束
  2147. if (forms.registerExpireTime && forms.activeOverStatus) {
  2148. applyOver();
  2149. }
  2150. }
  2151. if (forms.joinType === 'digitalize') {
  2152. // 继续支付
  2153. const paymentConfig = forms.dialogConfig;
  2154. state.config = paymentConfig?.paymentConfig;
  2155. state.orderNo = paymentConfig?.orderNo;
  2156. const updateStatus = await updateStudentInfo();
  2157. if (!updateStatus) return;
  2158. await lastSubmit();
  2159. }
  2160. }}
  2161. onCancel={(val: any) => {
  2162. // countDown.pause();
  2163. if (forms.joinType === 'tradition') {
  2164. forms.dialogStatus = false;
  2165. //取消支付,判断是否有结束时间,是否已经结束
  2166. if (forms.registerExpireTime && forms.activeOverStatus) {
  2167. applyOver();
  2168. }
  2169. }
  2170. if (forms.joinType === 'digitalize') {
  2171. // 重新下单 - 先关闭订单
  2172. resetOrderPayment();
  2173. }
  2174. }}
  2175. />
  2176. <Popup
  2177. show={state.paymentStatus}
  2178. closeOnClickOverlay={false}
  2179. position="bottom"
  2180. round
  2181. closeOnPopstate
  2182. safeAreaInsetBottom
  2183. style={{ minHeight: '30%' }}>
  2184. <Payment
  2185. paymentConfig={state.orderInfo}
  2186. onClose={() => (state.paymentStatus = false)}
  2187. onBackOut={onBackOut}
  2188. onConfirm={(val: any) => onConfirm(val)}
  2189. />
  2190. </Popup>
  2191. <Popup
  2192. v-model:show={state.showQrcode}
  2193. round
  2194. onClose={() => {
  2195. // 二维码关闭时清除定时器
  2196. clearInterval(state.orderTimer);
  2197. }}>
  2198. <QrcodePayment
  2199. url={state.qrCodeUrl}
  2200. pay_channel={state.pay_channel}
  2201. orderType={orderType.value}
  2202. />
  2203. </Popup>
  2204. <MPopup v-model:modelValue={state.authShow}>
  2205. <UserAuth onSuccess={onAuthSuccess} hideHeader={!browser().isApp} />
  2206. </MPopup>
  2207. {/* 是否在微信中打开 */}
  2208. <OWxTip
  2209. show={forms.showTips}
  2210. message={forms.showMessage}
  2211. showButton={forms.showButton}
  2212. buttonText="刷新"
  2213. onConfirm={() => window.location.reload()}
  2214. />
  2215. <MMessageTip
  2216. show={otherParams.showOtherSchool}
  2217. // showCloseButton={otherParams.showCloseButton}
  2218. messageAlign={otherParams.messageAlign}
  2219. message={otherParams.showOtherMessage}
  2220. showCancelButton={otherParams.showCancelButton}
  2221. cancelButtonColor={otherParams.cancelButtonColor}
  2222. cancelButtonText={otherParams.cancelButtonText}
  2223. confirmButtonColor={otherParams.confirmButtonColor}
  2224. confirmButtonText={otherParams.confirmButtonText}
  2225. onClose={() => (otherParams.showOtherSchool = false)}
  2226. onCancel={async () => {
  2227. otherParams.showOtherSchool = false;
  2228. if (otherParams.otherType === 'nickname') {
  2229. forms.isRegister = 'create'; // 新建
  2230. changeTipStatus(false, false);
  2231. onSubmit();
  2232. } else if (otherParams.otherType === 'member') {
  2233. const updateStatus = await updateStudentInfo();
  2234. if (!updateStatus) return;
  2235. //取消支付,判断是否有结束时间,是否已经结束
  2236. if (forms.registerExpireTime && forms.activeOverStatus) {
  2237. applyOver();
  2238. }
  2239. // onConfirm={async () => {
  2240. // await paymentContinue();
  2241. // }}
  2242. // onCancel={() => {
  2243. // //取消支付,判断是否有结束时间,是否已经结束
  2244. // if (forms.registerExpireTime && forms.activeOverStatus) {
  2245. // applyOver();
  2246. // }
  2247. // }}
  2248. }
  2249. }}
  2250. onConfirm={async () => {
  2251. otherParams.showOtherSchool = false;
  2252. // 名字
  2253. if (otherParams.otherType === 'nickname') {
  2254. forms.isRegister = 'update'; // 修改
  2255. changeTipStatus(false, false);
  2256. // 直接注册
  2257. onSubmit();
  2258. } else if (otherParams.otherType === 'change') {
  2259. // 学校更换
  2260. forms.isChangeSchool = true;
  2261. // 直接注册
  2262. onSubmit();
  2263. } else if (otherParams.otherType === 'limit') {
  2264. // 人数超限制
  2265. changeTipStatus(
  2266. forms.isRegister === 'create' && !forms.studentItem.userId
  2267. ? false
  2268. : true,
  2269. false
  2270. );
  2271. } else if (otherParams.otherType === 'member') {
  2272. await paymentContinue();
  2273. }
  2274. }}
  2275. />
  2276. <Popup
  2277. v-model:show={forms.showSelectStudent}
  2278. round
  2279. position="bottom"
  2280. safeAreaInsetBottom
  2281. closeable
  2282. class={styles.selectStudentPopup}>
  2283. <SelectStudent
  2284. studentItem={forms.studentItem}
  2285. list={forms.studentList}
  2286. onClose={() => (forms.showSelectStudent = false)}
  2287. onConfirm={(val: any) => {
  2288. if (val.userId) {
  2289. forms.studentItem = val;
  2290. const firstStudent = val;
  2291. studentInfo.extra.nickname = firstStudent.nickname;
  2292. const tempGrade: any = forms.gradeList || [];
  2293. studentInfo.extra.currentGradeNum = null;
  2294. forms.gradeNumText = '';
  2295. forms.instrumentCode = '';
  2296. tempGrade?.forEach((i: any) => {
  2297. if (i.value === firstStudent.currentGradeNum) {
  2298. forms.instrumentCode = i.instrumentCode;
  2299. forms.gradeNumText = i.text;
  2300. studentInfo.extra.currentGradeNum =
  2301. firstStudent.currentGradeNum;
  2302. if (forms.schoolInstrumentSetType === 'CLASS') {
  2303. forms.classList = i.classList;
  2304. }
  2305. }
  2306. });
  2307. studentInfo.extra.currentClass = null;
  2308. forms.currentClassText = '';
  2309. forms.classList.forEach((i: any) => {
  2310. if (i.value === firstStudent.currentClass) {
  2311. forms.currentClassText = i.text;
  2312. studentInfo.extra.currentClass = firstStudent.currentClass;
  2313. }
  2314. });
  2315. studentInfo.extra.gender = firstStudent.gender;
  2316. forms.isRegister = 'update';
  2317. changeTipStatus(true, false);
  2318. forms.showSelectStudent = false;
  2319. } else {
  2320. // 判断新建学员是否上限了
  2321. if (forms.studentList.length >= forms.multi_user_limit) {
  2322. otherParams.showOtherMessage = `同一手机号最多创建${forms.multi_user_limit}个学生`;
  2323. otherParams.showOtherSchool = true;
  2324. otherParams.showCancelButton = false;
  2325. otherParams.showCloseButton = true;
  2326. otherParams.confirmButtonColor =
  2327. 'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
  2328. otherParams.confirmButtonText = '我知道了';
  2329. otherParams.otherType = 'limit';
  2330. otherParams.messageAlign = 'center';
  2331. return true;
  2332. } else {
  2333. forms.studentItem = val;
  2334. forms.isRegister = 'create';
  2335. changeTipStatus(false, false);
  2336. studentInfo.extra.nickname = '';
  2337. studentInfo.extra.currentGradeNum = '';
  2338. studentInfo.extra.currentClass = '';
  2339. studentInfo.extra.gender = 1;
  2340. forms.currentClassText = '';
  2341. forms.gradeNumText = '';
  2342. forms.showSelectStudent = false;
  2343. }
  2344. }
  2345. }}
  2346. />
  2347. </Popup>
  2348. </div>
  2349. );
  2350. }
  2351. });