<!--
 * @Author: chris
 * @Date: 2025-10-29 11:34:52
 * @LastEditors: chris
 * @LastEditTime: 2025-10-29 15:51:46
-->
<script setup>
import orchard from '@/static/svg/orchard.svg'
// import {
//   getWxCode,
// } from '@/api/login'

const loading = ref(false)
const wxCode = ref('')

function handleAuth() {
  loading.value = true
  uni.login({
    onlyAuthorize: true,
    success: (res) => {
      wxCode.value = res.code
      console.log(res)
    },
    error: (err) => {
      console.log(err)
    },
    finally: () => {
      loading.value = false
    },
  })
}

function getPhoneNumber(e) {
  console.log(e)
  handleAuth()
}
</script>

<template>
  <view class="auth-page">
    <view class="content-box">
      <view class="logo">
        <image :src="orchard" mode="contain" />
      </view>
      <view class="title">
        荔枝园监控系统
      </view>
      <wd-button block size="large" :loading="loading" open-type="getPhoneNumber" @get-phone-number="getPhoneNumber">
        授权获取手机号
      </wd-button>
    </view>
    <view class="copyright pb-safe">
      © 2025 荔枝园监控系统
    </view>
  </view>
</template>

<style lang="scss" scoped>
.auth-page {
  @apply flex flex-col items-center justify-between h-[100vh];

  .content-box {
    @apply flex flex-col items-center justify-center gap-[40rpx] w-70% mt-[35%];
  }

  .logo {
    @apply w-[160rpx] h-[160rpx];
  }

  .title {
    @apply text-[46rpx] tracking-[4rpx] font-bold;
    color: #666;
  }

  .wd-button {
    @apply w-full;
  }

  .copyright {
    @apply text-[24rpx] text-center;
    color: #999;
  }
}
</style>
