login-oversea-popup-plugin v0.0.3

oversea-front-account-component 海外账号web端通用登录组件，适配PC、平板、移动H5

account-popup-plugin integrated public dependency

#需要支持两种方式：CDN、NPM(暂时不支持,考虑到海外并不一定是用vue)

1.CDN

引入CDN链接：

测试环境：https://login-oversea.account.tcljd.com/login-oversea-popup-plugin.umd.js
线上环境：暂未申请

初始化配置：

初始化
  window.addEventListener("load", function () {
    window.LOGIN_POPUP_CONFIG = { // 调用方全局参数配置
      getSuccess: function (data = {}, type) { //成功回调

      },
      countryCode: 'DE', // 国家/地区简码  支持重点地区： 巴西 BR 印度 IN  印尼 ID  越南 VN 菲律宾PH 泰国TH   测试环境 TESTIN TESTSG
      clientId: 28612656, // clientId 账号分配给业务侧的clientId
      supportMobile: true, // 展示手机号选项 boolean true 支持 false不支持 默认支持手机号地区： 厄瓜多尔EC、香港HK、美国US、玻利维亚BO、阿根廷AR、智利CL、缅甸MM、新加坡SG、印尼ID、泰国TH、沙特SA、菲律宾PH、巴基斯坦PK、越南VN、印度IN
      language: 'de', // 语言配置 pt en id vi en th
      env: "", // 不配置默认线上环境，测试环境 TESTIN TESTSG
    }
    window.createLoginComponent('init', {})
  })

use

  调用
   window.createLoginComponent()

2.NPM(还没有做)

Install

1. NPM installation

npm config set register=https://tone.tcl.com/pkg/devops/npm/npm/snapshot/
npm install login-oversea-popup-plugin@0.0.1 --register=https://tone.tcl.com/pkg/devops/npm/npm/snapshot/

How to use

引入css import 'login-popup-plugin/login-plugin.css'

以组件形式引入

<login-module
    v-model="loginShow"
    @success="getSuccess"
    :countryCode="countryCode
    :language="language"
    :showModel="showModel"
    :showTab="showTab"
/>
loginShow: 弹窗显隐
getSuccess: 成功回调
countryCode: 国家缩写编码(大写), 例: IN(印度)
language: 语言(小写), 例: en(英语)
showModel: 页面模式, 有 login,creat,forgot,bind属性, 默认login
showTab：激活标签页, 0 普通登录 1 快速登录, 默认0
getThirdLoginUserCache: 判断第三方返回信息后，设置用户信息缓存成功后返回true

根据platformId判断第三方登录方式

平台ID为15-苹果。 6-谷歌。4-facebook。

引用之前需设置countryCode(设置接口请求用)

接口请求地址根据
window.LOGIN_POPUP_CONFIG.countryCode值 或者 localStorage的country_code值设置
所以需
懒加载方式引入组件
然后引入组件的页面created生命周期设置
或
在全局路由拦截的时候设置

登录弹窗组件有两个方法

getThirdLoginStatus 第三方登录后，根据当前链接获取用户信息
setUserCacheFn 设置用户信息到localStorage

上传npm需要在package.json里面添加 // "main": "dist/login-plugin.umd.min.js", 跟scripts同级