huasheng-erp-order-system-applet/pages/mine/settings/index.vue

<template>
	<view class="settings-root">
		<erp-nav-bar title="个人资料设置" />

		<!-- 资料列表 -->
		<view class="settings-list">
			<view class="item-row avatar-row" @click="doChooseImage">
				<text class="item-label">头像</text>
				<view class="item-right">
					<view class="avatar-wrapper">
						<image class="avatar-img" :src="myInfo.avatarUrl || 'https://img.icons8.com/color/144/user.png'"
							mode="aspectFill"></image>
						<view class="avatar-uploading" v-if="uploading">
							<text class="uploading-text">上传中...</text>
						</view>
					</view>
					<text class="icon-more"></text>
				</view>
			</view>

			<view class="item-row" @click="doEditName">
				<text class="item-label">用户昵称</text>
				<view class="item-right">
					<text class="item-value">{{ myInfo.name }}</text>
					<text class="icon-more"></text>
				</view>
			</view>
		</view>

		<view class="settings-list mt-30">
			<view class="item-row no-tap">
				<text class="item-label">手机号码</text>
				<view class="item-right">
					<text class="item-value readonly">{{ myInfo.phone }}</text>
				</view>
			</view>
		</view>

		<!-- 授权客户列表 -->
		<view class="section-card" style="margin-top: 30rpx;">
			<view class="section-header">
				<view class="sh-left">
					<view class="sh-indicator"></view>
					<text class="section-title">授权客户</text>
				</view>
				<view class="sh-count" v-if="myInfo.authClientList">
					<text class="count-num">{{ myInfo.authClientList.length }}</text>
					<text class="count-unit">个</text>
				</view>
			</view>
			<view v-if="myInfo.authClientList && myInfo.authClientList.length > 0" class="client-list">
				<view class="client-item" v-for="(client, idx) in myInfo.authClientList" :key="idx">
					<view class="ci-avatar">
						<text class="ci-char">{{ (client.name || '-')[0] }}</text>
					</view>
					<view class="ci-body">
						<text class="ci-name">{{ client.name || '-' }}</text>
						<view class="ci-meta">
							<text class="ci-tag" v-if="client.clientClass">{{ client.clientClass }}</text>
							<text class="ci-date" v-if="client.enterDate">{{ client.enterDate }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="no-client" v-else>
				<text class="no-client-text">暂无授权客户</text>
			</view>
		</view>
	</view>
</template>

<script>
import ErpNavBar from '@/components/erp-nav-bar.vue';
import { getMyInfo, updateMyInfo } from '@/api/system/employee.js';
import { getClientByIds } from '@/api/erp/client.js';
import { uploadFile } from '@/api/resource/oss.js';
export default {
	components: { ErpNavBar },
	data() {
		return {
			uploading: false,
			myInfo: {
				avatarUrl: '',
				name: '',
				phone: '',
				avatar: null,
				authClientList: []
			}
		}
	},
	async onLoad() {
		await this.loadInfo();
	},
	methods: {
		async loadInfo() {
			try {
				uni.showLoading({ title: '加载中' });
				const res = await getMyInfo();
				uni.hideLoading();
				const d = res.data;
				let clientList = [];
				if (d.authClientFRowIDs) {
					try {
						const clientRes = await getClientByIds(d.authClientFRowIDs);
						clientList = clientRes.data || [];
					} catch (e) {
						console.error('加载授权客户失败', e);
					}
				}
				this.myInfo = {
					avatarUrl: d.avatarUrl || '',
					name: d.name || '',
					phone: d.phone || '',
					avatar: d.avatar || null,
					authClientList: clientList
				};
			} catch (e) {
				uni.hideLoading();
				uni.showToast({ title: e || '加载失败', icon: 'none' });
			}
		},
		doChooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: async (res) => {
					const tempPath = res.tempFilePaths[0];
					const previousUrl = this.myInfo.avatarUrl;
					this.myInfo.avatarUrl = tempPath;
					this.uploading = true;
					try {
						const uploadRes = await uploadFile(tempPath);
						uni.showLoading({ title: '保存中' });
						await updateMyInfo({ avatar: uploadRes.ossId });
						uni.hideLoading();
						this.myInfo.avatar = uploadRes.ossId;
						this.myInfo.avatarUrl = uploadRes.url;
						uni.showToast({ title: '头像更新成功', icon: 'success' });
					} catch (e) {
						uni.hideLoading();
						this.myInfo.avatarUrl = previousUrl;
						uni.showToast({ title: e || '头像更新失败', icon: 'none' });
					} finally {
						this.uploading = false;
					}
				}
			});
		},
		doEditName() {
			uni.showModal({
				title: '设置昵称',
				content: this.myInfo.name,
				editable: true,
				confirmColor: '#C1001C',
				success: async (res) => {
					if (!res.confirm) return;
					const newName = res.content || this.myInfo.name;
					if (newName === this.myInfo.name) return;
					try {
						uni.showLoading({ title: '保存中' });
						await updateMyInfo({ name: newName });
						uni.hideLoading();
						this.myInfo.name = newName;
						uni.showToast({ title: '昵称更新成功', icon: 'success' });
					} catch (e) {
						uni.hideLoading();
						uni.showToast({ title: e || '昵称更新失败', icon: 'none' });
					}
				}
			});
		}
	}
}
</script>

<style scoped>
.settings-root {
	width: 100vw;
	height: 100vh;
	background: #F4F6F9;
	display: flex;
	flex-direction: column;
}

.settings-list {
	background: #fff;
	margin: 20rpx 24rpx 0;
	border-radius: 20rpx;
	padding: 0 36rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.02);
}

.mt-30 {
	margin-top: 24rpx;
}

.item-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 104rpx;
	border-bottom: 1rpx solid #F0F0F3;
}

.item-row:last-child {
	border-bottom: none;
}

.avatar-row {
	min-height: 140rpx;
}

.item-label {
	font-size: 30rpx;
	color: #1A1A2E;
	font-weight: 500;
}

.item-right {
	display: flex;
	align-items: center;
}

.avatar-wrapper {
	position: relative;
	width: 96rpx;
	height: 96rpx;
	margin-right: 16rpx;
}

.avatar-img {
	width: 96rpx;
	height: 96rpx;
	border-radius: 24rpx;
	background: #F4F6F9;
}

.avatar-uploading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 24rpx;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
}

.uploading-text {
	font-size: 20rpx;
	color: #fff;
}

.item-value {
	font-size: 28rpx;
	color: #8896A8;
	margin-right: 12rpx;
}

.item-value.readonly {
	color: #B0B8C5;
	margin-right: 0;
}

.icon-more {
	width: 14rpx;
	height: 14rpx;
	border-top: 3rpx solid #CBD2DB;
	border-right: 3rpx solid #CBD2DB;
	transform: rotate(45deg);
}

.section-card {
	background: #fff;
	border-radius: 24rpx;
	padding: 36rpx;
	margin: 0 24rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.02);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 28rpx;
}

.sh-left {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.sh-indicator {
	width: 6rpx;
	height: 36rpx;
	background: linear-gradient(180deg, #C1001C 0%, #E8553D 100%);
	border-radius: 3rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #1A1A2E;
}

.sh-count {
	display: flex;
	align-items: baseline;
	background: #F4F6F9;
	border-radius: 16rpx;
	padding: 6rpx 20rpx;
}

.count-num {
	font-size: 28rpx;
	font-weight: 700;
	color: #C1001C;
}

.count-unit {
	font-size: 22rpx;
	color: #8896A8;
	margin-left: 2rpx;
}

.client-list {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}

.client-item {
	display: flex;
	align-items: center;
	padding: 22rpx 0;
	border-bottom: 1rpx solid #F0F0F3;
}

.client-item:last-child {
	border-bottom: none;
}

.ci-avatar {
	width: 76rpx;
	height: 76rpx;
	border-radius: 20rpx;
	background: linear-gradient(135deg, #F9EAEC 0%, #FFF1F2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.ci-char {
	font-size: 34rpx;
	font-weight: 700;
	color: #C1001C;
}

.ci-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
	min-width: 0;
}

.ci-name {
	font-size: 30rpx;
	color: #1A1A2E;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ci-meta {
	display: flex;
	align-items: center;
	gap: 14rpx;
}

.ci-tag {
	font-size: 22rpx;
	color: #5A6577;
	background: #F4F6F9;
	padding: 4rpx 14rpx;
	border-radius: 8rpx;
}

.ci-date {
	font-size: 22rpx;
	color: #B0B8C5;
}

.no-client {
	display: flex;
	justify-content: center;
	padding: 40rpx 0;
}

.no-client-text {
	font-size: 26rpx;
	color: #B0B8C5;
}
</style>