<template>
    <view class="auth">
        <view>
        
            <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseAvatar">

                <image class="avatar-image" style="" mode="widthFx" :src="headImage">

                </image>
            </button>
            <view style="width:100%;text-align: center;color: #a8a8a8;margin-bottom: 40rpx;">点击授权使用微信头像</view>
            <van-field label="用户昵称" type="nickname" v-model="nickName" placeholder="请输入用户名" :border="true" />
            <view class="buttons">
                <van-button  round custom-style="width:100%"  class="confirm" type="primary">更新个人信息</van-button>
                <van-button custom-style="width:100%"  class="cancel" round  type="danger">取消更新</van-button>

            </view>
        </view>



    </view>
</template>

<script>
export default {
    data() {
        return {
            headImage: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
            nickName:""
        }
    },
    methods: {
        chooseAvatar(e) {
            const { avatarUrl } = e.detail
            this.headImage = avatarUrl


        },
    },

}
</script>

<style lang="scss" scoped>
.auth {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 10;
    display: flex;
    justify-content: center;
    padding-top: 250rpx;
    flex-wrap: wrap;
    .buttons{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 40rpx;
        align-content: center;
        align-items: center;
        .confirm{
            width: 100%;
        }
        .cancel{
            width: 100%;
            margin-top: 40rpx;
        }
        
    }
}

.avatar-image {
    width: 150rpx;
    height: 150rpx;
}

.avatar-wrapper {
    width: 150rpx;
    height: 150rpx;
    background: #fff;
    padding: 0 !important;
    overflow: hidden;

}

button ::after {
    padding: 0;
}
</style>