saas_manager/pages/login/login.vue

<template>
  <view class="loginpage">
    <view class="tab-box">
      <view
        v-for="tab in list"
        :key="tab.index"
        :class="current == tab.index ? 'actvie' : ''"
        @click="sectionChange(tab.index)"
      >
        <view>{{ tab.name }}</view>
        <image src="/static/image/selected.png" mode="" />
      </view>
    </view>
    <view>
      <view class="login_box">
        <u--form
          :model="form"
          ref="uForm1"
          v-show="current == 0"
          labelWidth="100"
        >
          <u-form-item prop="account" label="账号"
            ><u--input
              type="idcard"
              v-model="form.account"
              border="bottom"
              placeholder-style="color:#999999"
              placeholder="手机号/身份证号"
          /></u-form-item>
          <u-form-item prop="pwd" label="密码"
            ><u--input
              class="password"
              v-model="form.pwd"
              border="bottom"
              placeholder-style="color:#999999"
              type="password"
              placeholder="登录密码"
          /></u-form-item>
        </u--form>
        <u--form
          :model="form"
          ref="uForm2"
          v-show="current == 1"
          labelWidth="130"
        >
          <u-form-item prop="tel" ref="tel" label="手机号"
            ><u--input
              type="number"
              maxlength="11"
              border="bottom"
              placeholder-style="color:#999999"
              v-model="form.tel"
              placeholder="请输入手机号"
          /></u-form-item>
          <u-form-item prop="code" label="验证码">
            <u--input
              v-model="form.code"
              type="number"
              border="bottom"
              placeholder-style="color:#999999"
              placeholder="请输入验证码"
            >
              <template slot="suffix">
                <u-code
                  ref="uCode"
                  @change="codeChange"
                  seconds="60"
                  changeText="X秒重新获取"
                ></u-code>
                <u-button size="mini" @click="getCode">{{ codeTips }}</u-button>
              </template>
            </u--input>
          </u-form-item>
        </u--form>
      </view>
      <u-button
        :disabled="isUse"
        class="c_btn"
        text="登录"
        @click="handelLogin"
      ></u-button>
      <view style="width: 100%; margin: 40rpx auto">
        <view
          style="
            display: flex;
            align-items: center;
            color: #007aff;
            font-size: 24rpx;
            justify-content: center;
          "
        >
          <view style="margin: 0 40rpx" @click="toRegister">立即注册</view>
          <view
            style="width: 3rpx; height: 20rpx; background-color: #007aff"
          ></view>
          <navigator
            hover-class="none"
            url="/pages/login/forget"
            style="margin: 0 40rpx"
            >忘记密码</navigator
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { encryptor } from "@/common/jse";
import { loginSms, accountLogin, smsLogin } from "@/utils/login";
export default {
  data() {
    return {
      code: "",
      form: {
        tel: "",
        code: "",
        account: "18378140619",
        pwd: "123456Aa..",
      },
      list: [
        {
          name: "密码登录",
          index: 0,
        },
        {
          name: "短信登录",
          index: 1,
        },
      ],
      rules: {
        tel: [
          {
            required: true,
            message: "请输入手机号",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "手机号码格式不正确",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
        account: [
          {
            required: true,
            message: "请输入手机号/学员身份证",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
        ],
      },
      current: 0,
      codeTips: "",
      isUse: false,
      isBack: false,
    };
  },
  onLoad(option) {
    if (option.isBack) {
      this.isBack = option.isBack;
    }
  },
  onShow() {},
  onReady() {
    this.$refs.uForm1.setRules(this.rules);
    this.$refs.uForm2.setRules(this.rules);
  },
  methods: {
    toRegister() {
      uni.navigateTo({
        url: "/pages/login/register",
      });
    },
    handelLogin() {
      const isC1 = this.current == 1;
      this.$refs[isC1 ? "uForm2" : "uForm1"]
        .validate()
        .then((res) => {
          this.isUse = true;
          isC1 ? this.sms_login() : this.pwlogin();
        })
        .catch((errors) => {
          console.log("校验失败");
        });
    },
    sms_login() {
      smsLogin({
        tel: this.form.tel,
        code: this.form.code,
      })
        .then((data) => {
          this.$u.toast("登录成功");
          this.loginCallback(data);
        })
        .finally(() => {
          this.isUse = false;
        });
    },
    pwlogin() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.pwd = encryptor(form.pwd);
      accountLogin(form)
        .then((data) => {
          this.$u.toast("登录成功");
          this.loginCallback(data);
        })
        .finally(() => {
          this.isUse = false;
        });
    },
    codeChange(text) {
      this.codeTips = text;
    },
    // 获取验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        this.$refs.uForm2.validateField("tel", (res) => {
          if (res.length) {
            return;
          }
          loginSms({ tel: this.form.tel }).then(
            (res) => {
              this.$u.toast("验证码已发送");
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
            },
            (err) => {
              console.log(err);
            }
          );
        });
      }
    },
    sectionChange(index) {
      this.current = index;
    },
    loginCallback(data) {
      this.$store.commit("LOGIN_CB", data);
      this.$store.dispatch("getUserInfo").then((res) => {
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 600);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.loginpage {
  padding: 0 48rpx;
  .loginpage-title {
    font-weight: bold;
    color: #222222;
    font-size: 48rpx;
    margin: 96rpx 0;
  }
  .tab-box {
    margin: 116rpx 0 90rpx;
    font-weight: bold;
    color: #666666;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    & > view {
      margin-right: 52rpx;
    }
    .actvie {
      color: #222222;
      font-size: 48rpx;
      image {
        opacity: 1;
      }
    }
    image {
      display: block;
      width: 40rpx;
      height: 40rpx;
      margin: 0 auto;
      opacity: 0;
    }
  }
}
.wxBtn {
  position: fixed;
  bottom: 10%;
  width: 100%;
  left: 0;
}
/deep/ .wxBtn button::after {
  border: none;
}
.loginBtn {
  // width: 526rpx;
  height: 80rpx;
  background: linear-gradient(90deg, #015eea, #00c0fa);
  box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
  border-radius: 40rpx;
  color: #ffffff;
  text-align: center;
  line-height: 80rpx;
  margin: 40rpx auto;

  &.able {
    opacity: 1;
  }
}

.wxloginBtn {
  margin: 0 auto;
  background: url("/static/loginBtn.png") no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 100rpx;
  height: 100rpx;
}

/deep/page {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
}
.login_box {
  margin-top: 30rpx;
  margin-bottom: 68rpx;
  .password {
    /deep/.uicon-eye-fill {
      &::before {
        color: #007aff;
        content: "\e613";
      }
    }
  }
}
/deep/ .u-item-bg {
  border-radius: 32px !important;
}
/deep/ .u-subsection {
  border-radius: 32px !important;
  .u-subsection__bar {
    border-radius: 32px !important;
  }
}
.full_img {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  z-index: -999;
  top: 0;
}

.head {
  height: 96rpx;
  width: 100%;
  line-height: 96rpx;
  margin-top: 40rpx;
  text-align: center;
  display: flex;
  position: relative;
  justify-content: center;
}
.icon {
  position: absolute;
  left: 30rpx;
}
</style>