uniapp修改用户头像,昵称等信息

效果图:

点击修改头像按钮后弹出的弹框:

 

代码:

<template>
    <view class="userinfo">
        <view class="form">
            <button class="avatar-wrap" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <view class="label"> 头像 </view>
                <view class="ipt">
                    <img class="avatar" :src="cdnUrl" />
                    <uni-icons class="arrow-right" type="right" size="20"></uni-icons>
                </view>
            </button>
        </view>
        <view class="info_nickname">
            <view class="nickname_left"> 昵称 </view>
            <view class="nickname_right">
                <input v-model="nickname" placeholder="请输入您的昵称" />
            </view>
        </view>
        <view class="info_nickname">
            <view class="nickname_left">姓名</view>
            <view class="nickname_right">
                <input class="uni-input" placeholder="请输入您的姓名" @input="onName" :value="username" maxlength="10" />
            </view>
        </view>
        <view class="info_nickname">
            <view class="nickname_left"> 性别 </view>
            <view class="nickname_right gender">
                <picker @change="examinationType" :range="examinationTypeArray" style="margin-right: 10rpx">
                    <label class="">{{ examinationTypeArray[examinationTypeIndex] }}</label>
                </picker>
                <uni-icons class="arrow-right" type="right" size="20" style="margin-top: 5rpx"></uni-icons>
            </view>
        </view>
        <view class="info_nickname">
            <view class="nickname_left"> 手机号 </view>
            <view class="nickname_right">
                <view class="showphone">
                    {{ phone }}
                </view>
            </view>
        </view>
        <view class="btn-wrap">
            <button type="warn" class="btn" @click="saveinfo">保存</button>
        </view>
    </view>
</template>

<script>
// import  {getPhone}  from '../../utils/phoneNumber.js'
import { userinfo, profile } from '../../api/user.js'

export default {
    data() {
        return {
            cdnUrl: getApp().globalData.cdnUrl + 'static/img-my/userpicter.png',
            avatar: '',
            nickname: '',
            username: '',
            examinationTypeArray: ['男', '女'],
            examinationTypeIndex: 0,
            examinationTypeArrayType: '',
            phone: '',
            number: 2,
            flag: false
        }
    },
    onLoad() {
        this.getUserinfo()
    },
    methods: {
        saveinfo: function () {
            let self = this
            let data = {
                avatar: self.avatar,
                nickname: self.nickname,
                realname: self.username,
                gender: self.examinationTypeIndex
            }

            profile(data).then(function (res) {
                if (res.code == '1') {
                    if (self.avatar != '') {
                        uni.setStorageSync('avatar', getApp().globalData.cdnUrl + self.avatar)
                    }
                    uni.setStorageSync('nickname', self.nickname)
                    wx.showToast({
                        title: '修改成功',
                        icon: 'success',
                        duration: 3000
                    })
                } else {
                    wx.showToast({
                        title: '修改失败',
                        icon: 'none',
                        duration: 3000
                    })
                }
            })
        },
        upload_file: function (e) {
            wx.showLoading({
                title: '上传中'
            })

            let self = this
            wx.uploadFile({
                url: 'https://ccb-api.znyzf.com/api/common/upload',
                filePath: e, //图片路径
                name: 'file',
                header: {
                    'Content-Type': 'multipart/form-data',
                    token: uni.getStorageSync('token')
                },
                success: function (a) {
                    let res = a.data
                    res = JSON.parse(res)

                    if (res.code == '1') {
                        const { data } = res
                        self.avatar = data.url
                        self.cdnUrl = getApp().globalData.cdnUrl + data.url
                    }

                    wx.hideLoading()
                    wx.showToast({
                        title: '上传成功',
                        icon: 'success',
                        duration: 3000
                    })
                },
                fail: function (a) {
                    wx.hideLoading()
                    wx.showToast({
                        title: '上传失败',
                        icon: 'none',
                        duration: 3000
                    })
                }
            })
        },
        getUserinfo() {
            let self = this
            userinfo().then(function (res) {
                const { data } = res
                self.cdnUrl = data.avatar
                self.nickname = data.nickname
                self.username = data.realname
                self.phone = data.mobile
                self.examinationTypeIndex = data.gender
            })
        },
        onChooseAvatar(res) {
            console.log(res)
            const { detail } = res
            this.upload_file(detail.avatarUrl)
            this.cdnUrl = detail.avatarUrl
        },
        // 绑定输入监听事件
        onName(event) {
            console.log(event)
            const { detail } = event
            this.username = detail.value
        },
        change(e) {
            console.log('e:', e)
        },
        examinationType(e) {
            this.examinationTypeIndex = e.target.value
            this.examinationTypeArrayType = this.examinationTypeArray[this.examinationTypeIndex]
        },
        changenumber() {
            this.number = 1
            this.flag = true
        },
        onPhone(event) {
            console.log(event)
            const { detail } = event
            this.phone = detail.value
        }
    }
}
</script>

<style lang="scss">
button::after {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
}
.userinfo {
    font-size: 34rpx;
    font-weight: 400;
    color: #333333;
    height: 100%;
    position: relative;
    .form {
        background-color: #ffffff;
    }
    .avatar-wrap {
        border: 0;
        background-color: #ffffff;
        height: 158rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32rpx;
        .avatar {
            margin-right: 10rpx;
        }
        .ipt {
            display: flex;
            align-items: center;
        }
        img {
            width: 118rpx;
            height: 118rpx;
        }
    }

    .info_nickname {
        border-bottom: 1px solid #e9e9e9;
        height: 112rpx;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32rpx;
        // justify-content: space-between;

        .nickname_left {
        }

        .nickname_right {
            input {
                text-align: right;
            }
        }
        .gender {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .btn-wrap {
        position: absolute;
        bottom: 50rpx;
        width: 100%;
        text-align: center;
        .btn {
            width: 690rpx;
            height: 88rpx;
        }
    }
}
</style>