saas_miniprogram/pages4/login/login.vue

<template>
  <view style="height: 100%">
    <image
      mode="widthFix"
      src="/pages4/static/login_bg.jpg"
      class="full_img"
    ></image>
    <u-navbar
      title="登录"
      :border-bottom="false"
      background="{ background: '#ffffff',opacity:0.4; }"
      title-color="#ffffff"
      back-icon-color="#ffffff"
    ></u-navbar>
    <view style="padding: 30rpx">
      <view style="width: 400rpx">
        <u-subsection
          @change="sectionChange"
          :list="list"
          :current="current"
          active-color="#007AFF"
          inactive-color="#ffffff"
          bg-color="rgba(255,255,255,0.52)"
        ></u-subsection>
      </view>
      <view class="login_box">
        <u-form :model="form" ref="uForm1" v-show="current == 0">
          <u-form-item prop="account"
            ><u-input
              type="idcard"
              v-model="form.account"
              placeholder-style="color:#999999"
              placeholder="手机号/学员身份证"
          /></u-form-item>
          <u-form-item prop="pwd"
            ><u-input
              class="password"
              v-model="form.pwd"
              placeholder-style="color:#999999"
              type="password"
              placeholder="登录密码"
          /></u-form-item>
        </u-form>
        <u-form :model="form" ref="uForm2" v-show="current == 1">
          <u-form-item prop="tel" ref="tel"
            ><u-input
              type="number"
              maxlength="11"
              placeholder-style="color:#999999"
              v-model="form.tel"
              placeholder="手机号"
          /></u-form-item>
          <u-form-item prop="code">
            <u-input
              v-model="form.code"
              type="number"
              placeholder-style="color:#999999"
              placeholder="验证码"
            />
            <u-button slot="right" size="mini" @click="getCode">{{
              codeTips
            }}</u-button>
          </u-form-item>
        </u-form>
      </view>
      <button
        class="loginBtn"
        :class="{ able: canLogin() }"
        @click="login"
        v-if="current == 0"
      >
        登录
      </button>
      <button
        :disabled="isUse"
        :class="{ able: canLogin() }"
        class="loginBtn"
        @click="sms_login"
        v-if="current == 1"
      >
        登录
      </button>
      <view style="width: 100%; margin: 40rpx auto">
        <view
          style="
            display: flex;
            align-items: center;
            color: #007aff;
            font-size: 24rpx;
            justify-content: center;
          "
        >
          <navigator
            hover-class="none"
            url="/pages2/register/register"
            style="margin: 0 40rpx"
            >立即注册</navigator
          >
          <view
            style="width: 3rpx; height: 20rpx; background-color: #007aff"
          ></view>
          <navigator
            hover-class="none"
            url="/pages2/register/forget"
            style="margin: 0 40rpx"
            >忘记密码</navigator
          >
        </view>
      </view>

      <view class="wxBtn">
        <button
          type="default"
          open-type="getPhoneNumber"
          @getphonenumber="wxLogin"
          class="wxloginBtn"
        ></button>
        <view
          style="
            text-align: center;
            color: #999999;
            font-size: 24rpx;
            margin-top: 10rpx;
          "
          >微信快捷登录</view
        >
      </view>
    </view>
    <u-verification-code
      seconds="60"
      ref="uCode"
      @change="codeChange"
    ></u-verification-code>
  </view>
</template>

<script>
const PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4qkbwIKErstK1sFESPEhOShpR
pj4+sOVpJHxl5r/2xLBfA/MrXcAEra5Ro9cXNQSqmLLt8wecoLk/glfa5IdhXV0h
RVQplIVs5z3MxcUa9ptKPHUTgh8xMCBvl8sUJKwkmn4vYWeDfHT22EL7Hr1pTMwU
hF6WiNlWfQTVoF1rhwIDAQAB
-----END PUBLIC KEY-----`;
import JSEncrypt from "@/pages4/static/jsencrypt.min.js";
export default {
  data() {
    return {
      code: "",
      form: {
        tel: "",
        code: "",
        account: "",
        pwd: "",
      },
      list: [
        {
          name: "密码登录",
        },
        {
          name: "短信登录",
        },
      ],
      rules: {
        tel: [
          {
            required: true,
            message: "请输入手机号",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
          {
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.mobile(value);
            },
            message: "手机号码格式不正确",
            // 触发器可以同时用blur和change
            trigger: ["change"],
          },
        ],
        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) {
    this.$refs.uForm1.setRules(this.rules);
    this.$refs.uForm2.setRules(this.rules);
    if (option.isBack) {
      this.isBack = option.isBack;
    }
    let that = this;
    // this.from = option.from;
    uni.login({
      provider: "weixin",
      success: function (loginRes) {
        that.code = loginRes.code;
      },
    });
  },
  mounted() {},
  methods: {
    wxLogin(e) {
      console.log(e);

      this.$api
        .wxLogin({
          code: this.code,
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
        })
        .then((res) => {
          if (res.data.data.full_info) {
            //信息完善，直接进入页面
            uni.setStorageSync("user_account", res.data.data.user_account);
            uni.setStorageSync("token", res.data.data.token);
            this.$api.getInfo().then((resdata) => {
              if (resdata.data.code == 200) {
                this.$store.state.userInfo = resdata.data.data;

                if (!this.isBack) {
                  let goPath = uni.getStorageSync("goPath");

                  if (goPath == "course") {
                    uni.redirectTo({
                      url: "/pages2/wd/class",
                    });
                    this.$method.setUuid(new Date().valueOf() + "");
                  } else if (goPath == "bank") {
                    uni.redirectTo({
                      url: "/pages2/wd/question_bank",
                    });
                    this.$method.setUuid(new Date().valueOf() + "");
                  } else {
                    uni.reLaunch({
                      url: "/pages/index/index",
                    });

                    this.$method.setUuid(new Date().valueOf() + "");
                  }
                } else {
                  uni.navigateBack();
                }
              }
            });
          } else {
            //未完善信息,存为临时信息
            uni.setStorageSync("user_account_temp", res.data.data.user_account);
            uni.setStorageSync("token_temp", res.data.data.token);
            this.$navTo.togo("/pages2/register/bind");
          }
        });
    },
    canLogin() {
      if (this.current == 0) {
        if (this.form.account && this.form.pwd) {
          return true;
        }
        return false;
      } else if (this.current == 1) {
        if (this.form.tel && this.form.code) {
          return true;
        }
        return false;
      }
    },
    sms_login() {
      this.$refs.uForm2.validate((valid) => {
        if (valid) {
          let that = this;
          if (!this.form.tel) {
            this.$u.toast("请输入手机号码");
            return;
          }
          if (!this.form.code) {
            this.$u.toast("请输入验证码");
            return;
          }
          that.isUse = true;
          let datas = {
            tel: this.form.tel,
            code: this.form.code,
          };
          that.$api.smsLogin(datas).then(
            (res) => {
              that.isUse = false;
              if (res.data.code == 200) {
                if (res.data.data.full_info) {
                  //信息完善，直接进入页面
                  uni.setStorageSync(
                    "user_account",
                    res.data.data.user_account
                  );
                  uni.setStorageSync("token", res.data.data.token);
                  that.$api.getInfo().then((resdata) => {
                    if (resdata.data.code == 200) {
                      that.$store.state.userInfo = resdata.data.data;

                      if (!that.isBack) {
                        let goPath = uni.getStorageSync("goPath");

                        if (goPath == "course") {
                          uni.redirectTo({
                            url: "/pages2/wd/class",
                          });
                        } else if (goPath == "bank") {
                          uni.redirectTo({
                            url: "/pages2/wd/question_bank",
                          });
                        } else {
                          uni.reLaunch({
                            url: "/pages/index/index",
                          });
                        }
                      } else {
                        uni.navigateBack();
                      }
                    }
                  });
                } else {
                  //未完善信息,存为临时信息
                  uni.setStorageSync(
                    "user_account_temp",
                    res.data.data.user_account
                  );
                  uni.setStorageSync("token_temp", res.data.data.token);
                  that.$navTo.togo("/pages2/register/bind");
                }
              } else {
                that.$u.toast(res.data.msg);
              }
            },
            (err) => {
              that.isUse = false;
            }
          );
        }
      });
    },
    fakeLogin() {
      uni.setStorageSync("user_account", "123");
      uni.setStorageSync("token", "123");
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    /**
     *
     * @param {*} data
     * @returns
     * 加密
     */
    encryptor(data) {
      const encrypt = new JSEncrypt();
      encrypt.setPublicKey(PUBLIC_KEY);

      return encrypt.encrypt(data);
    },
    login() {
      let that = this;
      if (!this.form.account) {
        this.$u.toast("请输入手机号码/身份证号");
        return;
      }
      if (!this.form.pwd) {
        this.$u.toast("请输入密码");
        return;
      }
      //虚拟登录
      /* that.fakeLogin()
			return */
      that.isUse = true;
      let form = JSON.parse(JSON.stringify(this.form));
      form.pwd = this.encryptor(form.pwd);
      that.$api.accountLogin(form).then(
        (res) => {
          that.isUse = false;
          if (res.data.code == 200) {
            if (res.data.data.full_info) {
              //信息完善，直接进入页面
              uni.setStorageSync("user_account", res.data.data.user_account);
              uni.setStorageSync("token", res.data.data.token);
              that.$api.getInfo().then((resdata) => {
                if (resdata.data.code == 200) {
                  that.$store.state.userInfo = resdata.data.data;
                  if (!that.isBack) {
                    uni.reLaunch({
                      url: "/pages/index/index",
                    });
                  } else {
                    uni.navigateBack();
                  }
                }
              });
            } else {
              //未完善信息,存为临时信息
              uni.setStorageSync(
                "user_account_temp",
                res.data.data.user_account
              );
              uni.setStorageSync("token_temp", res.data.data.token);
              that.$navTo.togo("/pages2/register/bind");
            }
          } else {
            that.$u.toast(res.data.msg);
          }
        },
        (err) => {
          that.isUse = false;
        }
      );
    },
    codeChange(text) {
      this.codeTips = text;
    },
    // 获取验证码
    getCode() {
      let that = this;
      if (that.$refs.uCode.canGetCode) {
        if (that.$refs.tel.validateState == "success") {
          let datas = { tel: this.form.tel };
          that.$api.loginSms(datas).then(
            (res) => {
              if (res.data.code == 200) {
                that.$u.toast("验证码已发送");
                // 通知验证码组件内部开始倒计时
                that.$refs.uCode.start();
              } else {
                that.$u.toast(res.data.msg);
              }
            },
            (err) => {
              console.log(err);
            }
          );
        } else {
          this.$refs.tel.onFieldChange();
        }
      }
    },
    sectionChange(index) {
      this.current = index;
    },
    getPhoneNumber(e) {
      let that = this;
      uni.checkSession({
        success() {
          //session_key 未过期，并且在本生命周期一直有效
          that.putInfo(e);
        },
        fail() {
          // session_key 已经失效，需要重新执行登录流程
          uni.login({
            provider: "weixin",
            success: function (loginRes) {
              that.code = loginRes.code;
              that.putInfo(e);
            },
          });
        },
      });
    },
    putInfo(e) {
      let that = this;
      if (e.detail.encryptedData) {
        let inviteCode = uni.getStorageSync("inviteCode");
        //用户同意授权
        var datas = {
          iv: e.detail.iv,
          encryptedData: e.detail.encryptedData,
          code: that.code,
        };
        if (inviteCode) {
          datas.inviteCode = inviteCode;
        }
        that.$api.login(datas).then(
          (res) => {
            if (res.data.code == 200) {
              uni.setStorageSync("union_id", res.data.data.union_id);
              uni.setStorageSync("token", res.data.data.token);
              that.$api.getInfo().then((resdata) => {
                if (resdata.data.code == 200) {
                  uni.navigateBack();
                  that.$store.state.userInfo = resdata.data.data;
                }
              });
            } else {
              uni.showModal({
                title: "提示",
                content: res.data.msg,
                showCancel: false,
              });
            }
          },
          (err) => {
            console.log(err);
          }
        );
      }
    },
  },
};
</script>

<style scoped lang="scss">
.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);
  opacity: 0.6;
  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 {
  width: 100%;
  height: 360rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(1, 99, 235, 0.1);
  border-radius: 24rpx;
  margin-top: 30rpx;
  padding: 40rpx 35rpx;

  .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;
}
.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>