tk-mini-program/pages/loginWithEmailOrAccount/loginWithEmailOrAccount.vue

<template>
  <view class="container">
    <view class="bg"> </view>
    <view class="Return" @click="onBack">
      <image
        class="ReturnImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
        mode="scaleToFill"
      />
    </view>
    <view class="title">邮箱或账号登录</view>
    <view class="form">
      <view class="form-content">
        <input
          type="text"
          class="input"
          placeholder="请输入邮箱或账号"
          v-model="EmailOrAccount"
        />
        <input
          type="password"
          class="input"
          placeholder="请输入密码"
          v-model="Password"
          autocomplete="off"
        />
        <view class="btn" @click="onLogin">登录</view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../components/request.js";
import { goEasylogin } from "../../components/goEasyTool/tool.js";
import { useCounterStore } from "@/stores/counter";

const counter = useCounterStore();
export default {
  data() {
    return {
      title: "Hello",
      EmailOrAccount: "",
      Password: "",
    };
  },
  onLoad() {},
  methods: {
    // 登录
    onLogin() {
      const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/;
      if (!passwordRegex.test(this.Password)) {
        uni.showToast({
          title: "密码必须包含大小写字母和数字，长度6-16位",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "登录中...",
        mask: true,
      });
      request({
        url: "user/loginWithMail",
        method: "POST",
        data: {
          userNameOrEmail: this.EmailOrAccount,
          password: this.Password,
        },
        userInfo: false,
      })
        .then((res) => {
          uni.hideLoading();
          console.log(res);
          this.info = res;
          const now = Date.now();
          uni.setStorageSync("last_clean_time", now);
          counter.$patch({ myitem: this.info.data });
          if (res.code === 200) {
            uni.setStorageSync("userinfo", this.info.data);
            uni.setStorageSync("token", this.info.data.token);
            goEasylogin(
              this.$goeasy,
              String(this.info.data.id),
              this.info.data.headerIcon,
              this.info.data.nickName
            );
            uni.reLaunch({
                url: this.lastPage||'/pages/Home/Home',
              });
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err.msg,
            icon: "none",
          });
        });
    },
    // 返回上一页
    onBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(to bottom, #11cb2a6e, #2574fc6d);
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: absolute;
  top: 110rpx;
  left: 35rpx;
  width: 46rpx;
  height: 46rpx;
  z-index: 1;
}
.title {
  position: fixed;
  top: 120rpx;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
  z-index: 1;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.form {
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
}
.form-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.input {
  width: 80%;
  height: 80rpx;
  border: none;
  border-bottom: #4fcacd solid 1px;
  margin-bottom: 150rpx;
  padding-left: 10rpx;
  font-size: 24rpx;
  color: #000000;
}
.btn {
  width: 80%;
  height: 80rpx;
  background-color: #4fcacd;
  border-radius: 20rpx;
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  line-height: 80rpx;
  margin-top: 100rpx;
  cursor: pointer;
}
</style>