MD_worker/pages/index/my.vue

<template>
    <view class="user" hover-class="navigator-hover" @click="popupShow = true">
        <view class="profile-photo">
            <up-image :show-loading="true" :src="user.profilePhoto" width="120rpx" height="120rpx" />
        </view>
        <view class="user-info">
            <view class="user-name">{{ user.name }}</view>
            <view class="user-phone">{{ user.phonenumber }}</view>
        </view>
        <view class="iconfont icon-shezhi" />
    </view>
    <!-- <view class="change-user" style="padding: 20rpx;">
        <navigator class="row" url="/pages/index/changePassword">
            <view class="label" style="padding: 10rpx;box-sizing: border-box;">
                <text class="iconfont icon-mima" style="margin-right: 10rpx;" />
                修改登录密码
            </view>
            <view class="value">
                <view class="iconfont icon-a-wodetiaozhuan" />
            </view>
        </navigator>
    </view> -->
    <up-popup :show="popupShow" mode="right" :customStyle="{
        width: '80vw',
        padding: '0 20rpx',
        background: '#F7F7FF'
    }" zIndex="99" @close="close" @open="open">
        <view class="change-user">
            <view class="title">
                账号信息
            </view>
            <view class="row" v-if="headportraitLoading">
                <view class="label">
                    点击更换头像
                </view>
                <view class="value">
                    <view class="profilePhoto">
                        <up-image :show-loading="true" :src="user.profilePhoto" width="80rpx" height="80rpx" />
                        <view class="loading">
                            <up-loading-icon mode="semicircle" />
                        </view>
                    </view>
                    <view class="iconfont icon-a-wodetiaozhuan" />
                </view>
            </view>
            <My_upload ref="upload" custom maxCount="1" @uploadCallback="uploadCallback"
                @startUploading="startUploading">
                <view class="row" v-if="!headportraitLoading" style="width: calc(80vw);" hover-class="navigator-hover">
                    <view class="label">
                        点击更换头像
                    </view>
                    <view class="value">
                        <view class="profilePhoto">
                            <up-image :show-loading="true" :src="user.profilePhoto" width="80rpx" height="80rpx" />
                        </view>
                        <view class="iconfont icon-a-wodetiaozhuan" />
                    </view>
                </view>
            </My_upload>

            <view class="row" hover-class="navigator-hover" @click="modalShow = true">
                <view class="label">
                    用户昵称
                </view>
                <view class="value">
                    {{ user.name }}
                    <view class="iconfont icon-a-wodetiaozhuan" />
                </view>
            </view>

            <view class="row">
                <view class="label">
                    手机号码
                </view>
                <view class="value">
                    {{ user.phonenumber }}
                </view>
            </view>

        </view>
    </up-popup>
    <view class="but">
        <up-button type="primary" shape="circle" size="large" color="#3874F6" text="退出登录" @tap="logOut" />
    </view>
    <up-modal :show="modalShow" title="修改昵称" showCancelButton @confirm="confirm" @cancel="modalShow = false"
        ref="uModal" :asyncClose="true">
        <up-input :placeholder="user.name" border="surround" v-model="userName"></up-input>
    </up-modal>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
const { $Http } = getCurrentInstance().proxy;
import { onLoad } from '@dcloudio/uni-app';

let user = reactive({
    name: '',
    phonenumber: '',
    profilePhoto: "",
    attinfos: []
});

onLoad(() => {
    getUserMsg()
    const userInfo = uni.getStorageSync('userMsg')
    user.name = userInfo.name;
    user.phonenumber = userInfo.phonenumber;
    user.attinfos = userInfo.attinfos;
    user.profilePhoto = userInfo.profilePhoto || '/static/image/user.png';
});

let popupShow = ref(false),
    headportraitLoading = ref(false);
function close() {
    popupShow.value = false
}

let uModal = ref(null),
    modalShow = ref(false),
    userName = ref('');

function confirm() {
    console.log('修改昵称', userName.value);
    if (userName.value.trim() == '') {
        modalShow.value = false;
        return uni.showToast({
            title: '昵称不能为空',
            icon: 'none'
        })
    }

    $Http.basic({
        "classname": "common.usercenter.usercenter",
        "method": "updateUserMsg",
        "content": {
            "name": userName.value,
            "phonenumber": user.phonenumber,
        }
    }).then(res => {
        console.log(res)
        uni.showToast({
            title: res.code == 1 ? '修改成功' : res.msg,
            icon: 'none'
        })
        modalShow.value = false;
        if (res.code == 1) {
            userName.value = '';
            getUserMsg();
        }
    })
}

// 更换头像
let upload = ref(null);

function startUploading(e) {
    headportraitLoading.value = true;
}

function uploadCallback({ attachmentids, fileList }) {
    if (fileList.pop().usetype == 'headportrait') return;
    $Http.basic({
        "classname": "system.attachment.Attachment",
        "method": "createFileLink",
        content: {
            ownertable: "sys_users",
            ownerid: uni.getStorageSync('userMsg').userid,
            usetype: 'headportrait',
            attachmentids,
            siteid: uni.getStorageSync("userMsg").siteid
        }
    }).then(res => {
        console.log('跟进记录绑定附件', res)
        if (res.code != '1') return uni.showToast({
            title: res.msg,
            icon: "none"
        })
        upload.value.deleteFile(user.attinfos.filter(v => v.usetype == 'headportrait')).then(res1 => {
            if (res1) {
                getUserMsg();
                setTimeout(() => {
                    uni.showToast({
                        title: '头像更换成功',
                        icon: 'none'
                    });
                }, 100);
            }
        })

    })
}

function getUserMsg() {
    $Http.basic({
        "classname": "common.usercenter.usercenter",
        "method": "queryUserMsg",
        "content": { "nocache": true }
    }).then(res => {
        console.log("res", res);
        if (res.code == 1) {
            user.name = res.data.name;
            user.phonenumber = res.data.phonenumber;
            user.attinfos = res.data.attinfos;
            headportraitLoading.value = false;
            const headportrait = res.data.attinfos.find(v => v.usetype == 'headportrait');
            user.profilePhoto = headportrait ? $Http.getSpecifiedImage(headportrait) : user.profilePhoto;
            const userMsg = uni.getStorageSync('userMsg')
            uni.setStorageSync('userMsg', Object.assign(userMsg, user))
        }
    })
}


function logOut() {
    console.log('退出登录');
    uni.showModal({
        title: '提示',
        content: '是否确定退出登录?',
        success: function ({ confirm }) {
            if (confirm) {
                $Http.logout();
                uni.removeStorageSync('userMsg');
                uni.reLaunch({
                    url: '/pages/login/login',
                    success: () => {
                        uni.showToast({
                            title: '退出登录成功',
                            icon: 'none'
                        });
                    }
                });
            }
        }
    });
}
</script>

<style lang="less" scoped>
.user {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 40rpx;

    .profile-photo {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        overflow: hidden;
    }

    .user-info {
        flex: 1;
        margin-left: 40rpx;
        padding-top: 10rpx;

        .user-name {
            line-height: 42rpx;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 32rpx;
            color: #333333;
        }

        .user-phone {
            line-height: 38rpx;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 28rpx;
            color: #999999;
            margin-top: 20rpx;
        }

    }
}

.change-user {
    position: relative;
    padding-top: 55px;
    box-sizing: border-box;
    height: 100%;

    .title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 30rpx;
        padding-left: 20rpx;
    }

    .row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 20rpx 30rpx;
        border-radius: 16rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;

        .label {
            font-size: 28rpx;
            color: #666;
            flex-shrink: 0;
            margin-right: 20rpx;
        }

        .value {
            display: flex;
            align-items: center;

            .profilePhoto {
                position: relative;
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                overflow: hidden;

                .loading {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: rgba(0, 0, 0, 0.09);
                    z-index: 1;
                }
            }

            .iconfont {
                font-size: 28rpx;
                color: #999;
                margin-top: 5rpx;
            }
        }



    }

}

.but {
    box-sizing: border-box;
    width: 100vw;
    position: fixed;
    bottom: 16%;
    padding: 0 60rpx;
}
</style>