classroom-app/src/views/activation-code/instrument-registration/detail.tsx

import {
  Image,
  Cell,
  Tag,
  Button,
  Popup,
  showToast,
  Form,
  Field,
  CountDown,
  RadioGroup,
  Radio,
  Picker,
  closeToast,
  Popover,
  Area,
  CellGroup,
  showConfirmDialog
} from 'vant';
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref
} from 'vue';
import styles from './detail.module.less';
import MSticky from '@/components/m-sticky';
// import MVideo from '@/components/m-video';
import { useRoute, useRouter } from 'vue-router';
import request from '@/helpers/request';
import loginSuccess from './images/login-success.png';

import SelectStudent from '@/views/student-register/modal/select-student';

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

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

export default defineComponent({
  name: 'activation-register',
  setup() {
    const route = useRoute();
    const forms = reactive({
      activationCodeRecordId: route.query.activationCodeRecordId,
      statusShow: false,
      schoolId: null as any,
      schoolAreaId: null, // 学校区域编号
      activationCode: route.query.code as any, // 互通码
      paymentType: '', // 支付类型
      paymentChannel: '',
      multi_user_limit: 1, // 限制注册学生数量
      // popupShow: false,
      registerDetails: {} as any,
      details: [] as any[],
      // schoolType: '', // 学校类型
      gradeYear: '', // 学制
      schoolInstrumentSetType: null as any,
      submitLoading: false,
      showSelectStudent: false, // 选择学生
      studentList: [], // 手机号关联学生列表
      studentItem: {} as any // 选择的学生
      // bugGoods: false, // 是否购买AI
    });

    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 getDetail = async () => {
      try {
        const { data } = await request.post(
          '/edu-app/open/instrumentRegister/instrumentUseRegister',
          {
            requestType: 'form',
            data: {
              activationCodeRecordId: forms.activationCodeRecordId
            }
          }
        );
      } catch {
        //
      }
    };

    onMounted(() => {
      getDetail();
    });
    return () => (
      <div class={styles['student-register']}>
        <div class={styles.studentRegisterContainer}>
          <div class={[styles.studentSection]}>
            <Form labelAlign="left" class={styles.registerForm}>
              <Field
                clearable={false}
                required
                inputAlign="right"
                label="学生姓名"
                placeholder="请输入学生姓名"
                autocomplete="off"
                readonly
                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>切换学生</span>
                      </div>
                    )
                }}
              </Field>
              <Field
                clearable={false}
                required
                inputAlign="right"
                label="学生性别"
                placeholder="请选择性别"
                autocomplete="off">
                {{
                  input: () => (
                    <RadioGroup
                      checked-color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
                      v-model={studentInfo.extra.gender}
                      direction="horizontal"
                      disabled>
                      <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="请选择地区"
                readonly
                clickable={false}
                // modelValue={forms.gradeNumText}
                // onClick={() => {
                //   if (forms.isRegister !== 'update') {
                //     forms.gradePopupIndex = [studentInfo.extra.currentGradeNum];
                //     forms.gradeStatus = true;
                //   }
                // }}
              />
              <Field
                clearable={false}
                required
                inputAlign="right"
                label="互通学校"
                placeholder="请选择互通学校"
                readonly
                clickable={false}
                // modelValue={forms.gradeNumText}
              />
              <Field
                clearable={false}
                required
                inputAlign="right"
                label="所在班级"
                placeholder="请选择班级"
                readonly
                clickable={false}
                // modelValue={forms.currentClassText}
              />
            </Form>
          </div>

          <MSticky position="bottom">
            <div class={styles.paymentContainer}>
              <Button
                onClick={() => {
                  // onSubmit();
                  // if (checkForm() || checkSubmit()) {
                  //   forms.submitLoading = false;
                  //   return;
                  // }
                  // forms.showConfirmPopup = true;
                }}
                round
                block
                disabled={forms.submitLoading}
                loading={forms.submitLoading}>
                登记
              </Button>
            </div>
          </MSticky>
        </div>

        <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) => {}}
          />
        </Popup>

        <Popup
          show={forms.statusShow}
          style={{
            background: 'transparent',
            overflow: 'visible !important'
          }}>
          <div class={styles.popupContainer}>
            <img class={styles.title} src={loginSuccess} />

            <div class={styles.content}>
              <span>李木子</span>已登记成功，乐器将在开课时发至学生
            </div>
            <div class={styles.pBtnGroup}>
              <Button
                round
                block
                onClick={() => (forms.statusShow = false)}
                color="linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)">
                我知道了
              </Button>
            </div>
          </div>
        </Popup>
      </div>
    );
  }
});