AstraZeneca_uniapp/pages/login/login.vue

<template>
  <div class="login">
    <img src="../../common/assets/image/logobig.png" alt="" class="logobig" />
    <img src="./topimg.png" alt="" class="topimg" />
    <div class="wellogin">
      <div class="loginBox">
        <div class="logTit">
          <span class="titletxt">欢迎登录</span>
        </div>
        <div class="inputBox">
          <img src="../../common/assets/image/comicon.png" alt="" />
          <input
            type="text"
            placeholder="请输入账号"
            v-model="loginForm.userName"
          />
        </div>
        <div class="inputBox">

          <img src="../../common/assets/image/pswicon.svg" alt="" />
          <input

              v-if="isPassWord"
            :password="true"
            placeholder="请输入密码"
            v-model="loginForm.password"
              style="border-right: none"
          />
          <input
              v-if="!isPassWord"

              :password="false"
              placeholder="请输入密码"
              style="border-right: none"

              v-model="loginForm.password"
          />

          <div style="background: #f3f5f9;height: 100rpx;line-height: 100rpx;padding: 4rpx 0;border: 1rpx solid rgba(29, 24, 188, 0.05);border-left: none;padding-left: 20rpx; padding-right: 20rpx;" @click="changeIsPassWord()" >
            <van-icon name="eye-o" v-if="isPassWord" />
            <van-icon name="closed-eye" v-if="!isPassWord"/>
          </div>
        </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="inputBox" style="    justify-content: flex-end;">
          <van-checkbox checked-color="#8a0554" :value="isSetPassWord" @change=changeIsSetPassWord() bind:change="onChange">记住密码</van-checkbox>

        </div>
        <div style="margin-top: 2vh">
          <van-button
            type="default"
            class="loginbtn"
            size="large"
            color="rgba(138, 5, 84, 1)"
            @click="login"
            >登 录</van-button
          >
        </div>
      </div>
    </div>
    <div class="bottomTips">

        <van-checkbox :value="isCheck" @change="getIsCheck" checked-color="#8a0554" />
        已阅读并同意
        </van-checkbox>
      <span style="color: #8a0554"
      >《服务协议条款及隐私政策》
    </span>
    </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";
import w_md5 from "@/js_sdk/zww-md5/w_md5.js";

export default {
  data() {
    return {
      isSetPassWord:false,
      isPassWord:false,
      isCheck:false,
      loginForm: {
        userName: "",
        password: "",
        code: "",
        type: "USER",
        captchaId: "",
        captchaImage: "",
        rememberMe: true,
      },
    };
  },
  onLoad(e) {
    console.log(e);
    // login()

    this.captchaImageRefresh(this.loginForm);
    this.loginForm.type = 'BIZ';
    const rememberedUser = wx.getStorageSync('rememberedUser');
    if (rememberedUser && rememberedUser.isSetPassWord) {
      // 赋值账号密码到输入框
      this.loginForm.userName = rememberedUser.userName;
      this.loginForm.password = rememberedUser.password;
      // 勾选"记住密码"
      this.isSetPassWord = true;
    }
    // this.loginForm.type = e.type ? e.type : "USER";
  },
  methods: {
    getIsCheck(e){
      console.log(e)
      this.isCheck=!this.isCheck
    },
    changeIsSetPassWord(){
      this.isSetPassWord = !this.isSetPassWord;
      // 未勾选时直接清除缓存
      if (!this.isSetPassWord) {
        wx.removeStorageSync('rememberedUser');
      }
    },
    changeIsPassWord(){
      this.isPassWord=!this.isPassWord
      console.log(123123)
    },
    async wxlogin() {
      let _this = this;
      wx.login({
        success: async function (res) {
          let data = await login({ openCode: res.code });
          console.log(data);
          _this.$auth.setUser(data.data.token);
          _this.$auth.setUserInfo(data.data);
          uni.switchTab({
            url: "/pages/index/index",
          });
        },
      });
    },
    goqy() {
      uni.navigateTo({
        url: "/pages/gocompnay/index",
      });
    },
    gozhfw() {
      wx.navigateToMiniProgram({
        appId: "wx9919d022c184462b",
        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: "管理端修改密码需要拨打客服电话15061150110咨询，是否拨打？",
        success: function (res) {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: "15061150110", //电话号码
              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;
      }
      let loginForm = {
        ...this.loginForm,

        password: w_md5.hex_md5_32(this.loginForm.password),
      };
      login(loginForm).then((res) => {
        if (res.errmsg == "成功") {
          if (_this.isSetPassWord) {
            // 存储账号、原始密码（未加密）、勾选状态
            wx.setStorageSync('rememberedUser', {
              userName: _this.loginForm.userName,
              password: _this.loginForm.password, // 存原始密码，避免重复加密
              isSetPassWord: true
            });
          } else {
            // 未勾选则清除缓存
            wx.removeStorageSync('rememberedUser');
          }
          uni.showToast({
            title: "登录成功",
            icon: "none",
            mask: true,
            duration: 2000,
          });
          this.$auth.setUser(res.data.token);
          this.$auth.setUserInfo({
            ...res.data,
            userType: this.loginForm.type,
          });
          uni.switchTab({
            url: "/pages/index/index",
          });
        } 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;

  .wellogin {
    width: 750rpx;
    height: 1060;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    position: absolute;
    padding-top: 68rpx;
    top: 330rpx;
  }

  .topimg {
    /* margin: auto; */
    display: block;
    margin: auto;
    position: absolute;
    left: calc(50% - 300rpx);
    /* width: 240rpx; */
    width: 600rpx;
  }

  .logTit {
    width: 70vw;
    margin-bottom: 62rpx;
    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: 80vw;
    margin: auto;
  }

  .inputBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;

    img {
      position: absolute;
      width: 50rpx;
      height: 70rpx;
      margin-right: 16rpx;
      margin-left: 32rpx;
      // padding-top: 40px;
    }

    .yanzhengImg {
      right: 0;
      width: 21vw;
      height: 15vw;
      margin: 0;
      padding: 0;
    }

    .yanzhengImgBox {
      height: 50px;
      display: flex;
      align-items: center;
    }

    input {
      background: #f3f5f9;
      width: 100%;
      height: 100rpx;
      padding: 5rpx 0 5rpx 85rpx;
      background-color: rgba(255, 255, 255, 1);
      border: 1rpx solid rgba(29, 24, 188, 0.05);
      margin: 16rpx 0;
      font-size: 4vw;
      background: #f3f5f9;
    }

    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 {
    margin-top: 15rpx;
    border-radius: 60px;
  }

  .loginbtn {
    margin-top: 50rpx;
  }

  .bottomTips {
    width: 100vw;
    position: fixed;
    bottom: 15px;
    text-align: center;
    color: #999999;
    font-size: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  //@media screen and (max-height: 454px) {
  //  .bottomTips {
  //    display: none;
  //  }
  //}
}
</style>