nbjk-xcx/src/otherPages/userInfoAuth/index.vue

<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 @blur="changeNickName" :value="nickName" label="用户昵称" type="nickname" placeholder="请输入用户名"
                :border="true" />
            <view class="buttons">
                <van-button @click="sendUserInfo" round custom-style="width:100%" class="confirm"
                    type="primary">更新个人信息</van-button>
                <van-button @click="cancel" custom-style="width:100%" class="cancel" round type="danger">返回</van-button>

            </view>
        </view>



    </view>
</template>

<script>
import api from '@/api'
export default {
    data() {
        return {
            headImage: "http://tmp/ekMKUCOq9knR5cb11ccf64e25bcec14a65f89951c334.jpeg",
            nickName: ""
        }
    },

    methods: {
        cancel() {
            uni.switchTab({
                url: "/pages/carVideo/index"
            })

        },
        chooseAvatar(e) {

            const { avatarUrl } = e.detail
            this.headImage = avatarUrl
        },
        changeNickName(e) {
            console.log(e)
            this.nickName = e.detail.value
        },
        sendUserInfo() {

            api.user.userInfoUserInfo({
                nickName: this.nickName,
                headImage: this.headImage
            }).then(res => {
                uni.showToast({
                    title: "更新成功"
                })
                setInterval(() => {
                    uni.switchTab({
                        url: "/pages/carVideo/index"
                    })
                }, 1500)

            })

        },


    },

}
</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>