zhishifufei_uniapp/components/Modification/index.vue

<template>
    <view class="user-info" v-if="tipIsVisable" data-type="self">
        <view class="upone">
            <view class="avatar">
                <view class="name">头像</view>
                <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <image class="image" :src="currentAvatar" mode="aspectFill"></image>
                </button>
                <view class="iconfont iconxiangyou"></view>
            </view>

            <view class="list">
                <view class="item">
                    <span class="name">昵称</span>
                    <input type="nickname" v-model="username" class="value input" placeholder="输入昵称"
                        @blur="onNickname" />
                </view>
            </view>
            <view class="btn-group">
                <button class="btn flex flex-center" type="button" @click="childClick()">
                    确认登录
                </button>
            </view>
        </view>

    </view>
</template>

<script>
export default {
    props: {
        avatar: {
            type: String,
            default: "",
        },
        tipIsVisable: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            currentAvatar: this.avatar,
            username: ''
        };
    },
    methods: {
        // 获取微信用户头像
        async onChooseAvatar(e) {
            const result = await this.$util.uploadImg(e.detail.avatarUrl);
            this.currentAvatar = result
        },
        // 获取微信用户名称
        onNickname(event) {
            this.username = event.target.value;
        },
        // 传值
        async childClick() {
            if(this.currentAvatar == "/static/images/avatar.png"){this.$util.showMsg("请选择头像"); return false;}
            if(!this.username){this.$util.showMsg("请选择或输入昵称");return false;}
            try {
                // const result = await this.$util.uploadImg(this.currentAvatar);
                var childdata = { username: this.username, currentAvatar: this.currentAvatar  };
                console.log(childdata)
                this.$emit("changes", childdata);
            } catch (err) {
                this.$util.showMsg(err.msg || err);
            }
       

        }
    },
};
</script>

<style scoped lang="scss">
input {
    height: 98rpx;
}

button:after {

    border: none;

}

.user-info {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.user-info .upone {
    width: 600rpx;
    height: 300rpx;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #FFFFFF;
    border-radius: 45rpx;
    margin: auto;
}

.user-info .avatar {
    border-top-left-radius: 45rpx;
    border-top-right-radius: 45rpx;
    border-bottom: 1px solid #eae5e5;
    display: flex;
    align-items: center;
    padding: 30rpx;
    background-color: #ffffff;
}

.user-info .avatar .name {


    flex: 1;
    font-weight: 500;
    font-size: 30rpx;
    color: #333;
}

.user-info .avatar .image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    overflow: hidden;
}

.user-info .avatar .iconfont {
    margin-left: 30rpx;
    font-size: 24rpx;
    color: #999999;
}

.user-info .avatar .input {
    display: none;
}

.user-info .list {
    background-color: #ffffff;
}

.user-info .list .item {
    display: flex;
    align-items: center;
    height: 98rpx;
    padding-right: 30rpx;
    padding-left: 30rpx;
}

.user-info .list .item~.item {
    border-top: 1px solid #f5f5f5;
}

.user-info .list .item .name {


    flex: 1;
    font-weight: 500;
    font-size: 30rpx;
    color: #333;
}

.user-info .list .item .value {
    font-size: 30rpx;
    color: #666;
}

.user-info .list .item .iconfont {
    margin-left: 30rpx;
    font-size: 24rpx;
    color: #999999;
}

.user-info .list .item .input {
    font-family: inherit;
    text-align: right;
}

.user-info .btn-group {
    padding: 80rpx 30rpx 0;
}

.user-info .btn-group .btn {
    width: 100%;
    height: 90rpx;
    border-radius: 45rpx;
    margin-bottom: 30rpx;
    background-color: #2c8eff;
    font-size: 32rpx;
    color: #ffffff;
}

.user-info .btn-group .btn:last-child {
    margin-bottom: 0;
}

.user-info .btn-group .out-btn {
    border: 1px solid #2c8eff;
    background-color: #ffffff;
    color: #2c8eff;
}
</style>