Vent-App/pages/login/login.vue

<template>
  <view class="login-page">
    <!-- 顶部插画区 -->
    <view class="login-header">
      <image
        class="header-bg"
        src="/static/desk-img/1-2.png"
        mode="aspectFill"
      ></image>
      <view class="header-mask"></view>
      <view class="header-content">
        <view class="header-top">
          <!-- 国能logo -->
          <image
            class="logo"
            src="/static/desk-img/logo.png"
            mode="aspectFit"
          ></image>
          <!-- 乌兰logo -->
          <!-- <image src="/static/desk-img/logo-lblt.png" mode='aspectFit' class="zai-logo "></image> -->
          <!-- 默认logo -->
          <!-- <image
            src="/static/desk-img/1-1.png"
            mode="aspectFit"
            class="zai-logo"
          ></image> -->
          <!-- 大海则logo -->
          <!-- <image
            src="/static/desk-img/dhz-logo.png"
            mode="aspectFit"
            class="zai-logo"
          ></image> -->
          <u-icon
            name="setting-fill"
            color="#2979ff"
            size="22"
            @click="setIp"
          ></u-icon>
        </view>
        <view class="welcome-text">您好，欢迎使用</view>
        <view class="platform-name">“一通三防”智能管控平台</view>
      </view>
    </view>

    <!-- 登录表单 -->
    <view class="login-body" v-if="!ipShow">
      <view class="form-area">
        <view class="input-item">
          <u-icon name="account-fill" color="#2979ff" size="22"></u-icon>
          <input
            class="input-field"
            placeholder="账号"
            placeholder-class="input-placeholder"
            v-model="userName"
          />
        </view>
        <view class="input-item">
          <u-icon name="lock-fill" color="#2979ff" size="22"></u-icon>
          <input
            class="input-field"
            placeholder="密码"
            placeholder-class="input-placeholder"
            :password="!showPassword"
            v-model="password"
          />
          <u-icon
            :name="showPassword ? 'eye-fill' : 'eye-off'"
            color="#2979ff"
            size="22"
            @click="changePassword"
          ></u-icon>
        </view>
        <view class="sso-link" @click="changeloginType">切换单点登录</view>
      </view>

      <view class="footer-area">
        <button
          class="login-btn"
          :loading="loading"
          :disabled="loading"
          @tap="onLogin"
        >
          {{ loading ? "登录中..." : "登录" }}
        </button>
        <!-- #ifdef APP-PLUS -->
        <view class="version-text">当前版本:{{ version }}</view>
        <!-- #endif -->
      </view>
    </view>

    <!-- 登录加载弹窗 -->
    <view class="cu-load load-modal" v-if="loading">
      <image
        src="/static/desk-img/144.png"
        mode="aspectFit"
        class="round"
      ></image>
      <view class="gray-text">登录中...</view>
    </view>

    <!-- IP 配置 -->
    <view class="ip-panel" v-if="ipShow">
      <view class="IPSet">
        <span class="text-style">
          <u-button
            :plain="true"
            color="#18a5ff"
            size="small"
            :text="IPSet ? IPSet : '选择IP地址'"
            @tap="changeIP()"
          ></u-button>
        </span>
        <u-picker
          :show="ipShow1"
          :columns="IpConfig"
          @cancel="ipShow = false"
          @confirm="selectIpAddr"
          keyName="label"
        ></u-picker>
      </view>
    </view>
  </view>
</template>

<script>
import { ACCESS_TOKEN, USER_NAME, USER_INFO } from "@/common/util/constants";
import { mapActions } from "vuex";
import configService from "@/common/service/config.service.js";
import { AesEncryption, getLoginCipher } from "@/common/util/cipher.js";

import api from "@/api/api";
export default {
  data() {
    return {
      ipShow: false,
      ipShow1: false,
      shape: "", //round 圆形
      loading: false,
      userName: "",
      password: "",
      phoneNo: "",
      smsCode: "",
      showPassword: false, //是否显示明文
      smsCountDown: 0,
      smsCountInterval: null,
      toggleDelay: false,
      version: "",
      //第三方登录相关信息
      thirdType: "",
      thirdLoginInfo: "",
      thirdLoginState: false,
      bindingPhoneModal: false,
      thirdUserUuid: "",
      IPValue: "",
      PortValue: "",
      fullIPVal: "", //完整IP地址
      IPSet: "",
      IpConfig: [
        [
          {
            label: "大柳塔井",
            value: "http://10.248.135.10:9999",
            code: "dlt",
          },
          {
            label: "活鸡兔井",
            value: "http://10.248.135.121:9999",
            code: "hjt",
          },
          {
            label: "寸草塔二矿",
            value: "http://10.246.63.5:9999",
            code: "cctr",
          },
          {
            label: "乌兰木伦",
            value: "http://10.246.183.35:9999",
            code: "wlml",
          },
          {
            label: "哈拉沟煤矿",
            value: "http://10.248.223.12:9999",
            code: "hlg",
          },
          { label: "布尔台", value: "http://10.246.95.4:9999", code: "brt" },
          { label: "上湾", value: "http://10.246.167.205:9999", code: "sw" },
          { label: "锦界", value: "http://10.248.151.42:9999", code: "jj" },
          { label: "补连塔", value: "http://10.246.175.16:9999", code: "blt" },
          { label: "寸草塔", value: "http://10.246.23.171:9999", code: "cct" },
          { label: "柳塔", value: "http://10.246.87.121:9999", code: "lt" },
          { label: "石圪台", value: "http://10.246.191.13:9999", code: "sgt" },
          { label: "榆家梁", value: "http://10.248.143.211:9999", code: "yjl" },
          { label: "保德", value: "http://10.248.210.152:9999", code: "bd" },
        ],
      ],
    };
  },
  onLoad: function (option) {
    console.log("=======option.ticket======" + JSON.stringify(option.ticket));
    if (option.ticket) {
      this.loginCas(option.ticket);
    }
    // #ifdef APP-PLUS
    var that = this;
    plus.runtime.getProperty(plus.runtime.appid, function (wgtinfo) {
      that.version = wgtinfo.version;
    });
    // #endif
  },
  computed: {
    hasBaseUrl() {
      return configService.hasBaseUrl;
    },
    isSendSMSEnable() {
      return this.smsCountDown <= 0 && this.phoneNo.length > 4;
    },
    getSendBtnText() {
      if (this.smsCountDown > 0) {
        return this.smsCountDown + "秒后发送";
      } else {
        return "发送验证码";
      }
    },
    canSMSLogin() {
      return this.userName.length > 4 && this.smsCode.length > 4;
    },
    canPwdLogin() {
      return this.userName.length > 4 && this.password.length > 4;
    },
  },
  methods: {
    ...mapActions(["mLogin", "PhoneLogin", "ThirdLogin"]),

    // 判断是否在APP环境中
    isApp() {
      return typeof plus !== "undefined";
    },

    onLogin: function () {
      if (!this.userName || this.userName.length == 0) {
        this.$tip.toast("请填写用户名");
        return;
      }
      if (!this.password || this.password.length == 0) {
        this.$tip.toast("请填写密码");
        return;
      }
      let loginParams = {
        username: this.userName,
        password: this.password,
        clientId: uni.getStorageSync("push_cid"),
      };
      // 加密
      const loginCipher = getLoginCipher();
      const encryption = new AesEncryption({
        key: loginCipher.key,
        iv: loginCipher.iv,
      });
      loginParams.password = encryption.encryptByAES(loginParams.password);
      this.loading = true;
      this.mLogin(loginParams)
        .then((res) => {
          this.loading = false;
          if (res.data.success) {
            if (this.isApp()) {
              // console.log('当前是APP环境');
              this.saveClientId();
            } else {
              this.getPermissionList();
            }
            // #ifdef APP-PLUS

            // #endif
            // #ifndef APP-PLUS
            // #endif
          } else {
            this.$tip.alert(res.data.message);
          }
        })
        .catch((err) => {
          let msg = err.data.message || "请求出现错误，请稍后再试";
          this.loading = false;
          this.$tip.alert(msg);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    loginCas(value) {
      if (!value) {
        return;
      }
      const serviceUrl = configService.apiUrl.replace(9999, 8092);
      api
        .validateCasLogin(
          "",
          "?ticket=" + value + "&service=" + encodeURIComponent(serviceUrl)
        )
        .then((response) => {
          const result = response.data && response.data.result;
          if (!result || !result.token || !result.userInfo) {
            this.$tip.error(
              (response.data && response.data.message) || "单点登录验证失败"
            );
            return;
          }
          const userInfo = result.userInfo;
          uni.setStorageSync(ACCESS_TOKEN, result.token);
          uni.setStorageSync(USER_INFO, userInfo);
          this.$store.commit("SET_TOKEN", result.token);
          this.$store.commit("SET_DICT", result.sysAllDictItems);
          this.$store.commit("SET_AVATAR", userInfo.avatar);
          this.$store.commit("SET_NAME", {
            username: userInfo.username,
            realname: userInfo.realname,
          });
          this.getPermissionList();
        })
        .catch((error) => {
          console.log("CAS login validation failed", error);
          const message =
            (error && error.data && error.data.message) ||
            (error && error.message) ||
            "单点登录验证失败，请检查服务器地址后重试";
          this.$tip.error(message);
        });
    },

    //获取权限菜单
    getPermissionList() {
      new Promise((resolve, reject) => {
        api
          .getPermission({})
          .then((response) => {
            console.log(response, "权限菜单----------------");
            if (response.statusCode == 200) {
              let data = response.data.result.menuApp;
              let dataBtn = response.data.result.appauth;
              uni.setStorageSync("menuPermission", data);
              uni.setStorageSync("btnPermission", dataBtn);
              this.$tip.success("登录成功!");
              uni.navigateTo({
                url: "/pages/index/index",
              });
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    saveClientId() {
      this.getPermissionList();
      // var info = plus.push.getClientInfo();
      // var cid = info.clientid;
      // this.$http
      //   .get("/sys/user/saveClientId", { params: { clientId: cid } })
      //   .then((res) => {
      //     console.log("res::saveClientId>", res);
      //     //获取权限菜单
      //     this.getPermissionList();
      //   });
    },
    changePassword() {
      this.showPassword = !this.showPassword;
    },
    onSMSSend() {
      let smsParams = {};
      smsParams.mobile = this.phoneNo;
      smsParams.smsmode = "0";
      let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
      if (!smsParams.mobile || smsParams.mobile.length == 0) {
        this.$tip.toast("请输入手机号");
        return false;
      }
      if (!checkPhone.test(smsParams.mobile)) {
        this.$tip.toast("请输入正确的手机号");
        return false;
      }
      this.$http.post("/sys/sms", smsParams).then((res) => {
        if (res.data.success) {
          this.smsCountDown = 60;
          this.startSMSTimer();
        } else {
          this.smsCountDown = 0;
          this.$tip.toast(res.data.message);
        }
      });
    },
    startSMSTimer() {
      this.smsCountInterval = setInterval(() => {
        this.smsCountDown--;
        if (this.smsCountDown <= 0) {
          clearInterval(this.smsCountInterval);
        }
      }, 1000);
    },
    onSMSLogin() {
      let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);

      if (!this.phoneNo || this.phoneNo.length == 0) {
        this.$tip.toast("请填写手机号");
        return;
      }
      if (!checkPhone.test(this.phoneNo)) {
        this.$tip.toast("请输入正确的手机号");
        return false;
      }
      if (!this.smsCode || this.smsCode.length == 0) {
        this.$tip.toast("请填短信验证码");
        return;
      }
      let loginParams = {
        mobile: this.phoneNo,
        captcha: this.smsCode,
      };
      this.PhoneLogin(loginParams)
        .then((res) => {
          console.log("res====》", res);
          if (res.data.success) {
            this.$tip.success("登录成功!");
            uni.navigateTo({
              url: "/pages/inedx/inedx",
            });
          } else {
            this.$tip.error(res.data.message);
          }
        })
        .catch((err) => {
          let msg =
            ((err.response || {}).data || {}).message ||
            err.data.message ||
            "请求出现错误，请稍后再试";
          this.$tip.error(msg);
        });
    },
    loginSuccess() {
      // 登陆成功，重定向到主页
      this.$Router.replace({ name: "index" });
    },
    requestFailed(err) {
      this.$message.warning("登录失败");
    },
    changeloginType() {
      console.log("changeloginType====");
      console.log(configService, "changeloginType====");
      var tourl = configService.apiUrl;
      tourl = tourl.replace(9999, 8092);
      // this.$tip.success("tourl="+tourl);
      var rastourl =
        "https://id.shendong.com.cn/default" + "/login?service=" + tourl;
      // rastourl ="http://182.92.126.35:8092/?ticket=234";
      console.log("===========" + rastourl);
      this.openBrowser(rastourl);
      // window.location.href='/pages/index/index?ticket=123'
      // this.$router.push({ path: '/pages/index/index?ticket=123',query:"2w354" })
    },
    openBrowser(url) {
      // 使用uni.navigateTo打开内置浏览器
      console.log("----url---------------" + url);
      // this.$tip.success("url="+url);
      uni.navigateTo({
        url: "/pages/webview/webview?url=" + encodeURIComponent(url),
      });
    },

    setIp() {
      console.log("点击成功");
      this.ipShow = !this.ipShow;
    },
    changeIP() {
      this.ipShow1 = true;
    },
    selectIpAddr(e) {
      this.ipShow1 = false;
      const fullURL = e.value[0].value;
      this.IPSet = e.value[0].label;
      const apiCode = e.value[0].code;
      configService.apiUrl = fullURL;
      uni.setStorageSync("apiUrl", configService.apiUrl);
      uni.setStorageSync("apiCode", apiCode);
      setTimeout(() => {
        uni.getStorageSync("apiUrl");
      }, 100);
      uni.navigateTo({ url: "/pages/login/login" });
    },
  },
  beforeDestroy() {
    if (this.smsCountInterval) {
      clearInterval(this.smsCountInterval);
    }
  },
};
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ===== 顶部插画 ===== */
.login-header {
  position: relative;
  width: 100%;
  height: 520rpx;
  flex-shrink: 0;
}

.header-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.header-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 160rpx;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  padding: 88rpx 48rpx 0;
  box-sizing: border-box;
}

.header-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36rpx;
}

.logo {
  width: 72rpx;
  height: 84rpx;
}

.welcome-text {
  font-size: 36rpx;
  color: #1a1a1a;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 12rpx;
}

.platform-name {
  font-size: 40rpx;
  color: #111111;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1rpx;
}

/* ===== 表单区 ===== */
.login-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40rpx 48rpx 80rpx;
  box-sizing: border-box;
  background: #ffffff;
}

.form-area {
  width: 100%;
}

.input-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 96rpx;
  padding: 0 28rpx;
  margin-bottom: 28rpx;
  background: #eff3ff;
  border-radius: 16rpx;
  box-sizing: border-box;
}

.input-field {
  flex: 1;
  height: 96rpx;
  margin-left: 20rpx;
  font-size: 30rpx;
  color: #333333;
}

.input-placeholder {
  color: #9aa3b5;
  font-size: 30rpx;
}

.sso-link {
  margin-top: 8rpx;
  text-align: right;
  font-size: 26rpx;
  color: #2979ff;
}

/* ===== 底部登录 ===== */
.footer-area {
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

.login-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background: #007aff;
  color: #ffffff;
  font-size: 34rpx;
  font-weight: 600;
  border-radius: 48rpx;
  border: none;
  text-align: center;
  padding: 0;
}

.login-btn::after {
  border: none;
}

.login-btn[disabled] {
  opacity: 0.75;
}

.version-text {
  margin-top: 24rpx;
  text-align: center;
  font-size: 24rpx;
  color: #999999;
}

/* ===== IP 配置 ===== */
.ip-panel {
  flex: 1;
  background: #ffffff;
  padding: 40rpx 48rpx;
}

.IPSet {
  display: flex;
  flex-direction: column;
}

.text-style {
  margin: 20px;
}
</style>