提交

1

src/router/routes-common.ts

@@ -328,5 +328,19 @@ export const rootRouter = [
     meta: {
       title: '活动声部曲目'
     }
+  },
+  {
+    path: '/tenantStudentRejest',
+    component: () => import('@/views/tenantStudentRejest/index'),
+    meta: {
+      title: '机构学员注册'
+    }
+  },
+  {
+    path: '/tenantTeacherRejest',
+    component: () => import('@/views/tenantTeacherRejest/index'),
+    meta: {
+      title: '机构老师注册'
+    }
   }
 ]

src/views/tenantStudentRejest/index.module.less

@@ -0,0 +1,191 @@
+.resjetStudentWrap {
+  width: 100%;
+  height: 891px;
+  position: relative;
+  .bgWrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 375px;
+    height: 891px;
+  }
+  .rejectLogo {
+    width: 163px;
+    height: 22px;
+    position: absolute;
+    left: 50%;
+    margin-left: -82px;
+    z-index: 100;
+    top: 27px;
+  }
+  .studentText {
+    width: 133px;
+    height: 32px;
+    position: absolute;
+    left: 50%;
+    margin-left: -68px;
+    top: 69px;
+    z-index: 100;
+  }
+  .schoolNameWrap {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    top: 122px;
+    font-size: 15px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #b21f3b;
+    line-height: 21px;
+    .rejectSchool {
+      width: 17px;
+      height: 17px;
+      margin-right: 8px;
+    }
+  }
+  .centerLogo {
+    width: 375px;
+    height: 354px;
+    z-index: 10;
+    position: absolute;
+    top: 142px;
+  }
+  .infoWrap {
+    padding: 12px 12px 0;
+    top: 326px;
+    position: relative;
+    width: 371px;
+    height: 565px;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.22) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    box-sizing: border-box;
+    border-radius: 20px 20px 0 0;
+    border: 2px solid #ffffff;
+    border-bottom: none;
+    z-index: 20;
+    .infoWrapCore {
+      background-color: #fff;
+      height: 443px;
+      background: #ffffff;
+      border-radius: 18px;
+      overflow: hidden;
+      position: relative;
+      .subTitle {
+        position: relative;
+        width: 271px;
+        height: 26px;
+        margin-top: 16px;
+        left: 50%;
+        margin-left: -135px;
+      }
+    }
+  }
+}
+
+.group {
+  overflow: hidden;
+  padding: 14px 0 20px;
+  .noArrow {
+    :global {
+      .van-field__body {
+        padding-right: 20px;
+      }
+    }
+  }
+  :global {
+    .van-cell {
+      line-height: 40px;
+    }
+    .van-field__label {
+      font-size: 16px;
+      font-weight: 600;
+      color: #714923;
+    }
+    .van-field__body {
+      height: 40px;
+      // padding: 0 15px;
+    }
+
+    .van-field__control {
+      font-size: 14px;
+    }
+
+    input::-webkit-input-placeholder {
+      color: #d8a673;
+    }
+
+    .van-cell {
+      padding: 8px 15px;
+    }
+  }
+}
+
+.inputCode {
+  :global {
+    .van-field__control {
+      position: relative;
+      top: 3px;
+      border-right: 1.5px solid #d8a673;
+      line-height: 16px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      margin-right: 10px;
+      padding-right: 10px;
+    }
+
+    .van-field__button {
+      height: 100%;
+    }
+
+    .van-button--disabled {
+      color: #94acc8;
+    }
+  }
+}
+.tips {
+  box-sizing: border-box;
+  width: 320px;
+  font-size: 13px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #fd5160;
+  line-height: 34px;
+  padding: 0 8px;
+  text-align: left;
+  background: #ffebeb;
+  border-radius: 8px;
+  margin-top: 10px;
+  left: 50%;
+  position: relative;
+  margin-left: -160px;
+}
+.sendBtn {
+  border: none;
+  background-color: transparent;
+  width: 70px;
+  color: #fe2451;
+  font-size: 14px;
+  padding: 0;
+  height: 44px !important;
+  line-height: 44px;
+
+  &::before {
+    display: none;
+  }
+}
+
+.rejectBtn {
+  width: 303px;
+  height: 50px;
+  position: relative;
+  left: 50%;
+  margin-left: -151px;
+  margin-top: 24px;
+}

src/views/tenantStudentRejest/index.tsx

@@ -0,0 +1,296 @@
+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  } 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 request from '@/helpers/request'
+import dayjs from 'dayjs'
+export default defineComponent({
+  name: 'tenantStudentRejest',
+  setup() {
+    const route = useRoute();
+    const forms = reactive({
+      gender: '',
+      name: '',
+      phone: '',
+      subjectId: '',
+      tenantId: '',
+      birthdate: '',
+      code: '',
+      genderName:''
+    });
+
+    const data = reactive({
+      schoolName: route.query.schoolName || '',
+      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'}]
+    });
+    const handleSubmit = () => {
+      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 getSubjectList = async () => {
+      try {
+        const res = await request.get('/api-student/open/subject/subjectSelect')
+        data.subjectList = res.data || []
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    const confirmSubject = (val: any) => {
+      console.log(val, 'confirmSubject')
+    }
+
+    const confirmDate = (val:any)=>{
+      forms.birthdate = dayjs(val).format('YYYY-MM-DD')
+     data.genderState = 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 = () => {
+      if (!forms.phone) {
+        Toast('请输入手机号码');
+        return;
+      }
+      if (!/^1[3456789]\d{9}$/.test(forms.phone)) {
+        Toast('手机号码格式不正确');
+        return;
+      }
+      data.imgCodeStatus = true;
+    };
+    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>武汉星星小学</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={data.cityName}
+                    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  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>
+      </div ></>
+
+  }
+
+})

src/views/tenantTeacherRejest/index.module.less

@@ -0,0 +1,191 @@
+.resjetStudentWrap {
+  width: 100%;
+  height: 891px;
+  position: relative;
+  .bgWrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 375px;
+    height: 891px;
+  }
+  .rejectLogo {
+    width: 163px;
+    height: 22px;
+    position: absolute;
+    left: 50%;
+    margin-left: -82px;
+    z-index: 100;
+    top: 27px;
+  }
+  .studentText {
+    width: 133px;
+    height: 32px;
+    position: absolute;
+    left: 50%;
+    margin-left: -68px;
+    top: 69px;
+    z-index: 100;
+  }
+  .schoolNameWrap {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    top: 122px;
+    font-size: 15px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #b21f3b;
+    line-height: 21px;
+    .rejectSchool {
+      width: 17px;
+      height: 17px;
+      margin-right: 8px;
+    }
+  }
+  .centerLogo {
+    width: 375px;
+    height: 354px;
+    z-index: 10;
+    position: absolute;
+    top: 142px;
+  }
+  .infoWrap {
+    padding: 12px 12px 0;
+    top: 326px;
+    position: relative;
+    width: 371px;
+    height: 565px;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.22) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    box-sizing: border-box;
+    border-radius: 20px 20px 0 0;
+    border: 2px solid #ffffff;
+    border-bottom: none;
+    z-index: 20;
+    .infoWrapCore {
+      background-color: #fff;
+      height: 443px;
+      background: #ffffff;
+      border-radius: 18px;
+      overflow: hidden;
+      position: relative;
+      .subTitle {
+        position: relative;
+        width: 271px;
+        height: 26px;
+        margin-top: 16px;
+        left: 50%;
+        margin-left: -135px;
+      }
+    }
+  }
+}
+
+.group {
+  overflow: hidden;
+  padding: 14px 0 20px;
+  .noArrow {
+    :global {
+      .van-field__body {
+        padding-right: 20px;
+      }
+    }
+  }
+  :global {
+    .van-cell {
+      line-height: 40px;
+    }
+    .van-field__label {
+      font-size: 16px;
+      font-weight: 600;
+      color: #714923;
+    }
+    .van-field__body {
+      height: 40px;
+      // padding: 0 15px;
+    }
+
+    .van-field__control {
+      font-size: 14px;
+    }
+
+    input::-webkit-input-placeholder {
+      color: #d8a673;
+    }
+
+    .van-cell {
+      padding: 8px 15px;
+    }
+  }
+}
+
+.inputCode {
+  :global {
+    .van-field__control {
+      position: relative;
+      top: 3px;
+      border-right: 1.5px solid #d8a673;
+      line-height: 16px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      margin-right: 10px;
+      padding-right: 10px;
+    }
+
+    .van-field__button {
+      height: 100%;
+    }
+
+    .van-button--disabled {
+      color: #94acc8;
+    }
+  }
+}
+.tips {
+  box-sizing: border-box;
+  width: 320px;
+  font-size: 13px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #fd5160;
+  line-height: 34px;
+  padding: 0 8px;
+  text-align: left;
+  background: #ffebeb;
+  border-radius: 8px;
+  margin-top: 10px;
+  left: 50%;
+  position: relative;
+  margin-left: -160px;
+}
+.sendBtn {
+  border: none;
+  background-color: transparent;
+  width: 70px;
+  color: #fe2451;
+  font-size: 14px;
+  padding: 0;
+  height: 44px !important;
+  line-height: 44px;
+
+  &::before {
+    display: none;
+  }
+}
+
+.rejectBtn {
+  width: 303px;
+  height: 50px;
+  position: relative;
+  left: 50%;
+  margin-left: -151px;
+  margin-top: 24px;
+}

src/views/tenantTeacherRejest/index.tsx

@@ -0,0 +1,236 @@
+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 } from 'vant'
+import { defineComponent, onMounted, reactive } from 'vue'
+import styles from './index.module.less'
+import bg from './images/teacherBg.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 request from '@/helpers/request'
+import dayjs from 'dayjs'
+export default defineComponent({
+  name: 'tenantStudentRejest',
+  setup() {
+    const route = useRoute();
+    const forms = reactive({
+      idCardNo: '',
+      username: '',
+      realName: '',
+      phone: '',
+      subjectId: '',
+      tenantId: '',
+      birthdate: '',
+      code: ''
+    });
+
+    const data = reactive({
+      schoolName: route.query.schoolName || '',
+      cityName: '', // 所属城市
+      showArea: false,
+      checked: true,
+      success: false,
+      areaList: {} as any,
+      sendMsg: '获取验证码',
+      imgCodeStatus: false,
+      subjectList: [],
+      searchStatus: false,
+      openStatus: false,
+      dateState: false
+    });
+    const handleSubmit = () => {
+      console.log(forms, 'forms')
+      if (!forms.username) {
+        Toast('请输入老师昵称')
+      }
+      if (!forms.phone) {
+        Toast('请输入手机号')
+      }
+      if (!forms.code) {
+        Toast('请输入验证码')
+      }
+      if (!forms.realName) {
+        Toast('请输入真实姓名')
+      }
+      if (!forms.idCardNo) {
+        Toast('请输入身份证号')
+      }
+      if (!forms.subjectId) {
+        Toast('请选择声部')
+      }
+    }
+    const getSubjectList = async () => {
+      try {
+        const res = await request.get('/api-student/open/subject/subjectSelect')
+        data.subjectList = res.data || []
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    const confirmSubject = (val: any) => {
+      console.log(val, 'confirmSubject')
+    }
+
+    const confirmDate = (val: any) => {
+      forms.birthdate = dayjs(val).format('YYYY-MM-DD')
+      data.dateState = false
+    }
+    onMounted(() => {
+      getSubjectList()
+    })
+
+    /** 发送验证码 */
+    const onSendSms = () => {
+      if (!forms.phone) {
+        Toast('请输入手机号码');
+        return;
+      }
+      if (!/^1[3456789]\d{9}$/.test(forms.phone)) {
+        Toast('手机号码格式不正确');
+        return;
+      }
+      data.imgCodeStatus = true;
+    };
+    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>武汉星星小学</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.username}
+
+                  // onUpdate: modelValue={(val: string) => {
+                  //   forms.nickname = val.trim();
+                  // }}
+                  />
+
+                  <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
+                    class={styles.noArrow}
+                    inputAlign="right"
+                    label="真实姓名"
+                    placeholder="请输入真实姓名"
+                    maxlength={20}
+                    v-model={forms.realName}
+
+                  // onUpdate: modelValue={(val: string) => {
+                  //   forms.nickname = val.trim();
+                  // }}
+                  />
+                  <Field
+                    class={styles.noArrow}
+                    inputAlign="right"
+                    label="身份证号"
+                    placeholder="请输入身份证号"
+                    maxlength={20}
+                    v-model={forms.idCardNo}
+
+                  // onUpdate: modelValue={(val: string) => {
+                  //   forms.nickname = val.trim();
+                  // }}
+                  />
+
+
+                  <Field
+                    border={false}
+                    inputAlign="right"
+                    label="声部"
+                    placeholder="请选择声部"
+                    readonly
+                    v-model={data.cityName}
+                    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>
+      </div ></>
+
+  }
+
+})