usky-web-mobile/src/pages/login.vue

<template>
  <view id="login-container" class="login-container">
    <image class="bgImage" :src="useStore.$state.loginBg" v-if="useStore.$state.loginBg" />

    <view class="middle">
      <view class="middle-top">
        <image class="logo" mode="heightFix" :src="useStore.$state.loginLogo" v-if="useStore.$state.loginLogo" />
        <text class="title" :style="{ color: useStore.$state.loginBg ? '#FFFFFF' : '#000000' }" v-if="useStore.$state.loginTitle">{{ useStore.$state.loginTitle }}</text>
      </view>

      <view class="middle-content">
        <text class="title" :style="{ color: useStore.$state.loginBg ? '#FFFFFF' : '#000000' }">请登录</text>

        <!-- #ifdef APP-PLUS || MP-WEIXIN -->
        <view class="prompt" v-if="!linkUrl">首次账号登录请先配置服务器</view>
        <view class="setting" @tap="goSeverConfig"> 配置服务器 </view>
        <!--#endif-->
      </view>

      <view class="middle-input" v-if="switchText == '账号密码登录'">
        <u-input v-model="phone" prefixIcon="phone" placeholder="请输入手机号" />

        <u-input v-model="verify" prefixIcon="email" placeholder="请输入验证码" :maxlength="6">
          <template #suffix>
            <button class="verify" @click="getVerifyCode">{{ !useStore.codeTime ? "获取验证码" : useStore.codeTime + "s" }}</button>
          </template>
        </u-input>
      </view>

      <view class="middle-input" v-if="switchText == '验证码登录'">
        <u-input type="text" v-model="username" prefixIcon="account" placeholder="请输入账号" />

        <u-input v-model="password" prefixIcon="lock" placeholder="请输入密码" :password="inputIconBool">
          <template #suffix>
            <text :class="!inputIconBool ? 'iconfont ucicon-eye' : 'iconfont ucicon-eye-close'" @click="inputIconBool = !inputIconBool"></text>
          </template>
        </u-input>
      </view>

      <button class="middle-submit" @click="submitRes">登 录</button>

      <view class="middle-switch">
        <text class="switch-loginMethod" @click="switchMode(1)">{{ switchText }}</text>
        <div style="margin: auto"></div>
        <text class="switch-register" @click="switchMode(2)">注册账号</text>
      </view>

      <!-- #ifdef APP-PLUS || MP-WEIXIN -->
      <view class="middle-agreed text-center">
        <u-checkbox-group v-model="userChecked">
          <u-checkbox :name="true" shape="circle" inactiveColor="#0081ff" size="13"></u-checkbox>
        </u-checkbox-group>
        <text>登录即已代表阅读并同意</text>
        <!-- <text>我已阅读并同意</text> -->
        <text @click="handleUserAgrement" class="text-blue">用户协议</text>
        <text>和</text>
        <text @click="handlePrivacy" class="text-blue">隐私协议</text>
      </view>
      <!--#endif-->
    </view>

    <view class="bottom">
      <div class="title">{{ useStore.$state.loginBottomTitle }}</div>
    </view>
  </view>
</template>

<script setup>
import config from "@/config";
import { onLoad, onShow, onHide, onLaunch, onReady } from "@dcloudio/uni-app";
import { reactive, getCurrentInstance, toRefs, inject } from "vue";
import { publicStores, useStores } from "@/store/modules/index";

const useStore = useStores();
const publicStore = publicStores();

const { proxy } = getCurrentInstance();

const data = reactive({
  /** login数据 */
  phone: undefined,
  verify: undefined,
  switchText: "验证码登录",
  username: undefined,
  password: undefined,
  inputIconBool: true,
  /** 服务器配置数据 */
  linkUrl: uni.getStorageSync("serveUrl"),
  /** 用户隐私协议数据 */
  userChecked: [true],
});

const { phone, verify, switchText, username, password, inputIconBool, linkUrl, userChecked } = toRefs(data);

/**
 * @跳转服务器配置
 */
function goSeverConfig() {
  proxy.$tab.navigateTo("/pages/serveConfigSelect");
}

/**
 * @登录方式切换
 */
function switchMode(value) {
  if (value == 1) {
    switchText.value == "验证码登录" ? (switchText.value = "账号密码登录") : (switchText.value = "验证码登录");
  } else if (value == 2) {
    proxy.$tab.navigateTo("/pages/register");
  }
}

/**
 * @点击发送验证码
 */
function getVerifyCode() {
  //#ifdef APP-PLUS || MP-WEIXIN
  if (!uni.getStorageSync("serveUrl")) {
    proxy.$modal.msg("首次账号登录请先配置服务器");
    return;
  }
  //#endif

  verify.value = undefined;
  useStore.GetCodeImg({
    phone: phone.value,
    success: (res) => {
      proxy.$modal.msgSuccess("发送成功");
    },
  });
}

/**
 * @初始化
 */
function init() {
  useStore.SetInterval("codeTime"); //调用倒计时定时器
  useStore.SET_LOGINMOBILELIST({
    loginTitle: "",
    loginBottomTitle: "",
    loginBg: "",
    loginLogo: "",
    tenantId: "",
  });

  //#ifdef H5
  if (window.location.host) {
    linkUrl.value = window.location.host;
    // linkUrl.value = "172.16.120.165:13200";
    // linkUrl.value = "localhost:81";

    useStore.GetMobileTenantConfig({ url: linkUrl.value });
  }
  //#endif

  //#ifdef APP-PLUS || MP-WEIXIN
  if (uni.getStorageSync("serveUrl")) {
    linkUrl.value = uni.getStorageSync("serveUrl");
    useStore.GetMobileTenantConfig({ url: linkUrl.value });
  } else {
    uni.setStorageSync("serveUrl", "manager.usky.cn");
    publicStore.setServeList("manager.usky.cn", "");
    linkUrl.value = uni.getStorageSync("serveUrl");
    useStore.GetMobileTenantConfig({ url: linkUrl.value });
  }
  //#endif
}

/** 点击提交按钮 */
function submitRes() {
  //#ifdef APP-PLUS || MP-WEIXIN
  if (!uni.getStorageSync("serveUrl")) {
    proxy.$modal.msg("首次登录请先进行服务器配置");
    return;
  }

  if (!userChecked.value[0]) {
    proxy.$modal.msg("请在阅读并同意 用户协议和隐私协议后登录");
    return;
  }
  //#endif

  if (switchText.value == "账号密码登录") {
    if (!phone.value) {
      proxy.$modal.msg("请输入手机号");
      return;
    }
    if (!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(phone.value)) {
      proxy.$modal.msg("请输入正确的手机号");
      return;
    }
    if (!verify.value) {
      proxy.$modal.msg("请输入验证码");
      return;
    }
    login({
      phone: phone.value,
      verify: verify.value,
      tenantId: useStore.$state.tenantId,
    });
  } else {
    if (!username.value) {
      proxy.$modal.msg("请输入账户");
      return;
    }
    if (!password.value) {
      proxy.$modal.msg("请输入密码");
      return;
    }

    login({
      username: username.value,
      password: password.value,
      tenantId: useStore.$state.tenantId,
    });
  }
}

/** 获取登录数据 */
function login(data) {
  proxy.$modal.loading("登录中，请耐心等待...");

  useStore.Login(data).then(() => {
    /** 获取用户信息 */
    proxy.$modal.closeLoading();
    useStore.GetInfo().then((res) => {
      proxy.$tab.reLaunch("/pages/index");
    });
  });
}

// 用户协议
function handleUserAgrement() {
  let site = config.appInfo.agreements[0];
  proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
}

// 隐私协议
function handlePrivacy() {
  let site = config.appInfo.agreements[1];
  proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
}

onShow(() => {
  setTimeout(() => {
    init();
  }, 50);
});

onLoad((options) => {});
</script>

<style lang="scss" scoped>
.login-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: $uni-bg-color;

  .bgImage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  .middle {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 30px;
    margin: auto;
    margin-top: 30%;

    &-top {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 60px;

      .logo {
        height: 40px;
        width: auto;
        margin-right: 10px;
      }

      .title {
        font-size: 20px;
        color: #000;
        max-width: 50%;
        // white-space: nowrap;
        // overflow: hidden; //超出的文本隐藏
        // text-overflow: ellipsis; //溢出用省略号显示
      }
    }

    &-content {
      display: flex;
      position: relative;
      margin: 30px 0 30px 0;
      .title {
        margin: auto auto auto 0;
        color: #000;
        font-size: 18px;
      }

      .setting {
        color: #2a98ff;
        margin: auto 0;
      }

      .prompt {
        position: absolute;
        top: -35px;
        right: 0px;
        background-color: #2a98ff;
        text-align: center;
        line-height: 25px;
        display: inline-block;
        color: #fff;
        padding: 3px 5px;
        border-radius: 3px;

        &::after {
          content: "";
          position: absolute;
          border: 5px solid transparent;
          transform: rotate(90deg);
          right: 5px;
          bottom: -9px;
          border-left-color: #2a98ff;
        }
      }
    }

    // 登录页-服务器配置样式 开始
    &-input {
      :deep(.u-input) {
        height: 45px;
        border: 0 !important;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 5px 12px !important;
        background-color: #f5f6fa !important;
      }

      :deep(.input-placeholder) {
        color: #c0c4cc !important;
      }

      :deep(.uni-input-wrapper) {
        font-size: 16px;
      }

      :deep(.u-icon__icon) {
        font-size: 24px !important;
        line-height: 24px !important;
        color: gray !important;
      }

      :deep(.iconfont) {
        color: gray !important;
      }

      :deep(:-webkit-autofill) {
        caret-color: #000; // 设置光标颜色
        // -webkit-text-fill-color: gray !important;
        -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        background-color: transparent;
        background-image: none;
        transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
      }
    }

    &-switch {
      width: 100%;
      display: flex;
      margin-top: 20px;
      color: #96a6b5;

      &-loginMethod {
        display: block;
      }

      &-register {
        display: block;
      }
    }

    &-submit {
      height: 45px;
      line-height: 45px;
      border-radius: 24px;
      background: #2a98ff;
      color: #fff;
      border: 0px;
    }

    &-agreed {
      color: #96a6b5;
      margin-top: 30px;
      display: flex;
      justify-content: center;
      > uni-view {
        margin: auto 0;
      }
      > uni-text {
        margin: auto 0;
      }
      // animation: roundRule 0.5s linear infinite;
    }

    @keyframes roundRule {
      0% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(-5px);
      }
      100% {
        transform: translateX(0);
      }
    }
  }

  .bottom {
    position: fixed;
    width: 100%;
    bottom: 20px;
    .title {
      text-align: center;
      color: #96a6b5;
      font-size: 14px;
    }
  }
}
</style>