|
|
@@ -8,27 +8,103 @@ import {
|
|
|
Icon,
|
|
|
Popup,
|
|
|
showConfirmDialog,
|
|
|
- showToast
|
|
|
+ showToast,
|
|
|
+ Form,
|
|
|
+ Field,
|
|
|
+ CountDown,
|
|
|
+ RadioGroup,
|
|
|
+ Radio,
|
|
|
+ Picker,
|
|
|
+ closeToast
|
|
|
} from 'vant';
|
|
|
-import { computed, defineComponent, onMounted, reactive } from 'vue';
|
|
|
+import {
|
|
|
+ computed,
|
|
|
+ defineComponent,
|
|
|
+ nextTick,
|
|
|
+ onMounted,
|
|
|
+ onUnmounted,
|
|
|
+ reactive,
|
|
|
+ ref
|
|
|
+} from 'vue';
|
|
|
+import qs from 'query-string';
|
|
|
+import {
|
|
|
+ state as baseState,
|
|
|
+ goWechatAuth,
|
|
|
+ setLogin,
|
|
|
+ setLoginInit
|
|
|
+} from '@/state';
|
|
|
import styles from './index.module.less';
|
|
|
import MSticky from '@/components/m-sticky';
|
|
|
-import MVideo from '@/components/m-video';
|
|
|
+// import MVideo from '@/components/m-video';
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
import { useStudentRegisterStore } from '@/store/modules/student-register-store';
|
|
|
import request from '@/helpers/request';
|
|
|
-import { browser, moneyFormat } from '@/helpers/utils';
|
|
|
+import { browser, checkPhone, getUrlCode, moneyFormat } from '@/helpers/utils';
|
|
|
import deepClone from '@/helpers/deep-clone';
|
|
|
import OWxTip from '@/components/m-wx-tip';
|
|
|
import MDialog from '@/components/m-dialog';
|
|
|
-import f1 from './images/new/f-1.png';
|
|
|
-import f2 from './images/new/f-2.png';
|
|
|
-import f3 from './images/new/f-3.png';
|
|
|
-import iconTip2 from './images/new/icon-tip2.png';
|
|
|
-import functionBg from './images/new/function-bg.png';
|
|
|
-import giftTip from './images/new/gift-tip.png';
|
|
|
+// import f1 from './images/new/f-1.png';
|
|
|
+// import f2 from './images/new/f-2.png';
|
|
|
+// import f3 from './images/new/f-3.png';
|
|
|
+// import iconTip2 from './images/new/icon-tip2.png';
|
|
|
+// import functionBg from './images/new/function-bg.png';
|
|
|
+import giftTip from './images/new/icon-4.png';
|
|
|
+import iconGift from './images/new/icon-gift.png';
|
|
|
import dayjs from 'dayjs';
|
|
|
-import MMessageTip from '@/components/m-message-tip';
|
|
|
+// import MMessageTip from '@/components/m-message-tip';
|
|
|
+import { CurrentTime, useCountDown } from '@vant/use';
|
|
|
+import Payment from '../adapay/payment';
|
|
|
+import QrcodePayment from './qrcode-payment';
|
|
|
+import MImgCode from '@/components/m-img-code';
|
|
|
+import { beforeSubmit } from './order-state';
|
|
|
+import { useInterval, useIntervalFn } from '@vueuse/core';
|
|
|
+import MPopup from '@/components/m-popup';
|
|
|
+import UserAuth from './component/user-auth';
|
|
|
+
|
|
|
+const classList: any = [];
|
|
|
+for (let i = 1; i <= 40; i++) {
|
|
|
+ classList.push({ text: i + '班', value: i });
|
|
|
+}
|
|
|
+
|
|
|
+const GRADE_ENUM = {
|
|
|
+ '1': '一年级',
|
|
|
+ '2': '二年级',
|
|
|
+ '3': '三年级',
|
|
|
+ '4': '四年级',
|
|
|
+ '5': '五年级',
|
|
|
+ '6': '六年级',
|
|
|
+ '7': '七年级',
|
|
|
+ '8': '八年级',
|
|
|
+ '9': '九年级'
|
|
|
+} as any;
|
|
|
+const getGradeList = (gradeYear: string) => {
|
|
|
+ let tempList: any = [];
|
|
|
+ const five = [
|
|
|
+ { text: '一年级', value: 1 },
|
|
|
+ { text: '二年级', value: 2 },
|
|
|
+ { text: '三年级', value: 3 },
|
|
|
+ { text: '四年级', value: 4 },
|
|
|
+ { text: '五年级', value: 5 }
|
|
|
+ ];
|
|
|
+ const one = [{ text: '六年级', value: 6 }];
|
|
|
+ const three = [
|
|
|
+ { text: '七年级', value: 7 },
|
|
|
+ { text: '八年级', value: 8 },
|
|
|
+ { text: '九年级', value: 9 }
|
|
|
+ ];
|
|
|
+ if (gradeYear === 'FIVE_YEAR_SYSTEM') {
|
|
|
+ tempList.push(...[...five]);
|
|
|
+ } else if (gradeYear === 'SIX_YEAR_SYSTEM') {
|
|
|
+ tempList.push(...[...five, ...one]);
|
|
|
+ } else if (gradeYear === 'THREE_YEAR_SYSTEM') {
|
|
|
+ tempList.push(...[...three]);
|
|
|
+ } else if (gradeYear === 'FORE_YEAR_SYSTEM') {
|
|
|
+ tempList.push(...[...one, ...three]);
|
|
|
+ } else {
|
|
|
+ tempList.push(...[...five, ...one, ...three]);
|
|
|
+ }
|
|
|
+ return tempList;
|
|
|
+};
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'student-register',
|
|
|
@@ -38,22 +114,120 @@ export default defineComponent({
|
|
|
const router = useRouter();
|
|
|
// 初始化学校编号
|
|
|
studentRegisterStore.setShoolId(route.query.sId as any);
|
|
|
+ const countDownRef = ref();
|
|
|
const forms = reactive({
|
|
|
schoolId: route.query.sId as any,
|
|
|
paymentType: '', // 支付类型
|
|
|
- popupShow: false,
|
|
|
+ // popupShow: false,
|
|
|
details: [] as any[],
|
|
|
- schoolType: '', // 学校类型
|
|
|
+ // schoolType: '', // 学校类型
|
|
|
gradeYear: '', // 学制
|
|
|
- bugGoods: false, // 是否购买AI
|
|
|
+ // bugGoods: false, // 是否购买AI
|
|
|
registerType: '', // 报名类型
|
|
|
detailVip: {} as any,
|
|
|
giftVipDay: 0, // 赠送天数
|
|
|
submitLoading: false,
|
|
|
- showMore: true,
|
|
|
+ // showMore: true,
|
|
|
showTips: false,
|
|
|
showButton: false,
|
|
|
- showMessage: '请使用微信打开'
|
|
|
+ showMessage: '请使用微信打开',
|
|
|
+ countDownStatus: true,
|
|
|
+ countDownTime: 1000 * 120, // 倒计时时间
|
|
|
+ // modelValue: false, // 是否选中协议
|
|
|
+ imgCodeStatus: false,
|
|
|
+ gradeNumText: '',
|
|
|
+ currentClassText: '',
|
|
|
+ gradeStatus: false,
|
|
|
+ classStatus: false,
|
|
|
+ loading: false,
|
|
|
+ dialogStatus: false,
|
|
|
+ dialogMessage: '',
|
|
|
+ dialogConfirmStatus: false,
|
|
|
+ contract_sign: false, // 是否实名认证
|
|
|
+ countDownTimePay: 60 * 1000,
|
|
|
+ dialogConfig: {} as any,
|
|
|
+ showOtherSchool: false,
|
|
|
+ showOtherMessage: '',
|
|
|
+ joinType: '' as 'digitalize' | 'tradition',
|
|
|
+ gradeList: [] as any,
|
|
|
+ classList: [] as any,
|
|
|
+ saveId: null as any,
|
|
|
+ openId: null as any,
|
|
|
+ code: null as any,
|
|
|
+ intervalFnRef: null as any // 页面订时器
|
|
|
+ });
|
|
|
+
|
|
|
+ const state = reactive({
|
|
|
+ showQrcode: false,
|
|
|
+ qrCodeUrl: '',
|
|
|
+ pay_channel: '',
|
|
|
+ orderInfo: {} as any, // 订单信息
|
|
|
+ authShow: false,
|
|
|
+ orderNo: null as any,
|
|
|
+ config: {} as any,
|
|
|
+ paymentStatus: false,
|
|
|
+ orderTimer: null as any
|
|
|
+ });
|
|
|
+ const studentInfo = reactive({
|
|
|
+ autoRegister: true,
|
|
|
+ client_id: 'cooleshow-student',
|
|
|
+ client_secret: 'cooleshow-student',
|
|
|
+ extra: {
|
|
|
+ nickname: '',
|
|
|
+ currentGradeNum: '',
|
|
|
+ currentClass: '',
|
|
|
+ gender: 1,
|
|
|
+ registerType: null as any, // 报名类型
|
|
|
+ giftVipDay: 0 // 赠送会员天数
|
|
|
+ },
|
|
|
+ grant_type: 'password',
|
|
|
+ loginType: 'SMS',
|
|
|
+ password: '',
|
|
|
+ username: ''
|
|
|
+ });
|
|
|
+ // 页面定时
|
|
|
+ const pageTimer = useInterval(1000, { controls: true });
|
|
|
+ pageTimer.pause();
|
|
|
+
|
|
|
+ const countDown = useCountDown({
|
|
|
+ // 倒计时 60 秒
|
|
|
+ time: forms.countDownTimePay,
|
|
|
+ onChange(current: CurrentTime) {
|
|
|
+ forms.dialogMessage = `有待支付订单，请在${Math.ceil(
|
|
|
+ current.total / 1000
|
|
|
+ )}s后重试`;
|
|
|
+ },
|
|
|
+ onFinish() {
|
|
|
+ forms.dialogStatus = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const onCodeSend = () => {
|
|
|
+ forms.countDownStatus = false;
|
|
|
+ nextTick(() => {
|
|
|
+ countDownRef.value.start();
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const onSendCode = () => {
|
|
|
+ // 发送验证码
|
|
|
+ if (!checkPhone(studentInfo.username)) {
|
|
|
+ return showToast('请输入正确的手机号码');
|
|
|
+ }
|
|
|
+ forms.imgCodeStatus = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ const validatePhone = computed(() => {
|
|
|
+ return checkPhone(studentInfo.username) ? true : false;
|
|
|
+ });
|
|
|
+
|
|
|
+ const onFinished = () => {
|
|
|
+ forms.countDownStatus = true;
|
|
|
+ countDownRef.value.reset();
|
|
|
+ };
|
|
|
+
|
|
|
+ const orderType = computed(() => {
|
|
|
+ return state.orderInfo.orderType;
|
|
|
});
|
|
|
|
|
|
const getRegisterGoods = async () => {
|
|
|
@@ -69,22 +243,67 @@ export default defineComponent({
|
|
|
forms.details = deepClone(data.details || []);
|
|
|
if (forms.details.length > 0) {
|
|
|
forms.detailVip = forms.details[0];
|
|
|
- forms.giftVipDay = forms.details[0].membershipDays;
|
|
|
+ // forms.giftVipDay = forms.details[0].membershipDays;
|
|
|
}
|
|
|
- forms.bugGoods = data.bugGoods;
|
|
|
- forms.schoolType = data.schoolType;
|
|
|
+ forms.giftVipDay = data.giftVipDay || 0;
|
|
|
forms.gradeYear = data.gradeYear;
|
|
|
forms.registerType = data.registerType;
|
|
|
+ studentInfo.extra.registerType = data.registerType;
|
|
|
+
|
|
|
+ const schoolInstrumentList = data.schoolInstrumentList || [];
|
|
|
+
|
|
|
+ if (data.schoolInstrumentSetType === 'SCHOOL') {
|
|
|
+ forms.gradeList = getGradeList(data.gradeYear);
|
|
|
+ forms.classList = classList;
|
|
|
+ } else if (data.schoolInstrumentSetType === 'GRADE') {
|
|
|
+ schoolInstrumentList.forEach((item: any) => {
|
|
|
+ forms.gradeList.push({
|
|
|
+ text: GRADE_ENUM[item.gradeNum],
|
|
|
+ value: item.gradeNum,
|
|
|
+ instrumentId: item.instrumentId
|
|
|
+ });
|
|
|
+ });
|
|
|
+ forms.classList = classList;
|
|
|
+ } else if (data.schoolInstrumentSetType === 'CLASS') {
|
|
|
+ // 班级
|
|
|
+ const tempGradeList: any[] = [];
|
|
|
+ schoolInstrumentList.forEach((item: any) => {
|
|
|
+ if (!tempGradeList.includes(item.gradeNum)) {
|
|
|
+ tempGradeList.push(item.gradeNum);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const lastGradeList: any[] = [];
|
|
|
+ tempGradeList.forEach((temp: any) => {
|
|
|
+ const list = {
|
|
|
+ text: GRADE_ENUM[temp],
|
|
|
+ value: temp,
|
|
|
+ children: [] as any
|
|
|
+ };
|
|
|
+ schoolInstrumentList.forEach((item: any) => {
|
|
|
+ if (item === item.gradeNum) {
|
|
|
+ list.children.push({
|
|
|
+ text: item.classNum + '班',
|
|
|
+ value: item.classNum
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ lastGradeList.push(list);
|
|
|
+ });
|
|
|
+ forms.gradeList = lastGradeList;
|
|
|
+ forms.classList = [];
|
|
|
+ }
|
|
|
if (browser().weixin) {
|
|
|
- if (
|
|
|
- data.schoolStatus === 0 &&
|
|
|
- forms.schoolId == '1770035687490105346'
|
|
|
- ) {
|
|
|
- forms.showTips = true;
|
|
|
- forms.showMessage = '团购时间已截止，感谢您的参与';
|
|
|
- forms.showButton = false;
|
|
|
- return;
|
|
|
- }
|
|
|
+ // if (
|
|
|
+ // data.schoolStatus === 0 &&
|
|
|
+ // forms.schoolId == '1770035687490105346'
|
|
|
+ // ) {
|
|
|
+ // forms.showTips = true;
|
|
|
+ // forms.showMessage = '团购时间已截止，感谢您的参与';
|
|
|
+ // forms.showButton = false;
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
if (data.registerType !== 'BUG_GOODS' || data.schoolStatus === 0) {
|
|
|
forms.showTips = true;
|
|
|
forms.showMessage = '二维码已经失效，详情请咨询学校老师';
|
|
|
@@ -118,183 +337,978 @@ export default defineComponent({
|
|
|
};
|
|
|
});
|
|
|
|
|
|
- // 删除商品
|
|
|
- // const onGoodsRemove = (item: any) => {
|
|
|
- // showConfirmDialog({
|
|
|
- // message: '是否删除该商品',
|
|
|
- // confirmButtonColor: '#FF8633'
|
|
|
- // }).then(() => {
|
|
|
- // studentRegisterStore.deleteGoods(item.productSkuId);
|
|
|
- // });
|
|
|
- // };
|
|
|
+ const checkForm = () => {
|
|
|
+ if (!checkPhone(studentInfo.username)) {
|
|
|
+ showToast('请输入正确的手机号码');
|
|
|
+ return true;
|
|
|
+ } else if (!studentInfo.password) {
|
|
|
+ showToast('请输入验证码');
|
|
|
+ return true;
|
|
|
+ } else if (!studentInfo.extra.nickname) {
|
|
|
+ showToast('请输入学生姓名');
|
|
|
+ return true;
|
|
|
+ } else if (!studentInfo.extra.currentGradeNum) {
|
|
|
+ showToast('请选择所在年级');
|
|
|
+ return true;
|
|
|
+ } else if (!studentInfo.extra.currentClass) {
|
|
|
+ showToast('请选择所在班级');
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ };
|
|
|
|
|
|
// 登记成功之后购买
|
|
|
- const onRegisterSubmit = async () => {
|
|
|
+ const onSubmit = async () => {
|
|
|
+ forms.submitLoading = true;
|
|
|
try {
|
|
|
- forms.submitLoading = true;
|
|
|
-
|
|
|
- // 检测token是否失效
|
|
|
- // const Authorization = storage.get(ACCESS_TOKEN) || '';
|
|
|
- // const authInfo = await request.post('/edu-app/open/user/verification', {
|
|
|
- // noAuthorization: true,
|
|
|
- // data: { token: Authorization }
|
|
|
- // });
|
|
|
- // // 判断当前token是否失效
|
|
|
- // if (!authInfo.data) {
|
|
|
- // storage.remove(ACCESS_TOKEN);
|
|
|
- // studentRegisterStore.deleteToken();
|
|
|
- // forms.popupRegister = true;
|
|
|
- // return;
|
|
|
- // }
|
|
|
-
|
|
|
- // // 请求是否有待支付订单，如果有则自动关闭
|
|
|
- // const status = await paymentOrderUnpaid();
|
|
|
- // if (status) return;
|
|
|
- // const schoolInfo = await request.get(
|
|
|
- // '/edu-app/userPaymentOrder/registerStatus/' + forms.schoolId
|
|
|
- // );
|
|
|
- // const vipList = studentRegisterStore.getVip;
|
|
|
-
|
|
|
- // if (schoolInfo.data.hasBuyCourse && vipList.length > 0) {
|
|
|
- // // setTimeout(() => {
|
|
|
- // // showToast('您已购买乐器AI学练工具，请勿重复购买');
|
|
|
- // // }, 100);
|
|
|
- // forms.dialogConfirmStatus = true;
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // await paymentContinue();
|
|
|
-
|
|
|
- router.push({
|
|
|
- path: '/student-register-form',
|
|
|
- query: {
|
|
|
- schoolId: forms.schoolId
|
|
|
+ if (checkForm()) return;
|
|
|
+ const { extra, ...res } = studentInfo;
|
|
|
+ const result = await request.post('/edu-app/userlogin', {
|
|
|
+ requestType: 'form',
|
|
|
+ data: {
|
|
|
+ ...res,
|
|
|
+ extra: JSON.stringify({
|
|
|
+ ...extra,
|
|
|
+ giftVipDay:
|
|
|
+ forms.detailVip.membershipDays || 0 + forms.giftVipDay || 0,
|
|
|
+ schoolId: forms.schoolId
|
|
|
+ })
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ if (result.code !== 200) {
|
|
|
+ if (result.code === 5436) {
|
|
|
+ forms.showTips = true;
|
|
|
+ forms.showMessage = '二维码已经失效，详情请咨询学校老师';
|
|
|
+ forms.showButton = false;
|
|
|
+ } else if (result.code === 5435) {
|
|
|
+ forms.showTips = true;
|
|
|
+ forms.showMessage = result.message;
|
|
|
+ forms.showButton = true;
|
|
|
+ } else if (result.code === 5435) {
|
|
|
+ forms.showTips = true;
|
|
|
+ forms.showMessage = result.message;
|
|
|
+ forms.showButton = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ studentRegisterStore.setToken(
|
|
|
+ result.data.token_type + ' ' + result.data.access_token
|
|
|
+ );
|
|
|
+ setLoginInit();
|
|
|
+
|
|
|
+ let joinType = 'NOT_REGISTER';
|
|
|
+ if (forms.joinType === 'digitalize') {
|
|
|
+ joinType = 'SELECT_INSTRUMENT';
|
|
|
+ }
|
|
|
+ if (forms.joinType === 'tradition') {
|
|
|
+ joinType = 'NOT_BUY_INSTRUMENT';
|
|
|
+ }
|
|
|
+ // 更新时间
|
|
|
+ await updateStat(
|
|
|
+ pageTimer.counter.value,
|
|
|
+ joinType,
|
|
|
+ result.data.userId,
|
|
|
+ forms.schoolId
|
|
|
+ );
|
|
|
+ pageTimer.counter.value = 0;
|
|
|
+
|
|
|
+ // 传统方式
|
|
|
+ if (forms.joinType === 'tradition') {
|
|
|
+ setTimeout(() => {
|
|
|
+ showToast('报名成功');
|
|
|
+ router.push('/download');
|
|
|
+ }, 100);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取用户信息
|
|
|
+ const res = await request.get('/edu-app/user/getUserInfo', {
|
|
|
+ requestType: 'form'
|
|
|
+ });
|
|
|
+ setLogin(res.data);
|
|
|
+
|
|
|
+ await onRegisterSubmit();
|
|
|
+ }
|
|
|
} finally {
|
|
|
- forms.submitLoading = false;
|
|
|
+ }
|
|
|
+ forms.submitLoading = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 登记成功之后购买
|
|
|
+ const onRegisterSubmit = async () => {
|
|
|
+ try {
|
|
|
+ // 请求是否有待支付订单，如果有则自动关闭
|
|
|
+ const status = await paymentOrderUnpaid();
|
|
|
+ if (status) return;
|
|
|
+ const schoolInfo = await request.get(
|
|
|
+ '/edu-app/userPaymentOrder/registerStatus/' + forms.schoolId
|
|
|
+ );
|
|
|
+ const vipList = studentRegisterStore.getVip;
|
|
|
+
|
|
|
+ if (schoolInfo.data.hasBuyCourse && vipList.length > 0) {
|
|
|
+ forms.dialogConfirmStatus = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ await paymentContinue();
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const getUserInfos = async () => {
|
|
|
+ if (
|
|
|
+ studentInfo.password.length !== 6 ||
|
|
|
+ !checkPhone(studentInfo.username)
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ // 15907120131;
|
|
|
+ const { data } = await request.get(
|
|
|
+ `/edu-app/open/student/studentInfo?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
|
|
|
+ );
|
|
|
+ if (data) {
|
|
|
+ if (!studentInfo.extra.nickname) {
|
|
|
+ studentInfo.extra.nickname = data.nickname;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!studentInfo.extra.currentGradeNum) {
|
|
|
+ const tempGrade: any = forms.gradeList || [];
|
|
|
+ tempGrade?.forEach((i: any) => {
|
|
|
+ if (i.value === data.currentGradeNum) {
|
|
|
+ forms.gradeNumText = i.text;
|
|
|
+ studentInfo.extra.currentGradeNum = data.currentGradeNum;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!studentInfo.extra.currentClass) {
|
|
|
+ forms.classList.forEach((i: any) => {
|
|
|
+ if (i.value === data.currentClass) {
|
|
|
+ forms.currentClassText = i.text;
|
|
|
+ studentInfo.extra.currentClass = data.currentClass;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // if (!studentInfo.extra.gender) {
|
|
|
+ studentInfo.extra.gender =
|
|
|
+ studentInfo.extra.gender !== data.gender
|
|
|
+ ? data.gender
|
|
|
+ : studentInfo.extra.gender;
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 查询未支付订单
|
|
|
+ const paymentOrderUnpaid = async () => {
|
|
|
+ let result = false;
|
|
|
+ try {
|
|
|
+ const { data } = await request.get('/edu-app/userPaymentOrder/unpaid');
|
|
|
+ // 判断是否有待支付订单
|
|
|
+
|
|
|
+ if (!data.id) return false;
|
|
|
+
|
|
|
+ // 判断是否可以取消订单
|
|
|
+ if (data.cancelPayment) {
|
|
|
+ await request.post(
|
|
|
+ '/edu-app/userPaymentOrder/cancelPayment/' + data.orderNo
|
|
|
+ );
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ forms.countDownTime = data.cancelTimes;
|
|
|
+ countDown.reset(Number(data.cancelTimes));
|
|
|
+ countDown.start();
|
|
|
+ forms.dialogMessage = `有待支付订单，请在${Math.ceil(
|
|
|
+ countDown.current.value.total / 1000
|
|
|
+ )}s后重试`;
|
|
|
+ forms.dialogStatus = true;
|
|
|
+ forms.dialogConfig = data;
|
|
|
+ result = true;
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ };
|
|
|
+
|
|
|
+ const paymentContinue = async () => {
|
|
|
+ try {
|
|
|
+ const vipList = studentRegisterStore.getVip;
|
|
|
+ const goodsList = studentRegisterStore.getGoods;
|
|
|
+ const params: any[] = [];
|
|
|
+ vipList.forEach((vip: any) => {
|
|
|
+ params.push({
|
|
|
+ giftVipDay: vip.membershipDays,
|
|
|
+ goodsId: vip.goodsId,
|
|
|
+ goodsNum: 1,
|
|
|
+ goodsType: vip.goodsType,
|
|
|
+ paymentCashAmount: vip.currentPrice, // 现金支付金额
|
|
|
+ paymentCouponAmount: 0 // 优惠券金额
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ goodsList.forEach((goods: any) => {
|
|
|
+ params.push({
|
|
|
+ goodsId: goods.productId,
|
|
|
+ goodsNum: goods.quantity,
|
|
|
+ goodsType: 'INSTRUMENTS',
|
|
|
+ paymentCashAmount: goods.price, // 现金支付金额
|
|
|
+ paymentCouponAmount: 0, // 优惠券金额
|
|
|
+ goodsSkuId: goods.productSkuId
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 创建订单
|
|
|
+ const result = await request.post(
|
|
|
+ '/edu-app/userPaymentOrder/executeOrder',
|
|
|
+ {
|
|
|
+ // hideLoading: false,
|
|
|
+ data: {
|
|
|
+ buryId: forms.saveId,
|
|
|
+ registerType: forms.registerType,
|
|
|
+ paymentType: forms.paymentType,
|
|
|
+ bizId: forms.schoolId, // 乐团编号
|
|
|
+ orderType: 'SCHOOL_REGISTER',
|
|
|
+ paymentCashAmount: calcPrice.value.amount || 0,
|
|
|
+ paymentCouponAmount: 0,
|
|
|
+ goodsInfos: params,
|
|
|
+ orderName: '学生登记',
|
|
|
+ orderDesc: '学生登记'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ if (result.code === 5436) {
|
|
|
+ forms.showTips = true;
|
|
|
+ forms.showMessage = '二维码已经失效，详情请咨询学校老师';
|
|
|
+ forms.showButton = false;
|
|
|
+ } else if (result.code === 5435) {
|
|
|
+ forms.showTips = true;
|
|
|
+ forms.showMessage = result.message;
|
|
|
+ forms.showButton = true;
|
|
|
+ } else {
|
|
|
+ state.config = {
|
|
|
+ ...result.data.paymentConfig,
|
|
|
+ paymentType: result.data.paymentType
|
|
|
+ };
|
|
|
+ state.orderNo = result.data.orderNo;
|
|
|
+
|
|
|
+ await lastSubmit();
|
|
|
+ }
|
|
|
+ } catch (e: any) {
|
|
|
+ console.log(e, 'any');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+ const lastSubmit = async () => {
|
|
|
+ try {
|
|
|
+ const users = baseState.user.data;
|
|
|
+ // 判断是否需要实名认证, 姓名，卡号 - 参数设置可以控制
|
|
|
+ if (
|
|
|
+ forms.contract_sign &&
|
|
|
+ (!users?.account.realName || !users?.account.idCardNo)
|
|
|
+ ) {
|
|
|
+ state.authShow = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const { data } = await request.post(
|
|
|
+ '/edu-app/userPaymentOrder/updateReceiveAddress',
|
|
|
+ {
|
|
|
+ // hideLoading: false,
|
|
|
+ data: {
|
|
|
+ orderNo: state.orderNo,
|
|
|
+ orderType: 'SCHOOL_REGISTER'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ state.pay_channel = data.paymentChannel;
|
|
|
+ if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
|
|
|
+ router.replace({
|
|
|
+ path: '/payment-result',
|
|
|
+ query: {
|
|
|
+ orderNo: state.orderNo
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ onCallback();
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @description 回调，判断是否有支付渠道，如果有则直接去支付
|
|
|
+ * @returns void
|
|
|
+ */
|
|
|
+ const onCallback = () => {
|
|
|
+ const pt = state.pay_channel;
|
|
|
+ // 判断是否有支付方式
|
|
|
+ if (pt) {
|
|
|
+ const payCode: string = beforeSubmit(state.pay_channel);
|
|
|
+ onConfirm({
|
|
|
+ payCode,
|
|
|
+ pay_channel: pt
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (orderType.value === 'VIP') {
|
|
|
+ state.paymentStatus = true;
|
|
|
+ } else {
|
|
|
+ // 直接去拉取微信支付
|
|
|
+ onConfirm({
|
|
|
+ payCode: 'payResult',
|
|
|
+ pay_channel: 'wx_pub'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const onConfirm = (val: any) => {
|
|
|
+ const config: any = state.config;
|
|
|
+ state.pay_channel = val.pay_channel;
|
|
|
+
|
|
|
+ const params = qs.stringify({
|
|
|
+ pay_channel: val.pay_channel,
|
|
|
+ wxAppId: config.wxAppId,
|
|
|
+ alipayAppId: config.alipayAppId,
|
|
|
+ paymentType: forms.paymentType,
|
|
|
+ body: config.body,
|
|
|
+ price: config.price,
|
|
|
+ orderNo: config.merOrderNo,
|
|
|
+ userId: config.userId
|
|
|
+ });
|
|
|
+
|
|
|
+ // console.log(params, state.config);
|
|
|
+ // return;
|
|
|
+ if (val.payCode === 'payResult') {
|
|
|
+ window.location.href =
|
|
|
+ window.location.origin + '/classroom-app/#/payResult?' + params;
|
|
|
+ } else {
|
|
|
+ state.qrCodeUrl =
|
|
|
+ window.location.origin + '/classroom-app/#/payDefine?' + params;
|
|
|
+ state.showQrcode = true;
|
|
|
+ state.paymentStatus = false;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ getPaymentOrderStatus();
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 放弃支付时，则取消订单
|
|
|
+ const onBackOut = async () => {
|
|
|
+ try {
|
|
|
+ await request.post(
|
|
|
+ '/edu-app/userPaymentOrder/cancelPayment/' + state.orderNo
|
|
|
+ );
|
|
|
+ // router.back();
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 轮询查询订单状态
|
|
|
+ const getPaymentOrderStatus = async () => {
|
|
|
+ // 循环查询订单
|
|
|
+ // const orderNo = state.orderNo
|
|
|
+ const orderTimer = setInterval(async () => {
|
|
|
+ // 判断是否在当前路由，如果不是则清除定时器
|
|
|
+ if (route.name != 'student-register-form') {
|
|
|
+ clearInterval(orderTimer);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ state.orderTimer = orderTimer;
|
|
|
+ try {
|
|
|
+ const { data } = await request.post(
|
|
|
+ '/edu-app/open/userOrder/paymentStatus/' + state.orderNo,
|
|
|
+ {
|
|
|
+ hideLoading: true
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
|
|
|
+ // 默认关闭支付二维码弹窗
|
|
|
+ state.showQrcode = false;
|
|
|
+ clearInterval(state.orderTimer);
|
|
|
+ setTimeout(() => {
|
|
|
+ router.replace({
|
|
|
+ path: '/payment-result',
|
|
|
+ query: {
|
|
|
+ orderNo: state.orderNo
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ clearInterval(state.orderTimer);
|
|
|
+ }
|
|
|
+ }, 5000);
|
|
|
+ };
|
|
|
+ // 实名认证成功
|
|
|
+ const onAuthSuccess = () => {
|
|
|
+ //
|
|
|
+ state.authShow = false;
|
|
|
+ paymentContinue(); // 实名成功后自动支付
|
|
|
+ };
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面停留时间
|
|
|
+ * @param pageBrowseTime 停留时间
|
|
|
+ * @param joinType 加入方式
|
|
|
+ * @param userId 用户编号
|
|
|
+ * @param schoolId 学校编号
|
|
|
+ */
|
|
|
+ const updateStat = async (
|
|
|
+ pageBrowseTime = 10,
|
|
|
+ joinType?: string,
|
|
|
+ userId?: string,
|
|
|
+ schoolId?: string
|
|
|
+ ) => {
|
|
|
+ try {
|
|
|
+ const { data } = await request.post(
|
|
|
+ '/edu-app/open/studentRegisterPointRecord/update',
|
|
|
+ {
|
|
|
+ data: {
|
|
|
+ id: forms.saveId,
|
|
|
+ useTime: pageBrowseTime, // 固定10秒
|
|
|
+ joinType,
|
|
|
+ userId,
|
|
|
+ schoolId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ forms.saveId = data;
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const getAppIdAndCode = async (url?: string) => {
|
|
|
+ try {
|
|
|
+ const { data } = await request.get(
|
|
|
+ '/edu-app/open/paramConfig/wechatAppId'
|
|
|
+ );
|
|
|
+ // 判断是否有微信appId
|
|
|
+ if (data) {
|
|
|
+ closeToast();
|
|
|
+ goWechatAuth(data, url);
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ if (browser().weixin) {
|
|
|
+ //授权
|
|
|
+ const openId = sessionStorage.getItem('active-open-id');
|
|
|
+ forms.openId = openId;
|
|
|
+ const code = getUrlCode();
|
|
|
+ if (!code) {
|
|
|
+ const newUrl =
|
|
|
+ window.location.origin +
|
|
|
+ window.location.pathname +
|
|
|
+ '#' +
|
|
|
+ route.path +
|
|
|
+ '?' +
|
|
|
+ qs.stringify({
|
|
|
+ ...route.query
|
|
|
+ });
|
|
|
+ getAppIdAndCode(newUrl);
|
|
|
+ return '';
|
|
|
+ } else {
|
|
|
+ forms.code = code;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
onMounted(async () => {
|
|
|
try {
|
|
|
getRegisterGoods();
|
|
|
+ // 判断是否获取微信code码
|
|
|
+ if (!forms.code) return;
|
|
|
+ const { data } = await request.post(
|
|
|
+ '/edu-app/open/studentRegisterPointRecord/save',
|
|
|
+ {
|
|
|
+ data: {
|
|
|
+ code: forms.code,
|
|
|
+ schoolId: forms.schoolId,
|
|
|
+ openId: forms.openId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ forms.saveId = data.id;
|
|
|
+ forms.openId = data.openId;
|
|
|
+ sessionStorage.setItem('active-open-id', data.openId);
|
|
|
+
|
|
|
+ // 间隔多少时间同步数据
|
|
|
+ forms.intervalFnRef = useIntervalFn(async () => {
|
|
|
+ // 页面时间恢复
|
|
|
+ pageTimer.counter.value = 0;
|
|
|
+ pageTimer.resume();
|
|
|
+ // 同步数据时先进行有效时间进行保存
|
|
|
+
|
|
|
+ await updateStat();
|
|
|
+ }, 5000);
|
|
|
} catch {}
|
|
|
});
|
|
|
|
|
|
+ onUnmounted(() => {
|
|
|
+ forms.intervalFnRef?.pause(); // 暂停回调
|
|
|
+ });
|
|
|
+
|
|
|
return () => (
|
|
|
<div class={styles['student-register']}>
|
|
|
<div class={styles.studentRegisterContainer}>
|
|
|
- <div class={styles.studentSection}>
|
|
|
+ <div
|
|
|
+ class={[styles.studentSection, styles.studentSectionForm]}
|
|
|
+ // style={{ display: 'none' }}
|
|
|
+ >
|
|
|
<div class={styles.title1}></div>
|
|
|
|
|
|
- <p class={styles.content}>
|
|
|
- 提供在乐器学练中的AI智能学练工具、数字化乐谱与课件，解决学生不会练习、家长无法辅导的乐器学练痛点，学生可实现自主学练，家长即时全面了解学练情况。
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class={[styles.studentSection, styles.truns]}>
|
|
|
- <div class={styles.trunList}>
|
|
|
- <div class={styles.trunItem}>
|
|
|
- <img src={f1} />
|
|
|
- <p>
|
|
|
- 随身云教练
|
|
|
- <br />
|
|
|
- 无需请老师
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class={styles.trunItem}>
|
|
|
- <img src={f2} />
|
|
|
- <p>
|
|
|
- 简单易操作
|
|
|
- <br />
|
|
|
- 学生都会练
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class={styles.trunItem}>
|
|
|
- <img src={f3} />
|
|
|
- <p>
|
|
|
- 练习可测评
|
|
|
- <br />
|
|
|
- 家长可省心
|
|
|
- </p>
|
|
|
+ <Form labelAlign="left" class={styles.registerForm}>
|
|
|
+ <Field
|
|
|
+ clearable={false}
|
|
|
+ label="联系方式（直接监护人）"
|
|
|
+ placeholder="请输入手机号码"
|
|
|
+ type="tel"
|
|
|
+ required
|
|
|
+ autocomplete="off"
|
|
|
+ inputAlign="right"
|
|
|
+ class={styles.username}
|
|
|
+ v-model={studentInfo.username}
|
|
|
+ border={false}
|
|
|
+ maxlength={11}>
|
|
|
+ {{
|
|
|
+ label: () => (
|
|
|
+ <div>
|
|
|
+ 联系方式
|
|
|
+ {/* （直接监护人） */}
|
|
|
+ <p class={styles.tips}>（直接监护人）</p>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Field>
|
|
|
+ <div class={['van-hairline--bottom', styles.fieldTipsGroup]}>
|
|
|
+ <div class={[styles.fieldTips]}>
|
|
|
+ 手机号是音乐数字课堂的唯一登录账户
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class={styles.tipInfo}>
|
|
|
- <img src={iconTip2} />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- {/* <div class={styles.videoGroup}>
|
|
|
- <MVideo
|
|
|
- class={styles.videoB}
|
|
|
- src={'https://oss.dayaedu.com/daya/202105/SWmqmvW.mp4'}
|
|
|
- />
|
|
|
- </div> */}
|
|
|
+ <Field
|
|
|
+ center
|
|
|
+ clearable={false}
|
|
|
+ required
|
|
|
+ inputAlign="right"
|
|
|
+ label="验证码"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ autocomplete="off"
|
|
|
+ type="number"
|
|
|
+ v-model={studentInfo.password}
|
|
|
+ maxlength={6}
|
|
|
+ onUpdate:modelValue={(val: any) => {
|
|
|
+ getUserInfos();
|
|
|
+ }}>
|
|
|
+ {{
|
|
|
+ button: () =>
|
|
|
+ forms.countDownStatus ? (
|
|
|
+ <span
|
|
|
+ class={[
|
|
|
+ styles.codeText,
|
|
|
+ !validatePhone.value ? styles.codeTextDisabled : ''
|
|
|
+ ]}
|
|
|
+ onClick={onSendCode}>
|
|
|
+ 获取验证码
|
|
|
+ </span>
|
|
|
+ ) : (
|
|
|
+ <CountDown
|
|
|
+ ref={(el: any) => (countDownRef.value = el)}
|
|
|
+ auto-start={false}
|
|
|
+ class={styles.countDown}
|
|
|
+ time={forms.countDownTime}
|
|
|
+ onFinish={onFinished}
|
|
|
+ format="ss秒后重试"
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Field>
|
|
|
+ <Field
|
|
|
+ clearable={false}
|
|
|
+ required
|
|
|
+ inputAlign="right"
|
|
|
+ label="学生姓名"
|
|
|
+ placeholder="请输入学生姓名"
|
|
|
+ autocomplete="off"
|
|
|
+ maxlength={14}
|
|
|
+ v-model={studentInfo.extra.nickname}
|
|
|
+ />
|
|
|
+ <Field
|
|
|
+ clearable={false}
|
|
|
+ required
|
|
|
+ inputAlign="right"
|
|
|
+ label="学生性别"
|
|
|
+ placeholder="请选择性别"
|
|
|
+ autocomplete="off"
|
|
|
+ // v-model={studentInfo.extra.nickname}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ input: () => (
|
|
|
+ <RadioGroup
|
|
|
+ checked-color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
|
|
|
+ v-model={studentInfo.extra.gender}
|
|
|
+ direction="horizontal">
|
|
|
+ <Tag
|
|
|
+ size="large"
|
|
|
+ type="primary"
|
|
|
+ color={
|
|
|
+ !(studentInfo.extra.gender === 1)
|
|
|
+ ? '#F5F6FA'
|
|
|
+ : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
|
|
|
+ }
|
|
|
+ textColor={
|
|
|
+ !(studentInfo.extra.gender === 1) ? '#626264' : '#fff'
|
|
|
+ }
|
|
|
+ class={styles.radioSection}>
|
|
|
+ <Radio class={styles.radioItem} name={1}></Radio>男
|
|
|
+ </Tag>
|
|
|
+ <Tag
|
|
|
+ size="large"
|
|
|
+ type="primary"
|
|
|
+ color={
|
|
|
+ !(studentInfo.extra.gender === 0)
|
|
|
+ ? '#F5F6FA'
|
|
|
+ : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
|
|
|
+ }
|
|
|
+ textColor={
|
|
|
+ !(studentInfo.extra.gender === 0) ? '#626264' : '#fff'
|
|
|
+ }
|
|
|
+ class={styles.radioSection}>
|
|
|
+ <Radio class={styles.radioItem} name={0}></Radio>女
|
|
|
+ </Tag>
|
|
|
+ </RadioGroup>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Field>
|
|
|
+ <Field
|
|
|
+ clearable={false}
|
|
|
+ required
|
|
|
+ inputAlign="right"
|
|
|
+ label="所在年级"
|
|
|
+ placeholder="请选择年级"
|
|
|
+ isLink
|
|
|
+ readonly
|
|
|
+ clickable={false}
|
|
|
+ modelValue={forms.gradeNumText}
|
|
|
+ onClick={() => (forms.gradeStatus = true)}
|
|
|
+ />
|
|
|
+ <Field
|
|
|
+ clearable={false}
|
|
|
+ required
|
|
|
+ inputAlign="right"
|
|
|
+ label="所在班级"
|
|
|
+ placeholder="请选择班级"
|
|
|
+ isLink
|
|
|
+ readonly
|
|
|
+ clickable={false}
|
|
|
+ modelValue={forms.currentClassText}
|
|
|
+ onClick={() => (forms.classStatus = true)}
|
|
|
+ />
|
|
|
+ {forms.giftVipDay > 0 ? (
|
|
|
+ <div class={styles.memberNumer}>
|
|
|
+ <img src={iconGift} class={styles.iconGift} />
|
|
|
|
|
|
+ <p>
|
|
|
+ 注册成功即可获得乐器AI学练工具
|
|
|
+ <span>{forms.giftVipDay || 0}</span>天有效期
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ ''
|
|
|
+ )}
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
<div class={styles.studentSection}>
|
|
|
<div class={styles.title2}></div>
|
|
|
|
|
|
- <div class={styles.functionGroup}>
|
|
|
- <img src={functionBg} />
|
|
|
+ <div class={styles.goodsGroup}>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.goodsItem,
|
|
|
+ forms.joinType === 'digitalize' && styles.checked
|
|
|
+ ]}
|
|
|
+ onClick={() => (forms.joinType = 'digitalize')}>
|
|
|
+ <div class={styles.goodsInner}>
|
|
|
+ <i class={styles.proposalTip}></i>
|
|
|
+ 数字化方式
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.goodsItem,
|
|
|
+ forms.joinType === 'tradition' && styles.checked
|
|
|
+ ]}
|
|
|
+ onClick={() => (forms.joinType = 'tradition')}>
|
|
|
+ <div class={styles.goodsInner}>传统方式</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- {forms.giftVipDay > 0 && (
|
|
|
- <div class={[styles.studentSection, styles.memberGroup]}>
|
|
|
- <p>
|
|
|
- 现在购买赠送会员有效期<span>{forms.giftVipDay || 0}</span>天
|
|
|
- </p>
|
|
|
+ {forms.joinType === 'digitalize' && (
|
|
|
+ <div class={[styles.goodsExtra]}>
|
|
|
+ <i class={styles.iconArrow}></i>
|
|
|
+ <Cell border={false} class={styles.goodsCell}>
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <Image class={styles.img} src={forms.detailVip.goodsUrl} />
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.section}>
|
|
|
+ <div class={styles.sectionContent}>
|
|
|
+ <h2>
|
|
|
+ {forms.detailVip.goodsName}
|
|
|
+ <Tag class={styles.brandName}>
|
|
|
+ {forms.detailVip.brandName}
|
|
|
+ </Tag>
|
|
|
+ </h2>
|
|
|
+ <p class={[styles.model]}>
|
|
|
+ {/* 解决学生不会练、不知练的对错、家长无法辅导、无需再额外请老师 */}
|
|
|
+ {forms.detailVip.description}
|
|
|
+ </p>
|
|
|
+ <span class={styles.sendInstrument}>赠送课堂乐器</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+
|
|
|
+ {forms.detailVip.membershipDays ? (
|
|
|
+ <div class={styles.memberNumer}>
|
|
|
+ <img src={iconGift} class={styles.iconGift} />
|
|
|
+ <p>
|
|
|
+ 现在购买赠送乐器AI学练工具
|
|
|
+ <span>{forms.detailVip.membershipDays || 0}</span>天有效期
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ ''
|
|
|
+ )}
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
- <MSticky position="bottom">
|
|
|
- <div class={styles.paymentContainer}>
|
|
|
- <div class={styles.payemntPrice}>
|
|
|
- <img src={giftTip} class={styles.giftTip} />
|
|
|
- <div>
|
|
|
- <span class={styles.needPrice}>
|
|
|
- <i style="font-style: normal">¥ </i>
|
|
|
- <span>{moneyFormat(calcPrice.value.amount)}</span>
|
|
|
- <i style="font-style: normal">/年</i>
|
|
|
+ {forms.joinType === 'tradition' && (
|
|
|
+ <div class={styles.goodsTradition}>
|
|
|
+ <i class={styles.iconArrow}></i>
|
|
|
+
|
|
|
+ <div class={styles.goodsTitle}></div>
|
|
|
+ <div class={styles.steps}>
|
|
|
+ <div class={styles.step}>
|
|
|
+ <span class={styles.nums}>
|
|
|
+ <span class={styles.numInner}>1</span>
|
|
|
</span>
|
|
|
- {calcPrice.value.originAmount > calcPrice.value.amount ? (
|
|
|
- <del class={styles.allPrice}>
|
|
|
- ¥ {moneyFormat(calcPrice.value.originAmount)}
|
|
|
- </del>
|
|
|
- ) : (
|
|
|
- ''
|
|
|
- )}
|
|
|
+ <div class={styles.stepContent}>
|
|
|
+ <span>AI工具标准：</span>
|
|
|
+ 可以学练音乐教材中的乐曲，通过手机应用商店准备。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class={styles.step}>
|
|
|
+ <span class={styles.nums}>
|
|
|
+ <span class={styles.numInner}>2</span>
|
|
|
+ </span>
|
|
|
+ <div class={styles.stepContent}>
|
|
|
+ <span>乐器标准：</span>
|
|
|
+ 管数不限，建议20管以上C调加嘴排箫（音域宽，能演奏更多复杂乐曲，不需要重复更换），黑色，要选择单一原调（调性多学生很难掌握），价格由学生根据自身情况确定。
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={styles.paymentBtn}
|
|
|
- onClick={() => {
|
|
|
- // const vipList = studentRegisterStore.getVip;
|
|
|
- // const goodsList = studentRegisterStore.getGoods;
|
|
|
- // if (vipList.length <= 0 && goodsList.length <= 0) {
|
|
|
- // setTimeout(() => {
|
|
|
- // showToast('请选择需要购买的商品');
|
|
|
- // }, 100);
|
|
|
- // return;
|
|
|
- // }
|
|
|
- onRegisterSubmit();
|
|
|
- }}>
|
|
|
- <Button
|
|
|
- round
|
|
|
- disabled={forms.submitLoading}
|
|
|
- loading={forms.submitLoading}>
|
|
|
- 下一步
|
|
|
- </Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </MSticky>
|
|
|
- </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {forms.joinType && (
|
|
|
+ <MSticky position="bottom">
|
|
|
+ <div class={styles.paymentContainer}>
|
|
|
+ {forms.joinType === 'digitalize' && (
|
|
|
+ <>
|
|
|
+ <div class={styles.payemntPrice}>
|
|
|
+ <img src={giftTip} class={styles.giftTip} />
|
|
|
+ <div>
|
|
|
+ <span class={styles.needPrice}>
|
|
|
+ <i style="font-style: normal">¥ </i>
|
|
|
+ <span>{moneyFormat(calcPrice.value.amount)}</span>
|
|
|
+ <i style="font-style: normal">/年</i>
|
|
|
+ </span>
|
|
|
+ {calcPrice.value.originAmount >
|
|
|
+ calcPrice.value.amount ? (
|
|
|
+ <del class={styles.allPrice}>
|
|
|
+ ¥ {moneyFormat(calcPrice.value.originAmount)}
|
|
|
+ </del>
|
|
|
+ ) : (
|
|
|
+ ''
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={styles.paymentBtn}
|
|
|
+ onClick={() => {
|
|
|
+ onSubmit();
|
|
|
+ }}>
|
|
|
+ <Button
|
|
|
+ round
|
|
|
+ disabled={forms.submitLoading}
|
|
|
+ loading={forms.submitLoading}>
|
|
|
+ 立即支付
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
|
|
|
- {/* <Popup v-model:show={forms.popupShow} class={styles.videoPopup}>
|
|
|
- {forms.popupShow && (
|
|
|
- <MVideo src={'https://oss.dayaedu.com/daya/202105/SWmqmvW.mp4'} />
|
|
|
+ {forms.joinType === 'tradition' && (
|
|
|
+ <div
|
|
|
+ class={styles.traditionBtn}
|
|
|
+ onClick={() => {
|
|
|
+ onSubmit();
|
|
|
+ }}>
|
|
|
+ <Button
|
|
|
+ round
|
|
|
+ disabled={forms.submitLoading}
|
|
|
+ loading={forms.submitLoading}>
|
|
|
+ 提交报名
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </MSticky>
|
|
|
)}
|
|
|
- </Popup> */}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {forms.imgCodeStatus ? (
|
|
|
+ <MImgCode
|
|
|
+ v-model:value={forms.imgCodeStatus}
|
|
|
+ phone={studentInfo.username}
|
|
|
+ type="REGISTER"
|
|
|
+ onClose={() => {
|
|
|
+ forms.imgCodeStatus = false;
|
|
|
+ }}
|
|
|
+ onSendCode={onCodeSend}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+
|
|
|
+ {/* 年级 */}
|
|
|
+ <Popup
|
|
|
+ v-model:show={forms.gradeStatus}
|
|
|
+ position="bottom"
|
|
|
+ round
|
|
|
+ safeAreaInsetBottom
|
|
|
+ lazyRender={false}
|
|
|
+ class={'popupBottomSearch'}>
|
|
|
+ <Picker
|
|
|
+ showToolbar
|
|
|
+ columns={forms.gradeList}
|
|
|
+ onCancel={() => (forms.gradeStatus = false)}
|
|
|
+ onConfirm={(val: any) => {
|
|
|
+ const selectedOption = val.selectedOptions[0];
|
|
|
+ studentInfo.extra.currentGradeNum = selectedOption.value;
|
|
|
+ forms.gradeNumText = selectedOption.text;
|
|
|
+ forms.gradeStatus = false;
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+ {/* 班级 */}
|
|
|
+ <Popup
|
|
|
+ v-model:show={forms.classStatus}
|
|
|
+ position="bottom"
|
|
|
+ round
|
|
|
+ class={'popupBottomSearch'}>
|
|
|
+ <Picker
|
|
|
+ showToolbar
|
|
|
+ columns={forms.classList}
|
|
|
+ onCancel={() => (forms.classStatus = false)}
|
|
|
+ onConfirm={(val: any) => {
|
|
|
+ const selectedOption = val.selectedOptions[0];
|
|
|
+ studentInfo.extra.currentClass = selectedOption.value;
|
|
|
+ forms.currentClassText = selectedOption.text;
|
|
|
+ forms.classStatus = false;
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+
|
|
|
+ {/* 已经购买过样品 */}
|
|
|
+ <MDialog
|
|
|
+ title="提示"
|
|
|
+ v-model:show={forms.dialogConfirmStatus}
|
|
|
+ message={'已购买会员，是否确认购买？'}
|
|
|
+ primaryColor="#FF8057"
|
|
|
+ allowHtml={true}
|
|
|
+ confirmButtonText="确定"
|
|
|
+ showCancelButton
|
|
|
+ onConfirm={async () => {
|
|
|
+ await paymentContinue();
|
|
|
+ }}
|
|
|
+ />
|
|
|
+
|
|
|
+ <MDialog
|
|
|
+ title="提示"
|
|
|
+ v-model:show={forms.dialogStatus}
|
|
|
+ message={forms.dialogMessage}
|
|
|
+ allowHtml={true}
|
|
|
+ primaryColor="#FF8057"
|
|
|
+ confirmButtonText="继续支付"
|
|
|
+ onConfirm={async () => {
|
|
|
+ // const paymentConfig = forms.dialogConfig.paymentConfig;
|
|
|
+ // router.push({
|
|
|
+ // path: '/order-detail',
|
|
|
+ // query: {
|
|
|
+ // pm: 1, // h5乐团报名
|
|
|
+ // config: JSON.stringify(paymentConfig.paymentConfig),
|
|
|
+ // orderNo: paymentConfig.orderNo
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // console.log(forms.dialogConfig, 'dialogConfig');
|
|
|
+
|
|
|
+ countDown.pause();
|
|
|
+ const paymentConfig = forms.dialogConfig.paymentConfig;
|
|
|
+ state.config = paymentConfig?.paymentConfig;
|
|
|
+ state.orderNo = paymentConfig?.orderNo;
|
|
|
+
|
|
|
+ await lastSubmit();
|
|
|
+ }}
|
|
|
+ onCancel={(val: any) => {
|
|
|
+ countDown.pause();
|
|
|
+ }}
|
|
|
+ />
|
|
|
+
|
|
|
+ <Popup
|
|
|
+ show={state.paymentStatus}
|
|
|
+ closeOnClickOverlay={false}
|
|
|
+ position="bottom"
|
|
|
+ round
|
|
|
+ closeOnPopstate
|
|
|
+ safeAreaInsetBottom
|
|
|
+ style={{ minHeight: '30%' }}>
|
|
|
+ <Payment
|
|
|
+ paymentConfig={state.orderInfo}
|
|
|
+ onClose={() => (state.paymentStatus = false)}
|
|
|
+ onBackOut={onBackOut}
|
|
|
+ onConfirm={(val: any) => onConfirm(val)}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+
|
|
|
+ <Popup
|
|
|
+ v-model:show={state.showQrcode}
|
|
|
+ round
|
|
|
+ onClose={() => {
|
|
|
+ // 二维码关闭时清除定时器
|
|
|
+ clearInterval(state.orderTimer);
|
|
|
+ }}>
|
|
|
+ <QrcodePayment
|
|
|
+ url={state.qrCodeUrl}
|
|
|
+ pay_channel={state.pay_channel}
|
|
|
+ orderType={orderType.value}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+
|
|
|
+ <MPopup v-model:modelValue={state.authShow}>
|
|
|
+ <UserAuth onSuccess={onAuthSuccess} hideHeader={!browser().isApp} />
|
|
|
+ </MPopup>
|
|
|
|
|
|
{/* 是否在微信中打开 */}
|
|
|
<OWxTip
|
