md-h5/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>

	<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-show="headportraitLoading">
				<view class="label">
					点击更换头像
				</view>
				<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>
			<view v-show="!headportraitLoading" hover-class="navigator-hover">
				<My_upload ref="upload" custom maxCount="1" @uploadCallback="uploadCallback"
					@startUploading="startUploading">
					<view class="row" style="width: calc(80vw);">
						<view class="label">
							点击更换头像
						</view>
						<view class="profilePhoto">
							<up-image :show-loading="true" :src="user.profilePhoto" width="80rpx" height="80rpx" />
						</view>
					</view>
				</My_upload>
			</view>

		</view>
	</up-popup>
</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(() => {
	getProperty()
	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(true),
	headportraitLoading = ref(false);
function close() {
	popupShow.value = false
}

// 更换头像
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 getProperty() {
	$Http.basic({
		id: 2025082115363003,
		content: {
			sa_customersid: 1
		}
	}).then(res => {
		console.log('个人资产', res);
	})
}
</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 {
	padding-top: 55px;
	box-sizing: border-box;

	.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;

		.label {
			font-size: 28rpx;
			color: #666;
		}

		.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;
			}
		}

	}
}
</style>