activity/src/view/authorization/index.vue

<template>
  <div class="authorization">
    <div class="leftCol">
      <header>
        <img
          class="logoimg"
          src="https://media.sxtvs.net/images/sx_logo.svg"
          alt="logo"
        />
      </header>
      <div class="body">
        <div class="content">
          <p class="title">新型全媒体平台授权登录</p>
          <p class="subtitle">
            立足“三端”“四体”“四化”的发展思路，打造技术先进、特色突出、用户众多、自主可控的新型全媒体平台，提升主流媒体的内容生产能力、信息聚合能力和技术引领能力。
          </p>
          <img
            class="contentImg"
            src="https://home.sxtvs.net/v1/file/download?bucketName=user-app-icon&name=60f0633bc3bb11ecb0cdb1feb69f2116-secondary_background_photo%402x.jpeg"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="rightCol">
      <div class="model">
        <div class="header">账号登录</div>
        <el-form ref="formRef" size="large" :model="form" label-width="0">
          <el-form-item
            prop="name"
            :rules="[{ required: true, message: '请输入用户名' }]"
          >
            <el-input v-model="form.name" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item
            prop="pwd"
            :rules="[{ required: true, message: '请输入密码' }]"
          >
            <el-input
              v-model="form.pwd"
              show-password
              placeholder="请输入密码"
              type="password"
            />
          </el-form-item>
        </el-form>
        <el-form-item>
          <el-button
            size="large"
            style="width: 100%; display: block"
            @click="submitForm(formRef)"
            type="primary"
            >登 录</el-button
          >
        </el-form-item>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { ElForm, ElFormItem, ElInput, ElButton } from "element-plus";
import "element-plus/theme-chalk/base.css";
import "element-plus/theme-chalk/el-form.css";
import "element-plus/theme-chalk/el-form-item.css";
import "element-plus/theme-chalk/el-input.css";
import "element-plus/theme-chalk/el-button.css";
import { loginIdass } from "@/api/authorization.js";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
const formRef = ref();
console.log(window.$originData);
const form = reactive({
  name: "",
  pwd: "",
});
onMounted(() => {});
const submitForm = formEl => {
  if (!formEl) return;
  formEl.validate(valid => {
    if (!valid) return false;
    loginIdass({
      username: form.name,
      password: form.pwd,
    }).then(res => {
      let url = window.$originData.urlParames.auth_url || "";
      if(url !== "") url += "?code=" + res.code + "&enterprise_id=" + res.enterprise_id
      location.href = url;
    });
  });
};
</script>
<style lang="scss">
.authorization {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-weight: 400;
  color: #545b66;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  .leftCol,
  .rightCol {
    display: inline-block;
    height: 100%;
    vertical-align: top;
  }
  .leftCol {
    width: 60vw;
    background-color: #dde3f3;
    header {
      width: 100%;
      height: 56px;
      line-height: 56px;
      overflow: hidden;
      .logoimg {
        width: 89px;
        height: 28px;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
      }
      .text {
        vertical-align: middle;
        display: inline-block;
        color: #000000;
        font-weight: 600;
        font-size: 18px;
      }
    }
    .body {
      font-size: 14px;
      width: 100%;
      height: calc(100% - 56px);
      text-align: center;
      position: relative;
      .content {
        max-width: 420px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .title {
          font-size: 28px;
          color: #000000;
          margin-bottom: 1em;
        }
        .subtitle {
          line-height: 3em;
        }
        .contentImg {
          width: 100%;
        }
      }
    }
  }
  .rightCol {
    width: 40vw;
    position: relative;
    .model {
      padding: 0 3em;
      width: 100%;
      max-width: 720px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .header {
        font-size: 18px;
        font-weight: 600;
        height: 2em;
        line-height: 2em;
      }
    }
  }
}
</style>