Install

# 安装登录 core sdk
npm install --save @tripmini/vehicle-login-core
# 安装登录 UI组件库 (npm版本<7)
npm install --save @tripmini/vehicle-login-ui
# 安装登录 UI组件库 (npm版本>=7)
npm install --legacy-peer-deps --save @tripmini/vehicle-login-ui

Usage

初始化 @tripmini/vehicle-login-core 基础能力

import { init } from '@tripmini/vehicle-login-core'

const param = {
  unAppId: '', // 统一登录服务下发的appid。必传
  tcbEnv: '', // tcb 环境id。必传
  wxOpenAppId: '', // 微信开放平台appid。必传
  redirectUri: '', // 登录回调url。非必传
  qrStyle: '' // 二维码的样式。非必传
}
// 初始化sdk
init(param)

全局加载

import VehicleLoginUi from '@tripmini/vehicle-login-ui'
import '@tripmini/vehicle-login-ui/lib/styles/vehicle-login-ui.css'

Vue.use(VehicleLoginUi)

按需引用

方式1：手动加载js和css

import SocialSignin from '@tripmini/vehicle-login-ui/lib/social-signin'
import '@tripmini/vehicle-login-ui/lib/styles/social-signin.css'

Vue.component('vh-signin', SocialSignin)

方式2：通过 babel-plugin-component 自动转换

npm install --save-dev babel-plugin-component

Configure your .babelrc file like this

{
    "plugins": [
        ["component", {
            "libraryName": "@tripmini/vehicle-login-ui",
            "libDir": "lib",
            "styleLibrary": {
                "name": "styles",
                "base": false, // no base.css file
                "path": "[module].css"
            }
        }]
    ]
}

The you can import component on demand, and you don't need to care about importing styles, the babel plugin will do it automaticly.

import Vue from 'vue'
import { SocialSignin } from '@tripmini/vehicle-login-ui'

Vue.component('vh-signin', SocialSignin)

组件使用

<template>
  <div class="root">
    <vh-signin :platform="platform" @login-event="loginEvent" />
  </div>
</template>

<script>
export default {
  name: 'Login',
  components: { },
  data() {
    return {
      platform: 1 // 选中的第三方登录平台 0企微 1 微信。默认1
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    loginEvent(e) {
      console.log('loginEvent :>> ', e)
      const { data } = e
      this.$store.dispatch('user/login', data)
        .then(() => {
          console.log('user/login success:>> ')
          this.$router.push({ path: '/' })
        })
        .catch((e) => {
          console.log('user/login error:>> ', e)
        })
    }
  }
}
</script>