classroom-app/src/views/student-register/index-apply.tsx

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-apply.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, getHttpOrigin, getUrlCode, moneyFormat, convertToChineseNumber } 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 icon10 from './images/new/icon-10.png';
import icon6 from './images/new/icon-6.png';
import giftTip from './images/new/icon-9.png';
import iconGift from './images/new/icon-gift.png';
import vipGiftTIps from './images/new/vip_gift_tips.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';
import { vipGiftPeriodType } from '.';
import tipTitleIcon from './images/tip-title-icon.png';
import tipIcon1 from './images/tip1-icon.png';
import tipIcon2 from './images/tip2-icon.png';
import tipIcon3 from './images/tip3-icon.png';
import tipBtnIcon from './images/tip-btn-icon.png';
import giftBoxTitleIcon from './images/gift-box-title.png';
import giftExtraTitleIcon from './images/gift-tip-icon.png';
import giftCard1Icon from './images/gift_card1.png';
import giftCard2Icon from './images/gift_card2.png';
import giftZsIcon from './images/gift_zs_icon.png';

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();
    // document.title = route.query.rt === 'MUST_BUY_GOODS' ? '音乐(器乐)数字AI团购通道' : '报名通道';
    // 初始化学校编号
    studentRegisterStore.setShoolId(route.query.sId as any);
    const countDownRef = ref();
    const mstickyRef = ref();
    const forms = reactive({
      schoolId: route.query.sId as any,
      paymentType: '', // 支付类型
      paymentChannel: '',
      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,
      tipBoxPop: false, // 团购政策提示弹窗
      intrumentList: [] as any, // 赠送的乐器列表
      currentIntrument: null as any, // 当前匹配上的乐器
      giftDesc: '' as any, // 团购政策，赠送会员的提示信息
      descSecondsNum: 3, // 倒计时
      hideSecondsNum: false, // 隐藏倒计时文字
    });

    /*
      新用户：
      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];
          const { giftPeriod, giftFlag, giftVipDay } = forms.detailVip
          forms.detailVip.zsUnit = giftPeriod === 'DAY' ? '天' : giftPeriod === 'MONTH' ? '月' : giftPeriod === 'YEAR' ? '年' : '天'
          /**
           * 计算赠品原价
           * giftFlag: 是否赠送会员
           * giftVipDay: 赠送天数
           * giftPeriod: 赠送单位，'DAY'，'MONTH', 'YEAR'（天月年）
           * 原价取值：学校管理-会员原价
           * 按天赠送：会员原价/365*赠送天数
           * 按月赠送：就会员原价/12*赠送月数
           * 按年赠送：就会员原价*年数
           */
          if (giftFlag) {
            if (giftPeriod === 'YEAR') {
              const preNum = convertToChineseNumber(giftVipDay)
              const totalNum = convertToChineseNumber(giftVipDay+1)
              state.giftDesc = `买一赠${preNum}，即<span>团购一年，使用${totalNum}年</span>`
            } else {
              state.giftDesc = `团购一年，<span>赠送${giftVipDay}${forms.detailVip.zsUnit}有效期</span>`
            }
          }
          // 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 || [];
        state.intrumentList = schoolInstrumentList
        if (data.schoolInstrumentSetType === 'SCHOOL' && forms.registerType === 'MUST_BUY_GOODS') {
          state.currentIntrument = schoolInstrumentList[0] || null
        }
        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);
          });
          console.log('显示11',schoolInstrumentList)
          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;
          // }

          /**
           *  ['MUST_BUY_GOODS', 'SELECT_BUY_GOODS'].includes(
                data.registerType
              ))
           */
          if (
            (route.query.rt && route.query.rt !== data.registerType) ||
            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);
      });

      // 一页必买，需要加水赠送的价格和乐器价格
      if (forms.registerType === 'MUST_BUY_GOODS') {
        // 如果有赠送会员卡，需要加上会员卡的原价
        if (forms.detailVip.giftFlag && forms.detailVip.giftOriginalPrice) {
          originAmount = originAmount + forms.detailVip.giftOriginalPrice
        }
        originAmount = originAmount + (state.currentIntrument?.originalPrice || 0)
      }

      // 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 = `您已绑定<span style="color: #2B85FF">【${
          forms.studentItem?.schoolName || ''
        }】</span>，提交后将更换到
        <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',
            ...extra,
            giftVipFlag: forms.registerDetails.giftVipFlag || false,
            giftVipDay: forms.giftVipDay || 0,
            schoolVerify: true,
            firstVipDay: forms.detailVip.membershipDays || 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);

          // 根据注册信息反显乐器信息
          if (forms.registerType === 'MUST_BUY_GOODS' && (forms.schoolInstrumentSetType === 'CLASS' || forms.schoolInstrumentSetType === 'GRADE') ) {
            const { currentClass, currentGradeNum } = forms.studentList[0]
            if (forms.schoolInstrumentSetType === 'GRADE') {
              state.currentIntrument = state.intrumentList.find((item: any) => item.gradeNum === currentGradeNum)
            }
            if (forms.schoolInstrumentSetType === 'CLASS') {
              state.currentIntrument = state.intrumentList.find((item: any) => (item.gradeNum === currentGradeNum && item.classNum === currentClass) )
            }
          }
        } 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,
            giftPeriod: vip.giftPeriod,
            goodsId: vip.goodsId,
            goodsNum: 1,
            goodsType: vip.goodsType,
            paymentCashAmount: vip.currentPrice, // 现金支付金额
            paymentCouponAmount: 0 // 优惠券金额
          });
        });
        // 添加赠送的乐器
        if (state.currentIntrument?.instrumentId && forms.registerType === 'MUST_BUY_GOODS') {
          params.push({
            goodsId: state.currentIntrument?.instrumentId,
            goodsNum: 1,
            goodsType: "INSTRUMENTS",
            paymentCashAmount: 0,
            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: forms.paymentChannel
          });
        }
      }
    };

    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 =
          getHttpOrigin() + '/classroom-app/#/payResult?' + params;
      } else {
        state.qrCodeUrl =
          getHttpOrigin() + '/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 =
          getHttpOrigin() +
          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; // 是否切换学校
    };

    const tipCountdown = (seconds: number) => {
      let remainingTime = seconds;
      const interval = setInterval(() => {
        remainingTime--;
        state.descSecondsNum = state.descSecondsNum > 1 ? state.descSecondsNum - 1 : 1;
        if (remainingTime < 1) {
          clearInterval(interval);  // 清除定时器
          state.hideSecondsNum = true
        }
      }, 1000);  // 每秒执行一次
    }

    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 || '';
              const provider = JSON.parse(item.paramValue);
              forms.paymentType = provider.vendor;
              forms.paymentChannel = provider.channel;
            } 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();
        nextTick(() => {
          // 一页展示（必买）才显示团购提示弹窗
          if (forms.registerType === 'MUST_BUY_GOODS' && browser().weixin) {
            state.tipBoxPop = true
            tipCountdown(3)
          }
        })
      } catch {}
    });

    onUnmounted(() => {
      forms.intervalFnRef?.pause(); // 暂停回调
    });

    return () => (
      <div class={styles['student-register']}>
        <div class={[(forms.registerType === 'MUST_BUY_GOODS' || route.query.rt === 'MUST_BUY_GOODS') ? styles.studentRegisterContainer2 : 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,
              forms.giftVipDay <= 0 && styles.noSendDay
            ]}>
            {
              forms.registerType === 'MUST_BUY_GOODS' && 
              <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 && forms.registerDetails.giftVipFlag) ? (
                <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> */}

          {
            forms.registerType !== 'MUST_BUY_GOODS' && 
            <div class={[styles.goodsExtra]}>
              {/* <i class={styles.iconArrow}></i> */}
              <Cell
                border={false}
                class={[
                  styles.goodsCell,
                  forms.registerType === 'SELECT_BUY_GOODS' &&
                    styles.goodsBuyGoods
                ]}
                center
                onClick={() => {
                  // console.log(forms.joinType, 'joinType');
                  if (forms.registerType !== 'SELECT_BUY_GOODS') return;

                  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: () =>
                    forms.registerType === 'SELECT_BUY_GOODS' && (
                      <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={
                            forms.registerType === 'SELECT_BUY_GOODS'
                              ? icon5
                              : icon10
                          }
                          class={styles.goodsName}
                        />
                      </div>
                    </div>
                  )
                }}
              </Cell>

            </div>            
          }    
  

          {
            forms.registerType === 'MUST_BUY_GOODS' && 
            <div class={styles.giftBox}>
              <img class={styles.titleIcon} src={giftBoxTitleIcon} />
              <div class={styles.tools}>
                <img class={styles.toolImg} src={forms.detailVip.goodsUrl || giftCard1Icon} />
                <div class={styles.toolRight}>
                  <p>乐器AI学练工具一年卡</p>
                  <div class={styles.trDesc}>7天无理由退款</div>
                  <div class={styles.trBottom}>
                    <span class={styles.tcPrice}>¥ {Number(forms.detailVip.currentPrice).toFixed(2)}</span>
                    <span class={styles.toPrice}>｜原价 <i>¥ {Number(forms.detailVip.originalPrice).toFixed(2)}</i></span>
                  </div>
                </div>
              </div>

              {/** 有赠品才显示 */}
              {
                (forms.detailVip.giftFlag || state.currentIntrument?.instrumentId) &&
                <div class={styles.extraTools}>
                  <div class={styles.exTitle}>
                    <img src={giftExtraTitleIcon} />
                  </div>
                  {/** 会员赠送 */}
                  {
                    forms.detailVip.giftFlag && 
                    <div class={styles.extItem}>
                      <img class={styles.toolImg} src={giftCard2Icon} />
                      <div class={styles.toolRight}>
                        <p>乐器AI学练工具{forms.detailVip.giftPeriod === 'YEAR' ? convertToChineseNumber(forms.detailVip.giftVipDay) : forms.detailVip.giftVipDay}{forms.detailVip.zsUnit}卡</p>
                        <div class={styles.trBottom}>
                          <span class={styles.tcPrice}>¥ 0.00</span>
                          <span class={styles.toPrice}>｜原价 <i>¥ {Number(forms.detailVip.giftOriginalPrice).toFixed(2)}</i></span>
                        </div>                  
                      </div>
                      <img class={styles.toolZsIcon} src={giftZsIcon} />
                    </div>                
                  }
                  {/** 乐器赠送，注册类型为MUST_BUY_GOODS，才显示赠送乐器 */}
                  {
                    (state.currentIntrument?.instrumentId && forms.registerType === 'MUST_BUY_GOODS') && 
                    <div class={styles.extItem}>
                      <img class={styles.toolImg} src={state.currentIntrument.img} />
                      <div class={styles.toolRight}>
                        <p>{state.currentIntrument.instrumentName}</p>
                        <div class={styles.trBottom}>
                          <span class={styles.tcPrice}>¥ 0.00</span>
                          <span class={styles.toPrice}>｜原价 <i>¥ {Number(state.currentIntrument.originalPrice).toFixed(2)}</i></span>
                        </div>                  
                      </div>
                      <img class={styles.toolZsIcon} src={giftZsIcon} />
                    </div>                
                  }

                </div>
              }
            </div>            
          }


          {/* <div class={[styles.memberNumer, styles.aiMemberNumber]}>
            <img src={iconGift} class={styles.iconGift} />
            <p>
              首次购买赠送乐器AI学练工具
              <span>{forms.detailVip.membershipDays || 0}</span>天有效期
            </p>
          </div> */}

          {forms.detailVip.membershipDays && forms.registerType !== 'MUST_BUY_GOODS' ? (
            <div class={styles.vipGiftContainer}>
              <img src={vipGiftTIps} class={styles.iconGift} />
              <p>
                现在购买额外赠送有效期
                <div>
                  <span class={styles.vipGiftNum}>
                    {forms.detailVip.membershipDays || 0}
                  </span>
                  <span class={styles.vipGiftPreviod}>
                    {vipGiftPeriodType[forms.detailVip.giftPeriod]}
                  </span>
                </div>
              </p>
            </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}>
                  {
                    forms.registerType === 'SELECT_BUY_GOODS' && 
                    <img src={giftTip} class={styles.giftTip} />
                  }
                  <div>
                    <span class={styles.needPrice}>
                      <i style="font-style: normal">¥ </i>
                      <span>{moneyFormat(calcPrice.value.amount)}</span>
                      {
                        forms.registerType === 'SELECT_BUY_GOODS' && 
                        <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();
                  }}>
                  {
                    forms.registerType === 'MUST_BUY_GOODS' ?
                    <Button
                      round
                      disabled={forms.submitLoading}
                      loading={forms.submitLoading}>
                      立即购买
                    </Button> : 
                    <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 = '';
                }
                // 更换年级班级后，判断是否需要更换赠送的乐器
                if (forms.schoolInstrumentSetType === 'GRADE' && forms.registerType === 'MUST_BUY_GOODS') {
                  state.currentIntrument = state.intrumentList.find((item: any) => (item.gradeNum === selectedOption.value))
                }         
                if (forms.schoolInstrumentSetType === 'CLASS' && forms.registerType === 'MUST_BUY_GOODS') {
                  state.currentIntrument = null
                }       
                console.log('选择111',state.currentIntrument)
              }}
            />
          )}
        </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;
                }
                // 更换年级班级后，判断是否需要更换赠送的乐器
                if (forms.schoolInstrumentSetType === 'CLASS' && forms.registerType === 'MUST_BUY_GOODS') {
                  state.currentIntrument = state.intrumentList.find((item: any) => (item.gradeNum === studentInfo.extra.currentGradeNum && item.classNum === selectedOption.value) )
                }                
                console.log('选择222',state.currentIntrument)
              }}
            />
          )}
        </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>

        {
          state.tipBoxPop && 
          <div class={styles.tipBoxPop}>
            <div class={styles.tipBox}>
              <img class={styles.tipTitle} src={tipTitleIcon} />
              <ul>
                <li class={styles.tipItem}>
                  <img src={tipIcon1} />
                  <p>开课时赠送<span>全新乐器一支</span></p>
                </li>
                {
                  state.giftDesc && 
                  <li class={styles.tipItem}>
                    <img src={tipIcon2} />
                    <p v-html={state.giftDesc}></p>
                  </li>                  
                }
                <li class={styles.tipItem}>
                  <img src={state.giftDesc ? tipIcon3 : tipIcon2} />
                  <p><span>7天内无理由</span>全额退款保障</p>
                </li>
              </ul>
              <div class={styles.tipBtn}>
                <img src={tipBtnIcon} />
                <span onClick={() => {
                  if (state.hideSecondsNum) {
                    state.tipBoxPop = false
                  }
                }}>
                  我知道了
                  {
                    !state.hideSecondsNum && <i>({state.descSecondsNum}s)</i>
                  }
                </span>
              </div>
            </div>
          </div>          
        }

      </div>
    );
  }
});