<template>
    <view class="page">
        <view class="phone_view">
            <view class="title">牧云项目管理系统</view>
            <view class="profile">第一次使用此程序功能，需要授权手机号</view>
            <custom-button  class="mini-btn" open-type="getPhoneNumber" width="600rpx" type="filled" color="#007aff" @getphonenumber="getPhoneNumber" ripple>授权手机号</custom-button>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { getPermissions, postUserInfo } from '@/api/base/client';
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const getPhoneNumber = (e: any) => {
    uni.login({
        async success(loginRes: UniApp.LoginRes) {
            const { code } = loginRes
            const { encryptedData, iv } = e.detail;
            await postUserInfo({ code, mobile: { iv, encryptedData } })
            uni.showToast({
                icon: 'success',
                title: '授权成功'
            })
            const { list } = await getPermissions();
            userStore.setAuthorize({ mobile: true, user_info: true })
            userStore.setPermissionsList(list)
            uni.reLaunch({ url: '/pages/home/index' })
        }
    })
}
</script>
<style lang="less" scoped>
.page {
    background-color: rgba(255, 255, 255, 1.000000);
    position: relative;
    width: 750rpx;
    height: 1624rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .phone_view {
        height: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;

        .title {
            text-align: center;
        }

        .profile {
            text-align: center;
            margin-top: 30rpx;
            font-size: 14px;
            color: #888;
        }

        .mini-btn {
            margin-top: 50rpx;
            margin-left: 50px;
            margin-right: 50px;
        }
    }
}
</style>