Browse Source

还原报名

lex 1 year ago
parent
commit
71fe2d8a33

+ 2130 - 0
src/views/student-register/index-apply2.tsx

@@ -0,0 +1,2130 @@
+import {
+  Image,
+  Cell,
+  Tag,
+  Button,
+  Popup,
+  showToast,
+  Form,
+  Field,
+  CountDown,
+  RadioGroup,
+  Radio,
+  Picker,
+  closeToast,
+  Popover
+} from 'vant';
+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 { useRoute, useRouter } from 'vue-router';
+import { useStudentRegisterStore } from '@/store/modules/student-register-store';
+import request from '@/helpers/request';
+import requestStudent from './request';
+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 tuangou from './images/new/tuangou.png';
+import icon3 from './images/new/icon-3.png';
+import icon5 from './images/new/icon-5.png';
+import icon6 from './images/new/icon-6.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 { 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';
+import MMessageTip from '@/components/m-message-tip';
+import SelectStudent from './modal/select-student';
+
+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, instrumentCode?: string) => {
+  let tempList: any = [];
+  const five = [
+    { text: '一年级', value: 1, instrumentCode },
+    { text: '二年级', value: 2, instrumentCode },
+    { text: '三年级', value: 3, instrumentCode },
+    { text: '四年级', value: 4, instrumentCode },
+    { text: '五年级', value: 5, instrumentCode }
+  ];
+  const one = [{ text: '六年级', value: 6, instrumentCode }];
+  const three = [
+    { text: '七年级', value: 7, instrumentCode },
+    { text: '八年级', value: 8, instrumentCode },
+    { text: '九年级', value: 9, instrumentCode }
+  ];
+  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',
+  setup() {
+    const route = useRoute();
+    const studentRegisterStore = useStudentRegisterStore();
+    const router = useRouter();
+    // 初始化学校编号
+    studentRegisterStore.setShoolId(route.query.sId as any);
+    const countDownRef = ref();
+    const mstickyRef = ref();
+    const forms = reactive({
+      schoolId: route.query.sId as any,
+      paymentType: '', // 支付类型
+      multi_user_limit: 1, // 限制注册学生数量
+      // popupShow: false,
+      registerDetails: {} as any,
+      details: [] as any[],
+      // schoolType: '', // 学校类型
+      gradeYear: '', // 学制
+      schoolInstrumentSetType: null as any,
+      // bugGoods: false, // 是否购买AI
+
+      isRegister: 'create' as 'create' | 'update' | '', // 是否注册学生
+      isTipRegister: false, // 是否显示名字不一致 - 默认显示
+      isChangeSchool: false, // 是否切换学校
+
+      registerType: '', // 报名类型
+      detailVip: {} as any,
+      giftVipDay: 0, // 赠送天数
+      submitLoading: false,
+      // showMore: true,
+      showTips: false,
+      showButton: false,
+      showMessage: '请使用微信扫描二维码',
+      countDownStatus: true,
+      countDownTime: 1000 * 120, // 倒计时时间
+      // modelValue: false, // 是否选中协议
+      imgCodeStatus: false,
+      gradeNumText: '',
+      currentClassText: '',
+      gradeStatus: false,
+      classStatus: false,
+      loading: false,
+
+      dialogStatus: false,
+      dialogMessage: '',
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      messageAlign: 'center' as 'left' | 'center' | 'right',
+
+      tipStatus: true,
+      dialogConfirmStatus: false,
+      contract_sign: false, // 是否实名认证
+      countDownTimePay: 60 * 1000,
+      dialogConfig: {} as any,
+      showSelectStudent: false, // 选择学生
+      studentList: [], // 手机号关联学生列表
+      studentItem: {} as any, // 选择的学生
+      joinType: 'digitalize' as 'digitalize' | 'tradition',
+      gradeList: [] as any,
+      classList: [] as any,
+      saveUserId: null as any,
+      saveId: null as any,
+      openId: null as any,
+      code: null as any,
+      intervalFnRef: null as any, // 页面订时器
+      registerExpireTime: null as any, // 结束时间
+      instrumentCode: null as any, // 乐器编码
+      activeOverTime: 0, // 活动结束时间
+      activeOverStatus: true, // 活动是否结束 默认已结束
+      gradePopupShow: false,
+      gradePopupIndex: [] as any, // 年级下拉索引
+      classPopupShow: false,
+      classPopupIndex: [] as any // 班级下拉索引
+    });
+
+    const otherParams = reactive({
+      showOtherSchool: false,
+      showCloseButton: true, // 是否显示关闭按钮
+      showOtherMessage: '',
+      /**  limit 超限制,change 更换学生,nickname 名称不一致 member 会员购买, payment 支付方式 */
+      otherType: '' as 'limit' | 'change' | 'nickname' | 'member' | 'payment',
+      showCancelButton: true,
+      cancelButtonColor: '',
+      cancelButtonText: '取消',
+      showConfirmButton: true,
+      confirmButtonColor: '',
+      confirmButtonText: '确定',
+      messageAlign: 'left' as 'center' | 'left' | 'right'
+    });
+
+    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
+    });
+
+    /*
+      新用户:
+      autoRegister: true
+      loginType: 'SMS'
+
+      已存在用户:
+      autoRegister: false
+      loginType: 'TOKEN'
+      password: xxx
+    */
+
+    const studentInfo = reactive({
+      autoRegister: true,
+      multiUser: true, // 是否为多用户
+      client_id: 'cooleshow-student',
+      client_secret: 'cooleshow-student',
+      extra: {
+        nickname: '',
+        currentGradeNum: '' as any,
+        currentClass: '' as any,
+        gender: 1 as any,
+        registerType: null as any, // 报名类型
+        giftVipDay: 0 // 赠送会员天数
+      },
+      grant_type: 'password',
+      loginType: 'SMS',
+      password: '',
+      username: ''
+    });
+    // 页面定时
+    const pageTimer = useInterval(1000, { controls: true });
+    pageTimer.pause();
+
+    const overCountDown = useCountDown({
+      time: forms.activeOverTime,
+      onFinish() {
+        forms.activeOverStatus = true;
+        if (forms.submitLoading) return;
+        applyOver();
+      }
+    });
+    /** 报名结束提示 */
+    const applyOver = () => {
+      forms.showTips = true;
+      // forms.showMessage = '团购时间已截止,感谢您的参与';
+      forms.showMessage =
+        '<p style="color: #F44541">报名已截止,感谢您的参与</p>';
+      forms.showButton = false;
+      forms.intervalFnRef?.pause();
+    };
+
+    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 () => {
+      try {
+        const { data } = await request.get(
+          '/edu-app/open/userOrder/registerGoods/' + forms.schoolId,
+          {
+            noAuthorization: true // 是否请求接口的时候添加toekn
+          }
+        );
+        // 默认选中商品
+        studentRegisterStore.setVip(data.details || []);
+        forms.details = deepClone(data.details || []);
+        forms.registerDetails = data;
+
+        forms.registerExpireTime = data.registerExpireTime; // '2024-03-27 17:33:52'; //
+        if (forms.registerExpireTime) {
+          if (dayjs(new Date()).isBefore(forms.registerExpireTime)) {
+            // 活动没有结束
+            forms.activeOverStatus = false;
+            // 默认返回毫秒
+            forms.activeOverTime = dayjs(forms.registerExpireTime).diff(
+              dayjs(new Date())
+            );
+            overCountDown.reset(forms.activeOverTime);
+            overCountDown.start();
+          } else {
+            applyOver();
+            forms.activeOverStatus = true;
+          }
+        }
+
+        if (forms.details.length > 0) {
+          forms.detailVip = forms.details[0];
+          // forms.giftVipDay = forms.details[0].membershipDays;
+        }
+        forms.giftVipDay = data.giftVipDay || 0;
+        forms.gradeYear = data.gradeYear;
+        forms.schoolInstrumentSetType = data.schoolInstrumentSetType;
+        forms.registerType = data.registerType;
+        studentInfo.extra.registerType = data.registerType;
+        const schoolInstrumentList = data.schoolInstrumentList || [];
+        if (data.schoolInstrumentSetType === 'SCHOOL') {
+          const instrumentCode = schoolInstrumentList[0]?.instrumentCode;
+          forms.gradeList = getGradeList(data.gradeYear, instrumentCode);
+          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,
+              instrumentCode: item.instrumentCode
+            });
+          });
+          forms.gradeList.sort((a: any, b: any) => a.value - b.value);
+          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,
+              instrumentId: '',
+              instrumentCode: '',
+              instrumentName: '',
+              classList: [] as any
+            };
+            schoolInstrumentList.forEach((item: any) => {
+              if (temp === item.gradeNum) {
+                list.instrumentId = item.instrumentId;
+                list.instrumentCode = item.instrumentCode;
+                list.instrumentName = item.instrumentName;
+                list.classList.push({
+                  text: item.classNum + '班',
+                  value: item.classNum,
+                  instrumentCode: item.instrumentCode
+                });
+              }
+            });
+            // 排序班级
+            list.classList.sort((a: any, b: any) => a.value - b.value);
+            lastGradeList.push(list);
+          });
+          lastGradeList.sort((a: any, b: any) => a.value - b.value);
+          forms.gradeList = lastGradeList;
+          forms.classList = [];
+        } else {
+          forms.gradeList = getGradeList(data.gradeYear);
+          forms.classList = classList;
+        }
+        if (browser().weixin) {
+          // if (
+          //   data.schoolStatus === 0 &&
+          //   forms.schoolId == '1770035687490105346'
+          // ) {
+          //   forms.showTips = true;
+          //   forms.showMessage = '<p style="color: #F44541">报名已截止,感谢您的参与</p>';
+          //   forms.showButton = false;
+          //   return;
+          // }
+          if (data.registerType !== 'BUG_GOODS' || data.schoolStatus === 0) {
+            forms.showTips = true;
+            forms.showMessage = '二维码已经失效,详情请咨询学校老师';
+            forms.showButton = false;
+            return;
+          }
+        } else {
+          forms.showTips = true;
+          return;
+        }
+
+        // 判断是否有倒计时,倒计时是滞结束
+        if (!forms.registerExpireTime || !forms.activeOverStatus) {
+          pagePointInit();
+        }
+      } catch {}
+    };
+
+    // 计算金额
+    const calcPrice = computed(() => {
+      let amount: number = 0; //现价
+      let originAmount: number = 0; // 原价
+      const vipList: any[] = studentRegisterStore.getVip;
+      vipList.forEach((vip: any) => {
+        amount +=
+          forms.joinType === 'digitalize' ? Number(vip.currentPrice) : 0;
+        originAmount += Number(vip.originalPrice);
+      });
+
+      // const goodsList: any[] = studentRegisterStore.getGoods;
+      // goodsList.forEach((good: any) => {
+      //   amount += Number(good.price) * good.quantity;
+      //   originAmount += Number(good.originalPrice) * good.quantity;
+      // });
+      return {
+        amount,
+        originAmount
+      };
+    });
+
+    // 格式化提示状态
+    const changeTipStatus = (register: boolean, school: boolean) => {
+      forms.isTipRegister = register;
+      forms.isChangeSchool = school;
+    };
+
+    const checkForm = (status = true) => {
+      if (!checkPhone(studentInfo.username)) {
+        status && showToast('请输入正确的手机号码');
+        return true;
+      } else if (!studentInfo.password) {
+        status && showToast('请输入验证码');
+        return true;
+      } else if (!studentInfo.extra.nickname) {
+        status && showToast('请输入学生姓名');
+        return true;
+      } else if (![0, 1].includes(studentInfo.extra.gender)) {
+        status && showToast('请选择性别');
+        return true;
+      } else if (!studentInfo.extra.currentGradeNum) {
+        status && showToast('请选择所在年级');
+        return true;
+      } else if (!studentInfo.extra.currentClass) {
+        status && showToast('请选择所在班级');
+        return true;
+      }
+      return false;
+    };
+
+    //
+    const checkSubmit = () => {
+      const { extra } = studentInfo;
+      // console.log(
+      //   forms.studentItem.nickname,
+      //   extra.nickname,
+      //   forms.isRegister,
+      //   forms.isTipRegister,
+      //   'isRegister'
+      // );
+      if (
+        forms.studentItem.nickname !== extra.nickname &&
+        forms.isTipRegister
+      ) {
+        otherParams.showOtherMessage =
+          '学生姓名与上次提交信息不一致,请确认修改学生信息或创建新的学生账号';
+        otherParams.showOtherSchool = true;
+        otherParams.showCancelButton = true;
+        otherParams.showCloseButton = true;
+        otherParams.cancelButtonColor =
+          'linear-gradient( 224deg, #3FE1E6 0%, #00CDD4 100%)';
+        otherParams.cancelButtonText = '新建学生';
+        otherParams.confirmButtonColor =
+          'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
+        otherParams.confirmButtonText = '修改信息';
+        otherParams.otherType = 'nickname';
+        otherParams.messageAlign = 'left';
+        return true;
+      }
+
+      // 判断新建学员是否上限了
+      if (
+        forms.isRegister === 'create' &&
+        forms.studentList.length >= forms.multi_user_limit
+      ) {
+        otherParams.showOtherMessage = `同一手机号最多创建${forms.multi_user_limit}个学生`;
+        otherParams.showOtherSchool = true;
+        otherParams.showCancelButton = false;
+        otherParams.showCloseButton = true;
+        otherParams.confirmButtonColor =
+          'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
+        otherParams.confirmButtonText = '我知道了';
+        otherParams.otherType = 'limit';
+        otherParams.messageAlign = 'center';
+        return true;
+      }
+
+      // 判断是否为同一个学校
+      if (
+        forms.studentItem.schoolId &&
+        forms.studentItem.schoolId !== forms.registerDetails.schoolId &&
+        !forms.isChangeSchool &&
+        forms.isRegister === 'update'
+      ) {
+        otherParams.showOtherMessage = `您已绑定【${
+          forms.studentItem?.schoolName || ''
+        }】,提交后将更换到
+        <span style="color: #2B85FF">【${
+          forms.registerDetails.schoolName || ''
+        }】</span>
+        ,是否确认提交?`;
+        otherParams.showOtherSchool = true;
+        otherParams.showCloseButton = false;
+        otherParams.showCancelButton = true;
+        otherParams.cancelButtonColor = '';
+        otherParams.cancelButtonText = '取消';
+        otherParams.confirmButtonColor = '';
+        otherParams.confirmButtonText = '确定';
+        otherParams.otherType = 'change';
+        otherParams.messageAlign = 'left';
+        return true;
+      }
+      return false;
+    };
+
+    /**
+     * 登记成功之后购买
+     */
+    const onSubmit = async () => {
+      forms.submitLoading = true;
+      try {
+        if (checkForm() || checkSubmit()) {
+          forms.submitLoading = false;
+          return;
+        }
+        const { extra, loginType, autoRegister, password, multiUser, ...res } =
+          studentInfo;
+        /*
+          新用户:
+          autoRegister: true
+          loginType: 'SMS'
+
+          已存在用户:
+          autoRegister: false
+          loginType: 'TOKEN'
+          password: xxx
+        */
+        let tLoginType = loginType,
+          tAutoRegister = autoRegister,
+          tPassword = password,
+          tMultiUser = multiUser;
+        if (forms.isRegister === 'update') {
+          tLoginType = 'TOKEN';
+          tAutoRegister = false;
+          tPassword = forms.studentItem.token;
+          tMultiUser = false;
+        }
+        const result = await request.post('/edu-app/userlogin', {
+          requestType: 'form',
+          data: {
+            loginType: tLoginType,
+            autoRegister: tAutoRegister,
+            password: tPassword,
+            multiUser: tMultiUser,
+            ...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 === 5437) {
+            forms.showTips = true;
+            forms.showMessage =
+              '<p style="color: #F44541">报名已截止,感谢您的参与</p>'; //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';
+          }
+          // 更新时间
+          const id = await updateStat(
+            pageTimer.counter.value,
+            joinType,
+            result.data.userId,
+            forms.schoolId
+          );
+          forms.saveId = id;
+          forms.saveUserId = id;
+          pageTimer.counter.value = 0;
+
+          // 获取用户信息
+          const res = await request.get('/edu-app/user/getUserInfo', {
+            requestType: 'form'
+          });
+          setLogin(res.data);
+
+          await onRegisterSubmit();
+        }
+      } catch {
+        // 重置信息 - 如果是新建则不提示
+        changeTipStatus(forms.isRegister === 'create' ? false : true, false);
+      } finally {
+        forms.submitLoading = false;
+      }
+    };
+
+    const updateStudentInfo = async () => {
+      try {
+        const { extra, username } = studentInfo;
+        const registerResult = await request.post('/edu-app/student/register', {
+          data: {
+            schoolId: forms.schoolId,
+            clientType: 'STUDENT',
+            schoolVerify: true,
+            ...extra,
+            giftVipDay:
+              forms.detailVip.membershipDays || 0 + forms.giftVipDay || 0,
+            mobile: username,
+            newRegUser: forms.isRegister === 'create' ? true : false
+          }
+        });
+
+        if (registerResult.code !== 200) {
+          if (registerResult.code === 5436) {
+            forms.showTips = true;
+            forms.showMessage = '二维码已经失效,详情请咨询学校老师';
+            forms.showButton = false;
+          } else if (registerResult.code === 5435) {
+            forms.showTips = true;
+            forms.showMessage = registerResult.message;
+            forms.showButton = true;
+          } else if (registerResult.code === 5437) {
+            forms.showTips = true;
+            forms.showMessage =
+              '<p style="color: #F44541">报名已截止,感谢您的参与</p>'; //result.message;
+            forms.showButton = false;
+          }
+          return false;
+        } else {
+          return true;
+        }
+      } catch {}
+    };
+
+    // 登记成功之后购买
+    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 (forms.joinType === 'tradition') {
+          const updateStatus = await updateStudentInfo();
+          if (!updateStatus) return;
+
+          setTimeout(() => {
+            showToast('报名成功');
+            // router.push('/download');
+          }, 100);
+
+          setTimeout(() => {
+            if (browser().weixin) {
+              // 关闭微信
+              (window as any).WeixinJSBridge.call('closeWindow');
+            }
+          }, 1000);
+          return;
+        }
+
+        if (schoolInfo.data.hasBuyCourse && vipList.length > 0) {
+          // forms.dialogConfirmStatus = true;
+          otherParams.showOtherMessage = `该学员已购买会员,是否再次购买?`;
+          otherParams.showOtherSchool = true;
+          otherParams.showCloseButton = false;
+          otherParams.showCancelButton = true;
+          otherParams.cancelButtonColor = '';
+          otherParams.cancelButtonText = '取消';
+          otherParams.confirmButtonColor = '';
+          otherParams.confirmButtonText = '确定';
+          otherParams.otherType = 'member';
+          otherParams.messageAlign = 'center';
+          return;
+        }
+
+        await paymentContinue();
+      } catch {
+        // 重置信息 - 如果是新建则不提示
+        changeTipStatus(forms.isRegister === 'create' ? false : true, false);
+      }
+    };
+
+    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`
+        );
+        forms.studentList = data || [];
+
+        if (forms.studentList.length > 0) {
+          const firstStudent: any = forms.studentList[0];
+          forms.studentItem = firstStudent;
+          studentInfo.extra.nickname = firstStudent.nickname;
+          const tempGrade: any = forms.gradeList || [];
+          tempGrade?.forEach((i: any) => {
+            if (i.value === firstStudent.currentGradeNum) {
+              forms.instrumentCode = i.instrumentCode;
+              forms.gradeNumText = i.text;
+              studentInfo.extra.currentGradeNum = firstStudent.currentGradeNum;
+              if (forms.schoolInstrumentSetType === 'CLASS') {
+                forms.classList = i.classList;
+              }
+            }
+          });
+          forms.classList.forEach((i: any) => {
+            if (i.value === firstStudent.currentClass) {
+              forms.currentClassText = i.text;
+              studentInfo.extra.currentClass = firstStudent.currentClass;
+            }
+          });
+          studentInfo.extra.gender = firstStudent.gender;
+
+          forms.isRegister = 'update';
+          changeTipStatus(true, false);
+        } else {
+          forms.isRegister = 'create';
+          changeTipStatus(false, false);
+          forms.studentItem = [];
+        }
+      } catch {
+        //
+      }
+    };
+
+    // 查询未支付订单
+    const paymentOrderUnpaid = async () => {
+      let result = false;
+      try {
+        const { data } = await request.get(
+          '/edu-app/userPaymentOrder/schoolRegisterOrder?schoolId=' +
+            forms.schoolId
+        );
+        // 判断是否有待支付订单
+
+        if (data && data.length > 0) {
+          let isPadding = false; // 是否有待支付订单
+          let paddingConfig = {} as any;
+          let paddingData = {} as any;
+          let isFinal = false; // 是否有完成订单
+          let finalConfig = {} as any;
+          data.forEach((element: any) => {
+            // 判断是否待支付
+            if (element.status === 'PAYING' || element.status === 'WAIT_PAY') {
+              isPadding = true;
+              paddingConfig = element.paymentConfig;
+              paddingData = element;
+            }
+
+            if (
+              element.status === 'PAID' ||
+              element.status === 'PART_REFUNDED' ||
+              element.status === 'REFUNDED'
+            ) {
+              isFinal = true;
+              finalConfig = element.paymentConfig;
+            }
+          });
+
+          // 60s 关单提示文案
+
+          // 判断是否有完成订单 并且选择 自备
+          if (isFinal && forms.joinType === 'tradition') {
+            // const studentResult = await updateStudentInfo();
+            // if (!studentResult) return;
+            setTimeout(() => {
+              showToast('您已报名成功,请勿重复报名');
+            }, 100);
+            return true;
+          }
+
+          // 提交报名信息时,判断该手机号是否存在待支付订单,若存则判断本次提交的报名方式,若本次提交的是团购则提示【您有待支付的报名订单,是否继续支付   重新下单/继续支付】,点击重新下单时,关闭老订单,创建新订单;若本次提交的是自备,则提示   【您有数字化方式报名的待支付订单,请关闭订单后重新报名   取消/关闭】取消则停留在当前界面,关闭则关闭订单,并停留在当前界面,用户需要再次点击报名按钮提交信息
+          if (isPadding && forms.joinType === 'tradition') {
+            // forms.dialogStatus = true;
+            // forms.dialogMessage =
+            //   '您有数字化方式报名的待支付订单,请关闭订单后重新报名';
+            // forms.cancelButtonText = '取消';
+            // forms.confirmButtonText = '关闭';
+            // forms.dialogConfig = paddingConfig;
+            // forms.messageAlign = 'left';
+            forms.dialogConfig = paddingConfig;
+            const cancelStatus = await cancelPaymentOrder();
+            if (cancelStatus) {
+              onSubmit();
+            }
+            // 重新下单 - 先关闭订单
+            // resetOrderPayment();
+            return true;
+          }
+          if (isPadding && forms.joinType === 'digitalize') {
+            // 最终确认,有待支付订单直接去支付,没有则才会创建订单
+            // state.config = paddingConfig?.paymentConfig;
+            // state.orderNo = paddingConfig?.orderNo;
+            // const updateStatus = await updateStudentInfo();
+            // if (!updateStatus) return;
+            // await lastSubmit();
+
+            // 为了处理,有待支付订单,然后后台改了金额,会导致金额不一致
+            forms.dialogConfig = paddingConfig;
+            const cancelStatus = await cancelPaymentOrder();
+            if (cancelStatus) {
+              await paymentContinue();
+            }
+            return true;
+          }
+
+          return false;
+        } else {
+          return false;
+        }
+      } catch {
+        // 重置信息 - 如果是新建则不提示
+        changeTipStatus(forms.isRegister === 'create' ? false : true, false);
+      }
+      return result;
+    };
+
+    // 重新下单
+    const resetOrderPayment = async () => {
+      try {
+        const orderNo = forms.dialogConfig?.orderNo;
+        if (!orderNo) return;
+        await request.post(
+          '/edu-app/userPaymentOrder/cancelPayment/' + orderNo
+        );
+
+        await onRegisterSubmit();
+      } catch {
+        //
+      }
+    };
+    // 取消订单
+    const cancelPaymentOrder = async () => {
+      try {
+        const orderNo = forms.dialogConfig?.orderNo;
+        if (!orderNo) return;
+        await request.post(
+          '/edu-app/userPaymentOrder/cancelPayment/' + orderNo
+        );
+        return true;
+      } catch {
+        return false;
+      }
+    };
+
+    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 updateStatus = await updateStudentInfo();
+        // console.log(updateStatus, 'updateStatus');
+        if (!updateStatus) return;
+
+        const result = await request.post(
+          '/edu-app/userPaymentOrder/executeOrder',
+          {
+            // hideLoading: false,
+            data: {
+              buryId: forms.saveUserId,
+              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');
+        // 重置信息 - 如果是新建则不提示
+        changeTipStatus(forms.isRegister === 'create' ? false : true, false);
+      }
+    };
+
+    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 {
+        // 重置信息 - 如果是新建则不提示
+        changeTipStatus(forms.isRegister === 'create' ? false : true, false);
+      }
+    };
+
+    /**
+     * @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 = 5,
+      joinType?: string,
+      userId?: string,
+      schoolId?: string
+    ) => {
+      try {
+        const { data } = await requestStudent.post(
+          '/edu-app/open/studentRegisterPointRecord/update',
+          {
+            data: {
+              id: forms.saveId,
+              useTime: pageBrowseTime, // 固定10秒
+              joinType,
+              userId,
+              schoolId
+            }
+          }
+        );
+        forms.saveId = data;
+        return 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;
+      }
+    }
+
+    const formatTimerTo = (num: number): string => {
+      if (num > 9) {
+        return num + '';
+      } else {
+        return '0' + num;
+      }
+    };
+
+    const pagePointInit = async () => {
+      try {
+        // 判断是否获取微信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 {}
+    };
+
+    /** 手机号变更时清空验证码信息,用户信息 */
+    const phoneChangeEmptyInfo = () => {
+      studentInfo.password = '';
+      studentInfo.extra.nickname = '';
+      studentInfo.extra.currentGradeNum = '';
+      studentInfo.extra.currentClass = '';
+      studentInfo.extra.gender = 1;
+      forms.currentClassText = '';
+      forms.gradeNumText = '';
+      forms.studentList = []; // 手机号关联学生列表
+      forms.studentItem = {}; // 选择的学生
+      forms.isRegister = 'create'; // 是否注册学生
+      forms.isTipRegister = false; // 是否显示名字不一致 - 默认显示
+      forms.isChangeSchool = false; // 是否切换学校
+    };
+
+    onMounted(async () => {
+      try {
+        // 获取支付类型
+        let expireDay = null;
+        const { data } = await request.get(
+          '/edu-app/open/paramConfig/queryByParamNameList',
+          {
+            requestType: 'form',
+            params: {
+              paramNames:
+                'payment_service_provider,contract_sign,multi_user_limit,qr_code_expire_time'
+            }
+          }
+        );
+        if (data && Array.isArray(data)) {
+          data.forEach((item: any) => {
+            if (item.paramName === 'contract_sign') {
+              forms.contract_sign = item.paramValue === '1' ? true : false;
+            } else if (item.paramName === 'payment_service_provider') {
+              forms.paymentType = item.paramValue || '';
+            } else if (item.paramName === 'multi_user_limit') {
+              forms.multi_user_limit = item.paramValue
+                ? Number(item.paramValue)
+                : 1;
+            } else if (item.paramName === 'qr_code_expire_time') {
+              expireDay = item.paramValue ? Number(item.paramValue) : null;
+            }
+          });
+        }
+
+        const createT = route.query.t;
+        if (createT && expireDay !== null) {
+          if (dayjs(Number(createT)).add(expireDay, 'day').isBefore(dayjs())) {
+            forms.showTips = true;
+            forms.showMessage = '二维码已经失效,详情请咨询学校老师';
+            forms.showButton = false;
+          }
+        }
+
+        await getRegisterGoods();
+      } catch {}
+    });
+
+    onUnmounted(() => {
+      forms.intervalFnRef?.pause(); // 暂停回调
+    });
+
+    return () => (
+      <div class={styles['student-register']}>
+        <div class={styles.studentRegisterContainer}>
+          {!forms.activeOverStatus && (
+            <div class={styles.countdownSection}>
+              <div class={styles.timer}>
+                <img src={icon3} class={styles.timerTitle} />
+                <div class={styles.timerAll}>
+                  <span>{formatTimerTo(overCountDown.current.value.days)}</span>
+                  天
+                  <span>
+                    {formatTimerTo(overCountDown.current.value.hours)}
+                  </span>
+                  时
+                  <span>
+                    {formatTimerTo(overCountDown.current.value.minutes)}
+                  </span>
+                  分
+                  <span>
+                    {formatTimerTo(overCountDown.current.value.seconds)}
+                  </span>
+                  秒
+                </div>
+              </div>
+              <div class={styles.timerTip}>
+                为了确保您能顺利参与学习,请在规定时间内报名
+              </div>
+            </div>
+          )}
+
+          <div
+            class={[
+              styles.studentSection,
+              styles.studentSectionForm,
+              styles.noSendDay
+            ]}>
+            {/* <div class={styles.title1}></div> */}
+
+            <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}
+                onUpdate:modelValue={() => {
+                  phoneChangeEmptyInfo();
+                }}>
+                {{
+                  label: () => (
+                    <div>
+                      联系方式
+                      {/* (直接监护人) */}
+                      <p class={styles.tips}>(直接监护人)</p>
+                    </div>
+                  )
+                }}
+              </Field>
+              <div class={['van-hairline--bottom', styles.fieldTipsGroup]}>
+                <div class={[styles.fieldTips]}>
+                  <i class={styles.iconQuestion}></i>
+                  手机号是音乐数字课堂的唯一登录账户
+                </div>
+              </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>
+              {/* 大于等于2,则可以切换学生 */}
+              {/* {forms.studentList.length > 1 && (
+                <div
+                  class={[
+                    styles.selectStudentGroup,
+                    forms.showSelectStudent && styles.selectStudentGroupChecked
+                  ]}
+                  onClick={() => (forms.showSelectStudent = true)}>
+                  <i
+                    class={[
+                      styles.studentIcon,
+                      !forms.studentItem.userId && styles.studentIconAdd
+                    ]}></i>
+                  <span>
+                    {forms.studentItem.userId
+                      ? forms.studentItem.nickname
+                      : '新增学生'}
+                  </span>
+                </div>
+              )} */}
+
+              <Field
+                clearable={false}
+                required
+                inputAlign="right"
+                label="学生姓名"
+                placeholder="请输入学生姓名"
+                autocomplete="off"
+                maxlength={14}
+                v-model={studentInfo.extra.nickname}>
+                {{
+                  extra: () =>
+                    forms.studentList.length > 1 && (
+                      <div
+                        class={[
+                          styles.selectStudentGroup,
+                          forms.showSelectStudent &&
+                            styles.selectStudentGroupChecked
+                        ]}
+                        onClick={() => (forms.showSelectStudent = true)}>
+                        <span>
+                          {forms.studentItem.userId ? '切换' : '新增'}
+                        </span>
+                      </div>
+                    )
+                }}
+              </Field>
+              <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.gradePopupIndex = [studentInfo.extra.currentGradeNum];
+                  forms.gradeStatus = true;
+                }}
+              />
+              <Field
+                clearable={false}
+                required
+                inputAlign="right"
+                label="所在班级"
+                placeholder="请选择班级"
+                isLink
+                readonly
+                clickable={false}
+                modelValue={forms.currentClassText}
+                onClick={() => {
+                  if (
+                    forms.schoolInstrumentSetType === 'CLASS' &&
+                    forms.classList.length <= 0
+                  ) {
+                    showToast('请先选择年级');
+                    return;
+                  }
+                  forms.classPopupIndex = [studentInfo.extra.currentClass];
+                  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.goodsGroup}>
+              <div
+                class={[
+                  styles.goodsItem,
+                  styles.digitalize,
+                  forms.joinType === 'digitalize' && styles.checked
+                ]}
+                onClick={() => {
+                  //
+                  if (checkForm()) {
+                    showToast('请将资料填写完整');
+                    return;
+                  }
+                  forms.joinType = 'digitalize';
+                  nextTick(() => {
+                    mstickyRef.value?.onChnageHeight();
+                    setTimeout(() => {
+                      window.scrollTo(0, 1000);
+                    }, 50);
+                  });
+                }}>
+                <div class={styles.goodsInner}>
+                  <i class={styles.proposalTip}></i>
+                  数字化方式
+                </div>
+              </div>
+              <div
+                class={[
+                  styles.goodsItem,
+                  styles.tradition,
+                  forms.joinType === 'tradition' && styles.checked1
+                ]}
+                onClick={() => {
+                  if (checkForm()) {
+                    showToast('请将资料填写完整');
+                    return;
+                  }
+                  forms.joinType = 'tradition';
+                  nextTick(() => {
+                    mstickyRef.value?.onChnageHeight();
+                    setTimeout(() => {
+                      window.scrollTo(0, 1000);
+                    }, 50);
+                  });
+                }}>
+                <div class={styles.goodsInner}>传统方式</div>
+              </div>
+            </div>
+          </div> */}
+
+          <div class={[styles.goodsExtra]}>
+            {/* <i class={styles.iconArrow}></i> */}
+            <Cell
+              border={false}
+              class={styles.goodsCell}
+              center
+              onClick={() => {
+                // console.log(forms.joinType, 'joinType');
+                if (forms.joinType === 'digitalize') {
+                  otherParams.showOtherMessage = `没有陪练工具,将无法实现同步练习`;
+                  otherParams.showOtherSchool = true;
+                  otherParams.showCloseButton = true;
+                  otherParams.showCancelButton = true;
+                  otherParams.cancelButtonColor = '';
+                  otherParams.cancelButtonText = '确认取消';
+                  otherParams.confirmButtonColor = '';
+                  otherParams.confirmButtonText = '放弃取消';
+                  otherParams.otherType = 'payment';
+                  otherParams.messageAlign = 'center';
+                } else if (forms.joinType === 'tradition') {
+                  forms.joinType = 'digitalize';
+                }
+              }}>
+              {{
+                icon: () => (
+                  <div class={styles.checkedGroup}>
+                    <i
+                      class={[
+                        styles.iconChecked,
+                        forms.joinType === 'digitalize' && styles.selected
+                      ]}></i>
+
+                    {/* {forms.tipStatus && <i class={styles.showBg}></i>} */}
+                    {forms.joinType === 'digitalize' && (
+                      <i class={styles.showBg}></i>
+                    )}
+                  </div>
+                ),
+                title: () => (
+                  <div class={styles.section}>
+                    <Image
+                      class={styles.img}
+                      src={forms.detailVip.goodsUrl || tuangou}
+                    />
+                    <div class={styles.sectionContent}>
+                      <img src={icon5} class={styles.goodsName} />
+                      {/* <h2>
+
+                        <img src={icon5} class={styles.goodsName} />
+                      </h2>
+                      <p class={[styles.model]}>
+
+                        <p>
+                          <i></i>解决学生不会练、不知练的对错
+                        </p>
+                        <p>
+                          <i></i>家长无法辅导、无需再额外请老师
+                        </p>
+                      </p>
+
+                      <img src={icon6} class={styles.sendInstrument} /> */}
+                    </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>
+
+          {/* {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>
+                  <div class={styles.stepContent}>
+                    <span>AI工具标准:</span>
+                    可以学练音乐教材中的乐曲,通过手机应用商店准备。
+                  </div>
+                </div>
+                {['Panpipes', 'Ocarina', 'Tenor Recorder', 'Woodwind'].includes(
+                  forms.instrumentCode
+                ) && (
+                  <div class={styles.step}>
+                    <span class={styles.nums}>
+                      <span class={styles.numInner}>2</span>
+                    </span>
+                    <div class={styles.stepContent}>
+                      <span>
+                        {forms.instrumentCode === 'Panpipes' && '排箫'}
+                        {forms.instrumentCode === 'Ocarina' && '陶笛'}
+                        {forms.instrumentCode === 'Tenor Recorder' && '竖笛'}
+                        {forms.instrumentCode === 'Woodwind' && '葫芦丝'}
+                        标准:
+                      </span>
+                      {forms.instrumentCode === 'Panpipes' &&
+                        '管数不限,建议20管以上C调加嘴排箫(不需要重复更换),黑色,选择单一原调(调性多很难掌握);'}
+                      {forms.instrumentCode === 'Ocarina' &&
+                        'C调、蓝色、十二孔高音、树脂或陶土均可;'}
+                      {forms.instrumentCode === 'Tenor Recorder' &&
+                        'C调、木质、高音德式八孔;'}
+                      {forms.instrumentCode === 'Woodwind' &&
+                        'C调、红木色、树脂或木质;'}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )} */}
+
+          {forms.joinType && (
+            <MSticky position="bottom" ref={mstickyRef}>
+              <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 class={styles.unit} style="font-style: normal">
+                        /年
+                      </i>
+                    </span>
+                    {calcPrice.value.originAmount > calcPrice.value.amount &&
+                    forms.joinType === 'digitalize' ? (
+                      <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}>
+                    {forms.joinType === 'digitalize'
+                      ? '报名与支付'
+                      : '提交报名'}
+                  </Button>
+                </div>
+
+                {/* {forms.joinType === 'tradition' && (
+                  <div
+                    class={styles.traditionBtn}
+                    onClick={() => {
+                      onSubmit();
+                    }}>
+                    <Button
+                      round
+                      disabled={forms.submitLoading}
+                      loading={forms.submitLoading}>
+                      提交报名
+                    </Button>
+                  </div>
+                )} */}
+              </div>
+            </MSticky>
+          )}
+        </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'}
+          onOpen={() => {
+            forms.gradePopupShow = true;
+          }}
+          onClosed={() => {
+            forms.gradePopupShow = false;
+          }}>
+          {forms.gradePopupShow && (
+            <Picker
+              showToolbar
+              v-model={forms.gradePopupIndex}
+              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;
+                if (
+                  ['SCHOOL', 'GRADE'].includes(forms.schoolInstrumentSetType)
+                ) {
+                  forms.instrumentCode = selectedOption.instrumentCode;
+                }
+
+                if (forms.schoolInstrumentSetType === 'CLASS') {
+                  forms.classList = selectedOption.classList;
+                }
+                if (
+                  ['CLASS', 'GRADE'].includes(forms.schoolInstrumentSetType)
+                ) {
+                  forms.currentClassText = '';
+                  studentInfo.extra.currentClass = '';
+                }
+              }}
+            />
+          )}
+        </Popup>
+        {/* 班级 */}
+        <Popup
+          v-model:show={forms.classStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            forms.classPopupShow = true;
+          }}
+          onClosed={() => {
+            forms.classPopupShow = false;
+          }}>
+          {forms.classPopupShow && (
+            <Picker
+              showToolbar
+              v-model={forms.classPopupIndex}
+              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;
+                if (['CLASS'].includes(forms.schoolInstrumentSetType)) {
+                  forms.instrumentCode = selectedOption.instrumentCode;
+                }
+              }}
+            />
+          )}
+        </Popup>
+
+        {/* 已经购买过样品 */}
+        {/* <MDialog
+          title="提示"
+          v-model:show={forms.dialogConfirmStatus}
+          message={'已购买会员,是否确认购买?'}
+          primaryColor="#FF8057"
+          allowHtml={true}
+          confirmButtonText="确定"
+          showCancelButton
+          onConfirm={async () => {
+            await paymentContinue();
+          }}
+          onCancel={() => {
+            //取消支付,判断是否有结束时间,是否已经结束
+            if (forms.registerExpireTime && forms.activeOverStatus) {
+              applyOver();
+            }
+          }}
+        /> */}
+
+        <MDialog
+          title="提示"
+          v-model:show={forms.dialogStatus}
+          message={forms.dialogMessage}
+          allowHtml={true}
+          primaryColor="#FF8057"
+          showCancelButton={true}
+          messageAlign={forms.messageAlign}
+          confirmButtonText={forms.confirmButtonText}
+          cancelButtonText={forms.cancelButtonText}
+          onConfirm={async () => {
+            if (forms.joinType === 'tradition') {
+              //
+              await cancelPaymentOrder();
+              //取消支付,判断是否有结束时间,是否已经结束
+              if (forms.registerExpireTime && forms.activeOverStatus) {
+                applyOver();
+              }
+            }
+
+            if (forms.joinType === 'digitalize') {
+              // 继续支付
+              const paymentConfig = forms.dialogConfig;
+              state.config = paymentConfig?.paymentConfig;
+              state.orderNo = paymentConfig?.orderNo;
+
+              const updateStatus = await updateStudentInfo();
+              if (!updateStatus) return;
+              await lastSubmit();
+            }
+          }}
+          onCancel={(val: any) => {
+            // countDown.pause();
+
+            if (forms.joinType === 'tradition') {
+              forms.dialogStatus = false;
+
+              //取消支付,判断是否有结束时间,是否已经结束
+              if (forms.registerExpireTime && forms.activeOverStatus) {
+                applyOver();
+              }
+            }
+            if (forms.joinType === 'digitalize') {
+              // 重新下单 - 先关闭订单
+              resetOrderPayment();
+            }
+          }}
+        />
+
+        <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
+          show={forms.showTips}
+          message={forms.showMessage}
+          showButton={forms.showButton}
+          buttonText="刷新"
+          onConfirm={() => window.location.reload()}
+        />
+
+        <MMessageTip
+          show={otherParams.showOtherSchool}
+          // showCloseButton={otherParams.showCloseButton}
+          messageAlign={otherParams.messageAlign}
+          message={otherParams.showOtherMessage}
+          showCancelButton={otherParams.showCancelButton}
+          cancelButtonColor={otherParams.cancelButtonColor}
+          cancelButtonText={otherParams.cancelButtonText}
+          confirmButtonColor={otherParams.confirmButtonColor}
+          confirmButtonText={otherParams.confirmButtonText}
+          onClose={() => (otherParams.showOtherSchool = false)}
+          onCancel={async () => {
+            otherParams.showOtherSchool = false;
+            if (otherParams.otherType === 'nickname') {
+              forms.isRegister = 'create'; // 新建
+              changeTipStatus(false, false);
+              onSubmit();
+            } else if (otherParams.otherType === 'member') {
+              const updateStatus = await updateStudentInfo();
+              if (!updateStatus) return;
+              //取消支付,判断是否有结束时间,是否已经结束
+              if (forms.registerExpireTime && forms.activeOverStatus) {
+                applyOver();
+              }
+            } else if (otherParams.otherType === 'payment') {
+              forms.joinType = 'tradition';
+            }
+          }}
+          onConfirm={async () => {
+            otherParams.showOtherSchool = false;
+            // 名字
+            if (otherParams.otherType === 'nickname') {
+              forms.isRegister = 'update'; // 修改
+              changeTipStatus(false, false);
+              // 直接注册
+              onSubmit();
+            } else if (otherParams.otherType === 'change') {
+              // 学校更换
+              forms.isChangeSchool = true;
+              // 直接注册
+              onSubmit();
+            } else if (otherParams.otherType === 'limit') {
+              // 人数超限制
+              changeTipStatus(
+                forms.isRegister === 'create' && !forms.studentItem.userId
+                  ? false
+                  : true,
+                false
+              );
+            } else if (otherParams.otherType === 'member') {
+              await paymentContinue();
+            }
+          }}
+        />
+
+        <Popup
+          v-model:show={forms.showSelectStudent}
+          round
+          position="bottom"
+          safeAreaInsetBottom
+          closeable>
+          <SelectStudent
+            studentItem={forms.studentItem}
+            list={forms.studentList}
+            onClose={() => (forms.showSelectStudent = false)}
+            onConfirm={(val: any) => {
+              if (val.userId) {
+                forms.studentItem = val;
+                const firstStudent = val;
+                studentInfo.extra.nickname = firstStudent.nickname;
+                const tempGrade: any = forms.gradeList || [];
+
+                studentInfo.extra.currentGradeNum = null;
+                forms.gradeNumText = '';
+                forms.instrumentCode = '';
+
+                tempGrade?.forEach((i: any) => {
+                  if (i.value === firstStudent.currentGradeNum) {
+                    forms.instrumentCode = i.instrumentCode;
+                    forms.gradeNumText = i.text;
+                    studentInfo.extra.currentGradeNum =
+                      firstStudent.currentGradeNum;
+                    if (forms.schoolInstrumentSetType === 'CLASS') {
+                      forms.classList = i.classList;
+                    }
+                  }
+                });
+
+                studentInfo.extra.currentClass = null;
+                forms.currentClassText = '';
+
+                forms.classList.forEach((i: any) => {
+                  if (i.value === firstStudent.currentClass) {
+                    forms.currentClassText = i.text;
+                    studentInfo.extra.currentClass = firstStudent.currentClass;
+                  }
+                });
+                studentInfo.extra.gender = firstStudent.gender;
+                forms.isRegister = 'update';
+                changeTipStatus(true, false);
+
+                forms.showSelectStudent = false;
+              } else {
+                // 判断新建学员是否上限了
+                if (forms.studentList.length >= forms.multi_user_limit) {
+                  otherParams.showOtherMessage = `同一手机号最多创建${forms.multi_user_limit}个学生`;
+                  otherParams.showOtherSchool = true;
+                  otherParams.showCancelButton = false;
+                  otherParams.showCloseButton = true;
+                  otherParams.confirmButtonColor =
+                    'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
+                  otherParams.confirmButtonText = '我知道了';
+                  otherParams.otherType = 'limit';
+                  otherParams.messageAlign = 'center';
+                  return true;
+                } else {
+                  forms.studentItem = val;
+                  forms.isRegister = 'create';
+                  changeTipStatus(false, false);
+                  studentInfo.extra.nickname = '';
+                  studentInfo.extra.currentGradeNum = '';
+                  studentInfo.extra.currentClass = '';
+                  studentInfo.extra.gender = 1;
+                  forms.currentClassText = '';
+                  forms.gradeNumText = '';
+                  forms.showSelectStudent = false;
+                }
+              }
+            }}
+          />
+        </Popup>
+      </div>
+    );
+  }
+});

+ 787 - 0
src/views/student-register/index.module-apply2.less

@@ -0,0 +1,787 @@
+.student-register {
+  min-height: 100vh;
+  // background: #FFF4E2;
+  background: linear-gradient(180deg, #C9EDFD 0%, #CCF0FF 100%);
+  overflow: hidden;
+  position: relative;
+
+  --k-font-primary: #007AFE;
+
+  .studentRegisterContainer {
+    padding-top: 69px;
+    background: url('./images/new/banner-bg4.png') no-repeat top center;
+    background-size: contain;
+  }
+}
+
+.countdownSection {
+  position: relative;
+  background: linear-gradient(90deg, #FFBBD1 0%, #FFEFE2 100%), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
+  border-radius: 10px;
+  margin: 0 14px 8px;
+  padding: 10px 12px;
+  border: 1px solid #FFFFFF;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 11px;
+    display: inline-block;
+    width: 32px;
+    height: 48px;
+    background: url('./images/new/icon-1.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .timer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .timerAll {
+    // position: absolute;
+    right: 12px;
+    font-size: 12px;
+    color: #131415;
+    line-height: 17px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 22px;
+      min-width: 22px;
+      padding: 0 3px;
+      background: #FF3A5F;
+      border-radius: 4px;
+      font-weight: 600;
+      font-size: 12px;
+      color: #FFFFFF;
+      margin: 0 3px;
+    }
+  }
+
+  .timerTitle {
+    position: relative;
+    width: 80px;
+    height: 15px;
+    margin-right: 4px;
+  }
+
+  .timerTip {
+    margin-top: 10px;
+    margin-left: 2px;
+    margin-right: 2px;
+    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+    border-radius: 12px;
+    text-align: center;
+    padding: 4px 6px;
+    font-size: 11px;
+    color: #69717C;
+    line-height: 16px;
+  }
+}
+
+.paymentContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) 14px;
+  background: #FFFFFF;
+  box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
+  border-radius: 18px 18px 0px 0px;
+
+
+  .payemntPrice {
+    // line-height: 0;
+  }
+
+  .giftTip {
+    width: 52px;
+    height: 18px;
+  }
+
+  .needPrice {
+    color: #333333;
+    padding-bottom: 7px;
+    font-size: 16px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #FC1A19;
+    padding-right: 6px;
+
+    span {
+      font-size: 24px;
+      margin-right: 2px;
+    }
+
+    i {
+      // margin-top: -3px;
+      vertical-align: text-bottom;
+      font-weight: 400;
+
+      &.unit {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .allPrice {
+    display: inline-block;
+    font-size: 14px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #AAAAAA;
+    line-height: 16px;
+    vertical-align: text-top;
+  }
+
+  :global {
+    .van-button {
+      height: 40px;
+      line-height: 40px;
+      width: 148px;
+      background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+      font-size: 16px;
+      color: #fff;
+      font-weight: 500;
+      border: 0;
+    }
+  }
+
+  .traditionBtn {
+    flex: 1;
+    text-align: center;
+
+    :global {
+      .van-button {
+        width: 100%;
+        max-width: 325px;
+      }
+    }
+  }
+}
+
+.studentSection {
+  margin: 0 14px 8px;
+  padding: 12px 15px;
+  background: linear-gradient(180deg, rgba(219, 246, 253) 0%, rgba(255, 255, 255) 30%);
+  border-radius: 16px;
+  border: 1px solid #FFFFFF;
+
+  &.studentSectionForm {
+    padding: 0 0 12px;
+    background: linear-gradient(180deg, #DBF6FD 0%, #FFFFFF 10%);
+  }
+
+  &.noSendDay {
+    padding-bottom: 0;
+  }
+
+  .title1,
+  .title3 {
+    width: 212px;
+    height: 22px;
+    background: url('./images/new/title-7.png') no-repeat center;
+    background-size: contain;
+    margin: 0 auto;
+  }
+
+  .title2 {
+    width: 248px;
+    height: 22px;
+    background: url('./images/new/title-4.png') no-repeat center;
+    background-size: contain;
+    margin: 0 auto;
+  }
+
+  .title3 {
+    background: url('./images/new/title-6.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .goodsGroup {
+    display: flex;
+    align-items: center;
+    margin-top: 29px;
+  }
+
+  .goodsItem {
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    // background: #EBF3F8;
+    // border-radius: 20px 4px 4px 20px;
+    height: 36px;
+    line-height: 36px;
+    font-size: 16px;
+    color: #728088;
+    // transform: skewX(-15deg);
+    background: url('./images/new/btn-left-default.png') no-repeat center;
+    background-size: contain;
+
+
+
+    .goodsInner {
+      // transform: skewX(15deg);
+      // background: #EBF3F8;
+      width: 100%;
+      text-align: center;
+    }
+
+    &.checked {
+      // background: linear-gradient(315deg, #31C7FF 0%, #007AFE 100%);
+      background: url('./images/new/btn-left-active.png') no-repeat center !important;
+      background-size: contain !important;
+      color: #fff;
+      font-weight: 600;
+
+    }
+
+    &.checked1 {
+
+      background: url('./images/new/btn-right-active.png') no-repeat center !important;
+      background-size: contain !important;
+      color: #fff;
+      font-weight: 600;
+
+    }
+
+    .proposalTip {
+      position: absolute;
+      right: 8px;
+      top: -14px;
+      width: 40px;
+      height: 26px;
+      display: inline-block;
+      background: url('./images/new/icon-2.png') no-repeat center;
+      background-size: contain;
+    }
+
+    &+.goodsItem {
+      // margin-left: 8px;
+      // border-radius: 4px 20px 20px 4px;
+      // transform: skewX(-15deg);
+      background: url('./images/new/btn-right-default.png') no-repeat center;
+      background-size: contain;
+      // &.checked {
+      //   background: linear-gradient(315deg, #31C7FF 0%, #007AFE 100%);
+      // }
+    }
+  }
+}
+
+.registerForm {
+  // background: #FFFFFF;
+  // border-radius: 16px;
+  border-radius: 18px;
+  // margin: 0 12px;
+  overflow: hidden;
+
+  .selectStudentGroup {
+    margin-left: 10px;
+    font-size: 14px;
+    color: #1189FF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.selectStudentGroupChecked {
+      span::after {
+        transform: rotate(180deg);
+      }
+    }
+
+    // .studentIcon {
+    //   display: inline-block;
+    //   margin-right: 6px;
+    //   width: 20px;
+    //   height: 20px;
+    //   background: url('./images/new/icon-n-5.png') no-repeat center;
+    //   background-size: contain;
+
+    //
+
+    //   &.studentIconAdd {
+    //     background: url('./images/new/icon-n-4.png') no-repeat center;
+    //     background-size: contain;
+    //   }
+    // }
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::after {
+        display: inline-block;
+        content: '';
+        width: 9px;
+        height: 5px;
+        margin-left: 4px;
+        background: url('./images/new/icon-n-6.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+
+  :global {
+    .van-cell {
+      background-color: transparent;
+    }
+  }
+
+  .fieldTipsGroup {
+    margin: 0 14px 0;
+    padding-bottom: 6px;
+  }
+
+  .fieldTips {
+    font-size: 13px;
+    color: #EC763B;
+    line-height: 18px;
+    background: #FFF8EB;
+    border-radius: 4px;
+    padding: 4px 10px;
+    display: flex;
+    align-items: center;
+
+    .iconQuestion {
+      flex-shrink: 0;
+      display: inline-block;
+      background: url('./images/new/icon-question.png') no-repeat center;
+      background-size: contain;
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
+    }
+  }
+
+  .tips {
+    display: inline-block;
+    // padding-left: 5px;
+    // padding-top: 2px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #777;
+    line-height: 17px;
+  }
+
+  .username {
+    padding-top: 15px !important;
+    padding-bottom: 6px !important;
+
+    :global {
+      .van-field__label {
+        display: flex;
+        align-items: center;
+        width: 170px;
+      }
+    }
+  }
+
+  .countDown {
+    min-width: 80px;
+    text-align: center;
+    font-size: 14px;
+    color: #A0D0FF;
+  }
+
+  :global {
+    .van-cell {
+      padding: 14px 14px;
+    }
+
+
+    .van-field__label {
+      font-size: 15px;
+      color: #666666;
+      line-height: 22px;
+      display: flex;
+      align-items: center;
+    }
+
+    .van-field__control {
+      font-size: 15px;
+      color: #131415;
+    }
+  }
+
+  .codeText {
+    color: #1189FF;
+    font-size: 14px;
+
+    // &.codeTextDisabled {
+    //   color: #ccc;
+    // }
+  }
+
+  .memberNumer {
+    margin: 14px 12px 0;
+    background: #E8F8FF;
+    border-radius: 8px;
+    padding: 8px 0 8px 10px;
+    display: flex;
+    align-items: center;
+    // font-weight: 600;
+    font-size: 13px;
+    color: #131415;
+    line-height: 18px;
+
+    .iconGift {
+      width: 18px;
+      height: 18px;
+      margin-right: 6px;
+    }
+
+    span {
+      font-size: 15px;
+      color: #F62C2C;
+      padding: 0 5px;
+      font-weight: 600;
+    }
+  }
+}
+
+.radioSection {
+  position: relative;
+  min-width: 32px;
+  justify-content: center;
+  // padding-left: 19px;
+  // padding-right: 19px;
+  padding: 5px 19px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 6px;
+}
+
+.radioItem {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+}
+
+.radioSection+.radioSection {
+  margin-left: 12px;
+}
+
+.goodsSection {
+  border-radius: 18px 18px;
+  box-shadow: 0px 1px 6px 0px #F0D8C8;
+  border-radius: 18px;
+  overflow: hidden;
+  background: transparent;
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.iconArrow {
+  display: inline-block;
+  width: 21px;
+  height: 21px;
+  background: url('./images/new/icon-arrow.png') no-repeat center;
+  background-size: contain;
+}
+
+.goodsExtra {
+  position: relative;
+  margin: 1px 14px 16px;
+  // background: #FFFFFF;
+  background: linear-gradient(180deg, rgba(219, 246, 253) 0%, rgba(255, 255, 255) 30%);
+  border-radius: 16px;
+  border: 1px solid #FFFFFF;
+  // padding-bottom: 16px;
+
+  :global {
+    .van-cell {
+      background-color: transparent;
+      padding: 8px 14px;
+      overflow: visible;
+    }
+  }
+
+  .iconArrow {
+    position: absolute;
+    left: 86px;
+    top: -9px;
+  }
+
+  .memberNumer {
+    margin: 16px 16px 0;
+    background: #E8F8FF;
+    border-radius: 8px;
+    padding: 8px 0 8px 10px;
+    display: flex;
+    align-items: center;
+    // font-weight: 600;
+    font-size: 13px;
+    color: #131415;
+    line-height: 18px;
+
+    .iconGift {
+      width: 18px;
+      height: 18px;
+      margin-right: 6px;
+    }
+
+    span {
+      font-size: 15px;
+      color: #F62C2C;
+      padding: 0 5px;
+      font-weight: 600;
+    }
+  }
+}
+
+.goodsCell {
+  position: relative;
+  border-radius: 16px;
+  padding: 16px 14px 0;
+
+  .iconChecked {
+    width: 18px;
+    height: 18px;
+    background: url('./images/new/icon-n-7.png') no-repeat center;
+    background-size: contain;
+    display: inline-block;
+    margin-right: 14px;
+    flex-shrink: 0;
+
+    &.selected {
+      background: url('./images/new/icon-n-8.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .checkedGroup {
+    position: relative;
+    line-height: 0;
+
+    .showBg {
+      position: absolute;
+      left: -17px;
+      top: -27px;
+      width: 52px;
+      height: 24px;
+      background: url('./images/new/icon-n-9.png') no-repeat center;
+      background-size: contain;
+      z-index: 9;
+    }
+  }
+
+  .img {
+    margin-right: 10px;
+    width: 86px;
+    height: 86px;
+    border-radius: 8px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  h2 {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #131415;
+    line-height: 22px;
+  }
+
+  .section {
+    display: flex;
+    align-items: center;
+  }
+
+  .goodsName {
+    width: 188px;
+    height: 81px;
+    line-height: 0;
+  }
+
+  .brandName {
+    margin-left: 6px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #19A1FE;
+    line-height: 17px;
+    height: 18px;
+    background: #F4FAFF;
+    border-radius: 4px;
+    border: 1px solid rgba(52, 173, 255, 0.55);
+    white-space: nowrap;
+  }
+
+
+  .sectionContent {
+    line-height: 0;
+  }
+
+  .model {
+    margin: 4px 0 5px;
+    font-weight: 500;
+    font-size: 12px;
+    color: #FF711B;
+
+    p {
+      display: flex;
+      align-items: center;
+      line-height: 16px;
+      padding-top: 3px;
+
+      i {
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        display: inline-block;
+        margin-right: 4px;
+        background: #FF711B;
+      }
+    }
+  }
+
+  .sendInstrument {
+    // background: linear-gradient(270deg, #FF7B57 0%, #FF3460 100%);
+    // border-radius: 4px;
+    // font-size: 12px;
+    // color: #FFFFFF;
+    // padding: 2px 6px 3px;
+    width: 95px;
+    height: 21px;
+  }
+
+  .moreBtn {
+    color: #aaa;
+    font-size: 12px;
+
+    :global {
+      .van-icon {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .sbtnGroup {
+    display: flex;
+
+    &>span {
+      font-size: 12px;
+      font-weight: 600;
+      color: #AF540D;
+      line-height: 18px;
+      border-radius: 9px;
+      border: 1px solid rgba(175, 84, 13, .62);
+      padding: 0 6px;
+    }
+  }
+
+}
+
+.goodsTradition {
+  position: relative;
+  margin: 16px 12px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  padding: 13px 16px 20px;
+
+
+  .iconArrow {
+    position: absolute;
+    right: 85px;
+    top: -9px;
+  }
+
+  .goodsTitle {
+    width: 137px;
+    height: 44px;
+    background: url('./images/new/title-5.png') no-repeat center;
+    background-size: contain;
+    margin: 0 auto 11px;
+  }
+
+  .steps {}
+
+  .step {
+    position: relative;
+    padding-left: 38px;
+    padding-bottom: 16px;
+
+    &::before {
+      content: '';
+      border-left: 1px dashed rgba(9, 135, 254, 0.4);
+      position: absolute;
+      left: 15px;
+      top: 0;
+      display: inline-block;
+      height: 100%;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    .stepContent {
+      font-size: 14px;
+      color: #777777;
+      line-height: 24px;
+      text-align: justify;
+      padding-top: 3px;
+
+      span {
+        font-weight: 500;
+        color: #333333;
+      }
+    }
+
+    .nums {
+      position: absolute;
+      left: 0;
+      width: 30px;
+      height: 30px;
+      background: #C9E5FF;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+
+      .numInner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        width: 22px;
+        height: 22px;
+        font-weight: bold;
+        font-size: 13px;
+        color: #FFFFFF;
+        background: #1BA5FE;
+      }
+    }
+  }
+}
+
+.selectStudentPopup {
+  :global {
+    .van-popup__close-icon {
+      color: #767C7F;
+    }
+  }
+}

+ 55 - 133
src/views/student-register/index.module.less

@@ -8,8 +8,8 @@
   --k-font-primary: #007AFE;
 
   .studentRegisterContainer {
-    padding-top: 69px;
-    background: url('./images/new/banner-bg4.png') no-repeat top center;
+    padding-top: 142px;
+    background: url('./images/new/banner-bg.png') no-repeat top center;
     background-size: contain;
   }
 }
@@ -17,16 +17,16 @@
 .countdownSection {
   position: relative;
   background: linear-gradient(90deg, #FFBBD1 0%, #FFEFE2 100%), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
-  border-radius: 10px;
-  margin: 0 14px 8px;
-  padding: 10px 12px;
-  border: 1px solid #FFFFFF;
+  border-radius: 16px;
+  margin: 0 14px 12px;
+  padding: 10px 16px 10px;
+  border: 2px solid #FFFFFF;
 
   &::before {
     content: '';
     position: absolute;
     top: 0;
-    left: 11px;
+    left: 13px;
     display: inline-block;
     width: 32px;
     height: 48px;
@@ -41,8 +41,6 @@
   }
 
   .timerAll {
-    // position: absolute;
-    right: 12px;
     font-size: 12px;
     color: #131415;
     line-height: 17px;
@@ -62,12 +60,11 @@
       font-weight: 600;
       font-size: 12px;
       color: #FFFFFF;
-      margin: 0 3px;
+      margin: 0 4px;
     }
   }
 
   .timerTitle {
-    position: relative;
     width: 80px;
     height: 15px;
     margin-right: 4px;
@@ -75,8 +72,6 @@
 
   .timerTip {
     margin-top: 10px;
-    margin-left: 2px;
-    margin-right: 2px;
     background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
     border-radius: 12px;
     text-align: center;
@@ -92,7 +87,7 @@
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
-  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) 14px;
+  padding: 16px 14px calc(16px + env(safe-area-inset-bottom)) 12px;
   background: #FFFFFF;
   box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
   border-radius: 18px 18px 0px 0px;
@@ -110,7 +105,7 @@
   .needPrice {
     color: #333333;
     padding-bottom: 7px;
-    font-size: 16px;
+    font-size: 14px;
     font-family: DINAlternate-Bold, DINAlternate;
     font-weight: bold;
     color: #FC1A19;
@@ -169,14 +164,14 @@
 }
 
 .studentSection {
-  margin: 0 14px 8px;
+  margin: 0 14px 12px;
   padding: 12px 15px;
   background: linear-gradient(180deg, rgba(219, 246, 253) 0%, rgba(255, 255, 255) 30%);
   border-radius: 16px;
-  border: 1px solid #FFFFFF;
+  border: 2px solid #FFFFFF;
 
   &.studentSectionForm {
-    padding: 0 0 12px;
+    padding: 12px 0;
     background: linear-gradient(180deg, #DBF6FD 0%, #FFFFFF 10%);
   }
 
@@ -288,34 +283,37 @@
   overflow: hidden;
 
   .selectStudentGroup {
-    margin-left: 10px;
-    font-size: 14px;
+    background: #EDF6FD;
+    border-radius: 8px;
+    margin: 20px 14px 0;
+    padding: 8px 0;
+    font-weight: 600;
+    font-size: 16px;
     color: #1189FF;
+    // line-height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
 
-    &.selectStudentGroupChecked {
-      span::after {
-        transform: rotate(180deg);
-      }
-    }
-
-    // .studentIcon {
-    //   display: inline-block;
-    //   margin-right: 6px;
-    //   width: 20px;
-    //   height: 20px;
-    //   background: url('./images/new/icon-n-5.png') no-repeat center;
-    //   background-size: contain;
+    .studentIcon {
+      display: inline-block;
+      margin-right: 6px;
+      width: 20px;
+      height: 20px;
+      background: url('./images/new/icon-n-5.png') no-repeat center;
+      background-size: contain;
 
-    //
+      &.selectStudentGroupChecked {
+        span::after {
+          transform: rotate(180deg);
+        }
+      }
 
-    //   &.studentIconAdd {
-    //     background: url('./images/new/icon-n-4.png') no-repeat center;
-    //     background-size: contain;
-    //   }
-    // }
+      &.studentIconAdd {
+        background: url('./images/new/icon-n-4.png') no-repeat center;
+        background-size: contain;
+      }
+    }
 
     span {
       display: flex;
@@ -327,7 +325,7 @@
         content: '';
         width: 9px;
         height: 5px;
-        margin-left: 4px;
+        margin-left: 5px;
         background: url('./images/new/icon-n-6.png') no-repeat center;
         background-size: contain;
       }
@@ -342,7 +340,7 @@
 
   .fieldTipsGroup {
     margin: 0 14px 0;
-    padding-bottom: 6px;
+    padding-bottom: 9px;
   }
 
   .fieldTips {
@@ -352,18 +350,6 @@
     background: #FFF8EB;
     border-radius: 4px;
     padding: 4px 10px;
-    display: flex;
-    align-items: center;
-
-    .iconQuestion {
-      flex-shrink: 0;
-      display: inline-block;
-      background: url('./images/new/icon-question.png') no-repeat center;
-      background-size: contain;
-      width: 16px;
-      height: 16px;
-      margin-right: 4px;
-    }
   }
 
   .tips {
@@ -377,8 +363,7 @@
   }
 
   .username {
-    padding-top: 15px !important;
-    padding-bottom: 6px !important;
+    padding-bottom: 8px !important;
 
     :global {
       .van-field__label {
@@ -398,20 +383,18 @@
 
   :global {
     .van-cell {
-      padding: 14px 14px;
+      padding: 18px 14px;
     }
 
 
     .van-field__label {
-      font-size: 15px;
+      font-size: 16px;
       color: #666666;
       line-height: 22px;
-      display: flex;
-      align-items: center;
     }
 
     .van-field__control {
-      font-size: 15px;
+      font-size: 16px;
       color: #131415;
     }
   }
@@ -500,20 +483,10 @@
 
 .goodsExtra {
   position: relative;
-  margin: 1px 14px 16px;
-  // background: #FFFFFF;
-  background: linear-gradient(180deg, rgba(219, 246, 253) 0%, rgba(255, 255, 255) 30%);
+  margin: 16px 12px;
+  background: #FFFFFF;
   border-radius: 16px;
-  border: 1px solid #FFFFFF;
-  // padding-bottom: 16px;
-
-  :global {
-    .van-cell {
-      background-color: transparent;
-      padding: 8px 14px;
-      overflow: visible;
-    }
-  }
+  padding-bottom: 16px;
 
   .iconArrow {
     position: absolute;
@@ -551,43 +524,12 @@
 .goodsCell {
   position: relative;
   border-radius: 16px;
-  padding: 16px 14px 0;
-
-  .iconChecked {
-    width: 18px;
-    height: 18px;
-    background: url('./images/new/icon-n-7.png') no-repeat center;
-    background-size: contain;
-    display: inline-block;
-    margin-right: 14px;
-    flex-shrink: 0;
-
-    &.selected {
-      background: url('./images/new/icon-n-8.png') no-repeat center;
-      background-size: contain;
-    }
-  }
-
-  .checkedGroup {
-    position: relative;
-    line-height: 0;
-
-    .showBg {
-      position: absolute;
-      left: -17px;
-      top: -27px;
-      width: 52px;
-      height: 24px;
-      background: url('./images/new/icon-n-9.png') no-repeat center;
-      background-size: contain;
-      z-index: 9;
-    }
-  }
+  padding: 16px 16px 0;
 
   .img {
     margin-right: 10px;
-    width: 86px;
-    height: 86px;
+    width: 98px;
+    height: 98px;
     border-radius: 8px;
     overflow: hidden;
     flex-shrink: 0;
@@ -602,14 +544,9 @@
     line-height: 22px;
   }
 
-  .section {
-    display: flex;
-    align-items: center;
-  }
-
   .goodsName {
-    width: 188px;
-    height: 81px;
+    width: 112px;
+    height: 16px;
     line-height: 0;
   }
 
@@ -626,22 +563,15 @@
     white-space: nowrap;
   }
 
-
-  .sectionContent {
-    line-height: 0;
-  }
-
   .model {
-    margin: 4px 0 5px;
+    margin: 6px 0 4px;
     font-weight: 500;
-    font-size: 12px;
+    font-size: 13px;
     color: #FF711B;
 
     p {
       display: flex;
       align-items: center;
-      line-height: 16px;
-      padding-top: 3px;
 
       i {
         width: 4px;
@@ -660,8 +590,8 @@
     // font-size: 12px;
     // color: #FFFFFF;
     // padding: 2px 6px 3px;
-    width: 95px;
-    height: 21px;
+    width: 106px;
+    height: 23px;
   }
 
   .moreBtn {
@@ -776,12 +706,4 @@
       }
     }
   }
-}
-
-.selectStudentPopup {
-  :global {
-    .van-popup__close-icon {
-      color: #767C7F;
-    }
-  }
 }

+ 155 - 191
src/views/student-register/index.tsx

@@ -11,8 +11,7 @@ import {
   RadioGroup,
   Radio,
   Picker,
-  closeToast,
-  Popover
+  closeToast
 } from 'vant';
 import {
   computed,
@@ -160,7 +159,6 @@ export default defineComponent({
       cancelButtonText: '取消',
       messageAlign: 'center' as 'left' | 'center' | 'right',
 
-      tipStatus: true,
       dialogConfirmStatus: false,
       contract_sign: false, // 是否实名认证
       countDownTimePay: 60 * 1000,
@@ -168,7 +166,7 @@ export default defineComponent({
       showSelectStudent: false, // 选择学生
       studentList: [], // 手机号关联学生列表
       studentItem: {} as any, // 选择的学生
-      joinType: 'digitalize' as 'digitalize' | 'tradition',
+      joinType: '' as 'digitalize' | 'tradition',
       gradeList: [] as any,
       classList: [] as any,
       saveUserId: null as any,
@@ -190,8 +188,8 @@ export default defineComponent({
       showOtherSchool: false,
       showCloseButton: true, // 是否显示关闭按钮
       showOtherMessage: '',
-      /**  limit 超限制,change 更换学生,nickname 名称不一致 member 会员购买, payment 支付方式 */
-      otherType: '' as 'limit' | 'change' | 'nickname' | 'member' | 'payment',
+      /**  limit 超限制,change 更换学生,nickname 名称不一致  */
+      otherType: '' as 'limit' | 'change' | 'nickname' | 'member',
       showCancelButton: true,
       cancelButtonColor: '',
       cancelButtonText: '取消',
@@ -257,9 +255,7 @@ export default defineComponent({
     /** 报名结束提示 */
     const applyOver = () => {
       forms.showTips = true;
-      // forms.showMessage = '团购时间已截止,感谢您的参与';
-      forms.showMessage =
-        '<p style="color: #F44541">报名已截止,感谢您的参与</p>';
+      forms.showMessage = `<p style="color: #F44541">报名已截止,感谢您的参与</p>`;
       forms.showButton = false;
       forms.intervalFnRef?.pause();
     };
@@ -395,7 +391,7 @@ export default defineComponent({
           //   forms.schoolId == '1770035687490105346'
           // ) {
           //   forms.showTips = true;
-          //   forms.showMessage = '<p style="color: #F44541">报名已截止,感谢您的参与</p>';
+          //   forms.showMessage = `<p style="color: #F44541">报名已截止,感谢您的参与</p>`;
           //   forms.showButton = false;
           //   return;
           // }
@@ -423,8 +419,7 @@ export default defineComponent({
       let originAmount: number = 0; // 原价
       const vipList: any[] = studentRegisterStore.getVip;
       vipList.forEach((vip: any) => {
-        amount +=
-          forms.joinType === 'digitalize' ? Number(vip.currentPrice) : 0;
+        amount += Number(vip.currentPrice);
         originAmount += Number(vip.originalPrice);
       });
 
@@ -603,8 +598,7 @@ export default defineComponent({
             forms.showButton = true;
           } else if (result.code === 5437) {
             forms.showTips = true;
-            forms.showMessage =
-              '<p style="color: #F44541">报名已截止,感谢您的参与</p>'; //result.message;
+            forms.showMessage = `<p style="color: #F44541">报名已截止,感谢您的参与</p>`; //result.message;
             forms.showButton = false;
           }
         } else {
@@ -674,8 +668,7 @@ export default defineComponent({
             forms.showButton = true;
           } else if (registerResult.code === 5437) {
             forms.showTips = true;
-            forms.showMessage =
-              '<p style="color: #F44541">报名已截止,感谢您的参与</p>'; //result.message;
+            forms.showMessage = `<p style="color: #F44541">报名已截止,感谢您的参与</p>`; //result.message;
             forms.showButton = false;
           }
           return false;
@@ -689,10 +682,8 @@ export default defineComponent({
     const onRegisterSubmit = async () => {
       try {
         // 请求是否有待支付订单,如果有则自动关闭
-
         const status = await paymentOrderUnpaid();
         if (status) return;
-
         const schoolInfo = await request.get(
           '/edu-app/userPaymentOrder/registerStatus/' + forms.schoolId
         );
@@ -822,34 +813,25 @@ export default defineComponent({
             }
           });
 
-          // 60s 关单提示文案
-
           // 判断是否有完成订单 并且选择 自备
           if (isFinal && forms.joinType === 'tradition') {
-            // const studentResult = await updateStudentInfo();
-            // if (!studentResult) return;
+            const studentResult = await updateStudentInfo();
+            if (!studentResult) return;
             setTimeout(() => {
-              showToast('您已报名成功,请勿重复报名');
+              showToast('您已通过数字化方式报名成功');
             }, 100);
             return true;
           }
 
           // 提交报名信息时,判断该手机号是否存在待支付订单,若存则判断本次提交的报名方式,若本次提交的是团购则提示【您有待支付的报名订单,是否继续支付   重新下单/继续支付】,点击重新下单时,关闭老订单,创建新订单;若本次提交的是自备,则提示   【您有数字化方式报名的待支付订单,请关闭订单后重新报名   取消/关闭】取消则停留在当前界面,关闭则关闭订单,并停留在当前界面,用户需要再次点击报名按钮提交信息
           if (isPadding && forms.joinType === 'tradition') {
-            // forms.dialogStatus = true;
-            // forms.dialogMessage =
-            //   '您有数字化方式报名的待支付订单,请关闭订单后重新报名';
-            // forms.cancelButtonText = '取消';
-            // forms.confirmButtonText = '关闭';
-            // forms.dialogConfig = paddingConfig;
-            // forms.messageAlign = 'left';
+            forms.dialogStatus = true;
+            forms.dialogMessage =
+              '您有数字化方式报名的待支付订单,请关闭订单后重新报名';
+            forms.cancelButtonText = '取消';
+            forms.confirmButtonText = '关闭';
             forms.dialogConfig = paddingConfig;
-            const cancelStatus = await cancelPaymentOrder();
-            if (cancelStatus) {
-              onSubmit();
-            }
-            // 重新下单 - 先关闭订单
-            // resetOrderPayment();
+            forms.messageAlign = 'left';
             return true;
           }
           if (isPadding && forms.joinType === 'digitalize') {
@@ -911,7 +893,7 @@ export default defineComponent({
     const paymentContinue = async () => {
       try {
         const vipList = studentRegisterStore.getVip;
-        // const goodsList = studentRegisterStore.getGoods;
+        const goodsList = studentRegisterStore.getGoods;
         const params: any[] = [];
         vipList.forEach((vip: any) => {
           params.push({
@@ -924,19 +906,19 @@ export default defineComponent({
           });
         });
 
-        // goodsList.forEach((goods: any) => {
-        //   params.push({
-        //     goodsId: goods.productId,
-        //     goodsNum: goods.quantity,
-        //     goodsType: 'INSTRUMENTS',
-        //     paymentCashAmount: goods.price, // 现金支付金额
-        //     paymentCouponAmount: 0, // 优惠券金额
-        //     goodsSkuId: goods.productSkuId
-        //   });
-        // });
+        goodsList.forEach((goods: any) => {
+          params.push({
+            goodsId: goods.productId,
+            goodsNum: goods.quantity,
+            goodsType: 'INSTRUMENTS',
+            paymentCashAmount: goods.price, // 现金支付金额
+            paymentCouponAmount: 0, // 优惠券金额
+            goodsSkuId: goods.productSkuId
+          });
+        });
         // 创建订单
         const updateStatus = await updateStudentInfo();
-        // console.log(updateStatus, 'updateStatus');
+        console.log(updateStatus, 'updateStatus');
         if (!updateStatus) return;
 
         const result = await request.post(
@@ -1288,7 +1270,6 @@ export default defineComponent({
             }
           });
         }
-
         const createT = route.query.t;
         if (createT && expireDay !== null) {
           if (dayjs(Number(createT)).add(expireDay, 'day').isBefore(dayjs())) {
@@ -1331,7 +1312,7 @@ export default defineComponent({
                 </div>
               </div>
               <div class={styles.timerTip}>
-                为了确保您能顺利参与学习,请在规定时间内报名
+                为了确保您能顺利参与学习,请在规定时间内报名
               </div>
             </div>
           )}
@@ -1341,8 +1322,10 @@ export default defineComponent({
               styles.studentSection,
               styles.studentSectionForm,
               styles.noSendDay
-            ]}>
-            {/* <div class={styles.title1}></div> */}
+            ]}
+            // style={{ display: 'none' }}
+          >
+            <div class={styles.title3}></div>
 
             <Form labelAlign="left" class={styles.registerForm}>
               <Field
@@ -1372,7 +1355,6 @@ export default defineComponent({
               </Field>
               <div class={['van-hairline--bottom', styles.fieldTipsGroup]}>
                 <div class={[styles.fieldTips]}>
-                  <i class={styles.iconQuestion}></i>
                   手机号是音乐数字课堂的唯一登录账户
                 </div>
               </div>
@@ -1414,8 +1396,22 @@ export default defineComponent({
                     )
                 }}
               </Field>
+            </Form>
+          </div>
+
+          <div
+            class={[
+              styles.studentSection,
+              styles.studentSectionForm,
+              forms.giftVipDay <= 0 && styles.noSendDay
+            ]}
+            // style={{ display: 'none' }}
+          >
+            <div class={styles.title1}></div>
+
+            <Form labelAlign="left" class={styles.registerForm}>
               {/* 大于等于2,则可以切换学生 */}
-              {/* {forms.studentList.length > 1 && (
+              {forms.studentList.length > 1 && (
                 <div
                   class={[
                     styles.selectStudentGroup,
@@ -1433,7 +1429,7 @@ export default defineComponent({
                       : '新增学生'}
                   </span>
                 </div>
-              )} */}
+              )}
 
               <Field
                 clearable={false}
@@ -1443,24 +1439,8 @@ export default defineComponent({
                 placeholder="请输入学生姓名"
                 autocomplete="off"
                 maxlength={14}
-                v-model={studentInfo.extra.nickname}>
-                {{
-                  extra: () =>
-                    forms.studentList.length > 1 && (
-                      <div
-                        class={[
-                          styles.selectStudentGroup,
-                          forms.showSelectStudent &&
-                            styles.selectStudentGroupChecked
-                        ]}
-                        onClick={() => (forms.showSelectStudent = true)}>
-                        <span>
-                          {forms.studentItem.userId ? '切换' : '新增'}
-                        </span>
-                      </div>
-                    )
-                }}
-              </Field>
+                v-model={studentInfo.extra.nickname}
+              />
               <Field
                 clearable={false}
                 required
@@ -1545,7 +1525,7 @@ export default defineComponent({
                   forms.classStatus = true;
                 }}
               />
-              {/* {forms.giftVipDay > 0 ? (
+              {forms.giftVipDay > 0 ? (
                 <div class={styles.memberNumer}>
                   <img src={iconGift} class={styles.iconGift} />
 
@@ -1556,10 +1536,10 @@ export default defineComponent({
                 </div>
               ) : (
                 ''
-              )} */}
+              )}
             </Form>
           </div>
-          {/* <div class={styles.studentSection}>
+          <div class={styles.studentSection}>
             <div class={styles.title2}></div>
 
             <div class={styles.goodsGroup}>
@@ -1610,89 +1590,63 @@ export default defineComponent({
                 <div class={styles.goodsInner}>传统方式</div>
               </div>
             </div>
-          </div> */}
-
-          <div class={[styles.goodsExtra]}>
-            {/* <i class={styles.iconArrow}></i> */}
-            <Cell
-              border={false}
-              class={styles.goodsCell}
-              center
-              onClick={() => {
-                // console.log(forms.joinType, 'joinType');
-                if (forms.joinType === 'digitalize') {
-                  otherParams.showOtherMessage = `没有陪练工具,将无法实现同步练习`;
-                  otherParams.showOtherSchool = true;
-                  otherParams.showCloseButton = true;
-                  otherParams.showCancelButton = true;
-                  otherParams.cancelButtonColor = '';
-                  otherParams.cancelButtonText = '确认取消';
-                  otherParams.confirmButtonColor = '';
-                  otherParams.confirmButtonText = '放弃取消';
-                  otherParams.otherType = 'payment';
-                  otherParams.messageAlign = 'center';
-                } else if (forms.joinType === 'tradition') {
-                  forms.joinType = 'digitalize';
-                }
-              }}>
-              {{
-                icon: () => (
-                  <div class={styles.checkedGroup}>
-                    <i
-                      class={[
-                        styles.iconChecked,
-                        forms.joinType === 'digitalize' && styles.selected
-                      ]}></i>
-
-                    {/* {forms.tipStatus && <i class={styles.showBg}></i>} */}
-                    {forms.joinType === 'digitalize' && (
-                      <i class={styles.showBg}></i>
-                    )}
-                  </div>
-                ),
-                title: () => (
-                  <div class={styles.section}>
+          </div>
+
+          {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 || tuangou}
                     />
-                    <div class={styles.sectionContent}>
-                      <img src={icon5} class={styles.goodsName} />
-                      {/* <h2>
-
-                        <img src={icon5} class={styles.goodsName} />
-                      </h2>
-                      <p class={[styles.model]}>
-
-                        <p>
-                          <i></i>解决学生不会练、不知练的对错
-                        </p>
-                        <p>
-                          <i></i>家长无法辅导、无需再额外请老师
+                  ),
+                  title: () => (
+                    <div class={styles.section}>
+                      <div class={styles.sectionContent}>
+                        <h2>
+                          {/* {forms.detailVip.goodsName} */}
+                          <img src={icon5} class={styles.goodsName} />
+                          <Tag class={styles.brandName}>
+                            {/* {forms.detailVip.brandName} */}
+                            12个月
+                          </Tag>
+                        </h2>
+                        <p class={[styles.model]}>
+                          {/* 解决学生不会练、不知练的对错、家长无法辅导、无需再额外请老师 */}
+                          {/* {forms.detailVip.description} */}
+                          <p>
+                            <i></i>解决学生不会练、不知练的对错
+                          </p>
+                          <p>
+                            <i></i>家长无法辅导、无需再额外请老师
+                          </p>
                         </p>
-                      </p>
-
-                      <img src={icon6} class={styles.sendInstrument} /> */}
+                        {/* <span class={styles.sendInstrument}>赠送课堂乐器</span> */}
+                        <img src={icon6} class={styles.sendInstrument} />
+                      </div>
                     </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>
+                  )
+                }}
+              </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>
+          )}
 
-          {/* {forms.joinType === 'tradition' && (
+          {forms.joinType === 'tradition' && (
             <div class={styles.goodsTradition}>
               <i class={styles.iconArrow}></i>
 
@@ -1730,52 +1684,55 @@ export default defineComponent({
                         'C调、木质、高音德式八孔;'}
                       {forms.instrumentCode === 'Woodwind' &&
                         'C调、红木色、树脂或木质;'}
+                      {/* 管数不限,建议20管以上C调加嘴排箫(音域宽,能演奏更多复杂乐曲,不需要重复更换),黑色,要选择单一原调(调性多学生很难掌握),价格由学生根据自身情况确定。 */}
                     </div>
                   </div>
                 )}
               </div>
             </div>
-          )} */}
+          )}
 
           {forms.joinType && (
             <MSticky position="bottom" ref={mstickyRef}>
               <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 class={styles.unit} style="font-style: normal">
-                        /年
-                      </i>
-                    </span>
-                    {calcPrice.value.originAmount > calcPrice.value.amount &&
-                    forms.joinType === 'digitalize' ? (
-                      <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}>
-                    {forms.joinType === 'digitalize'
-                      ? '报名与支付'
-                      : '提交报名'}
-                  </Button>
-                </div>
+                {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 class={styles.unit} 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>
+                  </>
+                )}
 
-                {/* {forms.joinType === 'tradition' && (
+                {forms.joinType === 'tradition' && (
                   <div
                     class={styles.traditionBtn}
                     onClick={() => {
@@ -1788,7 +1745,7 @@ export default defineComponent({
                       提交报名
                     </Button>
                   </div>
-                )} */}
+                )}
               </div>
             </MSticky>
           )}
@@ -2017,8 +1974,15 @@ export default defineComponent({
               if (forms.registerExpireTime && forms.activeOverStatus) {
                 applyOver();
               }
-            } else if (otherParams.otherType === 'payment') {
-              forms.joinType = 'tradition';
+              //     onConfirm={async () => {
+              //   await paymentContinue();
+              // }}
+              // onCancel={() => {
+              //   //取消支付,判断是否有结束时间,是否已经结束
+              //   if (forms.registerExpireTime && forms.activeOverStatus) {
+              //     applyOver();
+              //   }
+              // }}
             }
           }}
           onConfirm={async () => {