uni-app 登录 哈哈

 

 

 

<template>
  <view class="content">
    <u-navbar
      :title="title"
      :is-back="false"
      back-icon-color="#000"
      :background="background"
      :border-bottom="false"
      title-color="#fff"
    >
    </u-navbar>

    <view class="weixin-login" :style="!isShowLogin ? '' : 'display:none'">
      <view class="header">
        <image class="logo" :src="logoImg" mode=""></image>
        <view class="logo-name">{{ logoName }}</view>
      </view>
      <view class="center">
        <image
          style="width: 640rpx; height: 480rpx"
          src="../../static/images/logo2.png"
          mode=""
        ></image>
      </view>
      <view class="footer">
        <image
          class="weixin-icon"
          src="../../static/images/weixin-icon.png"
          mode=""
        ></image>
        <view class="login">微信用户一键登录</view>
      </view>
      <view class="sjh-qh">
        <view @click="switchLogin">输入手机号码登录/</view>
        <view @click="goToRegister">注册</view>
      </view>
    </view>

    <view class="cell-phone-login" :style="isShowLogin ? '' : 'display:none'">
      <image class="logo" :src="logoImg" mode=""></image>
      <view class="title">{{ logoName }}</view>
      <u-form :model="formData" ref="uForm">
        <!--                <u-form-item label="+86" left-icon="arrow-down" prop="username">-->
        <!--                    <u-input :clearable="false" placeholder="请输入手机号码" v-model="formData.username" />-->
        <!--                </u-form-item>-->
        <u-form-item prop="username">
          <u-input
            type="text"
            :clearable="false"
            placeholder="请输入账号"
            v-model="formData.username"
          />
        </u-form-item>
        <u-form-item prop="password">
          <u-input
            type="password"
            :clearable="false"
            placeholder="请输入密码"
            v-model="formData.password"
          />
        </u-form-item>
        <u-form-item prop="validateCode">
          <u-input
            :clearable="false"
            placeholder="请输入验证码"
            v-model="formData.validateCode"
          />
          <image
            :src="vcodeImg"
            mode=""
            class="codeImg"
            @click="initVcode"
          ></image>
        </u-form-item>
      </u-form>
      <!-- 记住密码20221122 -->
      <view class="inputWrap">
        <checkbox-group @change="checkboxChange">
          <label>
            <checkbox value="true" :checked="checkedSelect" />记住用户密码
          </label>
        </checkbox-group>
      </view>
      <view class="login" @click="userLogin">登录</view>
      <!--      <view class="wj-password">忘记密码?</view>-->
      <!--      <view v-show="false" class="weixin-qh">-->
      <!--        <image-->
      <!--          class="weixin-icon"-->
      <!--          src="../../static/images/weixin-icon2.png"-->
      <!--          mode=""-->
      <!--        ></image>-->
      <!--        <view class="login-qh" @click="weixinLogin">微信快速登录</view>-->
      <!--      </view>-->
      <view class="zc-sq">
        <view class="zc" @click="goToRegister">返回首页</view>
        <!--        <view-->
        <!--          class="geduan"-->
        <!--          style="-->
        <!--            width: 2rpx;-->
        <!--            height: 32rpx;-->
        <!--            background-color: #d8d8d8;-->
        <!--            margin: 0 46rpx;-->
        <!--          "-->
        <!--        >-->
        <!--        </view>-->
        <!--        <view class="sq" @click="toVcode">申请编码</view>-->
      </view>
    </view>
  </view>
</template>

<script>
import API from "@/api/api.js";
import uInput from "uview-ui/components/u-input/u-input.vue";
import CryptoJS from "@/common/crypto-js.min";

export default {
  components: {
    uInput,
  },
  data() {
    return {
      title: "",
      background: {
        backgroundColor: "#fff",
      },
      logoName: "信产云谷智慧园",
      logoImg: require("../../static/images/logo.png"),
      isShowLogin: true,
      vcodeImg: "",
      formData: {
        key: "",
        username: "",
        password: "",
        validateCode: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: ["change", "blur"],
          },
          // {
          //     validator: (rule, value, callback) => {
          //         return this.$u.test.mobile(value);
          //     },
          //     message: '手机号码不正确',
          //     trigger: ['change', 'blur'],
          // }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "change",
          },
        ],
        validateCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "change",
          },
        ],
      },
      checkedSelect: false,
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad() {
    this.getVtcode();
    this.getGlobalList();
    if (uni.getStorageSync("username") && uni.getStorageSync("password")) {
      this.formData.username = uni.getStorageSync("username");
      this.formData.password = uni.getStorageSync("password");
      this.checkedSelect = uni.getStorageSync("checked") ? true : false;
    } else {
      this.formData = {};
    }
  },
  methods: {
    getGlobalList() {
      API.getGlobalList().then((res) => {
        if (res.code == "00000") {
          this.logoName = res.data ? res.data.systemName : this.logoName;
          this.logoImg = res.data ? res.data.appLogo : this.logoImg;
        }
      });
    },
    // 获取图片验证码
    getVtcode() {
      API.getVcode().then((res) => {
        this.vcodeImg = res;
      });
    },
    // 刷新验证码
    initVcode() {
      this.getVtcode();
    },
    switchLogin() {
      this.isShowLogin = !this.isShowLogin;
    },
    weixinLogin() {
      this.isShowLogin = !this.isShowLogin;
    },
    goToRegister() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    toVcode() {
      uni.navigateTo({
        url: "/pages/register/result-check/result-check",
      });
    },
    userLogin() {
      //记住用户名密码
      if (this.checkedSelect) {
        uni.setStorageSync("username", this.formData.username);
        uni.setStorageSync("password", this.formData.password);
        uni.setStorageSync("checked", 1);
      } else {
        uni.removeStorageSync("username");
        uni.removeStorageSync("password");
        uni.removeStorageSync("token");
      }
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          API.getKey().then((res) => {
            if (res.code === 200) {
              this.formData.key = res.data;
              let formData = JSON.parse(JSON.stringify(this.formData));
              formData.password = this.setPassword();
              API.userLogin(formData).then((res) => {
                if (res.code === 200) {
                  uni.setStorageSync("token_guide", res.data);
                  uni.navigateTo({
                    url: "/pages/tutorials/tutorials-event",
                  });
                } else {
                  this.getVtcode();
                  uni.showToast({
                    title: res.msg ? res.msg : res.desc,
                    icon: "none",
                    duration: 1000,
                    mask: true,
                  });
                }
              });
            }
          });
        } else {
          uni.showToast({
            title: "请填写完整登录项",
            icon: "none",
            duration: 1000,
            mask: true,
          });
        }
      });
    },
    setPassword() {
      var key = CryptoJS.enc.Utf8.parse(this.formData.key);
      var password = CryptoJS.enc.Utf8.parse(this.formData.password);
      var encrypted = CryptoJS.AES.encrypt(password, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
      });
      return encrypted.toString();
    },
    //记住用户密码
    checkboxChange(e) {
      if (e.detail.value[0] == "true") {
        this.checkedSelect = true;
      } else {
        this.checkedSelect = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.weixin-login {
  display: flex;
  flex-direction: column;
  align-items: center;

  .header {
    display: flex;
    align-items: center;
    margin-top: 44rpx;

    .logo {
      width: 54rpx;
      height: 54rpx;
      display: flex;
      margin-right: 20rpx;
    }

    .logo-name {
      font-size: 52rpx;
      font-weight: 600;
      color: #0176fe;
      background: linear-gradient(180deg, #0176fe 0%, #015cc6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .center {
    margin: 8rpx 0 10rpx;
  }

  .footer {
    width: 670rpx;
    height: 84rpx;
    background: #51a938;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .weixin-icon {
      width: 40rpx;
      height: 32rpx;
      display: flex;
      margin-right: 10rpx;
    }

    .login {
      font-size: 32rpx;
      color: #fff;
    }
  }

  .sjh-qh {
    display: flex;
    color: #5b6167;
    position: fixed;
    bottom: 20rpx;
  }
}

.cell-phone-login {
  .logo {
    width: 128rpx;
    height: 128rpx;
    display: flex;
    margin: 64rpx 0 0 50rpx;
  }

  .title {
    margin: 32rpx 0 0 50rpx;
    font-size: 44rpx;
    line-height: 60rpx;
    color: #363a44;
  }

  /deep/ .u-form {
    margin: 60rpx 50rpx 0;
    width: 650rpx;

    .u-form-item--left__content__icon {
      margin-left: 60rpx;
      color: #0169e2;
    }

    .u-form-item--left__content__label {
      margin-left: -90rpx;
      color: #0169e2;
    }

    /deep/ .u-form-item {
      width: 650rpx;
      height: 88rpx;
      line-height: 88rpx;
    }
  }

  .login {
    width: 650rpx;
    height: 88rpx;
    background: #0169e2;
    border-radius: 44rpx;
    font-size: 32rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 50rpx;
    margin-top: 60rpx;
  }

  .wj-password {
    margin-left: 50rpx;
    color: #b8bbbd;
    outline-offset: 32rpx;
    line-height: 44rpx;
    margin-top: 24rpx;
    font-size: 32rpx;
  }

  .weixin-qh {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 194rpx;

    .weixin-icon {
      width: 40rpx;
      height: 32rpx;
      display: flex;
    }

    .login-qh {
      color: #51c332;
      margin-left: 10rpx;
      font-size: 32rpx;
    }
  }

  .zc-sq {
    display: flex;
    height: 44rpx;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #b8bbbd;
    margin-top: 60rpx;
    padding-top: 280rpx;
  }
}
.codeImg {
  position: absolute;
  top: 0;
  right: 0;
  width: 200rpx;
  height: 100%;
  z-index: 99;
}
.inputWrap {
  margin-top: 20rpx;
  margin-left: 20rpx;
}
</style>