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

import {
  Image,
  Cell,
  CellGroup,
  Tag,
  Button,
  Stepper,
  Icon,
  Popup,
  showConfirmDialog,
  showToast,
  Form,
  Field,
  CountDown,
  RadioGroup,
  Radio,
  Picker
} from 'vant';
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref
} from 'vue';
import qs from 'query-string';
import { state as baseState, 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 { browser, checkPhone, moneyFormat } from '@/helpers/utils';
import deepClone from '@/helpers/deep-clone';
import OWxTip from '@/components/m-wx-tip';
import MDialog from '@/components/m-dialog';
// import f1 from './images/new/f-1.png';
// import f2 from './images/new/f-2.png';
// import f3 from './images/new/f-3.png';
// import iconTip2 from './images/new/icon-tip2.png';
// import functionBg from './images/new/function-bg.png';
import giftTip from './images/new/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';

const classList: any = [];
for (let i = 1; i <= 40; i++) {
  classList.push({ text: i + '班', value: i });
}

const GRADE_ENUM = {
  '1': '一年级',
  '2': '二年级',
  '3': '三年级',
  '4': '四年级',
  '5': '五年级',
  '6': '六年级',
  '7': '七年级',
  '8': '八年级',
  '9': '九年级'
} as any;
const getGradeList = (gradeYear: string) => {
  let tempList: any = [];
  const five = [
    { text: '一年级', value: 1 },
    { text: '二年级', value: 2 },
    { text: '三年级', value: 3 },
    { text: '四年级', value: 4 },
    { text: '五年级', value: 5 }
  ];
  const one = [{ text: '六年级', value: 6 }];
  const three = [
    { text: '七年级', value: 7 },
    { text: '八年级', value: 8 },
    { text: '九年级', value: 9 }
  ];
  if (gradeYear === 'FIVE_YEAR_SYSTEM') {
    tempList.push(...[...five]);
  } else if (gradeYear === 'SIX_YEAR_SYSTEM') {
    tempList.push(...[...five, ...one]);
  } else if (gradeYear === 'THREE_YEAR_SYSTEM') {
    tempList.push(...[...three]);
  } else if (gradeYear === 'FORE_YEAR_SYSTEM') {
    tempList.push(...[...one, ...three]);
  } else {
    tempList.push(...[...five, ...one, ...three]);
  }
  return tempList;
};

export default defineComponent({
  name: 'student-register',
  setup() {
    const route = useRoute();
    const studentRegisterStore = useStudentRegisterStore();
    const router = useRouter();
    // 初始化学校编号
    studentRegisterStore.setShoolId(route.query.sId as any);
    const countDownRef = ref();
    const forms = reactive({
      schoolId: route.query.sId as any,
      paymentType: '', // 支付类型
      // popupShow: false,
      details: [] as any[],
      // schoolType: '', // 学校类型
      gradeYear: '', // 学制
      // bugGoods: false, // 是否购买AI
      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: '',
      dialogConfirmStatus: false,
      contract_sign: false, // 是否实名认证
      countDownTimePay: 60 * 1000,
      dialogConfig: {} as any,
      showOtherSchool: false,
      showOtherMessage: '',
      joinType: '' as 'digitalize' | 'tradition',
      gradeList: [] as any,
      classList: [] as any
    });

    const state = reactive({
      showQrcode: false,
      qrCodeUrl: '',
      pay_channel: '',
      orderInfo: {} as any, // 订单信息
      authShow: false,
      orderNo: null as any,
      config: {} as any,
      paymentStatus: false,
      orderTimer: null as any
    });
    const studentInfo = reactive({
      autoRegister: true,
      client_id: 'cooleshow-student',
      client_secret: 'cooleshow-student',
      extra: {
        nickname: '',
        currentGradeNum: '',
        currentClass: '',
        gender: 1,
        registerType: null as any, // 报名类型
        giftVipDay: 0 // 赠送会员天数
      },
      grant_type: 'password',
      loginType: 'SMS',
      password: '',
      username: ''
    });

    const countDown = useCountDown({
      // 倒计时 60 秒
      time: forms.countDownTimePay,
      onChange(current: CurrentTime) {
        forms.dialogMessage = `有待支付订单，请在${Math.ceil(
          current.total / 1000
        )}s后重试`;
      },
      onFinish() {
        forms.dialogStatus = false;
      }
    });

    const onCodeSend = () => {
      forms.countDownStatus = false;
      nextTick(() => {
        countDownRef.value.start();
      });
    };

    const onSendCode = () => {
      // 发送验证码
      if (!checkPhone(studentInfo.username)) {
        return showToast('请输入正确的手机号码');
      }
      forms.imgCodeStatus = true;
    };

    const validatePhone = computed(() => {
      return checkPhone(studentInfo.username) ? true : false;
    });

    const onFinished = () => {
      forms.countDownStatus = true;
      countDownRef.value.reset();
    };

    const orderType = computed(() => {
      return state.orderInfo.orderType;
    });

    const getRegisterGoods = async () => {
      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 || []);
        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.registerType = data.registerType;
        studentInfo.extra.registerType = data.registerType;

        const schoolInstrumentList = data.schoolInstrumentList || [];

        if (data.schoolInstrumentSetType === 'SCHOOL') {
          forms.gradeList = getGradeList(data.gradeYear);
          forms.classList = classList;
        } else if (data.schoolInstrumentSetType === 'GRADE') {
          schoolInstrumentList.forEach((item: any) => {
            forms.gradeList.push({
              text: GRADE_ENUM[item.gradeNum],
              value: item.gradeNum,
              instrumentId: item.instrumentId
            });
          });
          forms.classList = classList;
        } else if (data.schoolInstrumentSetType === 'CLASS') {
          // 班级
          const tempGradeList: any[] = [];
          schoolInstrumentList.forEach((item: any) => {
            if (!tempGradeList.includes(item.gradeNum)) {
              tempGradeList.push(item.gradeNum);
            }
          });

          const lastGradeList: any[] = [];
          tempGradeList.forEach((temp: any) => {
            const list = {
              text: GRADE_ENUM[temp],
              value: temp,
              children: [] as any
            };
            schoolInstrumentList.forEach((item: any) => {
              if (item === item.gradeNum) {
                list.children.push({
                  text: item.classNum + '班',
                  value: item.classNum
                });
              }
            });

            lastGradeList.push(list);
          });
          forms.gradeList = lastGradeList;
          forms.classList = [];
        }
        if (browser().weixin) {
          // if (
          //   data.schoolStatus === 0 &&
          //   forms.schoolId == '1770035687490105346'
          // ) {
          //   forms.showTips = true;
          //   forms.showMessage = '团购时间已截止，感谢您的参与';
          //   forms.showButton = false;
          //   return;
          // }
          if (data.registerType !== 'BUG_GOODS' || data.schoolStatus === 0) {
            forms.showTips = true;
            forms.showMessage = '二维码已经失效，详情请咨询学校老师';
            forms.showButton = false;
            return;
          }
        } else {
          forms.showTips = true;
        }
      } catch {}
    };

    // 计算金额
    const calcPrice = computed(() => {
      let amount: number = 0; //现价
      let originAmount: number = 0; // 原价
      const vipList: any[] = studentRegisterStore.getVip;
      vipList.forEach((vip: any) => {
        amount += Number(vip.currentPrice);
        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 checkForm = () => {
      if (!checkPhone(studentInfo.username)) {
        showToast('请输入正确的手机号码');
        return true;
      } else if (!studentInfo.password) {
        showToast('请输入验证码');
        return true;
      } else if (!studentInfo.extra.nickname) {
        showToast('请输入学生姓名');
        return true;
      } else if (!studentInfo.extra.currentGradeNum) {
        showToast('请选择所在年级');
        return true;
      } else if (!studentInfo.extra.currentClass) {
        showToast('请选择所在班级');
        return true;
      }
      return false;
    };

    // 登记成功之后购买
    const onSubmit = async () => {
      forms.submitLoading = true;
      try {
        if (checkForm()) return;
        const { extra, ...res } = studentInfo;
        const result = await request.post('/edu-app/userlogin', {
          requestType: 'form',
          data: {
            ...res,
            extra: JSON.stringify({
              ...extra,
              giftVipDay:
                forms.detailVip.membershipDays || 0 + forms.giftVipDay || 0,
              schoolId: forms.schoolId
            })
          }
        });

        if (result.code !== 200) {
          if (result.code === 5436) {
            forms.showTips = true;
            forms.showMessage = '二维码已经失效，详情请咨询学校老师';
            forms.showButton = false;
          } else if (result.code === 5435) {
            forms.showTips = true;
            forms.showMessage = result.message;
            forms.showButton = true;
          } else if (result.code === 5435) {
            forms.showTips = true;
            forms.showMessage = result.message;
            forms.showButton = false;
          }
        } else {
          studentRegisterStore.setToken(
            result.data.token_type + ' ' + result.data.access_token
          );
          setLoginInit();

          // 传统方式
          if (forms.joinType === 'tradition') {
            setTimeout(() => {
              showToast('报名成功');
              router.push('/download');
            }, 100);
            return;
          }

          // 获取用户信息
          const res = await request.get('/edu-app/user/getUserInfo', {
            requestType: 'form'
          });
          setLogin(res.data);

          await onRegisterSubmit();
        }
      } finally {
      }
      forms.submitLoading = false;
    };

    // 登记成功之后购买
    const onRegisterSubmit = async () => {
      try {
        // 请求是否有待支付订单，如果有则自动关闭
        const status = await paymentOrderUnpaid();
        if (status) return;
        const schoolInfo = await request.get(
          '/edu-app/userPaymentOrder/registerStatus/' + forms.schoolId
        );
        const vipList = studentRegisterStore.getVip;

        if (schoolInfo.data.hasBuyCourse && vipList.length > 0) {
          forms.dialogConfirmStatus = true;
          return;
        }
        await paymentContinue();
      } catch {
        //
      }
    };

    const getUserInfos = async () => {
      if (
        studentInfo.password.length !== 6 ||
        !checkPhone(studentInfo.username)
      ) {
        return;
      }
      try {
        // 15907120131;
        const { data } = await request.get(
          `/edu-app/open/student/studentInfo?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
        );
        if (data) {
          if (!studentInfo.extra.nickname) {
            studentInfo.extra.nickname = data.nickname;
          }

          if (!studentInfo.extra.currentGradeNum) {
            const tempGrade: any = forms.gradeList || [];
            tempGrade?.forEach((i: any) => {
              if (i.value === data.currentGradeNum) {
                forms.gradeNumText = i.text;
                studentInfo.extra.currentGradeNum = data.currentGradeNum;
              }
            });
          }

          if (!studentInfo.extra.currentClass) {
            forms.classList.forEach((i: any) => {
              if (i.value === data.currentClass) {
                forms.currentClassText = i.text;
                studentInfo.extra.currentClass = data.currentClass;
              }
            });
          }
          // if (!studentInfo.extra.gender) {
          studentInfo.extra.gender =
            studentInfo.extra.gender !== data.gender
              ? data.gender
              : studentInfo.extra.gender;
        }
      } catch {
        //
      }
    };

    // 查询未支付订单
    const paymentOrderUnpaid = async () => {
      let result = false;
      try {
        const { data } = await request.get('/edu-app/userPaymentOrder/unpaid');
        // 判断是否有待支付订单

        if (!data.id) return false;

        // 判断是否可以取消订单
        if (data.cancelPayment) {
          await request.post(
            '/edu-app/userPaymentOrder/cancelPayment/' + data.orderNo
          );
          return false;
        } else {
          forms.countDownTime = data.cancelTimes;
          countDown.reset(Number(data.cancelTimes));
          countDown.start();
          forms.dialogMessage = `有待支付订单，请在${Math.ceil(
            countDown.current.value.total / 1000
          )}s后重试`;
          forms.dialogStatus = true;
          forms.dialogConfig = data;
          result = true;
        }
      } catch {
        //
      }
      return result;
    };

    const paymentContinue = async () => {
      try {
        const vipList = studentRegisterStore.getVip;
        const goodsList = studentRegisterStore.getGoods;
        const params: any[] = [];
        vipList.forEach((vip: any) => {
          params.push({
            giftVipDay: vip.membershipDays,
            goodsId: vip.goodsId,
            goodsNum: 1,
            goodsType: vip.goodsType,
            paymentCashAmount: vip.currentPrice, // 现金支付金额
            paymentCouponAmount: 0 // 优惠券金额
          });
        });

        goodsList.forEach((goods: any) => {
          params.push({
            goodsId: goods.productId,
            goodsNum: goods.quantity,
            goodsType: 'INSTRUMENTS',
            paymentCashAmount: goods.price, // 现金支付金额
            paymentCouponAmount: 0, // 优惠券金额
            goodsSkuId: goods.productSkuId
          });
        });
        // 创建订单
        const result = await request.post(
          '/edu-app/userPaymentOrder/executeOrder',
          {
            // hideLoading: false,
            data: {
              registerType: forms.registerType,
              paymentType: forms.paymentType,
              bizId: forms.schoolId, // 乐团编号
              orderType: 'SCHOOL_REGISTER',
              paymentCashAmount: calcPrice.value.amount || 0,
              paymentCouponAmount: 0,
              goodsInfos: params,
              orderName: '学生登记',
              orderDesc: '学生登记'
            }
          }
        );

        if (result.code === 5436) {
          forms.showTips = true;
          forms.showMessage = '二维码已经失效，详情请咨询学校老师';
          forms.showButton = false;
        } else if (result.code === 5435) {
          forms.showTips = true;
          forms.showMessage = result.message;
          forms.showButton = true;
        } else {
          state.config = {
            ...result.data.paymentConfig,
            paymentType: result.data.paymentType
          };
          state.orderNo = result.data.orderNo;

          await lastSubmit();
        }
      } catch (e: any) {
        console.log(e, 'any');
      }
    };

    const lastSubmit = async () => {
      try {
        const users = baseState.user.data;
        // 判断是否需要实名认证, 姓名，卡号 - 参数设置可以控制
        if (
          forms.contract_sign &&
          (!users?.account.realName || !users?.account.idCardNo)
        ) {
          state.authShow = true;
          return;
        }
        const { data } = await request.post(
          '/edu-app/userPaymentOrder/updateReceiveAddress',
          {
            // hideLoading: false,
            data: {
              orderNo: state.orderNo,
              orderType: 'SCHOOL_REGISTER'
            }
          }
        );
        state.pay_channel = data.paymentChannel;
        if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
          router.replace({
            path: '/payment-result',
            query: {
              orderNo: state.orderNo
            }
          });
        } else {
          onCallback();
        }
      } catch {
        //
      }
    };

    /**
     * @description 回调，判断是否有支付渠道，如果有则直接去支付
     * @returns void
     */
    const onCallback = () => {
      const pt = state.pay_channel;
      // 判断是否有支付方式
      if (pt) {
        const payCode: string = beforeSubmit(state.pay_channel);
        onConfirm({
          payCode,
          pay_channel: pt
        });
      } else {
        if (orderType.value === 'VIP') {
          state.paymentStatus = true;
        } else {
          // 直接去拉取微信支付
          onConfirm({
            payCode: 'payResult',
            pay_channel: 'wx_pub'
          });
        }
      }
    };

    const onConfirm = (val: any) => {
      const config: any = state.config;
      state.pay_channel = val.pay_channel;

      const params = qs.stringify({
        pay_channel: val.pay_channel,
        wxAppId: config.wxAppId,
        alipayAppId: config.alipayAppId,
        paymentType: forms.paymentType,
        body: config.body,
        price: config.price,
        orderNo: config.merOrderNo,
        userId: config.userId
      });

      // console.log(params, state.config);
      // return;
      if (val.payCode === 'payResult') {
        window.location.href =
          window.location.origin + '/classroom-app/#/payResult?' + params;
      } else {
        state.qrCodeUrl =
          window.location.origin + '/classroom-app/#/payDefine?' + params;
        state.showQrcode = true;
        state.paymentStatus = false;

        setTimeout(() => {
          getPaymentOrderStatus();
        }, 300);
      }
    };

    // 放弃支付时，则取消订单
    const onBackOut = async () => {
      try {
        await request.post(
          '/edu-app/userPaymentOrder/cancelPayment/' + state.orderNo
        );
        // router.back();
      } catch {
        //
      }
    };

    // 轮询查询订单状态
    const getPaymentOrderStatus = async () => {
      // 循环查询订单
      // const orderNo = state.orderNo
      const orderTimer = setInterval(async () => {
        // 判断是否在当前路由，如果不是则清除定时器
        if (route.name != 'student-register-form') {
          clearInterval(orderTimer);
          return;
        }
        state.orderTimer = orderTimer;
        try {
          const { data } = await request.post(
            '/edu-app/open/userOrder/paymentStatus/' + state.orderNo,
            {
              hideLoading: true
            }
          );

          if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
            // 默认关闭支付二维码弹窗
            state.showQrcode = false;
            clearInterval(state.orderTimer);
            setTimeout(() => {
              router.replace({
                path: '/payment-result',
                query: {
                  orderNo: state.orderNo
                }
              });
            }, 100);
          }
        } catch {
          //
          clearInterval(state.orderTimer);
        }
      }, 5000);
    };
    // 实名认证成功
    const onAuthSuccess = () => {
      //
      state.authShow = false;
      paymentContinue(); // 实名成功后自动支付
    };

    onMounted(async () => {
      getRegisterGoods();
    });

    return () => (
      <div class={styles['student-register']}>
        <div class={styles.studentRegisterContainer}>
          <div
            class={[styles.studentSection, styles.studentSectionForm]}
            // style={{ display: 'none' }}
          >
            <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}>
                {{
                  label: () => (
                    <div>
                      联系方式
                      {/* （直接监护人） */}
                      <p class={styles.tips}>（直接监护人）</p>
                    </div>
                  )
                }}
              </Field>
              <div class={['van-hairline--bottom', styles.fieldTipsGroup]}>
                <div class={[styles.fieldTips]}>
                  手机号是音乐数字课堂的唯一登录账户
                </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>
              <Field
                clearable={false}
                required
                inputAlign="right"
                label="学生姓名"
                placeholder="请输入学生姓名"
                autocomplete="off"
                maxlength={14}
                v-model={studentInfo.extra.nickname}
              />
              <Field
                clearable={false}
                required
                inputAlign="right"
                label="学生性别"
                placeholder="请选择性别"
                autocomplete="off"
                // v-model={studentInfo.extra.nickname}
              >
                {{
                  input: () => (
                    <RadioGroup
                      checked-color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
                      v-model={studentInfo.extra.gender}
                      direction="horizontal">
                      <Tag
                        size="large"
                        type="primary"
                        color={
                          !(studentInfo.extra.gender === 1)
                            ? '#F5F6FA'
                            : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
                        }
                        textColor={
                          !(studentInfo.extra.gender === 1) ? '#626264' : '#fff'
                        }
                        class={styles.radioSection}>
                        <Radio class={styles.radioItem} name={1}></Radio>男
                      </Tag>
                      <Tag
                        size="large"
                        type="primary"
                        color={
                          !(studentInfo.extra.gender === 0)
                            ? '#F5F6FA'
                            : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
                        }
                        textColor={
                          !(studentInfo.extra.gender === 0) ? '#626264' : '#fff'
                        }
                        class={styles.radioSection}>
                        <Radio class={styles.radioItem} name={0}></Radio>女
                      </Tag>
                    </RadioGroup>
                  )
                }}
              </Field>
              <Field
                clearable={false}
                required
                inputAlign="right"
                label="所在年级"
                placeholder="请选择年级"
                isLink
                readonly
                clickable={false}
                modelValue={forms.gradeNumText}
                onClick={() => (forms.gradeStatus = true)}
              />
              <Field
                clearable={false}
                required
                inputAlign="right"
                label="所在班级"
                placeholder="请选择班级"
                isLink
                readonly
                clickable={false}
                modelValue={forms.currentClassText}
                onClick={() => (forms.classStatus = true)}
              />
              {forms.giftVipDay > 0 ? (
                <div class={styles.memberNumer}>
                  <img src={iconGift} class={styles.iconGift} />

                  <p>
                    注册成功即可获得乐器AI学练工具
                    <span>{forms.giftVipDay || 0}</span>天有效期
                  </p>
                </div>
              ) : (
                ''
              )}
            </Form>
          </div>
          <div class={styles.studentSection}>
            <div class={styles.title2}></div>

            <div class={styles.goodsGroup}>
              <div
                class={[
                  styles.goodsItem,
                  forms.joinType === 'digitalize' && styles.checked
                ]}
                onClick={() => (forms.joinType = 'digitalize')}>
                <div class={styles.goodsInner}>
                  <i class={styles.proposalTip}></i>
                  数字化方式
                </div>
              </div>
              <div
                class={[
                  styles.goodsItem,
                  forms.joinType === 'tradition' && styles.checked
                ]}
                onClick={() => (forms.joinType = 'tradition')}>
                <div class={styles.goodsInner}>传统方式</div>
              </div>
            </div>
          </div>

          {forms.joinType === 'digitalize' && (
            <div class={[styles.goodsExtra]}>
              <i class={styles.iconArrow}></i>
              <Cell border={false} class={styles.goodsCell}>
                {{
                  icon: () => (
                    <Image class={styles.img} src={forms.detailVip.goodsUrl} />
                  ),
                  title: () => (
                    <div class={styles.section}>
                      <div class={styles.sectionContent}>
                        <h2>
                          {forms.detailVip.goodsName}
                          <Tag class={styles.brandName}>
                            {forms.detailVip.brandName}
                          </Tag>
                        </h2>
                        <p class={[styles.model]}>
                          {/* 解决学生不会练、不知练的对错、家长无法辅导、无需再额外请老师 */}
                          {forms.detailVip.description}
                        </p>
                        <span class={styles.sendInstrument}>赠送课堂乐器</span>
                      </div>
                    </div>
                  )
                }}
              </Cell>

              {forms.detailVip.membershipDays ? (
                <div class={styles.memberNumer}>
                  <img src={iconGift} class={styles.iconGift} />
                  <p>
                    现在购买赠送乐器AI学练工具
                    <span>{forms.detailVip.membershipDays || 0}</span>天有效期
                  </p>
                </div>
              ) : (
                ''
              )}
            </div>
          )}

          {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>
                <div class={styles.step}>
                  <span class={styles.nums}>
                    <span class={styles.numInner}>2</span>
                  </span>
                  <div class={styles.stepContent}>
                    <span>乐器标准：</span>
                    管数不限，建议20管以上C调加嘴排箫（音域宽，能演奏更多复杂乐曲，不需要重复更换），黑色，要选择单一原调（调性多学生很难掌握），价格由学生根据自身情况确定。
                  </div>
                </div>
              </div>
            </div>
          )}

          {forms.joinType && (
            <MSticky position="bottom">
              <div class={styles.paymentContainer}>
                {forms.joinType === 'digitalize' && (
                  <>
                    <div class={styles.payemntPrice}>
                      <img src={giftTip} class={styles.giftTip} />
                      <div>
                        <span class={styles.needPrice}>
                          <i style="font-style: normal">¥ </i>
                          <span>{moneyFormat(calcPrice.value.amount)}</span>
                          <i style="font-style: normal">/年</i>
                        </span>
                        {calcPrice.value.originAmount >
                        calcPrice.value.amount ? (
                          <del class={styles.allPrice}>
                            ¥ {moneyFormat(calcPrice.value.originAmount)}
                          </del>
                        ) : (
                          ''
                        )}
                      </div>
                    </div>
                    <div
                      class={styles.paymentBtn}
                      onClick={() => {
                        onSubmit();
                      }}>
                      <Button
                        round
                        disabled={forms.submitLoading}
                        loading={forms.submitLoading}>
                        立即支付
                      </Button>
                    </div>
                  </>
                )}

                {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'}>
          <Picker
            showToolbar
            columns={forms.gradeList}
            onCancel={() => (forms.gradeStatus = false)}
            onConfirm={(val: any) => {
              const selectedOption = val.selectedOptions[0];
              studentInfo.extra.currentGradeNum = selectedOption.value;
              forms.gradeNumText = selectedOption.text;
              forms.gradeStatus = false;
            }}
          />
        </Popup>
        {/* 班级 */}
        <Popup
          v-model:show={forms.classStatus}
          position="bottom"
          round
          class={'popupBottomSearch'}>
          <Picker
            showToolbar
            columns={forms.classList}
            onCancel={() => (forms.classStatus = false)}
            onConfirm={(val: any) => {
              const selectedOption = val.selectedOptions[0];
              studentInfo.extra.currentClass = selectedOption.value;
              forms.currentClassText = selectedOption.text;
              forms.classStatus = false;
            }}
          />
        </Popup>

        {/* 已经购买过样品 */}
        <MDialog
          title="提示"
          v-model:show={forms.dialogConfirmStatus}
          message={'已购买会员，是否确认购买？'}
          primaryColor="#FF8057"
          allowHtml={true}
          confirmButtonText="确定"
          showCancelButton
          onConfirm={async () => {
            await paymentContinue();
          }}
        />

        <MDialog
          title="提示"
          v-model:show={forms.dialogStatus}
          message={forms.dialogMessage}
          allowHtml={true}
          primaryColor="#FF8057"
          confirmButtonText="继续支付"
          onConfirm={async () => {
            // const paymentConfig = forms.dialogConfig.paymentConfig;
            // router.push({
            //   path: '/order-detail',
            //   query: {
            //     pm: 1, // h5乐团报名
            //     config: JSON.stringify(paymentConfig.paymentConfig),
            //     orderNo: paymentConfig.orderNo
            //   }
            // });
            // console.log(forms.dialogConfig, 'dialogConfig');

            countDown.pause();
            const paymentConfig = forms.dialogConfig.paymentConfig;
            state.config = paymentConfig?.paymentConfig;
            state.orderNo = paymentConfig?.orderNo;

            await lastSubmit();
          }}
          onCancel={(val: any) => {
            countDown.pause();
          }}
        />

        <Popup
          show={state.paymentStatus}
          closeOnClickOverlay={false}
          position="bottom"
          round
          closeOnPopstate
          safeAreaInsetBottom
          style={{ minHeight: '30%' }}>
          <Payment
            paymentConfig={state.orderInfo}
            onClose={() => (state.paymentStatus = false)}
            onBackOut={onBackOut}
            onConfirm={(val: any) => onConfirm(val)}
          />
        </Popup>

        <Popup
          v-model:show={state.showQrcode}
          round
          onClose={() => {
            // 二维码关闭时清除定时器
            clearInterval(state.orderTimer);
          }}>
          <QrcodePayment
            url={state.qrCodeUrl}
            pay_channel={state.pay_channel}
            orderType={orderType.value}
          />
        </Popup>

        {/* 是否在微信中打开 */}
        <OWxTip
          show={forms.showTips}
          message={forms.showMessage}
          showButton={forms.showButton}
          buttonText="刷新"
          onConfirm={() => window.location.reload()}
        />
      </div>
    );
  }
});