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

<template>
  <view class="section">
    <view style="position:absolute;top:10px;right:10px;z-index:99;color:#2a98ff" @tap="goSeverConfig">服务器配置</view>

    <view class="bg">
      <!-- <image class="bgImage" :src="bg" v-if="bg" /> -->
      <!-- <image class="bgImage" src="@/static/images/wt/bg.png" v-if="!bg" /> -->
    </view>


    <view class="middle login">
      <view class="top">
        <image class="logo" :src="logo" mode="widthFix" v-if="logo" />
        <text class="title">{{ title }}移动端登录</text>
      </view>

      <view id="login-input" style="margin-top: 20px" v-if="switchText == '账号密码登录'">
        <u-input v-model="phone" prefixIcon="phone" placeholder="请输入手机号码" />
      </view>

      <view id="login-input" style="display: flex; margin-top: 20px" v-if="switchText == '账号密码登录'">
        <u-input style="width: 60%" v-model="verify" prefixIcon="email" placeholder="请输入验证码" />

        <u-button @click="getVerifyCode">{{ !codeTime ? "获取验证码" : codeTime + "s" }}</u-button>
      </view>

      <view id="login-input" style="margin-top: 20px" v-if="switchText == '验证码登录'">
        <u-input type="text" v-model="username" prefixIcon="account" placeholder="请输入账号" />

        <u-input style="margin-top: 20px" v-model="password" prefixIcon="lock" placeholder="请输入密码" :password="inputIconBool">
          <template #suffix>
            <text class="iconfont ucicon-eye" @click="inputIcon()" v-if="!inputIconBool"></text>
            <text class="iconfont ucicon-eye-close" @click="inputIcon()" v-if="inputIconBool"></text>
          </template>
        </u-input>
      </view>

      <!--  -->

      <view class="switchText" @click="switchMode">
        <text>{{ switchText }}</text>
      </view>
      <button class="submit" @click="submitRes">登 录</button>
    </view>
    <view class="bottom">
      <div class="title">{{ bottomTitle }}</div>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { reactive, getCurrentInstance, toRefs, inject } from "vue";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { Lock, User, Cellphone } from "@element-plus/icons-vue";
import { getCodeImg, getMobileTenantConfig } from "@/api/login";

import useStores from "@/store/modules/user.js";
const useStore = useStores();

const { proxy } = getCurrentInstance();

const data = reactive({
  /** saas数据 */
  bg: "/static/images/wt/bg.png",
  logo: "/static/logo.png",
  title: undefined,
  bottomTitle: undefined,
  /** login数据 */
  phone: undefined,
  verify: undefined,
  codeTime: 0,
  switchText: "验证码登录",
  tenantId: undefined,
  username: undefined,
  password: undefined,
  inputIconBool: true,

  // VerificationCodeOne
});

const { title, bg, bottomTitle, logo, phone, verify, codeTime, switchText, username, password, tenantId, inputIconBool } = toRefs(data);

function goSeverConfig() {

    uni.navigateTo({
          url: '/pages/serveConfig'
    })

}
/**登录方式切换 */
function switchMode() {
  if (switchText.value == "验证码登录") {
    switchText.value = "账号密码登录";
  } else {
    switchText.value = "验证码登录";
  }
}
/** 点击发送验证码 */
function getVerifyCode() {
  if (!phone.value) {
    uni.showToast({
      title: "请输入手机号码...",
      icon: "none",
    });
    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)) {
    uni.showToast({
      title: "请输入正确的手机号码...",
      icon: "none",
    });
    return;
  }
  verify.value = undefined;
  getSendSms({
    phone: phone.value,
  });
  //
  if (codeTime.value > 0) {
    uni.showToast({
      title: "不能重复获取",
      icon: "none",
    });
    return;
  } else {
    codeTime.value = 60;
    let timer = setInterval(() => {
      codeTime.value--;
      if (codeTime.value < 1) {
        clearInterval(timer);
        codeTime.value = 0;
      }
    }, 1000);
  }
}
/** 获取验证码 */
async function getSendSms(params) {
  getCodeImg(params).then((res) => {
    console.log(res);
  });
}

/**
 * 判断运行环境
 */
function env() {
  // const u = navigator.userAgent
  // //https://blog.csdn.net/weixin_42659644/article/details/126294231
  // if(u.indexOf('saas')>-1){ //指定app内 获取app识别号
  // }else{
  // }

  let port = uni.getSystemInfoSync().platform;
  switch (port) {
    case "android":
      getMobileTenantConfigApi({ url: window.location.host });
      console.log("Android"); //android
      break;
    case "ios":
      console.log("iOS"); //ios
      getMobileTenantConfigApi({ url: window.location.host });
      break;
    case "windows":
      // console.log("H5"); //H5
      //getMobileTenantConfigApi({ url: "172.16.1.47:3000" })
      getMobileTenantConfigApi({ url: window.location.host });
      break;
    default: //devtools
      console.log("小程序");
      break;
  }
}

// #ifdef H5
env();
// #endif

/** 点击提交按钮 */
async function submitRes() {
  if (switchText.value == "账号密码登录") {
    if (!phone.value) {
      uni.showToast({
        title: "请输入手机号码...",
        icon: "none",
      });
      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)) {
      uni.showToast({
        title: "请输入正确的手机号码...",
        icon: "none",
      });
      return;
    }
    if (!verify.value) {
      uni.showToast({
        title: "请输入验证码...",
        icon: "none",
      });
      return;
    }
    login({
      phone: phone.value,
      verify: verify.value,
      tenantId: tenantId.value,
    });
  } else {
    if (!username.value) {
      uni.showToast({
        title: "请输入账户",
        icon: "none",
      });
      return;
    }
    if (!password.value) {
      uni.showToast({
        title: "请输入密码",
        icon: "none",
      });
      return;
    }
    login({
      username: username.value,
      password: password.value,
      tenantId: tenantId.value,
    });
  }
}

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

  useStore.Login(data).then(() => {
    info();
  });
}

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

/** 获取登录页数据 */
async function getMobileTenantConfigApi(params) {
  getMobileTenantConfig(params).then((res) => {
    if (res.data.length > 0) {
      let data = res.data.data[0];
      bg.value = data.loginBackUrl;
      title.value = data.loginTitle;

      bottomTitle.value = data.loginFooter;
      tenantId.value = data.tenantId;
      uni.setStorageSync("homeTitle", data.loginTitle);
    }
  });
}

/**
 * @密码显示隐藏icon图标事件
 * @icon点击事件
 */
function inputIcon() {
  inputIconBool.value = !inputIconBool.value;
}

/**
 * @onLoad
 */
onLoad(() => {
  const token = getToken();
  //需要登录
  if (token) {
    uni.switchTab({
      url: "/pages/index",
    });
  }
});
</script>
<style>
.uni-input{
        color:red!important
      }</style>

<style lang="scss" scoped>


.section {
  display: flex;
  width: 100%;
  height: 100%;

  .bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background: #fff;
    .bgImage {
      width: 100%;
      height: 100%;
    }
  }
  
  .middle {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 40px;
    margin: auto;
    margin-top: 30%;
    #login-input .u-input{
      border-color:gray!important
    }

    .uni-input-placeholder{
      color:gray!important

    }
    
    .top {
      display: flex;
      margin-bottom: 60px;
      .logo {
        width: 50px;
        height: 50px;
        margin: 0 20px 0 auto;
      }
      .title {
        font-size: 20px;
        text-align: center;
        color: #000;
        margin: auto auto auto 0;
      }
      
    }

    .switchText {
      color: gray;
      font-size: 16px;
      margin-top: 20px;
      width: 100%;
      display: block;
    }

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

  .bottom {
    position: absolute;
    width: 100%;
    bottom: 10px;
    .title {
      text-align: center;
      color: #000;
      font-size: 14px;
    }
  }

  .iconfont {
    color: #999;
  }
}
</style>