xiamen-sb-uniapp/pages/setting/update-setting.vue

<template>
    <view class="mx3 pb100">
        <view>
            <view class="d-flex a-center py2">
                <view class="p-relative">
                    <image src="/static/images/avatar.svg" style="width: 36rpx;height: 36rpx;" mode=""></image>
                </view>
                <text class="ml-2 f-size-28 f-weight-6">头像</text>
            </view>
            <view class="d-flex j-between">
                <text class="f-size-28 text-color-9" style="width: 400rpx;">请上传清晰规范的头像</text>
                <view class="flex1 text-center p-relative border-radius" style="margin-top: -80rpx;width: 200rpx;height: 200rpx;overflow: hidden;" @click="handleUpload">
                    <image
                        :src="avatar"
                        class="border-radius bg-color-light"
                        @error="myDefaultAvatar"
                        style="width: 200rpx;height: 200rpx;overflow: hidden;"
                        mode=""></image>
                    <!-- <view class="p-absolute bg-color-dark "
                    style="width: 200rpx;height: 200rpx;  left: 0;">
                        <image src="/sub/static/images/avatar.svg" style="width: 36rpx;height: 36rpx;" mode=""></image>
                    </view> -->
                </view>
            </view>
        </view>
        <!-- 姓名 -->
        <view class="mb-2">
            <view class="d-flex a-center py2">
                <image src="/static/images/name.svg" style="width: 36rpx;height: 36rpx;" mode=""></image>
                <text class="ml-2 f-size-28 f-weight-6">姓名</text>
            </view>
            <view class="d-flex j-between a-center border1" >
                <u-input v-model="model.realName" placeholder="请输入姓名" style="flex: 1;" />
            </view>
        </view>

        <!-- 职业类别 -->
        <view class="mb-2">
            <view class="d-flex a-center py2">
                <image src="/static/images/type.svg" style="width: 36rpx;height: 36rpx;" mode=""></image>
                <text class="ml-2 f-size-28 f-weight-6">部门</text>
            </view>
            <view class="d-flex j-between a-center border1">
                <u-input v-model="model.deptName" placeholder="请选择部门" disabled @click="industryTypeShow = true" style="flex: 1;" />
                <image src="/static/images/select_b.svg" class="w36" mode=""></image>
            </view>
        </view>
        <u-select
            v-model="industryTypeShow"
            value-name="id"
            label-name="title"
            child-name="children"
            :list="deptList"
            mode="mutil-column-auto"
            @confirm="industryTypeConfirm"></u-select>

        <button
            class="main-color-bg text-color-white logout"
            @tap="saveInfo">保存</button>
    </view>
</template>

<script>
import { getUserInfo } from '@/api'

export default {
    data() {
        return {
            userName: '',
            industryTypeShow: false,
            userInfo: {},
            avatar: null,
            model: {
                avatar: null,
                realName: null,
                deptId: null,
                deptName: null
            },
            deptList: {}
        }
    },
    onLoad() {
        this.userInfo = this.$BaseTool.UserUtil.getUserInfo();
        console.log(333, this.userInfo)
        if (this.userInfo.avatar) {
            this.avatar = this.$BaseTool.UserUtil.getFileUrl(this.userInfo.avatar);
            this.model.avatar = this.userInfo.avatar
        }
        this.model.realName = this.userInfo.realName
        this.model.deptId = this.userInfo.deptId
        this.model.deptName = this.userInfo.deptName
        // this.$Http.getUserPersonalByUserId(this.userInfo.userId).then(res=>{
        // 	this.model = res.data
        // 	this.avatar = this.model.avatar
        // 	this.model.industryTypeLabel =this.industryTypeMap[this.model.industryType]
        // 	this.model.workYearLabel =this.workYearMap[this.model.workYear]
        // 	this.model.educationLabel =this.educationMap[this.model.education]
        // 	this.model.freeTimeLabel =this.freeTimeMap[this.model.freeTime]
        // })
    },
    created() {
        this.$Http.getDeptTree().then(res => {
            this.deptList = res.data
            console.log(3333, this.deptList)
        })
    },
    methods: {
        saveInfo() {
            this.model.editType = 1
            if (!this.model.realName) {
                this.$Message.toast('请输入姓名')
                return
            }
            if (!this.model.deptId) {
                this.$Message.toast('请输入部门')
                return
            }
            this.model.deptIds = [this.model.deptId]
            this.$Http.updateInfo(this.model).then(res => {
                uni.showToast({ icon: 'none', title: '修改成功' })
                getUserInfo().then(response => {
                    uni.setStorage({
                        key: 'userInfo',
                        data: response.data,
                        success: function () {
                            uni.redirectTo({ url: '/pages/setting/setting?update=true' })
                        }
                    });
                });
            })
        },
        myDefaultAvatar() {
            this.avatar = '/static/images/user_pic.png'
        },
        // 图片
        handleUpload() {
            const that = this
            this.$Http.uploadImageOpen({ count: 1, type: 1 }).then(res => {
                if (res.length > 0) {
                    that.model.avatar = res[0].url
                    this.avatar = this.$BaseTool.UserUtil.getFileUrl(that.model.avatar);
                }
            }, err => {
                this.$Message.toast(err.message)
            })
        },
        industryTypeConfirm(e) {
            this.model.deptId = e[e.length - 1].value
            this.model.deptName = e[e.length - 1].label
        }
    }
}
</script>

<style>
    page {
        background-color: #FFFFFF;
    }
    .border1{
        border-bottom: 1px solid #e4e5e4;
    }
    .w36{
        width: 26rpx;height: 26rpx;
    }

    .button-save {
        z-index: 5;
        position: fixed;
    }
</style>