dvcp_v2_wxcp_app/src/pages/login.vue

<template>
  <section class="login">
    <div v-if="appPath" class="gotoApp">
      <b v-text="appPath"/>
      <div>正在登录...</div>
    </div>
    <u-form :model="form" ref="loginForm" label-width="140" :rules="rules">
      <u-form-item label="账号" prop="username">
        <input v-model="form.username" placeholder="请输入手机号"/>
      </u-form-item>
      <u-form-item label="密码" prop="password">
        <input type="password" v-model="form.password" placeholder="请输入密码" @confirm="handleLogin"/>
      </u-form-item>
    </u-form>
    <div class="btn" @tap="handleLogin">登录</div>
  </section>
</template>

<script>
import {mapActions, mapMutations, mapState} from "vuex";

export default {
  name: "login",
  computed: {
    ...mapState(['apps']),
    rules() {
      return {
        username: [{required: true, message: "请输入 手机号"}],
        password: [{required: true, message: "请输入 密码"}],
      }
    },
    target() {
      return decodeURIComponent(this.$route.query.back) || ""
    },
    currentApp() {
      let path = this.target.replace(/(.+)[\\\/][^\\\/]+\??.*/, '$1')
      return this.apps.find(e => e.libPath.indexOf(path) > -1) || {}
    },
    appPath() {
      return this.currentApp?.label || ""
    }
  },
  data() {
    return {
      form: {}
    }
  },
  methods: {
    ...mapActions(['getToken', 'getAccount', 'getCode']),
    ...mapMutations(['login', 'logout', 'setModule']),
    handleLogin() {
      this.$refs.loginForm.validate(v => {
        if (v) {
          this.getSystem().then(({module, corpId}) => this.handleSignIn({...this.form, module, corpId}))
        }
      })
    },
    handleLogout() {
      this.$http.delete("/auth/token/logout").finally(() => this.logout())
    },
    handleSignIn(params) {
      return this.getToken(params).then(() => {
        if (module != 'AppCountryAlbum') {
          this.getAccount({module})
        }
        this.target ? uni.reLaunch({url: this.target}) : uni.navigateBack({})
      }).catch(() => 0)
    },
    getSystem() {
      let {name: module, libPath} = this.currentApp,
          corpId = 'ww596787bb70f08288'
      if (/\/project\/police\//.test(libPath)) {
        module = 'hnjc'
      } else if (/\/project\/saas\//.test(libPath)) {
        module = 'online'
      } else if (/\/project\/xincheng\//.test(libPath)) {
        module = 'xaxc'
      } else if (/\/project\/qianxinan\//.test(libPath)) {
        module = 'qxn'
      } else if (/\/project\/beta\//.test(libPath)) {
        corpId = 'ww2a667717a70164f1'
        module = 'wangge'
      }
      this.setModule(module)
      return Promise.resolve({corpId, module})
    }
  },
  onShow() {
    if (/wxwork/.test(navigator.userAgent)) {
      //在企微端
      if (this.$route.query.code) {
        const {code} = this.$route.query
        this.handleSignIn({code})
      } else {
        this.getSystem().then(() => this.getCode().catch(err => {
          this.err = err
        }))
      }
    } else {
      this.handleLogout()
    }
  },
  mounted() {
    this.$refs.loginForm.setRules(this.rules)
  }
}
</script>

<style lang="scss" scoped>
.login {
  border-top: 1px solid #D4D4D4;
  padding: 0 0 208px;
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;

  .btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    background: $uni-color-primary;
    color: #fff;
    text-align: center;
    line-height: 96px;
    font-size: 32px;
  }

  .gotoApp {
    background: #fff;
    text-align: center;
    padding: 32px;

    b {
      display: block;
      font-size: 40px;
      margin-bottom: 8px;
    }
  }

}
</style>