lex 1 年之前
父節點
當前提交
b4a910d6c5

二進制
src/student/music-group/pre-goods-apply/images/icon-12.png


二進制
src/student/music-group/pre-goods-apply/images/icon-bao.png


二進制
src/student/music-group/pre-goods-apply/images/icon-free.png


+ 303 - 2
src/student/music-group/pre-goods-apply/index.module.less

@@ -11,7 +11,6 @@
   opacity: .3;
 }
 
-
 .goodsHeader {
   position: relative;
   height: 175px;
@@ -58,6 +57,31 @@
   padding-top: 22px;
   overflow: visible;
 
+  &.self,
+  &.groupBuy {
+    margin-top: 12px;
+    padding-top: 0px;
+
+    &::before {
+      content: ' ';
+      position: absolute;
+      right: 24%;
+      top: -6px;
+      display: inline-block;
+      width: 21px;
+      height: 21px;
+      background: #FFFFFF;
+      border-radius: 3px 0px 0px 0px;
+      transform: rotate(45deg);
+    }
+  }
+
+  &.groupBuy {
+    &::before {
+      left: 23%;
+    }
+  }
+
   .title {
     position: absolute;
     top: -10px;
@@ -80,9 +104,16 @@
   }
 
   .titleTips {
+    width: 214px;
+    margin-left: -107px;
+    background: url('./images/title-3.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .titleTool {
     width: 292px;
     margin-left: -146px;
-    background: url('./images/title-3.png') no-repeat center;
+    background: url('./images/title-4.png') no-repeat center;
     background-size: contain;
   }
 
@@ -100,6 +131,17 @@
     }
   }
 
+  .toolRadioGroup {
+    padding-top: 12px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .radioSectionTag {
+    min-height: 28px;
+    flex: 1;
+  }
 
   .radioSection {
     position: relative;
@@ -134,3 +176,262 @@
     }
   }
 }
+
+.tipsContainer {
+  padding: 14px 12px 10px 43px;
+
+  .line {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 24px;
+    padding-bottom: 8px;
+
+    .child {
+      padding-top: 2px;
+      font-size: 13px;
+      color: #666;
+      font-weight: 400;
+    }
+  }
+
+  .num {
+    position: absolute;
+    left: 12px;
+    display: block;
+    width: 23px;
+    height: 23px;
+  }
+
+  .numOne {
+    background: url('./images/p-1.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .numTwo {
+    background: url('./images/p-2.png') no-repeat center;
+    background-size: contain;
+  }
+}
+
+.toolImg {
+  position: relative;
+  padding-top: 12px;
+  margin: 0 12px 0;
+  // width: 325px;
+  height: 325px;
+  width: calc(100% - 24px);
+  border-radius: 12px;
+  overflow: hidden;
+
+  :global {
+    .van-image {
+      border-radius: 12px;
+      overflow: hidden;
+    }
+
+    .van-button {
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 20px;
+    }
+  }
+
+  .toolImgOverflow {
+    position: absolute;
+    top: 12px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .iconHead {
+    position: absolute;
+    right: 37px;
+    bottom: 59px;
+    width: 75px;
+    height: 83px
+  }
+}
+
+.toolInput {
+  :global {
+    .van-field__body {
+      margin-top: 8px;
+      padding: 0 12px;
+      height: 44px;
+      border-radius: 6px;
+      border: 1px solid #DEDEDE;
+    }
+  }
+}
+
+
+.groupBuy {
+  :global {
+    .van-cell__value {
+      text-align: left;
+    }
+  }
+
+  .goodsImg {
+    width: 90px;
+    height: 90px;
+    margin-right: 12px;
+  }
+
+  .goodsTitle {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 600;
+    color: #131415;
+    line-height: 22px;
+    padding-right: 4px;
+    padding-bottom: 4px;
+
+    img {
+      height: 18px;
+      margin-left: 4px;
+    }
+  }
+
+  .goodsTips {
+    font-size: 12px;
+    color: #FF4100;
+    line-height: 16px;
+    padding-bottom: 4px;
+  }
+
+  .goodsMemo {
+    font-size: 13px;
+    color: #777777;
+    line-height: 18px;
+    padding-bottom: 4px;
+  }
+
+  .goodsPrice {
+    display: flex;
+    align-items: center;
+    font-family: DINAlternate-Bold, DINAlternate;
+    flex: 1;
+  }
+
+  .priceGroup {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 20px;
+
+    p {
+      font-size: 20px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: #FC1A19;
+      line-height: 16px;
+
+      span {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .priceOrigin {
+    padding-left: 6px;
+    font-size: 12px;
+    color: #AAAAAA;
+    line-height: 17px;
+  }
+
+  .iconBao {
+    width: 56px;
+    height: 19px;
+    margin-right: 4px;
+  }
+
+  .baoTitle {
+    font-size: 12px;
+    color: #131415;
+    line-height: 17px;
+  }
+
+  .baoContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .baoPrice {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: #FC1A19;
+      line-height: 16px;
+      display: flex;
+      align-content: center;
+
+      p {
+        padding-right: 6px;
+      }
+
+      .prefix {
+        font-size: 14px;
+      }
+
+      .suffix {
+        font-size: 12px;
+        vertical-align: bottom;
+      }
+    }
+  }
+}
+
+.paymentContainer {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 15px 12px calc(15px + env(safe-area-inset-bottom)) 12px;
+
+  .needPrice {
+    display: flex;
+    align-items: center;
+    color: #333333;
+
+    span {
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      font-weight: bold;
+      color: #ff4e19;
+      font-family: DINAlternate-Bold, DINAlternate;
+
+      span {
+        font-size: 16px;
+        margin-right: 2px;
+
+      }
+    }
+  }
+
+  :global {
+    .van-button {
+      height: 40px;
+      line-height: 40px;
+      min-width: 112px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+}

+ 477 - 34
src/student/music-group/pre-goods-apply/index.tsx

@@ -1,9 +1,33 @@
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
 import headTitle from './images/header-title.png'
 import headPhone from './images/header-phone.png'
 import headBg from './images/header-bg.png'
-import { CellGroup, Field, Form, Radio, RadioGroup, Tag, showToast } from 'vant'
+import iconHead from './images/icon-head.png'
+import iconBao from './images/icon-bao.png'
+import iconFree from './images/icon-free.png'
+import icon12 from './images/icon-12.png'
+import {
+  Button,
+  CellGroup,
+  Field,
+  Form,
+  Radio,
+  RadioGroup,
+  Tag,
+  showToast,
+  Image,
+  showImagePreview,
+  Cell,
+  Checkbox,
+  Picker,
+  Popup
+} from 'vant'
+import OSticky from '@/components/o-sticky'
+import { browser, getUrlCode, moneyFormat } from '@/helpers/utils'
+import request from '@/helpers/request'
+import { useRoute, useRouter } from 'vue-router'
+import { goWechatAuth, setLogout } from '@/state'
 
 // 乐团交付,乐团停止或关闭,有新的交付团;则不允许报名
 const classList: any = []
@@ -14,8 +38,10 @@ for (let i = 1; i <= 40; i++) {
 export default defineComponent({
   name: 'pre-goods-apply',
   setup() {
+    const route = useRoute()
+    const router = useRouter()
     const state = reactive({
-      // code: '' as any, // 微信授权code码
+      code: '' as any, // 微信授权code码
       detail: {} as any, // 学员详情
       currentGrade: [
         { text: '一年级', value: 1 },
@@ -33,6 +59,9 @@ export default defineComponent({
       gradeStatus: false,
       classStatus: false,
       subjectStatus: false,
+      registerInfo: {}, // 乐团信息
+      // 是否开启微信登录(测试使用)默认为false
+      testIsWeixin: true,
       pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
       nameReg: /^[\u4E00-\u9FA5]+$/,
       subjectChangeStatus: false // 更换声部时
@@ -47,9 +76,64 @@ export default defineComponent({
       registerSubjectId: '',
       registerSubjectTxt: null, // 所在声部
       parentName: null,
+      groupBuyType: null,
       phone: null
     })
 
+    // 获取乐团报名信息
+    const studentRegister = async () => {
+      try {
+        const { data } = await request.get(
+          '/api-student/orchestraRegister/register/' + route.query.id
+        )
+        const detail = data || {}
+        state.detail = detail
+        const grade: any = state.currentGrade.find((item: any) => item.value == detail.currentGrade)
+        const cls: any = state.classList.find((item: any) => item.value == detail.currentClass)
+        const subjects: any = state.subjectList.find(
+          (item: any) => item.value == detail.registerSubjectId
+        )
+        forms.username = detail.username
+        forms.sex = detail.sex ? 1 : 0
+        forms.currentGrade = detail.currentGrade
+        forms.currentGradeTxt = grade ? grade.text : ''
+        forms.currentClass = detail.currentClass
+        forms.currentClassTxt = cls ? cls.text : ''
+        forms.registerSubjectId = detail.registerSubjectId
+        forms.registerSubjectTxt = subjects ? subjects.text : ''
+        forms.parentName = detail.parentName
+        forms.phone = detail.phone
+      } catch (e) {
+        //
+        console.log(e)
+      }
+    }
+
+    // 获取声部信息
+    const getSubjects = async () => {
+      try {
+        const subjects = await request.post(
+          '/api-student/open/orchestraSubjectConfig/pageByOrchestraId',
+          {
+            data: {
+              orchestraId: route.query.id,
+              page: 1,
+              rows: 100
+            }
+          }
+        )
+        const rows = subjects.data.rows || []
+        rows.forEach((item: any) => {
+          state.subjectList.push({
+            text: item.name,
+            value: item.subjectId
+          })
+        })
+      } catch {
+        //
+      }
+    }
+
     const validator = (val: any) => {
       // 校验函数返回 true 表示校验通过,false 表示不通过
       return state.nameReg.test(val) && val.length >= 2 && val.length <= 15
@@ -68,30 +152,97 @@ export default defineComponent({
 
     // 乐团报名
     const onSubmit = async () => {
-      // try {
-      //   const params: any = {
-      //     orchestraId: route.query.id,
-      //     schoolId: state.detail.schoolId,
-      //     ...forms
-      //   }
-      //   // 判断是否已报过名
-      //   if (state.detail.id) {
-      //     params.id = state.detail.id
-      //   }
-      //   await request.post('/api-student/orchestraRegister/save', {
-      //     hideLoading: false,
-      //     data: {
-      //       ...params,
-      //       code: props.code
-      //     }
+      try {
+        const params: any = {
+          orchestraId: route.query.id,
+          schoolId: state.detail.schoolId,
+          ...forms
+        }
+        // 判断是否已报过名
+        if (state.detail.id) {
+          params.id = state.detail.id
+        }
+        await request.post('/api-student/orchestraRegister/save', {
+          hideLoading: false,
+          data: {
+            ...params,
+            code: state.code
+          }
+        })
+      } catch {
+        //
+      }
+    }
+
+    const getRegisterStatus = async () => {
+      try {
+        const { data } = await request.get(
+          '/api-student/orchestraRegister/registerStatus/' + route.query.id
+        )
+        state.registerInfo = data || {}
+      } catch {
+        //
+      }
+    }
+
+    const getAppIdAndCode = async () => {
+      try {
+        const { data } = await request.get('/api-student/open/paramConfig/wechatAppId')
+        // 判断是否有微信appId
+        if (data) {
+          // goAuth(data)
+          goWechatAuth(data)
+        }
+      } catch {
+        //
+      }
+    }
+
+    onMounted(async () => {
+      // state.code = route.query.code || ''
+      // console.log('pre register code: ' + state.code)
+      await getSubjects()
+      await studentRegister()
+
+      // 判断是否有授权码
+      // if (!props.code) {
+      //   setLogout()
+      //   const query = {
+      //     returnUrl: route.path,
+      //     ...route.query
+      //   } as any
+      //   router.replace({
+      //     path: '/loginMusic',
+      //     query: query
       //   })
-      //   setTimeout(() => {
-      //     // showToast('报名成功')
-      //     emit('next', 'payment')
-      //   }, 100)
-      // } catch {
-      //   //
       // }
+    })
+
+    // 先请求接口 判断是否有code
+    if (state.testIsWeixin) {
+      getRegisterStatus()
+    } else {
+      if (browser().weixin) {
+        // 微信公众号支付
+        //授权
+        const code = getUrlCode()
+        if (!code) {
+          getAppIdAndCode()
+        } else {
+          state.code = code
+          getRegisterStatus()
+        }
+      } else {
+        setLogout()
+        const query = {
+          returnUrl: route.path,
+          ...route.query
+        } as any
+        router.replace({
+          path: '/loginMusic',
+          query: query
+        })
+      }
     }
     return () => (
       <div class={styles.goodsApply}>
@@ -103,8 +254,17 @@ export default defineComponent({
           </div>
           <img src={headPhone} class={styles.headPhone} />
         </div>
-        <Form validateFirst scrollToError onSubmit={onSubmit} ref="form" class={styles.form}>
-          <CellGroup class={styles.applyCellGroup}>
+        <Form
+          validateFirst
+          // showError
+          // showErrorMessage={false}
+          errorMessageAlign="right"
+          scrollToError
+          onSubmit={onSubmit}
+          ref="form"
+          class={styles.form}
+        >
+          <CellGroup class={styles.applyCellGroup} border={false}>
             <div class={[styles.title, styles.titleApply]}></div>
             <Field
               required
@@ -129,7 +289,8 @@ export default defineComponent({
                       type="primary"
                       class={[styles.radioSection, forms.sex === 1 ? styles.active : '']}
                     >
-                      <Radio class={styles.radioItem} name={1}></Radio>男生
+                      <Radio class={styles.radioItem} name={1}></Radio>
+                      男生
                     </Tag>
                     <Tag
                       size="large"
@@ -198,7 +359,7 @@ export default defineComponent({
             />
           </CellGroup>
 
-          <CellGroup class={styles.applyCellGroup}>
+          <CellGroup class={styles.applyCellGroup} border={false}>
             <div class={[styles.title, styles.titleParent]}></div>
             <Field
               required
@@ -221,23 +382,305 @@ export default defineComponent({
             />
           </CellGroup>
 
-          <CellGroup class={styles.applyCellGroup}>
+          <CellGroup class={styles.applyCellGroup} border={false}>
             <div class={[styles.title, styles.titleTips]}></div>
 
             <div class={styles.tipsContainer}>
-              <p class={styles.line}>开训前,家长需准备好①乐器②管乐AI学练工具,准备方式不限;</p>
               <p class={styles.line}>
+                <i class={[styles.num, styles.numOne]}></i>
+                开训前,家长需准备好①乐器②管乐AI学练工具,准备方式不限;
+              </p>
+              <p class={styles.line}>
+                <i class={[styles.num, styles.numTwo]}></i>
                 为了降低家长投入压力,可参与项目支持方提供的AI学练工具团购,政策如下:
                 <p class={[styles.child]}>
-                  1、支持方免费提供一支全新乐器供学生训练(可带回家) ;<br />
-                  2、乐器提供时间为一年,如期满继续训练,乐器将赠送至学生以作鼓励;
+                  1、支持方<span style="color: #F67146">免费</span>
+                  提供一支全新乐器供学生训练(可带回家) ;<br />
+                  2、乐器提供时间为一年,如期满继续训练,乐器将
+                  <span style="color: #F67146">赠送</span>至学生以作鼓励;
                   <br />
-                  3、如期间或期满不再训练,家长归还乐器即可,无需额外支付乐器费用。
+                  3、如期间或期满不再训练,家长归还乐器即可,
+                  <span style="color: #F67146">无需额外支付</span>乐器费用。
                 </p>
               </p>
             </div>
           </CellGroup>
+
+          <CellGroup class={styles.applyCellGroup} border={false}>
+            <div class={[styles.title, styles.titleTool]}></div>
+            <Field
+              required
+              label="请选择训练工具的准备方法:"
+              labelAlign="top"
+              rules={[{ required: true, message: '请选择训练工具的准备方法' }]}
+            >
+              {{
+                input: () => (
+                  <RadioGroup v-model={forms.groupBuyType} class={styles.toolRadioGroup}>
+                    <Tag
+                      size="large"
+                      type="primary"
+                      class={[
+                        styles.radioSectionTag,
+                        styles.radioSection,
+                        forms.groupBuyType === 'GROUP_BUY' ? styles.active : ''
+                      ]}
+                    >
+                      <Radio
+                        class={styles.radioItem}
+                        name={'GROUP_BUY'}
+                        // disabled={true}
+                        onClick={() => {
+                          // console.log(111)
+                        }}
+                      ></Radio>
+                      参与团购
+                    </Tag>
+                    <Tag
+                      size="large"
+                      type="primary"
+                      class={[
+                        styles.radioSectionTag,
+                        styles.radioSection,
+                        forms.groupBuyType === 'SELF' ? styles.active : ''
+                      ]}
+                    >
+                      <Radio class={styles.radioItem} name={'SELF'}></Radio>自行准备
+                    </Tag>
+                  </RadioGroup>
+                )
+              }}
+            </Field>
+          </CellGroup>
+
+          {forms.groupBuyType === 'GROUP_BUY' && (
+            <>
+              <CellGroup class={[styles.applyCellGroup, styles.groupBuy]} border={false}>
+                <Cell border={false}>
+                  {{
+                    icon: () => (
+                      <Image
+                        src={'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1696816717584.png'}
+                        class={styles.goodsImg}
+                      />
+                    ),
+                    value: () => (
+                      <div class={styles.goodsInfo}>
+                        <div class={styles.goodsTitle}>
+                          管乐AI学练工具 <img src={icon12} />
+                        </div>
+                        <p class={styles.goodsTips}>乐团首次训练之日起生效</p>
+                        <p class={[styles.goodsMemo, 'van-multi-ellipsis--l2']}>
+                          乐团云教材、课件,乐团声部、合奏、考级等
+                        </p>
+                        <div class={styles.goodsPrice}>
+                          <div class={styles.priceGroup}>
+                            团购价:
+                            <p>
+                              <span>¥</span> 2,900.00
+                            </p>
+                          </div>
+                          <div class={styles.priceOrigin}>原价: ¥2,900.00</div>
+                        </div>
+                      </div>
+                    )
+                  }}
+                </Cell>
+                <Cell border={false}>
+                  {{
+                    icon: () => (
+                      <Image
+                        src={'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1696816717584.png'}
+                        class={styles.goodsImg}
+                      />
+                    ),
+                    value: () => (
+                      <div class={styles.goodsInfo}>
+                        <div class={styles.goodsTitle}>
+                          管乐AI学练工具 <img src={iconFree} />
+                        </div>
+                        <p class={styles.goodsTips}>乐团首次训练之日起生效</p>
+                        <p class={[styles.goodsMemo, 'van-multi-ellipsis--l2']}>
+                          乐团云教材、课件,乐团声部、合奏、考级等
+                        </p>
+                        <div class={styles.goodsPrice}>
+                          <div class={styles.priceGroup}>
+                            团购价:
+                            <p>
+                              <span>¥</span> 2,900.00
+                            </p>
+                          </div>
+                          <div class={styles.priceOrigin}>原价: ¥2,900.00</div>
+                        </div>
+                      </div>
+                    )
+                  }}
+                </Cell>
+
+                <Cell>
+                  {{
+                    icon: () => <img src={iconBao} class={styles.iconBao} />,
+                    value: () => (
+                      <div class={styles.baoContainer}>
+                        <div class={styles.baoTitle}>下校检查乐器 1-2次/学期</div>
+                        <div class={styles.baoPrice}>
+                          <p>
+                            <span class={styles.prefix}>¥</span> 300.00
+                            <span class={styles.suffix}>/年</span>
+                          </p>
+                          <Checkbox></Checkbox>
+                        </div>
+                      </div>
+                    )
+                  }}
+                </Cell>
+              </CellGroup>
+              <OSticky position="bottom">
+                <div class={styles.paymentContainer}>
+                  <div class={styles.payemntPrice}>
+                    <p class={styles.needPrice}>
+                      总计:
+                      <span class={styles.numFont}>
+                        <span>¥ </span>
+
+                        {moneyFormat(10)}
+                      </span>
+                    </p>
+                  </div>
+                  <div class={styles.paymentBtn}>
+                    <Button
+                      color="linear-gradient(135deg, #FF8C4A 0%, #FF531C 100%)"
+                      round
+                      native-type="submit"
+                    >
+                      团购支付
+                    </Button>
+                  </div>
+                </div>
+              </OSticky>
+            </>
+          )}
+
+          {forms.groupBuyType === 'SELF' && (
+            <>
+              <CellGroup class={[styles.applyCellGroup, styles.self]} border={false}>
+                <div class={styles.toolImg}>
+                  <Image
+                    src={'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1696816717584.png'}
+                    onClick={() => {
+                      showImagePreview([
+                        'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1696816717584.png'
+                      ])
+                    }}
+                  />
+
+                  <div class={styles.toolImgOverflow}>
+                    <Button
+                      onClick={() => {
+                        showImagePreview([
+                          'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1696816717584.png'
+                        ])
+                      }}
+                    >
+                      点击查看《乐团训练工具标准配置表》
+                    </Button>
+                    <img src={iconHead} class={styles.iconHead} />
+                  </div>
+                </div>
+                <Field
+                  required
+                  label="您计划配置的乐器品牌"
+                  labelAlign="top"
+                  border={false}
+                  placeholder="请填写您计划配置的乐器品牌"
+                  v-model={forms.parentName}
+                  maxlength={30}
+                  class={styles.toolInput}
+                  rules={[{ required: true, message: '请填写您计划配置的乐器品牌' }]}
+                />
+                <Field
+                  required
+                  label="您计划配置的AI学练工具品牌"
+                  labelAlign="top"
+                  border={false}
+                  class={styles.toolInput}
+                  placeholder="请填写您计划配置的AI学练工具品牌"
+                  v-model={forms.phone}
+                  maxlength={30}
+                  rules={[{ required: true, message: '请填写您计划配置的AI学练工具品牌' }]}
+                />
+              </CellGroup>
+
+              <div class={'btnGroup'} style={{ paddingTop: '30px' }}>
+                <Button
+                  type="primary"
+                  color="linear-gradient(135deg, #FF8C4A 0%, #FF531C 100%)"
+                  round
+                  block
+                  native-type="submit"
+                >
+                  提交
+                </Button>
+              </div>
+            </>
+          )}
         </Form>
+
+        {/* 年级 */}
+        <Popup
+          v-model:show={state.gradeStatus}
+          position="bottom"
+          round
+          safeAreaInsetBottom
+          // duration={0}
+          lazyRender={false}
+          class={'popupBottomSearch'}
+        >
+          <Picker
+            showToolbar
+            columns={state.currentGrade}
+            onCancel={() => (state.gradeStatus = false)}
+            onConfirm={(val: any) => {
+              const selectedOption = val.selectedOptions[0]
+              forms.currentGrade = selectedOption.value
+              forms.currentGradeTxt = selectedOption.text
+              state.gradeStatus = false
+            }}
+          />
+        </Popup>
+        {/* 班级 */}
+        <Popup v-model:show={state.classStatus} position="bottom" round class={'popupBottomSearch'}>
+          <Picker
+            showToolbar
+            columns={state.classList}
+            onCancel={() => (state.classStatus = false)}
+            onConfirm={(val: any) => {
+              const selectedOption = val.selectedOptions[0]
+              forms.currentClass = selectedOption.value
+              forms.currentClassTxt = selectedOption.text
+              state.classStatus = false
+            }}
+          />
+        </Popup>
+        {/* 声部 */}
+        <Popup
+          v-model:show={state.subjectStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
+          <Picker
+            showToolbar
+            columns={state.subjectList}
+            onCancel={() => (state.subjectStatus = false)}
+            onConfirm={(val: any) => {
+              const selectedOption = val.selectedOptions[0]
+              forms.registerSubjectId = selectedOption.value
+              forms.registerSubjectTxt = selectedOption.text
+              state.subjectStatus = false
+            }}
+          />
+        </Popup>
       </div>
     )
   }