Vent-App/pages/login/login.vue

  <template>
    <view class="zai-box">
      <u-icon name="setting-fill" color="#2979ff" size="28" @click="setIp"></u-icon>
      <scroll-view scroll-y class="page" v-if="!ipShow">
        <view class="text-center" :style="[{ animation: 'show ' + 0.4 + 's 1' }]">
          <!-- <image src="/static/desk-img/logo.png" mode='aspectFit' class="zai-logo "></image> -->
              <image src="/static/dhz-logo.png" mode='aspectFit' class="zai-logo "></image>
        </view>
        <view class="text-center" :style="[{ animation: 'show ' + 0.4 + 's 1' }]">
          <!-- <u-link  class="zai-title2 text-shadow " href="http://localhost:8080?ticket=234" >切换单点登录</u-link> -->
          <view class="zai-title2 text-shadow " @click="changeloginType">切换单点登录</view>
        </view>
        <view class="box padding-lr-xl login-paddingtop" :style="[{ animation: 'show ' + 0.6 + 's 1' }]">
          <block>
            <view class="cu-form-group margin-top  shadow-warp" :class="[shape == 'round' ? 'round' : '']">
              <view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view>
              <input placeholder="请输入账号" name="input" v-model="userName"></input>
            </view>
            <view class="cu-form-group margin-top shadow-warp" :class="[shape == 'round' ? 'round' : '']">
              <view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view>
              <input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password" />
              <view class="action text-lg">
                <text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
                  @click="changePassword"></text>
              </view>
            </view>
            <view class="padding text-center margin-top">
              <button class="cu-btn bg-blue lg margin-right shadow" :loading="loading"
                :class="[shape == 'round' ? 'round' : '']" @tap="onLogin"><text space="emsp">{{ loading ? "登录中..." :
                  "登录" }}</text>
              </button>
            </view>
          </block>
          <!-- #ifdef APP-PLUS -->
          <view class="padding flex flex-direction  text-center">
            当前版本:{{ version }}
          </view>
          <!-- #endif -->

        </view>
      </scroll-view>
      <!-- 登录加载弹窗 -->
      <view class="cu-load load-modal" v-if="loading">
        <!-- <view class="cuIcon-emojifill text-orange"></view> -->
        <image src="/static/desk-img/144.png" mode="aspectFit" class="round"></image>
        <view class="gray-text">登录中...</view>
      </view>
      <scroll-view scroll-y  class="page" v-if="ipShow">
        <!-- <view class="IPSet">
            <span class="text-style">IP地址：  <u--input
              placeholder="请输入IP地址"
              border="surround"
              v-model="IPValue"
            ></u--input></span>
            <span class="text-style">端口号：  <u--input
              placeholder="请输入端口号"
              border="surround"
              v-model="PortValue"
            ></u--input></span>
            <span class="text-style"><u-button :plain="true" color="#18a5ff" size="small" @tap="saveIP()">保存</u-button></span>
        </view> -->
        <!-- <scroll-view scroll-y class="page"> -->
      <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>
    <!-- </scroll-view> -->
      </scroll-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" },
          { label: "活鸡兔井", value: "http://10.248.135.121:9999" },
          { label: "寸草塔二矿", value: "http://10.246.63.5:9999" },
          { label: "乌兰木伦", value: "http://10.246.183.35:9999" },
          { label: "哈拉沟煤矿", value: "http://10.248.223.12:9999" },
          { label: "布尔台", value: "http://10.246.95.4:9999" },
          { label: "上湾", value: "http://10.246.167.205:9999" },
          { label: "锦界", value: "http://10.248.151.42:9999" },
          { label: "补连塔", value: "http://10.246.175.16:9999" },
          { label: "寸草塔", value: "http://10.246.23.171:9999" },
          { label: "柳塔", value: "http://10.246.87.121:9999" },
          { label: "石圪台", value: "http://10.246.191.13:9999" },
          { label: "榆家梁", value: "http://10.248.143.211:9999" },
          { label: "开发", value: "http://182.92.126.35:9999" },
          { label: "测试", value: "http://182.92.126.35:9998" },
        ],
      ],
    };
  },
  onLoad: function (option) {
    console.log("=======option.ticket======" + JSON.stringify(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: {
    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,
      };
      // 加密
      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) {
      var than = this;

      // this.$tip.success(configService.apiUrl);
      var ser = configService.apiUrl;
      ser = ser.replace(9999, 8092);
      // this.$tip.success(ser);
      new Promise((resolve, reject) => {
        api
          .validateCasLogin(
            "",
            "?ticket=" + value + "&service=" + encodeURIComponent(ser)
          )
          .then((response) => {
            // than.$tip.success("登录成功1");

            // if (response.data.code == 200) {
            // 	uni.setStorageSync(ACCESS_TOKEN, response.data.result.token);
            // } else {
            // }
            const result = response.data.result;
            const userInfo = result.userInfo;
            uni.setStorageSync(ACCESS_TOKEN, result.token);
            uni.setStorageSync(USER_INFO, userInfo);
            console.log("userInfo=" + userInfo);
            than.$store.commit("SET_TOKEN", result.token);
            console.log("result.token=" + result.token);
            than.$store.commit("SET_DICT", result.sysAllDictItems);
            than.$store.commit("SET_AVATAR", userInfo.avatar);
            than.$store.commit("SET_NAME", {
              username: userInfo.username,
              realname: userInfo.realname,
            });

            // than.$tip.success("loginCas=");
            than.getPermissionList();
          })
          .catch((error) => {
            // debugger;
            console.log("catch===>response", error);
            // uni.navigateTo({
            //   url: "/pages/home/home",
            // });
          });
      });
    },

    //获取权限菜单
    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====");
      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() {
    //   uni.navigateTo({
    //     url: "/pages/ipConfig/ipConfig",
    //   });
    // },
    //正则判断ip地址
    validateIP(ip) {
      const regex =
        /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}$/;
      return regex.test(ip);
    },
    //正则判断端口地址
    validatePort(port) {
      const regex = /^([1-9]\d{0,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/;
      return regex.test(port);
    },
    setIp() {
      console.log("点击成功");
      this.ipShow = !this.ipShow;
    },
    saveIP() {
      this.validateIP(this.IPValue);
      this.validatePort(this.PortValue);
      if (this.validateIP(this.IPValue) && this.validatePort(this.PortValue)) {
        this.ipShow = false;
        this.fullIPVal = `http://${this.IPValue}:${this.PortValue}`;
        configService.apiUrl = this.fullIPVal;
        uni.setStorageSync("apiUrl", configService.apiUrl);
        // localStorage.setItem("apiUrl", apiUrl);
      } else if (!this.validateIP(this.IPValue)) {
        alert("请填写正确的IP地址");
      } else if (!this.validatePort(this.PortValue)) {
        alert("请填写正确的端口号");
      } else {
        alert("请检查输入的IP地址或端口号");
      }
    },
    changeIP() {
      this.ipShow1 = true;
    },
    selectIpAddr(e) {
      this.ipShow1 = false;
      const fullURL = e.value[0].value;
      this.IPSet = e.value[0].label;
      configService.apiUrl = fullURL;
      uni.setStorageSync("apiUrl", configService.apiUrl);
      setTimeout(() => {
        uni.getStorageSync("apiUrl");
      }, 100);
      uni.navigateTo({ url: "/pages/login/login" });
    },
  },
  beforeDestroy() {
    if (this.smsCountInterval) {
      clearInterval(this.smsCountInterval);
    }
  },
};
</script>

<style>
.login-paddingtop {
  padding-top: 300upx;
}
.zai-box {
  height: 100vh;
  background-image: url(/static/desk-img/loginBg.png);
  background-size: cover;
  padding: 0 20upx;
  padding-top: 100upx;
  position: relative;
}

.zai-logo {
  width: 200upx;
  height: 150px;
}

.zai-title {
  margin-top: 20upx;
  font-size: 58upx;
  color: #000000;
  text-align: center;
}

.input-placeholder,
.zai-input {
  color: #94afce;
}

.zai-btn {
  background: #ff65a3;
  color: #fff;
  border: 0;
  border-radius: 100upx;
  font-size: 36upx;
}

.zai-btn:after {
  border: 0;
}

/*按钮点击效果*/
.zai-btn.button-hover {
  transform: translate(1upx, 1upx);
}
.IPSet {
  display: flex;
  flex-direction: column;
}
.text-style {
  margin: 20px;
}
</style>