idea_fire_safety_wx/pages/login2/login.vue

<template>
  <div class="login">
    <img
      src="https://www.idea-co-sf.com/gardenProduct/image/bj01.png"
      alt=""
      class="logobig2"
    />

    <!--    <div class="logintype" v-if="loginStatus">-->
    <!--      <div-->
    <!--        @click="changeLoginType('企业用户')"-->
    <!--        :class="loginType == '企业用户' ? 'checkbox ischecked' : 'checkbox'"-->
    <!--      >-->
    <!--        企业用户-->
    <!--      </div>-->
    <!--      <div-->
    <!--        @click="changeLoginType('管理用户')"-->
    <!--        :class="loginType == '管理用户' ? 'checkbox ischecked' : 'checkbox'"-->
    <!--      >-->
    <!--        管理用户-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="loginBody">
      <div class="loginTypeBox">
        <div class="loginTypeItem" @click="changeLoginType('企业用户')">
          <span
            class="loginTypeName"
            :class="loginType === '企业用户' ? 'ischecked' : ''"
            >企业用户</span
          >
          <div class="bottomLine" v-show="loginType === '企业用户'"></div>
        </div>
        <div class="loginTypeItem" @click="changeLoginType('管理用户')">
          <span
            class="loginTypeName"
            :class="loginType === '管理用户' ? 'ischecked' : ''"
            >管理用户</span
          >
          <div class="bottomLine" v-show="loginType === '管理用户'"></div>
        </div>
      </div>
      <div class="loginBox">
        <div class="inputBox">
          <img
            src="https://www.idea-co-sf.com/gardenProduct/image/comicon.svg"
            alt=""
            style="height: 60rpx; left: 32rpx"
          />
          <input
            type="text"
            placeholder="请输入用户名"
            v-model="loginForm.userName"
            class="inputCont"
            placeholder-class="b-palceholder"
          />
        </div>
        <div class="inputBox">
          <img
            src="https://www.idea-co-sf.com/gardenProduct/image/pswicon.svg"
            alt=""
            style="height: 60rpx; left: 32rpx"
          />
          <input
            type="password"
            placeholder="请输入密码"
            v-model="loginForm.password"
            class="inputCont"
            placeholder-class="b-palceholder"
          />
        </div>
        <div class="inputBox">
          <img
            src="https://www.idea-co-sf.com/gardenProduct/image/yzmicon.svg"
            alt=""
            style="height: 60rpx; left: 32rpx"
          />
          <input
            type="text"
            placeholder="请输入验证码"
            class="yanzhengma"
            v-model="loginForm.code"
            placeholder-class="b-palceholder"
          />
          <img
            :src="loginForm.captchaImage"
            @click="captchaImageRefresh(loginForm)"
            class="yanzhengImg"
          />
        </div>
        <!--        <div class="pswBox" @click="forgetPsw()">-->
        <!--          <p>忘记密码？</p>-->
        <!--        </div>-->
        <div>
          <button class="loginbtn" @click="loginClick">提交</button>
        </div>
      </div>
      <div class="bottomTips">
        <label class="radio">
          <radio value="r1" checked="true" color="rgba(3, 101, 249, 1)" />
          已阅读并同意<span style="color: rgba(3, 101, 249, 1)"
            >《服务协议条款及隐私政策》</span
          >
        </label>
      </div>
      <!--      <van-dialog id="van-toast" />-->
    </div>
  </div>
</template>
<script>
import Dialog from "../..//wxcomponents/weapp/dist/dialog/dialog.js";
import { login, loginByCompany } from "@/js_sdk/http.js";

export default {
  data() {
    return {
      loginStatus: true,
      loginType: "企业用户",
      loginForm: {
        userName: "",
        password: "",
        code: "",
        type: "FRAME",
        captchaId: "",
        captchaImage: "",
        rememberMe: true,
      },
    };
  },
  mounted() {
    // login()
    this.captchaImageRefresh(this.loginForm);
  },
  onLoad(options) {
    if (options.loginType) {
      this.loginType = options.loginType;
    }
  },
  methods: {
    changeLoginType(e) {
      console.log(this.loginType);
      this.loginStatus = false;
      this.loginType = e;
      this.loginStatus = true;
    },
    getPhoneNumber(e) {
      wx.login({
        success(res) {
          // console.log(res);
          let data = {
            loginCode: res.code,
            phoneCode: e.detail.code,
          };
          loginByWeixin2(data).then((e) => {
            // console.log(e.data.user);
            wx.setStorageSync("USERINFO", JSON.stringify(e.data.user));
            uni.switchTab({
              url: "/pages/index/index",
            });
          });
        },
      });
    },
    goqy() {
      uni.navigateTo({
        url: "/pages/subPackages/gocompnay/index",
      });
    },
    gozhfw() {
      wx.navigateToMiniProgram({
        appId: "wx15404cced62d7b37",
        success(res) {
          // 打开成功
        },
        fail(e) {
          console.log(e);
        },
      });
    },
    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: "", //电话号码
              success: function (e) {},
              fail: function (e) {},
            });
          }
        },
      });
    },
    loginClick() {
      if (this.loginType === "企业用户") {
        this.UserLogin();
      } else {
        this.login();
      }
    },
    UserLogin() {
      const _this = this;
      if (!this.loginForm.userName || !this.loginForm.password) {
        uni.showModal({
          title: "提示",
          content: "请输入账号和密码",
          icon: "error",
          showCancel: false,
        });
        return;
      }
      wx.login({
        success(e) {
          console.log(e);
          _this.loginForm.loginCode = e.code;
          loginByCompany(_this.loginForm).then((res) => {
            if (res.msg == "正常") {
              uni.showToast({
                title: "登录成功",
                icon: "none",
                mask: true,
                duration: 2000,
              });
              wx.setStorageSync("USERINFO", JSON.stringify(res.user_));
              uni.switchTab({
                url: "/pages/index/index",
              });
            } else {
              uni.showToast({
                title: res.errmsg,
                icon: "none",
                mask: true,
                duration: 2000,
              });
              _this.captchaImageRefresh(_this.loginForm);
            }
          });
        },
      });
      // this.$auth.setUserType(this.$auth.TYPE_FRAME);
    },
    login() {
      const _this = this;
      if (!this.loginForm.userName || !this.loginForm.password) {
        uni.showModal({
          title: "提示",
          content: "请输入账号和密码",
          icon: "error",
          showCancel: false,
        });
        return;
      }
      wx.login({
        success(e) {
          console.log(e);
          _this.loginForm.loginCode = e.code;
          login(_this.loginForm).then((res) => {
            console.log(res);
            if (res.errmsg == "成功") {
              uni.showToast({
                title: "登录成功",
                icon: "none",
                mask: true,
                duration: 2000,
              });
              console.log(res.data.user);
              wx.setStorageSync("USERINFO", JSON.stringify(res.data.user));
              uni.switchTab({
                url: "/pages/index/index",
              });
            } else {
              uni.showToast({
                title: res.errmsg,
                icon: "none",
                mask: true,
                duration: 2000,
              });
              _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;
    }
  }
  .logobig2 {
    width: 100vw;
    height: 400rpx;
    position: absolute;
    left: 0;
    z-index: 0;
  }

  .loginBox {
    width: 86vw;
    left: 7vw;
    top: 156rpx;
    position: absolute;
  }
  .inputBox {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    img {
      position: absolute;
      width: 7vw;
      // padding-top: 40px;
    }
    .yanzhengImg {
      right: 0 !important;
      width: 20vw;
      height: 10vw;
      z-index: 10;
    }
    .yanzhengImgBox {
      height: 50px;
      display: flex;
      align-items: center;
    }
    input {
      background: black;
      width: 100%;
      height: 76rpx;
      padding: 5rpx 0 5rpx 92rpx;
      border: 1rpx solid rgba(29, 24, 188, 0.05);
      margin: 5rpx 0;
      font-size: 32rpx;
      background: rgba(243, 245, 249, 1) !important;
      border-radius: 16rpx;
    }
    .b-palceholder {
      color: rgba(179, 179, 179, 1);
    }
    .yanzhengma {
      width: 100%;
    }
  }
  .pswBox {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
    color: rgba(29, 24, 188, 1);
  }
  .van-button {
    margin-top: 15rpx;
    border-radius: 60px;
  }
  .loginbtn {
    margin-top: 50rpx;
    border-radius: 16rpx !important;
    padding: 24rpx;
    background: rgba(3, 101, 249, 1);
    color: white;
    font-size: 36rpx;
  }
  .bottomTips {
    width: 100vw;
    position: fixed;
    bottom: 100rpx;
    text-align: center;
    color: #999999;
    font-size: 28rpx;
  }
  @media screen and (max-height: 454px) {
    .bottomTips {
      display: none;
    }
  }
  .loginBody {
    background: white;
    border-radius: 16px 16px 0 0;
    position: relative;
    top: 336rpx;
    height: 1112rpx;
    .loginTypeBox {
      display: flex;
      justify-content: space-evenly;
      font-size: 40rpx;
      padding-top: 48rpx;
      color: rgba(86, 93, 106, 1);
    }
    .loginTypeItem {
      position: relative;
      .bottomLine {
        width: 40px;
        height: 6px;
        background: linear-gradient(90deg, #0365f9 0%, #85b5ff 100%);
        border-radius: 3px 3px 3px 3px;
        position: absolute;
        bottom: 0;
        z-index: 0;
        left: 40rpx;
      }
      .loginTypeName {
        position: relative;
        z-index: 1;
      }
      .ischecked {
        color: rgba(6, 35, 59, 1);
        font-weight: 600;
      }
    }
  }
}
</style>