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

<template>
  <view class="return" @click="Return">
    <image
      style="width: 40rpx; height: 40rpx"
      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
      mode="scaleToFill"
    />
  </view>
  <view class="container">
    <image class="logo" :src="userInfo.avatarUrl"></image>
    <view class="nickname"> {{ userInfo.nickName }}</view>
    <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
      使用手机号快捷登录
    </button>
    <button class="login-btns" @click="loginWithEmailOrAccount">
      使用邮箱或者账号登录
    </button>
  </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 {
  inject: ["$global"],
  data() {
    return {
      userInfo: {},
      info: {},
      userSig: "",
      lastPage: "",
      myuserSig: "",
    };
  },
  onLoad() {
    uni.getUserInfo({
      provider: "weixin",
      success: (res) => {
        this.userInfo = res.userInfo;
      },
    });
    uni.getStorage({
      key: "lastPage",
      success: (res) => {
        this.lastPage = "/" + res.data;
      },
      fail: () => {
        this.lastPage = "/pages/Home/Home";
      },
    });
  },

  methods: {
    // 邮箱或者账号登录
    loginWithEmailOrAccount() {
      uni.navigateTo({
        url: "/pages/loginWithEmailOrAccount/loginWithEmailOrAccount",
      });
    },
    // 返回首页
    Return() {
      uni.reLaunch({
        url: "/pages/Home/Home",
      });
    },
    // 获取手机号
    getPhoneNumber(e) {
      if (e.detail.code == undefined) {
        uni.showToast({
          title: "登录失败",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "登录中...",
        mask: true,
      });
      request({
        url: "user/loginWithPhoneNumber",
        method: "POST",
        data: {
          code: e.detail.code,
        },
        userInfo: false,
      }).then((res) => {
        uni.hideLoading();
          this.info = res;
          uni.setStorageSync("userinfo", this.info.data.info);
          const now = Date.now();
          uni.setStorageSync("last_clean_time", now);
          counter.$patch({ myitem: this.info.data.info });
          if (this.info.code === 200) {
            if (this.info.data.newAccount) {
              uni.reLaunch({
                url: "/pages/UserInformation/UserInformation",
              });
              uni.hideLoading();
            } else {
              uni.setStorageSync("userinfo", this.info.data.info);
              uni.setStorageSync("token", res.data.info.token);
              goEasylogin(
                this.$goeasy,
                String(this.info.data.info.id),
                this.info.data.info.headerIcon,
                this.info.data.info.nickName
              );
              uni.hideLoading();
              //跳转原来页面否则首页
              uni.reLaunch({
                url: this.lastPage,
              });
            }
          } else {
            uni.hideLoading();
            uni.showToast({
              title: "登录失败",
              icon: "none",
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
              title: "登录失败",
              icon: "none",
            });
        });
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #11cb2a6e, #2574fc6d);
}

.logo {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
.nickname {
  width: 300rpx;
  height: 100rpx;
  color: rgb(255, 255, 255);
  border-radius: 0px;
  padding: 20rpx 40rpx;
  font-size: 30rpx;
  text-align: center;
  line-height: 100rpx;
}
.login-btn {
  background-color: hsla(0, 0%, 100%, 0);
  border: 1px solid #00ff0000;
  color: #ffffff;
}
.login-btns{
  margin-top: 20rpx;
  background-color: hsla(0, 0%, 100%, 0);
  border: 1px solid #00ff0000;
  color: #ffffff;
}

.tips {
  color: #666;
  font-size: 24rpx;
  margin-top: 40rpx;
}
.return {
  position: fixed;
  top: 100rpx;
  left: 80rpx;
  z-index: 999;
}
</style>