cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import { login, menuData } from "@/api/user/login";
import router from "@/router/index";
import { useLoginStore } from "@/pinia/login";
import { reactive, ref, getCurrentInstance, onMounted } from "vue";
import axios from "axios";
import load from "@/components/Tinymce/settings/load";
import { WarningFilled } from "@element-plus/icons-vue";
import type { ElForm } from "element-plus";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
interface Login {
  userName: string;
  password: string;
}
/**
 * 登录表单数据
 */
const loginForm: Login = reactive({
  userName: "",
  password: "",
});

let loading = ref(false);
let errorMsg = reactive({
  text: "手机号或密码错误",
  show: false,
});
let menu = reactive({
  data: [],
});
/**
 * 登录框上面标题
 */
const title = ref(import.meta.env.VITE_APP_TITLE).value;
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
/**
 * 表单提交
 */
const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  loading.value = true;
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      login(loginForm)
        .then((res) => {
          if (res?.data) {
            globalProperties.$message.success("登录成功");
            // 登录成功返回的参数含义，到pinia/modules/login.ts中查看
            // store.family.loginStore().setUserInfo(res?.data?.data);
            useLoginStore()?.setUserInfo(res?.data?.data);
            errorMsg.show = false;
            getMenu().then((res) => {
              setTimeout(() => {
                router.push({ path: "/" });
              }, 1000);
            });
          }
        })
        .catch((error) => {
          console.log(error);
          errorMsg.show = true;
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      loading.value = false;
      console.log("error");
    }
  });
};
/**
 * 获取权限菜单
 */
const getMenu = async () => {
  try {
    let res = await menuData();
    useLoginStore()?.setMenuList(res?.data?.data);
  } catch (e) {
    console.log(e);
  }
};
/**
 * 下拉菜单点击响应
 */
const handleCommand = (data: any) => {
  if (data) {
    location.href = data;
  } else {
    router.push({ path: "/" });
  }
};
onMounted(() => {
  window.localStorage.setItem("isCnlive", true);
  fetch("http://systk.cnlive.com/ocms/.content/function_provider/menu.json", {
    method: "get",
  })
    .then((data) => data.json())
    .then((res) => {
      menu.data = res?.menu;
    });
});
</script>

<template>
  <div class="cnlive">
    <div class="cnlive-nav">
      <nav class="gtco-nav clearfix" role="navigation">
        <div class="wrap">
          <div id="gtco-logo">
            <a href="http://cnlive.com/">
              <img
                src="https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/logo.png"
                alt=""
              />
            </a>
          </div>

          <div class="cnlive-list">
            <template v-for="(item, index) in menu.data" :key="index">
              <el-dropdown 
                v-if="item.children.length"
                @command="handleCommand"
              >
                <span>
                  {{ item.title }}
                  <el-icon class="el-icon--right"> </el-icon>
                </span>
                <template #dropdown v-if="item.children.length">
                  <el-dropdown-menu v-if="item.children.length">
                    <el-dropdown-item
                      v-for="(ele, i) in item.children"
                      :key="i"
                      :command="ele.url"
                      >{{ ele.title }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <span class="cnlive-single-menu" v-else><a :href="item.url? item.url: '/'">{{item.title}}</a></span>
            </template>
          </div>

          <div class="cnlive-download">
            <a href="http://systk.cnlive.com/download.html">下载网家家APP</a>
          </div>
        </div>
      </nav>
    </div>

    <div class="cnlive-main">
      <div class="cnlive-main-board">
        <div class="cnlive-main-board-form">
          <div class="cnlive-main-board-form-title">
            <h3>数字社区平台</h3>
          </div>
          <div class="cnlive-main-board-form-input">
            <el-form
              :inline="true"
              :model="loginForm"
              ref="ruleFormRef"
              auto-complete="on"
              label-position="left"
              label-width="120px"
            >
              <el-row>
                <el-form-item prop="userName" style="width: 358px">
                  <el-input
                    v-model.trim="loginForm.userName"
                    placeholder="请输入手机号"
                    maxlength="11"
                    :validate-event="false"
                    tabindex="1"
                    type="text"
                    auto-complete="off"
                    clearable
                    class="cnlive-main-board-form-input-item cnlive-phone"
                  />
                </el-form-item>
              </el-row>
              <el-form-item prop="password" style="width: 358px">
                <el-input
                  v-model.trim="loginForm.password"
                  placeholder="请输入密码"
                  :validate-event="false"
                  maxlength="15"
                  tabindex="2"
                  :show-password="true"
                  clearable
                  type="password"
                  auto-complete="off"
                  @keyup.enter.native="submitForm(ruleFormRef)"
                  class="cnlive-main-board-form-input-item cnlive-password"
                >
                </el-input>
                <div class="cnlive-error">
                  <WarningFilled v-show="errorMsg.show" />
                  <span class="cnlive-error-text" v-show="errorMsg.show">
                    {{ errorMsg.text }}</span
                  >
                </div>
              </el-form-item>
              <el-form-item style="width: 358px">
                <el-button
                  type="primary"
                  @click.prevent="submitForm(ruleFormRef)"
                  style="width: 100%"
                  :loading="loading"
                  :disabled="!loginForm.password || !loginForm.userName"
                  class="cnlive-main-board-form-input-item cnlive-submit"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="cnlive-main-board-img">
          <img
            src="https://wjjtest.ys2.cnliveimg.com/802/img_new/1650874065176.png"
          />
        </div>
      </div>
    </div>

    <div class="cnlive-footer">
      <p>
        网家家APP、Cnlive.com 《信息网络传播视听节目许可证》、许可证号：0105123
      </p>
      <p>京ICP证090477号、京ICP备11041453号-1、京公网安备11010802024488号、联系电话：010-65832485</p>
    </div>
  </div>
</template>

<style lang="scss">
.cnlive {
  background-color: #f6f7f9;
  &-nav {
    .gtco-nav {
      top: 0;
      margin: 0;
      width: 100%;
      padding: 20px 0;
      z-index: 1001;
      position: initial;
      height: 106px;
      background-color: #feffff;
      .wrap {
        width: 1346px;
        margin: 0 auto;
        #gtco-logo {
          width: 200px;
          display: flex;
          flex-direction: row;
          align-items: center;
          float: left;
          font-size: 20px;
          margin: 0;
          padding: 0;
          text-transform: uppercase;
        }
        .cnlive-list {
          float: left;
          margin-top: 20px;
          font-weight: 800;
          .el-dropdown {
            margin-left: 60px;
            font-size: 20px;
            color: #333333;
            line-height: 33px;
          }
        }
        .cnlive-download {
          width: 170px;
          height: 46px;
          margin-top: 10px;
          text-align: center;
          font-size: 18px;
          padding: 0;
          color: white;
          line-height: 46px;
          background-color: #f5a623;
          border-radius: 24px;
          float: right;
        }
      }
    }
  }
  &-main {
    margin-top: 100px;
    &-board {
      margin: 0 auto;
      height: 688px;
      width: 1346px;
      display: flex;
      background-color: white;
      box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
      &-form {
        width: 658px;
        padding-left: 151px;
        &-title {
          h3 {
            padding-bottom: 45px;
            margin-top: 190px;
            line-height: 42px;
            font-weight: 600;
            color: #333333;
            font-size: 30px;
            text-align: left;
          }
        }
        &-input {
          &-item {
            border-radius: 24px;
            .el-input__inner {
              border-radius: 24px;
              border-color: #d8d8d8;
              &:focus {
                border-color: #17b794;
              }
            }
          }
        }
      }
      &-img {
        width: 688px;
      }
    }
  }
  &-footer {
    padding-bottom: 50px;
    padding-top: 50px;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    color: #666666;
    font-weight: 400;
  }
}
.cnlive-submit {
  background-color: #1352d3;
}
.cnlive-single-menu {
  margin-left: 60px;
  font-size: 20px;
  line-height: 33px;
  color: #333333;
  cursor: pointer;
}
.cnlive-error {
  color: #ff3834;
  font-size: 16px;
  margin-top: 10px;
  line-height: 22px;
  padding-left: 8px;
  position: relative;
  &-text {
    margin-left: 28px;
  }
  svg {
    width: 20px;
    height: 20px;
    position: absolute;
  }
}
.clearfix {
  zoom: 1;
}
.text-left {
  text-align: left;
}
</style>