ct-login

登录组件使用手册

本仓库为青塔B端系统通用登录页组件，仅支持Vue3项目安装，对Vue2项目不做兼容。

使用步骤

安装

# NPM安装
npm install ct-login

注册

安装插件时必须将系统的baseDao文件作为配置项以实现axios请求。

import { createApp } from 'vue';
import CtLogin from "ct-login";
import baseDao from "@/service/BaseDao";

const app = createApp(App);
app.use(Ctlogin,{baseDao});
app.mount("#app");

具体使用

<template>
  <ct-login-page v-bind="loginConfig"
    @info="infoUser">
    <template #footer>
      <div class="contact-info">
        没有账号？<span class="can-click"
          @click="goTrial">申请试用</span>
      </div>
    </template>
  </ct-login-page>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const loginConfig = ref({
  bgObj: {
    color: "#4D64FF",
    imgUrl: new URL('./assets/img/login_image.png', import.meta.url).href,
    width: "800px"
  },
  titleObj: {
    logoUrl: "https://static.cingta.com/Front/first-class-sub/common/icon_login_logo.svg",
    hasDivider: true,
    headline: ["全景云", "发展数据云平台"]
  },
  showSwitch: true,
  wxConfig: {
    redirect_uri: encodeURIComponent("https://ud.cingta.com/wscan-test/ud"),
  },
  loginConfig: {
    loginApi: "/users/mylogin/",
    loginCb: testCb
  },
  bindConfig: {
    bindApi: "/wscan-test/bind-user/",
    bindCb: testCb
  },
  needVerify: true,
  codeUrl: 'https://ctpublish.oss-cn-hangzhou.aliyuncs.com/hdi_static/yangxue.png',
  cookieConfig: {
    name: 'ct-login-token',
    expires: 1
  }
});

const goTrial = () => {
  window.open("https://info.cingta.com/#/applyForm?id=43&from=platform", "_blank");
};
function testCb() {
  console.log("testCb");
};
const infoUser = (data) => {
  const { message, type } = data;
  ElMessage({ message: message, type: type, duration: 3000, });
};
</script>

<style scoped lang="less">
.contact-info {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F1F4F9;
  color: #8F99A3;
  font-size: 13px;

  .can-click {
    cursor: pointer;
    color: var(--ct-color-primary);

    &:hover {
      text-decoration: underline;
    }
  }
}
</style>

属性 Attributes

事件 Events

插槽 Slots