app-AgricultureSmart/uniapp/subpkg/login/login.vue

<template>
  <view class="login-page">
    <view class="login-container">
      <view class="login-header">
        <text class="login-title">欢迎使用</text>
      </view>
      <view class="login-body">
        <van-button round type="info" size="large" @click="handleAuthorize" :loading="loading">
          一键授权登录
        </van-button>
      </view>
      <view class="loading-container" v-if="loading">
        <view class="loading-spinner"></view>
        <text class="loading-text">正在登录...</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    ...mapMutations('m_user',['updateToken']),
    handleAuthorize() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        // 在这里添加登录成功后的逻辑
        console.log("登录成功");
        this.updateToken('123456')
        uni.showToast({
          title: '登录成功',
          icon: 'success',
          duration: 2000,
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1000);
      }, 3000);
    },
  },
};
</script>

<style lang="scss">
.login-page {
  background: linear-gradient(135deg, #6a82fb, #fc5c7d);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-container {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 24px;
    width: 80%;
    max-width: 400px;

    .login-header {
      text-align: center;
      margin-bottom: 24px;

      .login-title {
        font-size: 24px;
        font-weight: bold;
        color: #333;
      }
    }

    .login-body {
      text-align: center;
    }

    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 24px;

      .loading-spinner {
        width: 30px;
        height: 30px;
        border: 4px solid #fc5c7d;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      .loading-text {
        margin-top: 8px;
        color: #666;
        font-size: 14px;
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>