微信小程序头像昵称填写（uni-app）

<template>
    <view class="container" :style="{'min-height':screenHeight+'px'}">
        <uni-nav-bar title="个人信息" statusBar fixed leftIcon="arrowleft" @clickLeft="clickBack"></uni-nav-bar>
        <view class="content_view">
            <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image class="avatar" :src="avatarUrl"></image>
            </button>
            <input type="nickname" class="weui-input" placeholder="请输入昵称" maxlength="15" :value="nickName"
                @change="getNickname" />
        </view>
        <view class="bottom_view">
            <view class="report_view" @click="submit">
                <text class="report_text">确认修改</text>
            </view>
        </view>
    </view>
</template>
<script>
    const defaultAvatarUrl =
        'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
    import {
        uploadTheImg,
    } from "@/utils/index.js";
    import {
        updateNickNameAndHeadImg
    } from '@/service/base-service.js'

    export default {
        data() {
            return {
                userInfo: {},
                avatarUrl: defaultAvatarUrl,
                nickName: "",
            }
        },
        created() {
            this.userInfo = uni.getStorageSync('memberInfo');
            this.nickName = this.userInfo.nickName
            this.avatarUrl = this.userInfo.headImage
            console.log("userInfo", this.userInfo)
        },
        mounted() {

        },
        methods: {
            clickBack() {
                uni.navigateBack();
            },
            getNickname(e) {
                console.log("getNickname", e.detail.value)
                this.nickName = e.detail.value
                this.checkNickName()
            },
            checkNickName() {
                if (!this.nickName) {
                    uni.showToast({
                        title: '请输入昵称',
                        icon: 'none'
                    })
                    return false
                }
                let str = this.nickName.trim();
                if (str.length == 0) {
                    uni.showToast({
                        title: '请输入正确的昵称',
                        icon: 'none'
                    })
                    return false
                }
                this.nickName = str
                // if ((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)) {
                //  uni.showToast({
                //      title: '请输入中英文和数字',
                //      icon: 'none'
                //  })
                //  return false
                // }
                return true
            },
            onChooseAvatar(e) {
                console.log("onChooseAvatar===", e)
                this.avatarUrl = e.detail.avatarUrl
                let params = {
                    urlType: "public",
                    prefix: "miniAvatar",
                };
                let that = this
                uploadTheImg([this.avatarUrl], params).then(res => {
                    // console.log("zsppppppppppppp========", res)
                    if (!res || res.length == 0) {
                        return
                    }
                    that.avatarUrl = res[0]
                })
            },
            submit() {
                console.log("submit提交", this.nickName, this.avatarUrl)
                // return
                if (!this.avatarUrl) {
                    uni.showToast({
                        title: '请上传头像',
                        icon: 'none'
                    })
                    return
                }
                if (!this.checkNickName()) {
                    return
                }
                let params = {
                    nickName: this.nickName,
                    headImage: this.avatarUrl,
                    memberId: this.userInfo.id,
                }
                console.log("params====", params)
                // return
                
                uni.showLoading({
                    title: '加载中',
                    mask: true
                })
                updateNickNameAndHeadImg(params).then(res => {
                    uni.hideLoading()
                    console.log("updateNickNameAndHeadImg==", res)
                    if (res.errorCode != 0) {
                        return
                    }
                    uni.showToast({
                        title: '修改成功',
                        icon: 'none'
                    })
                    this.userInfo.nickName = this.nickName
                    this.userInfo.headImage = this.avatarUrl
                    uni.setStorageSync('memberInfo', this.userInfo)
                    setTimeout(function() {
                        uni.$emit("userInfoRefresh", {
                            isRefresh: true,
                        });
                        uni.navigateBack();
                    }, 2000);
                }, err => {
                    uni.hideLoading()
                })

            },
        }
    }
</script>
<style lang='scss'>
    .container {
        display: flex;
        flex-direction: column;
    }

    /* 边框样式 */
    button::after {
        border: 0;
    }

    .content_view {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 68px;
        position: relative;
        /* background-color: #F6F6FC; */
    }

    .avatar-wrapper {
        width: 100px;
        height: 100px;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 100px;
    }

    .avatar {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        border-style: solid;
        border-width: 1px;
        border-color: #d6d6d5;
    }

    .weui-input {
        margin-top: 40px;
        width: 300px;
        height: 40px;
        background: #f4f4f6;
        line-height: 40px;
        text-align: center;
    }

    .bottom_view {
        position: fixed;
        bottom: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: white;
        z-index: 20;
        padding-top: 10px;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .report_view {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 706rpx;
        height: 76rpx;
        background-color: #e60012;
        border-radius: 19px;
        margin-bottom: 10px;
    }

    .report_text {
        color: #fff;
        font-size: 15px;
    }
</style>