<template>
    <div class="page">
        <div class="page__title">登录</div>
        <div class="login">
            <button class="button" lang="zh_CN" open-type="getUserInfo" @getuserinfo="getUserInfo">
                <div class="login__content">
                    <i class="iconfont iconweixin login__icon"></i>
                    <div class="login__text">微信登录</div>
                </div>
            </button>
        </div>
        <div class="page__cancel" @click="back">取消登录</div>
    </div>
</template>

<script>
    export default {
        name: '',

        // 数据
        data() {
            return {}
        },

        // 函数
        methods: {
            // 获取用户信息
            getUserInfo(user) {
                const self = this
                let userInfo = user.detail.userInfo

                console.log(userInfo)

                if (userInfo) {
                    self.api.post('/User/UpdateUserWechatInfo', userInfo).then(res => {
                        self.$store.commit('user/update', {
                            login: true,
                            userInfo: userInfo,
                        })

                        self.router.back()
                    })
                } else {
                    self.fn.showToast('授权失败请重试')
                }
            },
        },

        // 数据计算
        computed: {},

        // 数据监听
        watch: {},
    }
</script>

<style lang="scss" scoped>
    .page {
        padding-top: px(170);

        &__title {
            font-size: px(72);
            color: #444;
            text-align: center;
        }

        &__cancel {
            margin-top: px(70);
            font-size: px(38);
            color: #999;
            text-align: center;
        }
    }

    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: px(160);

        &__content {
            display: flex;
            justify-content: center;
            align-items: center;
            width: px(910);
            height: px(140);
            border-radius: px(70);
            background-color: #09ba07;
        }

        &__icon {
            font-size: px(70);
            color: #fff;
        }

        &__text {
            margin-left: px(20);
            font-size: px(46);
            color: #fff;
        }
    }
</style>