orchestra-app/src/student/music-group/pre-goods-apply/index.tsx

import { defineComponent, nextTick, 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 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 iconCheckbox from './images/icon-checkbox-ring.png'
import iconCheckboxActive from './images/icon-checkbox-active.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, removeAuth } from '@/helpers/utils'
import request from '@/helpers/request'
import { useRoute, useRouter } from 'vue-router'
import { goWechatAuth, setLogout } from '@/state'
import ODialog from '@/components/o-dialog'
import InspectModal from './modal/inspect-modal'
import qs from 'query-string'

// 乐团交付，乐团停止或关闭，有新的交付团；则不允许报名
const classList: any = []
for (let i = 1; i <= 40; i++) {
  classList.push({ text: i + '班', value: i })
}

export default defineComponent({
  name: 'pre-goods-apply',
  setup() {
    const route = useRoute()
    const router = useRouter()

    // 获取是否已经看过训练工具图片
    const readToolImg = localStorage.getItem('read-tool-image')
    const state = reactive({
      code: '' as any, // 微信授权code码
      detail: {} as any, // 学员详情
      toolImgStatus: readToolImg ? true : false,
      currentGrade: [
        { text: '一年级', value: 1 },
        { text: '二年级', value: 2 },
        { text: '三年级', value: 3 },
        { text: '四年级', value: 4 },
        { text: '五年级', value: 5 },
        { text: '六年级', value: 6 },
        { text: '七年级', value: 7 },
        { text: '八年级', value: 8 },
        { text: '九年级', value: 9 }
      ], // 年级数组列表
      classList: classList,
      subjectList: [] as any, // 入选声部列表
      instrumentsInspectionDescribe: '', // 配置信息
      inspectPopupStatus: false, // 查看说明
      gradeStatus: false,
      classStatus: false,
      subjectStatus: false,
      registerInfo: {} as any, // 乐团信息
      goodsInfo: {} as any, // 商品
      textBookInfo: {} as any, // 教材
      inspectInfo: {} as any, // 乐器检查
      vipYearInfo: {} as any, // 学练工具
      inspectStatus: true,
      // 是否开启微信登录（测试使用）默认为false
      testIsWeixin: false,
      details: [] as any, //
      pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
      nameReg: /^[\u4E00-\u9FA5]+$/,
      paymentType: '',
      musicPaymentType: '', // 乐团中对应支付方式
      studentReadStatus: false, // 学生在读
      dialogStatus: false,
      dialogMessage: '',
      dialogOrchestraStatus: false, // 是否为不同的乐团
      dialogConfig: {} as any,
      orderInfo: {
        needPrice: 0,
        originalPrice: 0
      },
      submitStatus: false
    })
    const forms = reactive({
      username: null,
      sex: null as any,
      currentGrade: null,
      currentGradeTxt: null, // 年级编号
      currentClass: '', // 班级
      currentClassTxt: null, // 年级编号
      registerSubjectId: '',
      registerSubjectTxt: null, // 所在入选声部
      parentName: null,
      groupBuyType: '' as any,
      phone: null as any,
      learningTools: null,
      instrumentsBrand: null
    })

    const otherParams = reactive({
      toolPlan: {
        title: '', // 训练工具准备
        groupTitle: '', // 团购标题
        groupDesc: '', // 团购文案
        selfTitle: '', // 自备标题
        selfDesc: '' // 自备文案
      },
      leBao: {
        // 乐器保障
        show: 1, // 是否显示
        selected: 1 // 是否选择
      }
    })

    // 获取乐团报名信息
    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 = subjects ? subjects.value : '' // detail.registerSubjectId
        forms.registerSubjectTxt = subjects ? subjects.text : ''
        forms.parentName = detail.parentName
        forms.phone = detail.phone
        forms.instrumentsBrand = detail.instrumentsBrand
        forms.learningTools = detail.learningTools

        if (detail.registerSubjectId && detail.registerSubjectId !== 999) {
          // 更新商品信息
          await registerGoods()
        }
        forms.groupBuyType = detail.groupBuyType
      } 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
    }
    const message = (value: any) => {
      if (!value) {
        return '请填写学员真实姓名'
      } else if (!state.nameReg.test(value)) {
        return '学员姓名必须为中文'
      } else if (value.length < 2 || value.length > 15) {
        return '学员姓名必须为2~15个字'
      } else {
        return ''
      }
    }

    const onRegisterUser = 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: state.code
          }
        })

        if (forms.groupBuyType === 'SELF') {
          router.push({
            path: '/preGoodsSuccess'
          })
        }
      } catch (e: any) {
        //
        return Promise.reject(e)
      }
    }

    // 乐团报名
    const onSubmit = async () => {
      try {
        if (forms.groupBuyType === 'SELF') {
          state.submitStatus = true
          return
        }

        // 判断是否购买乐器
        // 乐器报名前先注册用户
        await onRegisterUser()
        // 重新计算金额
        calcPrice()
        const params: any = [] // 支付参数

        // 教材
        const textBookInfo = state.textBookInfo
        params.push({
          goodsId: textBookInfo.goodsId,
          goodsNum: 1,
          goodsType: textBookInfo.goodsType,
          paymentCashAmount: textBookInfo.currentPrice, // 现金支付金额
          paymentCouponAmount: 0 // 优惠券金额
        })

        // 商品
        const goodsInfo = state.goodsInfo
        params.push({
          goodsId: goodsInfo.goodsId,
          goodsNum: 1,
          goodsType: goodsInfo.goodsType,
          paymentCashAmount: goodsInfo.currentPrice, // 现金支付金额
          paymentCouponAmount: 0 // 优惠券金额
        })

        // 检查
        if (state.inspectStatus) {
          const inspectInfo = state.inspectInfo
          params.push({
            goodsId: inspectInfo.goodsId,
            goodsNum: 1,
            goodsType: inspectInfo.goodsType,
            paymentCashAmount: inspectInfo.currentPrice, // 现金支付金额
            paymentCouponAmount: 0 // 优惠券金额
          })
        }

        // 学练工具
        const vipYear = state.vipYearInfo
        params.push({
          goodsId: vipYear.goodsId,
          goodsNum: 1,
          goodsType: vipYear.goodsType,
          paymentCashAmount: vipYear.currentPrice, // 现金支付金额
          paymentCouponAmount: 0 // 优惠券金额
        })

        // 创建订单
        const { data } = await request.post('/api-student/userPaymentOrder/executeOrder', {
          hideLoading: false,
          data: {
            paymentType: state.musicPaymentType || state.paymentType,
            bizId: route.query.id, // 乐团编号
            orderType: 'ORCHESTRA',
            paymentCashAmount: state.orderInfo.needPrice || 0,
            paymentCouponAmount: 0,
            goodsInfos: params,
            orderName: '乐团报名缴费',
            orderDesc: '乐团报名缴费'
          }
        })

        console.log(data)
        router.push({
          path: '/orderDetail',
          query: {
            pm: 1, // h5乐团报名
            config: JSON.stringify({ ...data.paymentConfig, paymentType: data.paymentType }),
            orderNo: data.orderNo
          }
        })
      } catch {
        //
      }
    }

    const getRegisterStatus = async () => {
      try {
        const { data } = await request.get(
          '/api-student/orchestraRegister/registerStatus/' + route.query.id
        )
        state.registerInfo = data || {}

        const trainingToolsConfig = data.trainingToolsConfig
          ? JSON.parse(data.trainingToolsConfig)
          : {}
        otherParams.toolPlan = trainingToolsConfig
        const musicalInstrumentConfig = data.musicalInstrumentConfig
          ? JSON.parse(data.musicalInstrumentConfig)
          : {}
        otherParams.leBao = musicalInstrumentConfig
        // 默认根据设置显示
        state.inspectStatus = musicalInstrumentConfig.selected ? true : false
        // 判断学生是否在读
        if (data.learningOrchestra?.length) {
          state.studentReadStatus = true
        }
      } catch {
        //
      }
    }

    const getAppIdAndCode = async () => {
      try {
        const { data } = await request.get('/api-student/open/paramConfig/wechatAppId')
        // 判断是否有微信appId
        if (data) {
          // goAuth(data)
          goWechatAuth(data)
        }
      } catch {
        //
      }
    }

    // 查询未支付订单
    const paymentOrderUnpaid = async () => {
      try {
        const { data } = await request.get('/api-student/userPaymentOrder/unpaid', {
          params: {
            orchestraId: route.query.id
          }
        })
        // 判断是否有待支付订单
        if (data.id) {
          if (data.orchestraId !== route.query.id) {
            state.dialogMessage = '您在其它乐团存在待支付订单，取消后才可继续报名，是否确认取消？'
            state.dialogStatus = true
            state.dialogOrchestraStatus = true
            state.dialogConfig = data
          } else {
            state.dialogMessage = '您有待支付的订单，是否继续支付'
            state.dialogStatus = true
            state.dialogConfig = data
          }
        }
      } catch {
        //
      }
    }

    // 获取支付渠道
    const sysParamConfig = async () => {
      try {
        const { data } = await request.get('/api-student/sysParamConfig/queryByParamName', {
          params: {
            paramName: 'payment_service_provider'
          }
        })
        state.paymentType = data.paramValue || ''
      } catch {
        //
      }
    }

    // 获取商品信息
    const registerGoods = async () => {
      try {
        const { data } = await request.get(
          '/api-student/orchestraRegister/registerGoods/' + route.query.id,
          {
            params: {
              subjectId: forms.registerSubjectId
            }
          }
        )

        state.musicPaymentType = data.paymentServiceProvider || ''
        // 初始化数据商品数据
        const details = data.details || []
        details.forEach((item: any) => {
          if (item.goodsType === 'INSTRUMENTS') {
            const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : ''
            state.goodsInfo = { ...item, goodsUrl: img }
            state.instrumentsInspectionDescribe = item.instrumentsInspectionDescribe
          } else if (item.goodsType === 'TEXTBOOK') {
            const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : ''
            state.textBookInfo = { ...item, goodsUrl: img }
          } else if (item.goodsType === 'INSTRUMENT_INSPECT') {
            state.inspectInfo = { ...item }
          } else if (item.goodsType === 'VIP_YEAR') {
            state.vipYearInfo = { ...item }
          }
          state.details = details
        })

        calcPrice()
      } catch {
        //
      }
    }

    // 初始化金额

    const calcPrice = () => {
      // const details = state.details
      const tempPrice = {
        needPrice: 0, //需要支付金额
        originalPrice: 0 // 原价
      }
      // 商品
      tempPrice.needPrice += parseFloat(state.goodsInfo.currentPrice || 0)
      tempPrice.originalPrice += parseFloat(state.goodsInfo.originalPrice || 0)
      // 学练工具
      tempPrice.needPrice += parseFloat(state.vipYearInfo.currentPrice || 0)
      tempPrice.originalPrice += parseFloat(state.vipYearInfo.originalPrice || 0)
      // 教材
      tempPrice.needPrice += parseFloat(state.textBookInfo.currentPrice || 0)
      tempPrice.originalPrice += parseFloat(state.textBookInfo.originalPrice || 0)

      // 检查乐器
      if (state.inspectStatus) {
        tempPrice.needPrice += parseFloat(state.inspectInfo.currentPrice || 0)
        tempPrice.originalPrice += parseFloat(state.inspectInfo.originalPrice || 0)
      }
      state.orderInfo = tempPrice
    }

    const onLoutout = () => {
      setLogout()
      removeAuth()
      const query = {
        returnUrl: route.path,
        ...route.query
      } as any

      window.location.href =
        window.location.origin + window.location.pathname + '#/loginMusic?' + qs.stringify(query)

      // router.replace({
      //   path: '/loginMusic',
      //   query: query
      // })
    }

    onMounted(async () => {
      // state.code = route.query.code || ''
      // console.log('pre register code: ' + state.code)
      await getSubjects()
      await studentRegister()

      sysParamConfig()
      // 查询未支付订单
      // registerGoods()
      paymentOrderUnpaid()

      // 判断是否有授权码
      // if (!props.code) {
      //   setLogout()
      //   const query = {
      //     returnUrl: route.path,
      //     ...route.query
      //   } as any
      //   router.replace({
      //     path: '/loginMusic',
      //     query: query
      //   })
      // }
    })

    // 先请求接口 判断是否有code
    if (state.testIsWeixin) {
      getRegisterStatus()
    } else {
      if (browser().weixin) {
        // 微信公众号支付
        //授权
        const code = getUrlCode()
        if (!code) {
          getAppIdAndCode()
        } else {
          state.code = code
          getRegisterStatus()
        }
      } else {
        onLoutout()
      }
    }

    return () => (
      <div class={styles.goodsApply}>
        <img src={headBg} class={styles.headBg} />
        <div class={styles.goodsHeader}>
          <div class={styles.orchestraTitle}>
            <img class={styles.headTitle} src={headTitle} />
            <p class={[styles.name, 'van-multi-ellipsis--l3']}>
              {state.registerInfo.orchestraName}
            </p>
          </div>
          <img src={headPhone} class={styles.headPhone} />
        </div>
        <Form
          validateFirst
          errorMessageAlign="right"
          scrollToError={true}
          onSubmit={onSubmit}
          onFailed={(e: any) => {
            // 获取第一个校验错误的元素
            nextTick(() => {
              const isError = document.getElementsByClassName('van-field__error-message')
              // 滚动到错误元素对应位置
              isError[0]?.scrollIntoView({
                block: 'center',
                behavior: 'smooth'
              })
            })
          }}
          ref="form"
          class={styles.form}
        >
          <CellGroup class={styles.applyCellGroup} border={false}>
            <div class={[styles.title, styles.titleApply]}></div>
            <Field
              required
              label="学员信息"
              placeholder="请填写学员真实姓名"
              inputAlign="right"
              v-model={forms.username}
              maxlength={15}
              rules={[{ validator, message }]}
            />
            <Field
              required
              label="性别"
              inputAlign="right"
              rules={[{ required: true, message: '请选择性别' }]}
            >
              {{
                input: () => (
                  <RadioGroup v-model={forms.sex}>
                    <Tag
                      size="large"
                      type="primary"
                      class={[styles.radioSection, forms.sex === 1 ? styles.active : '']}
                    >
                      <Radio class={styles.radioItem} name={1}></Radio>
                      男生
                    </Tag>
                    <Tag
                      size="large"
                      type="primary"
                      class={[styles.radioSection, forms.sex === 0 ? styles.active : '']}
                    >
                      <Radio class={styles.radioItem} name={0}></Radio>女生
                    </Tag>
                  </RadioGroup>
                )
              }}
            </Field>
            <Field
              required
              label="年级"
              inputAlign="right"
              readonly
              isLink
              clickable={false}
              placeholder="请选择年级"
              v-model={forms.currentGradeTxt}
              onClick={() => (state.gradeStatus = true)}
              rules={[{ required: true, message: '请选择年级' }]}
            />
            <Field
              required
              label="班级"
              inputAlign="right"
              readonly
              isLink
              clickable={false}
              placeholder="请选择班级"
              v-model={forms.currentClassTxt}
              onClick={() => (state.classStatus = true)}
              rules={[{ required: true, message: '请选择班级' }]}
            />
            <Field
              required
              label="入选声部"
              inputAlign="right"
              readonly
              isLink
              clickable={false}
              placeholder="请选择入选声部"
              v-model={forms.registerSubjectTxt}
              onClick={() => {
                if (state.subjectList.length <= 0) {
                  showToast('暂无报名入选声部')
                  return
                }
                state.subjectStatus = true
              }}
              rules={[{ required: true, message: '请选择入选声部' }]}
            />
          </CellGroup>

          <CellGroup class={styles.applyCellGroup} border={false}>
            <div class={[styles.title, styles.titleParent]}></div>
            <Field
              required
              label="家长姓名"
              inputAlign="right"
              placeholder="请填写家长真实姓名"
              v-model={forms.parentName}
              maxlength={15}
              rules={[{ required: true, message: '请填写家长真实姓名' }]}
            />
            <Field
              required
              label="手机号"
              inputAlign="right"
              placeholder="请输入手机号"
              v-model={forms.phone}
              maxlength={11}
              type="tel"
              rules={[{ pattern: state.pattern, message: '输入监护人手机号码有误' }]}
            />
          </CellGroup>

          <CellGroup class={styles.applyCellGroup} border={false}>
            <div class={[styles.title, styles.titleTips]}></div>

            <div class={styles.tipsContainer} v-html={state.registerInfo.joinNotice}>
              {/* <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、支持方<span style="color: #F67146">免费</span>
                  提供一支全新乐器供学生训练(可带回家) ;<br />
                  2、乐器提供时间为一年，如期满继续训练，乐器将
                  <span style="color: #F67146">赠送</span>至学生以作鼓励；
                  <br />
                  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={otherParams.toolPlan.title}
              labelAlign="top"
              rules={[{ required: true, message: otherParams.toolPlan.title }]}
            >
              {{
                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={forms.registerSubjectId ? false : true}
                        onClick={() => {
                          if (!forms.registerSubjectId) {
                            showToast('请选择入选声部')
                            return
                          }
                        }}
                      ></Radio>
                      {otherParams.toolPlan.groupTitle}
                      <p class={styles.radioTip}>{otherParams.toolPlan.groupDesc}</p>
                    </Tag>
                    <Tag
                      size="large"
                      type="primary"
                      class={[
                        styles.radioSectionTag,
                        styles.radioSection,
                        forms.groupBuyType === 'SELF' ? styles.active : ''
                      ]}
                    >
                      <Radio class={styles.radioItem} name={'SELF'}></Radio>
                      {otherParams.toolPlan.selfTitle}
                      <p class={styles.radioTip}>{otherParams.toolPlan.selfDesc}</p>
                    </Tag>
                  </RadioGroup>
                )
              }}
            </Field>
          </CellGroup>

          {forms.groupBuyType === 'GROUP_BUY' && (
            <>
              <CellGroup class={[styles.applyCellGroup, styles.groupBuy]} border={false}>
                <div class={[styles.title, styles.titleIntrumentTool]}></div>
                <Cell border={false}>
                  {{
                    icon: () => <Image src={state.vipYearInfo.goodsUrl} class={styles.goodsImg} />,
                    value: () => (
                      <div class={styles.vipYearInfo}>
                        <div class={styles.goodsTitle}>
                          {state.vipYearInfo.goodsName} <img src={icon12} />
                        </div>
                        <p class={styles.goodsTips}>乐团首次训练之日起生效</p>
                        <p class={[styles.goodsMemo, 'van-multi-ellipsis--l2']}>
                          {state.vipYearInfo.description}
                        </p>
                        <div class={styles.goodsPrice}>
                          <div class={styles.priceGroup}>
                            团购价:
                            <p>
                              <span>¥</span> {moneyFormat(state.vipYearInfo.currentPrice)}
                            </p>
                          </div>
                          {/* <del class={styles.priceOrigin}>
                            原价: ¥{moneyFormat(state.vipYearInfo.originalPrice)}
                          </del> */}
                        </div>
                      </div>
                    )
                  }}
                </Cell>
                <Cell border={false}>
                  {{
                    icon: () => <Image src={state.goodsInfo.goodsUrl} class={styles.goodsImg} />,
                    value: () => (
                      <div class={styles.goodsInfo}>
                        <div class={styles.goodsTitle}>
                          {state.goodsInfo.goodsName}
                          {state.goodsInfo.currentPrice <= 0 ? <img src={iconFree} /> : ''}
                        </div>
                        <p class={[styles.goodsMemo, 'van-multi-ellipsis--l2']}>
                          {state.goodsInfo.description}
                        </p>
                        <div class={styles.goodsPrice}>
                          <div class={styles.priceGroup}>
                            团购价:
                            <p>
                              {state.goodsInfo.currentPrice <= 0 ? (
                                <del>
                                  <span>¥</span> {moneyFormat(state.goodsInfo.groupPrice)}
                                </del>
                              ) : (
                                <>
                                  <span>¥</span> {moneyFormat(state.goodsInfo.currentPrice)}
                                </>
                              )}
                            </p>
                          </div>
                          {/* {state.goodsInfo.currentPrice > 0 ? (
                            <>
                              <div class={styles.priceGroup}>
                                团购价:
                                <p>
                                  <span>¥</span> {moneyFormat(state.goodsInfo.currentPrice)}
                                </p>
                              </div>
                              <div class={styles.priceOrigin}>
                                原价: ¥{moneyFormat(state.goodsInfo.originalPrice)}
                              </div>
                            </>
                          ) : (
                            <>
                              <div class={styles.priceGroup}>
                                原价:
                                <p>
                                  <span>¥</span>{' '}
                                  <del>{moneyFormat(state.goodsInfo.originalPrice)}</del>
                                </p>
                              </div>
                            </>
                          )} */}
                        </div>
                      </div>
                    )
                  }}
                </Cell>

                {otherParams.leBao.show ? (
                  <Cell
                    class={styles.inspectCell}
                    style={{ backgroundColor: state.inspectStatus ? '#FFF3EA' : '#f4f4f4' }}
                  >
                    {{
                      icon: () => (
                        <img
                          src={iconBao}
                          class={styles.iconBao}
                          onClick={() => {
                            if (state.instrumentsInspectionDescribe) state.inspectPopupStatus = true
                          }}
                        />
                      ),
                      value: () => (
                        <div class={styles.baoContainer}>
                          <div
                            class={styles.baoTitle}
                            onClick={() => {
                              if (state.instrumentsInspectionDescribe)
                                state.inspectPopupStatus = true
                            }}
                          >
                            下校检查乐器 1-2次/学期
                          </div>
                          <div class={styles.baoPrice}>
                            <p
                              onClick={() => {
                                state.inspectStatus = !state.inspectStatus
                                calcPrice()
                              }}
                            >
                              <span class={styles.prefix}>¥</span> {state.inspectInfo.currentPrice}
                              <span class={styles.suffix}>/年</span>
                            </p>
                            <Checkbox
                              v-model={state.inspectStatus}
                              onClick={() => {
                                calcPrice()
                              }}
                            >
                              {{
                                icon: (props: any) => (
                                  <img
                                    class={styles.checkboxImg}
                                    src={props.checked ? iconCheckboxActive : iconCheckbox}
                                  />
                                )
                              }}
                            </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(state.orderInfo.needPrice)}
                      </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}
                  onClick={() => {
                    showImagePreview([state.registerInfo?.instrumentPriceImg])
                    localStorage.setItem('read-tool-image', '1')
                    state.toolImgStatus = true
                  }}
                >
                  <Image src={state.registerInfo?.instrumentPriceImg} />

                  {!state.toolImgStatus && (
                    <div class={styles.toolImgOverflow}>
                      <Button>点击查看《乐团训练工具标准配置表》</Button>
                      <img src={iconHead} class={styles.iconHead} />
                    </div>
                  )}
                </div>
                <Field
                  required
                  label="您计划配置的乐器品牌"
                  labelAlign="top"
                  border={false}
                  placeholder="请填写您计划配置的乐器品牌"
                  v-model={forms.instrumentsBrand}
                  maxlength={20}
                  class={styles.toolInput}
                  rules={[{ required: true, message: '请填写您计划配置的乐器品牌' }]}
                />
                <Field
                  style="padding-top: 0;"
                  required
                  label="您计划配置的AI学练工具品牌"
                  labelAlign="top"
                  border={false}
                  class={styles.toolInput}
                  placeholder="请填写您计划配置的AI学练工具品牌"
                  v-model={forms.learningTools}
                  maxlength={20}
                  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={async (val: any) => {
              const selectedOption = val.selectedOptions[0]
              forms.registerSubjectId = selectedOption.value
              forms.registerSubjectTxt = selectedOption.text
              state.subjectStatus = false

              // 更新商品信息
              await registerGoods()
            }}
          />
        </Popup>

        {/* 入选声部 */}
        <Popup v-model:show={state.inspectPopupStatus} round closeable class={styles.inspectPopup}>
          <InspectModal describe={state.instrumentsInspectionDescribe} />
        </Popup>

        {/* 确认信息 */}
        <ODialog
          title="确认信息"
          v-model:show={state.submitStatus}
          message={
            '<p style="text-align: left;">请确认您准备的乐器和AI学练工具符合<span style="color: #F67146;font-weight: bold;">《乐团训练工具标准配置表》</span></p>'
          }
          class={styles.dialogSubmit}
          allowHtml
          confirmButtonText="返回"
          cancelButtonText="确认"
          showCancelButton
          onConfirm={() => {
            state.submitStatus = false
          }}
          onCancel={async () => {
            onRegisterUser()
          }}
        />
        {/* 学生在读 */}
        <ODialog
          title="提示"
          v-model:show={state.studentReadStatus}
          message={'您已在其他乐团在读，请退团再报名该乐团。'}
          confirmButtonText="确认"
          showCancelButton={false}
          onConfirm={() => {
            // state.submitStatus = false
            onLoutout()
          }}
        />

        <ODialog
          title="提示"
          v-model:show={state.dialogStatus}
          message={state.dialogMessage}
          confirmButtonText={state.dialogOrchestraStatus ? '确认取消' : '继续支付'}
          cancelButtonText="取消订单"
          showCancelButton={!state.dialogOrchestraStatus}
          messageAlign={state.dialogOrchestraStatus ? 'left' : 'center'}
          onConfirm={async () => {
            if (state.dialogOrchestraStatus) {
              try {
                await request.post(
                  '/api-student/userPaymentOrder/cancelPayment/' + state.dialogConfig.orderNo
                )
              } catch {
                //
              }
            } else {
              const paymentConfig = state.dialogConfig.paymentConfig
              router.push({
                path: '/orderDetail',
                query: {
                  pm: 1, // h5乐团报名
                  config: JSON.stringify({
                    ...paymentConfig.paymentConfig,
                    paymentType: paymentConfig.paymentType
                  }),
                  orderNo: paymentConfig.orderNo
                }
              })
            }
          }}
          onCancel={async () => {
            try {
              await request.post(
                '/api-student/userPaymentOrder/cancelPayment/' + state.dialogConfig.orderNo
              )
            } catch {
              //
            }
          }}
        />
      </div>
    )
  }
})