su_nan-mobile_wx/pages/login/login.vue

<template>
  <div class="login">
    <img src="../../common/assets/image/logobig.png" alt="" class="logobig" />
    <div class="logTit">
      <span class="titletxt">微纳园蒲公英平台</span>
      <p class="titletxt2">（管理端）</p>
    </div>
    <div class="loginBox">
      <div class="inputBox">
        <img
          src="../../common/assets/image/comicon.png"
          alt=""
          style="height: 60rpx"
        />
        <input
          type="text"
          placeholder="请输入账号"
          v-model="loginForm.userName"
        />
      </div>
      <div class="inputBox">
        <img src="../../common/assets/image/pswicon.svg" alt="" />
        <input
          type="password"
          placeholder="请输入密码"
          v-model="loginForm.password"
        />
      </div>
      <div class="inputBox">
        <img src="../../common/assets/image/yzmicon.svg" alt="" />
        <input
          type="text"
          placeholder="验证码"
          class="yanzhengma"
          v-model="loginForm.code"
        />
        <img
          :src="loginForm.captchaImage"
          @click="captchaImageRefresh(loginForm)"
          class="yanzhengImg"
        />
      </div>
      <div class="pswBox" @click="forgetPsw()">
        <p>忘记密码？</p>
      </div>
      <div>
        <van-button type="default" size="large" color="#1f1fbe" @click="login"
          >登 录</van-button
        >
      </div>
    </div>
    <div class="bottomTips">
      2022@copyrigtht IOT - Park-tech. supported by 中国移动
    </div>
    <van-dialog id="van-toast" />
  </div>
</template>
<script>
import Dialog from "../..//wxcomponents/weapp/dist/dialog/dialog.js";
import { login } from "@/js_sdk/http.js";

export default {
  data() {
    return {
      loginForm: {
        userName: "",
        password: "",
        code: "",
        type: "FRAME",
        captchaId: "",
        captchaImage: "",
        rememberMe: true,
      },
    };
  },
  mounted() {
    // login()
    this.captchaImageRefresh(this.loginForm);
  },
  methods: {
    captchaImageRefresh: function (_form) {
      _form.captchaId = this.$common.uuid(8);
      _form.captchaImage =
        this.$constant.BASE_URI +
        "/captcha/captchaImage?type=math&captchaId=" +
        _form.captchaId +
        "&s=" +
        Math.random();
    },
    forgetPsw() {
      wx.showModal({
        title: "提示！",
        content: "管理端修改密码需要拨打客服电话咨询，是否拨打？",
        success: function (res) {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: "13921516068", //电话号码
              success: function (e) {},
              fail: function (e) {},
            });
          }
        },
      });
    },
    login() {
      const _this = this;
      if (!this.loginForm.userName || !this.loginForm.password) {
        uni.showModal({
          title: "提示",
          content: "请输入账号和密码",
          icon: "error",
          showCancel: false,
        });
        return;
      }
      login(this.loginForm).then((res) => {
        if (res.errmsg == "成功") {
          uni.showToast({
            title: "登录成功",
            icon: "none",
            mask: true,
            duration: 2000,
          });
          this.$auth.setUser(res.data.token);
          this.$auth.setUserInfo(res.data);
          uni.switchTab({
            url: "/pages/companyreport/companyreport",
          });
        } else {
          this.captchaImageRefresh(this.loginForm);
        }
      });

      // this.$auth.setUserType(this.$auth.TYPE_FRAME);
    },
    onShareAppMessage: function () {},
  },
};
</script>
<style lang="scss">
.login {
  background: white;
  height: 100%;
  overflow: hidden;
  .logTit {
    width: 80vw;
    left: 10vw;
    top: 60vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    color: rgba(51, 51, 51, 1);
    font-size: 4vw;
    p {
      color: rgba(102, 102, 102, 1);
      font-size: 4vw;
      margin-top: 0.5vw;
    }

    .titletxt {
      font-size: 48rpx;
      font-family: Taipei Sans TC Beta-Bold, Taipei Sans TC Beta;
      font-weight: bold;
      color: #333333;
    }
    .titletxt2 {
      font-size: 32rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
  .logobig {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    z-index: 0;
  }

  .loginBox {
    width: 70vw;
    left: 15vw;
    padding-top: 75vw;
    position: absolute;
  }
  .inputBox {
    position: relative;
    display: flex;
    align-items: center;
    img {
      position: absolute;
      width: 7vw;
      // padding-top: 40px;
    }
    .yanzhengImg {
      right: 0;
      width: 20vw;
      height: 10vw;
    }
    .yanzhengImgBox {
      height: 50px;
      display: flex;
      align-items: center;
    }
    input {
      background: black;
      width: 100%;
      height: 76rpx;
      padding: 5rpx 0 5rpx 70rpx;
      background-color: rgba(255, 255, 255, 1);
      border: 1rpx solid rgba(29, 24, 188, 0.05);
      margin: 5rpx 0;
      font-size: 4vw;
    }
    input::-webkit-input-placeholder {
      color: rgba(153, 153, 153, 1);
    }
    .yanzhengma {
      width: 60%;
    }
  }
  .pswBox {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
    color: rgba(29, 24, 188, 1);
  }
  .van-button {
    border-radius: 60px;

    margin-top: 50px;
  }
  .bottomTips {
    width: 100vw;
    position: fixed;
    bottom: 15px;
    text-align: center;
    color: #999999;
    font-size: 2vw;
  }
  @media screen and (max-height: 454px) {
    .bottomTips {
      display: none;
    }
  }
}
</style>