优化代码

pages/loginWithEmailOrAccount/loginWithEmailOrAccount.vue

@@ -0,0 +1,190 @@
+<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>