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

import { defineComponent, onMounted, reactive, ref, nextTick } from 'vue'
import { Image, Popup, showDialog, Sticky, Tab, Tabs } from 'vant'
import styles from './index.module.less'
// import { useRect } from '@vant/use'
import Apply from './component/apply'
import Payment from './component/payment'
import Order from './component/order'
import { useRoute, useRouter } from 'vue-router'

import { setLogout } from '@/state'
import request from '@/helpers/request'
import { browser, getUrlCode } from '@/helpers/utils'

export default defineComponent({
  name: 'pre-apply',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const bannerRef = ref()
    const state = reactive({
      tabValue: 'apply',
      heightV: 235,
      registerInfo: {} as any,
      purchase: false, // 购买状态
      register: true, // 是否注册
      // showPopup: false,
      code: '' as any
    })

    const onNext = async (name: string) => {
      if (name === 'payment') {
        await getRegisterStatus()
      }

      nextTick(() => {
        state.tabValue = name
      })
    }

    const getRegisterStatus = async () => {
      try {
        const { data } = await request.get(
          '/api-student/orchestraRegister/registerStatus/' + route.query.id
        )
        state.registerInfo = data || {}
        const name = data.orchestraName
        // const name = '华中科技大学大学同济医学院附'
        // console.log(name.length)
        if (name.length > 12 && name.length / 12 > 1 && name.length / 12 <= 2) {
          const len = name.substring(12, 24)
          if (len.length < 5) {
            const splitLen = Math.ceil(name.length / 2)
            const first = name.substring(0, splitLen)
            const last = name.substring(splitLen, name.length)
            state.registerInfo.orchestraName = first + '<br />' + last
          } else {
            state.registerInfo.orchestraName = name
          }
        }

        // 判断是否报名注册过
        state.register = data.register
        if (data.register) {
          nextTick(() => {
            state.tabValue = 'payment'
          })
        }

        // 	购买状态, 判断是否已经购买完了
        if (data.purchase) {
          state.purchase = data.purchase
          nextTick(() => {
            state.tabValue = 'order'
          })
        }

        // INITIATION_SURVEY: '启蒙调查',
        // PRE_REGISTER: '预报名',
        // REGISTER: '乐团报名',
        // DOING: '乐团交付',
        // DONE: '已交付'
        // CLOSE: '已交付'
        // 判断乐团报名，只有 乐团报名 乐团交付 已交付才可以报名
        const oStatus = data.status // 乐团状态
        if (oStatus !== 'REGISTER' && oStatus !== 'DOING' && oStatus !== 'DONE') {
          showDialog({
            title: '提示',
            message: '乐团建设中，请稍等'
          }).then(() => {
            setLogout()

            const query = {
              returnUrl: route.path,
              ...route.query
            } as any
            router.replace({
              path: '/loginMusic',
              query: query
            })
          })
          return
        }

        // 判断乐团
        if (data.registerOrchestra >= 1) {
          showDialog({
            title: '提示',
            message: '您已在其它乐团'
          }).then(() => {
            setLogout()
            const query = {
              returnUrl: route.path,
              ...route.query
            } as any
            router.replace({
              path: '/loginMusic',
              query: query
            })
          })
          return
        }

        // 判断是否有openId 并且 purchase
        if (!data.openId && !data.purchase) {
          if (browser().weixin) {
            // 微信公众号支付
            //授权
            const code = getUrlCode()
            if (!code) {
              goAuth(data.wxAppId)
            } else {
              state.code = code
            }
          }
        }
      } catch {
        //
      }
    }

    const getRegisterInfo = async (val: string) => {
      // 重新查询状态
      if (val === 'apply') {
        try {
          const { data } = await request.get(
            '/api-student/orchestraRegister/registerStatus/' + route.query.id
          )
          state.registerInfo = data || {}
        } catch {
          //
        }
      }
    }

    const goAuth = (wxAppId: string) => {
      // 用户授权
      const urlNow = encodeURIComponent(window.location.href)
      const scope = 'snsapi_base' //snsapi_userinfo   //静默授权 用户无感知
      const appid = wxAppId || 'wx8654c671631cfade'
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=STATE&connect_redirect=1#wechat_redirect`
      window.location.replace(url)
    }

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

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

    // onMounted(() => {
    // state.code = route.query.code || ''
    // const { height } = useRect(bannerRef.value)
    // state.heightV = height
    // 判断是否是微信，只能微信中打开
    // if (browser().weixin) {
    //   // 微信公众号支付
    //   //授权
    //   const code = getUrlCode()
    //   if (!code || !state.code) {
    //     getAppIdAndCode()
    //   } else {
    //     state.code = code
    //   }
    // }
    // })
    return () => (
      <div class={styles.preApply}>
        <div class={styles.banner} ref={bannerRef}>
          {state.registerInfo.orchestraName && (
            <>
              <p class={styles.orchestraName} v-html={state.registerInfo.orchestraName}></p>

              <div class={styles.tips}>快来参加乐团报名吧!</div>
            </>
          )}
        </div>

        <Sticky position="top">
          <Tabs
            lineWidth={20}
            lineHeight={4}
            v-model:active={state.tabValue}
            onChange={(val: any) => getRegisterInfo(val)}
          >
            <Tab title="报名信息" name="apply" disabled={state.purchase}></Tab>
            <Tab title="缴费信息" name="payment" disabled={state.purchase || !state.register}></Tab>
            <Tab title="我的订单" name="order" disabled={!state.register}></Tab>
          </Tabs>
        </Sticky>

        {state.tabValue === 'apply' && (
          <Apply
            onNext={onNext}
            code={state.code}
            registerInfo={state.registerInfo}
            schoolSystem={state.registerInfo.schoolSystem}
          />
        )}
        {state.tabValue === 'payment' && <Payment onNext={onNext} />}
        {state.tabValue === 'order' && <Order onNext={onNext} />}

        {/* <Popup
          v-model:show={state.showPopup}
          round
          style={{ width: '92%' }}
          closeOnClickOverlay={false}
        >
          <div class={styles.popupContainer}>
            <div class={styles.dialogTitle}>
              <i></i>
              提示
            </div>

            <p class={styles.popupTips}>请使用微信打开</p>
          </div>
        </Popup> */}
      </div>
    )
  }
})