orchestra-app/src/student/music-group/layout/login.tsx

import { defineComponent } from 'vue'
import {
  CellGroup,
  Field,
  Button,
  CountDown,
  Row,
  Col,
  showToast,
  Popup,
  showDialog,
  closeToast
} from 'vant'
import ImgCode from '@/components/o-img-code'
import { checkPhone } from '@/helpers/validate'
import { goWechatAuth, setLogin, state } from '@/state'
import { removeAuth, setAuth } from './utils'
import styles from './index.module.less'
import request from '@/helpers/request'
import { browser, getUrlCode } from '@/helpers/utils'
import qs from 'query-string'

type loginType = 'PWD' | 'SMS'
export default defineComponent({
  name: 'login-music',
  data() {
    return {
      loginType: 'SMS' as loginType,
      username: '',
      password: '',
      smsCode: '',
      countDownStatus: true, // 是否发送验证码
      countDownTime: 1000 * 120, // 倒计时时间
      // countDownRef: null as any, // 倒计时实例
      imgCodeStatus: false,
      showPopup: false,
      showPopupMessage: '请使用微信打开',
      wxAppId: '', //
      code: '', // 授权code码
      orchestraPath: 'preApply' as any,
      orchestraInfo: {} as any,
      hasBuyInstruments: false, // 是否购买商品
      // 是否开启微信登录（测试使用）默认为false
      testIsWeixin: false,
      noPaymentList: [
        '1656572729093021697',
        '1656488025144713217',
        '1661221287237820418',
        '1661222465069686785'
      ]
    }
  },
  computed: {
    codeDisable() {
      let status = true
      this.username && this.smsCode && (status = false)
      return status
    }
  },
  mounted() {
    const { returnUrl } = this.$route.query
    this.orchestraPath = returnUrl

    removeAuth()
    this.directNext()

    // 判断是否是微信，只能微信中打开
    if (!browser().weixin && !this.testIsWeixin) {
      this.showPopup = true
    }

    if (this.$route.query.id && this.noPaymentList.indexOf(this.$route.query.id as string) != -1) {
      console.log('提示乐团报名失败')
      // 提示乐团报名失败
      this.showPopupMessage = '乐团报名时间已过，请等待通知'
      this.showPopup = true
    }

    this.getDetails()

    console.log(this.$route.query.returnUrl)
  },
  methods: {
    async getDetails() {
      try {
        const id = this.$route.query.id
        if (!id) return
        const { data } = await request.get(
          '/api-student/open/orchestra/detail/' + this.$route.query.id
        )
        this.orchestraInfo = data || {}

        if (!data.canSignUp) {
          this.showPopup = true
          this.showPopupMessage = '学校已关闭'
        }
      } catch {
        //
      }
    },
    async getAppIdAndCode(url?: string) {
      try {
        const { data } = await request.get('/api-student/open/paramConfig/wechatAppId')
        // 判断是否有微信appId
        if (data) {
          closeToast()

          goWechatAuth(data, url)
          // this.goAuth(data, url)
        }
      } catch {
        //
      }
    },
    // goAuth(wxAppId: string, urlString?: string) {
    //   // 用户授权
    //   console.log(urlString || window.location.href, 'urlString || window.location.href')
    //   const urlNow = encodeURIComponent(urlString || window.location.href)
    //   console.log(urlNow, 'urlNow')
    //   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)
    // },
    async directNext() {
      if (state.user.status === 'login' || state.user.status === 'error') {
        const { returnUrl, isRegister, ...rest } = this.$route.query

        let newUrl =
          window.location.origin +
          window.location.pathname +
          '#' +
          returnUrl +
          '?' +
          qs.stringify({
            ...rest
          })
        // 判断是否购买的商品 - 只在商品购买乐团
        if (this.hasBuyInstruments) {
          newUrl = window.location.origin + window.location.pathname + '#/preGoodsSuccess?t=pay'
          window.location.href = newUrl
          return
        }
        if (this.testIsWeixin) {
          // 直接跳转到授权页面
          this.locationReplace(newUrl)
        } else {
          await this.getAppIdAndCode(newUrl)
        }
      }
    },
    locationReplace(url: any) {
      // 只允许同域名
      console.log(history.replaceState, 'window.history.replaceState', url)
      if (history.replaceState) {
        history.replaceState(null, document.title, url)
        history.go(0)
      } else {
        location.replace(url)
      }
    },
    async onLogin() {
      try {
        if (!this.orchestraInfo.canSignUp) {
          this.showPopup = true
          this.showPopupMessage = '学校已关闭'
          return
        }

        // let res: any
        const forms: any = {
          username: this.username,
          client_id: 'jmedu-student',
          client_secret: 'jmedu-student',
          autoRegister: true,
          password: this.smsCode,
          loginType: 'SMS',
          grant_type: 'password',
          extra: this.$route.query.id
        }

        const { data } = await request.post('/api-oauth/userlogin', {
          requestType: 'form',
          data: {
            ...forms
          }
        })

        setAuth(data.token_type + ' ' + data.access_token)

        const userCash = await request.get('/api-student/user/getUserInfo', {
          initRequest: true // 初始化接口
        })
        setLogin(userCash.data)

        // 判断是否是商品报名 - 先要判断是否已经购买商品
        const { returnUrl, id } = this.$route.query
        if (returnUrl === '/preGoodsApply') {
          const registerInfo = await request.get(
            '/api-student/orchestraRegister/registerStatus/' + id
          )
          this.hasBuyInstruments = registerInfo.data.hasBuyInstruments || false
        }

        this.directNext()
      } catch {
        //
      }
    },
    async onSendCode() {
      // 发送验证码
      if (!checkPhone(this.username)) {
        return showToast('请输入正确的手机号码')
      }
      this.imgCodeStatus = true
    },
    onCodeSend() {
      this.countDownStatus = false
      this.$nextTick(() => {
        ;(this.$refs.countDownRef as any).start()
      })
    },
    onFinished() {
      this.countDownStatus = true
      ;(this.$refs.countDownRef as any).reset()
    },
    onChange() {
      if (this.loginType === 'PWD') {
        this.loginType = 'SMS'
      } else if (this.loginType === 'SMS') {
        this.loginType = 'PWD'
      }
    }
  },
  render() {
    return (
      <div class={styles.login}>
        <div class={styles.loginTitle}>
          {this.orchestraPath === '/preGoodsApply' ? (
            '乐团报名'
          ) : (
            <>
              您好，
              <br /> 欢迎使用管乐团学员端{' '}
            </>
          )}
        </div>
        <CellGroup class={styles.margin34} border={false}>
          <Row style={{ marginBottom: '16px' }}>
            <Col span={24} class={styles.formTitle}>
              手机号
            </Col>
            <Col span={24} class="van-hairline--bottom">
              <Field
                v-model={this.username}
                name="手机号"
                placeholder="请输入您的手机号"
                type="tel"
                maxlength={11}
              />
            </Col>
          </Row>

          <Row>
            <Col span={24} class={styles.formTitle}>
              验证码
            </Col>
            <Col span={24} class="van-hairline--bottom">
              <Field
                v-model={this.smsCode}
                name="验证码"
                placeholder="请输入验证码"
                type="tel"
                maxlength={6}
                v-slots={{
                  button: () =>
                    this.countDownStatus ? (
                      <span class={styles.codeText} onClick={this.onSendCode}>
                        获取验证码
                      </span>
                    ) : (
                      <CountDown
                        ref="countDownRef"
                        auto-start={false}
                        time={this.countDownTime}
                        onFinish={this.onFinished}
                        format="ss秒"
                      />
                    )
                }}
              />
            </Col>
          </Row>
        </CellGroup>
        <div class={styles.margin34}>
          <Button round block type="primary" disabled={this.codeDisable} onClick={this.onLogin}>
            提交
          </Button>
        </div>

        {this.imgCodeStatus ? (
          <ImgCode
            v-model:value={this.imgCodeStatus}
            phone={this.username}
            type="REGISTER"
            onClose={() => {
              this.imgCodeStatus = false
            }}
            onSendCode={this.onCodeSend}
          />
        ) : null}

        <Popup
          v-model:show={this.showPopup}
          round
          style={{ width: '88%' }}
          closeOnClickOverlay={false}
          class={styles.wxPopupDialog}
        >
          <div class={styles.popupContainer}>
            <p class={styles.title}>温馨提示</p>
            <p class={styles.popupTips} v-html={this.showPopupMessage}></p>
          </div>
        </Popup>
      </div>
    )
  }
})