|  | @@ -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>
 | 
	
		
			
				|  |  |      )
 | 
	
		
			
				|  |  |    }
 |