h5-colexiu/src/views/tenantStudentRejest/index.tsx

import ColHeader from '@/components/col-header'
import ColSearch from '@/components/col-search'
import { Sticky, Image, List, Popup, Icon, Area, Field, Form, CellGroup, Button, Toast, Picker, DatetimePicker,Overlay,Dialog } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './index.module.less'
import bg from './images/bg.png'
import rejectLogo from './images/rejectLogo.png'
import rejectSchool from './images/rejest-school.png'
import subTitle from './images/subTitle.png'
import centerLogo from './images/center.png'
import studentText from './images/studentText.png'
import { useRoute } from 'vue-router'
import icon_arrow from './images/icon_arrow.png'
import rejectBtn from './images/rejectBtn.png'
import studentSuccess from './images/studentSuccess.png'
import request from '@/helpers/request'
import dayjs from 'dayjs'
export default defineComponent({
  name: 'tenantStudentRejest',
  setup() {
    const route = useRoute();
    const forms = reactive({
      gender: '',
      name: '',
      phone: '',
      subjectId: '',
      subjectName:'',
      birthdate: '',
      code: '',
      genderName:'',
      tenantId:route.query.tenantId,
    });

    const data = reactive({
      schoolName: route.query.name || '',
      id:route.query.tenantId,
      cityName: '', // 所属城市
      showArea: false,
      checked: true,
      success: false,
      areaList: {} as any,
      sendMsg: '获取验证码',
      imgCodeStatus: false,
      subjectList: [],
      searchStatus: false,
      openStatus: false,
      dateState: false,
      genderState:false,
      genderList:[{text:'男',value:'1'},{text:'女',value:'0'}],
      showSuccess:false,
      secondConfirm:false,
      minDate: new Date(1980, 1, 1),
      maxDate: new Date(),
    });
    const handleSubmit = async() => {
      console.log(forms, 'forms')
      if (!forms.name) {
        Toast('请输入姓名')
      }
      if (!forms.gender) {
        Toast('请选择性别')
      }
      if (!forms.phone) {
        Toast('请输入手机号')
      }
      if (!forms.birthdate) {
        Toast('请选择出生年月')
      }
      if (!forms.code) {
        Toast('请输入验证码')
      }
      if (!forms.subjectId) {
        Toast('请选择声部')
      }

        const res = await request.post('/api-tenant/open/student/save',{ data: { ... forms},hideLoading:true})
        console.log(res)
      if(res.code == 200){
        data.showSuccess = true
      }

      if(res.code == 5004){
        data.secondConfirm = true
      }




    }
    const getSubjectList = async () => {
      try {
        const res = await request.get('/api-tenant/open/subject/queryPage',{ data: { page: 1, rows: 9999 }})
        data.subjectList = res.data.rows.map((item:any)=>{
          return {
            text:item.name,
            value:item.id
          }
        }) || []
      } catch (e) {
        console.log(e)
      }
    }
    const confirmSubject = (val: any) => {
      forms.subjectName = val.text;
      forms.subjectId = val.value;
      data.searchStatus = false
      console.log(val, 'confirmSubject')
    }

    const confirmDate = (val:any)=>{
      forms.birthdate = dayjs(val).format('YYYY-MM-DD')
     data.dateState = false
    }
    onMounted(() => {
      getSubjectList()
    })
    const confirmGender = (val:any)=>{
      if(val.value){
        forms.gender = val.value;
        forms.genderName = val.text
      }else{
        forms.gender = '';
        forms.genderName = ''
      }
      data.genderState = false
    }
    /** 发送验证码 */
    const onSendSms = async () => {
      if (!forms.phone) {
        Toast('请输入手机号码');
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(forms.phone)) {
        Toast('手机号码格式不正确');
        return;
      }
      await request.post('/api-student/code/sendSmsCode', {
        requestType: 'form',
        data: {
          mobile: forms.phone,
          type: 'LOGIN'
        }
      })
      onCountDown()
      setTimeout(() => {
        Toast('验证码已发送')
      }, 100)
    };

    const onCountDown = ()=>{
        data.sendMsg='60s'
        let count = 60;
        const timer = setInterval(() => {
          count--;
          data.sendMsg= `${count}s`
          if (count <= 0) {
           data.sendMsg='获取验证码'
            clearInterval(timer);
          }
        }, 1000);

    }

    const downApp = ()=>{
      window.open(location.origin + '/student/#/download')
      data.showSuccess = false
    }

    const submitSecond = async()=>{
      try{
        const res = await request.post('/api-tenant/open/student/save',{ data: { ... forms,updateTenant:true},hideLoading:true})
        data.showSuccess=true
        data.secondConfirm=false

      }catch(e){
        console.log(e)
      }

    }
    return () =>
      <>< div class={styles.videoClass} >
        {/* <ColHeader
          class={styles.classHeader}
          border={false}
          isFixed={false}
          background="#fff"
        /> */}
        <div class={styles.resjetStudentWrap}>
          <img src={rejectLogo} class={styles.rejectLogo} alt="" />
          <img src={studentText} class={styles.studentText} alt="" />
          <img src={bg} class={styles.bgWrap} alt="" />
          <div class={styles.schoolNameWrap}>
            <img src={rejectSchool} class={styles.rejectSchool} alt="" />
            <p>{data.schoolName}</p>

          </div>
          <img class={styles.centerLogo} src={centerLogo} alt="" />
          <div class={styles.infoWrap}>
            <div class={styles.infoWrapCore}>
              <img src={subTitle} class={styles.subTitle} alt="" />

              <Form onSubmit={() => handleSubmit()}>
                <CellGroup class={styles.group} border={false}>
                  <Field
                    class={styles.noArrow}
                    inputAlign="right"
                    label="姓名"
                    placeholder="请输入姓名"
                    maxlength={20}
                    v-model={forms.name}

                  // onUpdate: modelValue={(val: string) => {
                  //   forms.nickname = val.trim();
                  // }}
                  />
                  <Field
                    readonly
                    inputAlign="right"
                    label="性别"
                    placeholder="请选择性别"
                    v-model={forms.genderName}
                    onClick={()=>{
                      data.genderState = true
                    }}
                  // onUpdate: modelValue={(val: string) => {
                  //   forms.nickname = val.trim();
                  // }}
                  >
                    {{
                      button: () => (
                        <img
                          style={{
                            display: 'block',
                            width: '12px',
                            height: '12px',

                          }}
                          src={icon_arrow}
                        />
                      )
                    }}
                  </Field>
                  <Field
                    readonly
                    inputAlign="right"
                    label="出生日期"
                    placeholder="请选择出生日期"
                    maxlength={20}
                    v-model={forms.birthdate}
                    onClick={()=>{data.dateState = true}}
                  // onUpdate: modelValue={(val: string) => {
                  //   forms.nickname = val.trim();
                  // }}
                  >
                    {{
                      button: () => (
                        <img
                          style={{
                            display: 'block',
                            width: '12px',
                            height: '12px',

                          }}
                          src={icon_arrow}
                        />
                      )
                    }}
                  </Field>
                  <Field
                    inputAlign="right"
                    label="手机号"
                    class={styles.noArrow}
                    maxlength={11}
                    placeholder="请输入手机号码"
                    v-model={forms.phone}
                  />
                  <div class={styles.tips}>
                    手机号码为酷乐秀机构版登录账号
                  </div>

                  <Field
                    class={styles.inputCode}
                    inputAlign="left"
                    label="请输入验证码"
                    labelWidth={0}
                    v-model={forms.code}
                    maxlength={6}>
                    {{
                      button: () => (
                        <Button

                          disabled={data.sendMsg.includes('s')}
                          class={styles.sendBtn}
                          onClick={() => onSendSms()}>
                          {data.sendMsg}
                        </Button>
                      )
                    }}
                  </Field>
                  <Field
                    border={false}
                    inputAlign="right"
                    label="声部"
                    placeholder="请选择声部"
                    readonly
                    v-model={forms.subjectName}
                    onClick={() => (data.searchStatus = true)}>
                    {{
                      button: () => (
                        <img
                          style={{
                            display: 'block',
                            width: '12px',
                            height: '12px',

                          }}
                          src={icon_arrow}
                        />
                      )
                    }}
                  </Field>
                </CellGroup>
              </Form>
            </div>
            <img src={rejectBtn} onClick={() => { handleSubmit() }} class={styles.rejectBtn} alt="" />
          </div>
        </div>
        <Popup
          show={data.searchStatus}
          position="bottom"
          round
          columns-field-names={{ text: '' }}
          safe-area-inset-bottom
          onClose={() => (data.searchStatus = false)}
          onClosed={() => (data.openStatus = false)}
        >
          <Picker columns={data.subjectList} onCancel={() => { data.searchStatus = false }} onConfirm={confirmSubject}></Picker>
        </Popup>
        <Popup
          show={data.dateState}
          position="bottom"
          round
          columns-field-names={{ text: '' }}
          safe-area-inset-bottom
          onClose={() => (data.dateState = false)}
          onClosed={() => (data.dateState = false)}
        >
          <DatetimePicker
          min-date={data.minDate}
  max-date={data.maxDate} type="date" v-model:value={forms.birthdate} onCancel={() => { data.dateState = false }} onConfirm={confirmDate}></DatetimePicker>
        </Popup>

        <Popup
          show={data.genderState}
          position="bottom"
          round
          columns-field-names={{ text: '' }}
          safe-area-inset-bottom
          onClose={() => (data.genderState = false)}
          onClosed={() => (data.genderState = false)}
        >
          <Picker columns={data.genderList} onCancel={() => { data.genderState = false }} onConfirm={confirmGender}></Picker>
        </Popup>

        <Overlay show={data.showSuccess}  z-index={1000}>
          <div class={styles.showWrap}>
           <img class={styles.showWrapTop} src={studentSuccess} alt="" />
           <h2>恭喜您已成功登记为</h2>
           <h4>{data.schoolName} <span>【学员】</span> </h4>
           <p>请下载酷乐秀机构版APP进行学习</p>
           <div class={styles.downApp} onClick={downApp}>立即下载</div>
          </div>
        </Overlay>


          <Popup
          show={data.secondConfirm}
          position="center"
          round
          onClose={() => (data.secondConfirm = false)}
          onClosed={() => (data.secondConfirm = false)}
        >
        <div class={styles.secondWrap}>
          <h2>提示</h2>
          <p>当前账号已存在 <span>【机构名称】</span> ，是否</p>
          <p>确认更换到 <span>{data.schoolName}</span>吗? </p>
          <div class={styles.buttonWrap}>
            <div class={styles.closeBtn} onClick={()=>{data.secondConfirm = false}}> 取消</div>
            <div  class={styles.submitBtn} onClick={submitSecond}>确定</div>
          </div>
        </div>

        </Popup>
      </div ></>

  }

})