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>
	<view class="assets">
		我的资产
	</view>
	<view class="assets-list">
		<view v-if="!assetsList.length" style="padding: 30rpx 0;">
			<up-empty mode="car" text=" " />
		</view>
		<view v-else>
			<view class="item" v-for="item in assetsList" :key="item.itemid" @click="perviewImgs(item.attinfos)">
				<view class="image-box">
					<up-image :show-loading="true" :src="item.cover" width="80px" height="80px" />
					<view class="tag" :style="{
						background: item.isUnderWarranty ? '#27D8B4' : '#E14154',
					}">
						{{ item.isUnderWarranty ? '在' : '过' }}保
					</view>
				</view>
				<view class="content">
					<view class="row">
						<text class="label">
							产品名称
						</text>
						{{ item.itemname || ' --' }}
					</view>
					<view class="row">
						<text class="label">
							产品型号
						</text>
						{{ item.model || ' --' }}
					</view>
					<view class="row">
						<text class="label">
							序列号
						</text>
						{{ item.sku || ' --' }}
					</view>
					<view class="row">
						<text class="label">
							保修卡号
						</text>
						{{ item.cardno || ' --' }}
					</view>
					<view class="row">
						<text class="label">
							保修期限
						</text>
						{{ item.begdate ? item.begdate + '至' + item.enddate : ' --' }}
					</view>
				</view>
			</view>
		</view>
	</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="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>
			<view v-show="!headportraitLoading">
				<My_upload ref="upload" custom maxCount="1" @uploadCallback="uploadCallback"
					@startUploading="startUploading">
					<view class="row" 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>

			<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 class="but">
				<up-button type="primary" shape="circle" size="large" color="#3874F6" text="退出登录" @tap="logOut" />
			</view>
		</view>
	</up-popup>

	<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, onShow } from '@dcloudio/uni-app';

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

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

function getUserInfo() {
	getUserMsg()
	getProperty()
}

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('WuserMsg').userid,
			usetype: 'headportrait',
			attachmentids,
			siteid: uni.getStorageSync("WuserMsg").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);
		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 WuserMsg = uni.getStorageSync('WuserMsg')
			uni.setStorageSync('WuserMsg', Object.assign(WuserMsg, user))
		}
	})
}

let assetsList = ref([]);

function perviewImgs(imgs) {
	wx.previewImage({
		urls: imgs.filter(v => isImage(v.postfix)).map(item => item.url),
		current: 0,
	})
}
function isImage(postfix) {
	const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
	return imageTypes.includes(postfix.toLowerCase());
}

function getProperty(count = 0) {
	let sa_customersid = uni.getStorageSync('WuserRecord').sa_customersid || 0;
	console.log("sa_customersid", sa_customersid)
	if (sa_customersid) {
		$Http.basic({
			id: 2025082115363003,
			content: {
				sa_customersid,
				pageSize: 9999
			}
		}).then(res => {
			console.log('个人资产', res);
			if (res.code == 1) assetsList.value = res.data.map(v => {
				//判断是否过保 当前的时间是否在	v.begdate 与 v.enddate 的之间
				v.cover = v.attinfos.length ? $Http.getSpecifiedImage(v.attinfos[0]) : ''
				v.isUnderWarranty = new Date() >= new Date(v.begdate) && new Date() <= new Date(v.enddate);
				return v
			});
		})
	} else {
		if (count == 5) return;
		setTimeout(() => {
			getProperty(count + 1);
		}, 500);
	}
}

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

//暴露方法
defineExpose({
	getUserInfo
});
</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;
		}

	}
}

.assets,
.assets-list {
	width: 95%;
	margin: 20rpx auto 0;
	background: #fff;
	border-radius: 8rpx 8rpx 0 0;
	padding: 20rpx 30rpx;
	box-sizing: border-box;

	.item {
		display: flex;
		width: 100%;
		box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		overflow: hidden;
		margin-bottom: 20rpx;

		.image-box {
			position: relative;

			.tag {
				position: absolute;
				left: 0;
				top: 0;
				padding: 4rpx 14rpx;
				padding-right: 20rpx;
				text-align: center;
				background: red;
				font-size: 22rpx;
				color: #fff;
				border-radius: 0 0 8rpx 0;
			}
		}


		.content {
			margin-left: 20rpx;

			.row {
				display: flex;
				line-height: 32rpx;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-size: 24rpx;
				margin-top: 8rpx;

				.label {
					color: #666;
					flex-shrink: 0;
				}

				.label::after {
					content: '：';
				}
			}
		}
	}
}

.assets-list {
	margin-top: 0;
	border-radius: 0 0 8rpx 8rpx;
	border-top: 1px solid #333;

}

.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 {
		width: 100%;
		position: absolute;
		bottom: 130rpx;
	}
}
</style>