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

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

		<!-- 资料列表 -->
		<view class="settings-list" :style="{ marginTop: '10px' }">
			<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.userName }}</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">
				<text class="section-title">授权客户</text>
				<text class="section-desc" v-if="myInfo.authClientList">共 {{ myInfo.authClientList.length }} 个</text>
			</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="client-index">{{ idx + 1 }}</view>
					<view class="client-info">
						<text class="client-name">{{ client.name || '-' }}</text>
						<view class="client-meta">
							<text class="client-class">{{ client.clientClass || '-' }}</text>
							<text class="client-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 class="footer-bar">
			<button class="btn-confirm" @click="saveProfile" :disabled="uploading">确认保存</button>
		</view>
	</view>
</template>

<script>
import ErpNavBar from '@/components/erp-nav-bar.vue';
import { getMyInfo, updateMyInfo } from '@/api/system/customer.js';
import { uploadFile } from '@/api/resource/oss.js';
export default {
	components: { ErpNavBar },
	data() {
		return {
			uploading: false,
			pendingAvatarOssId: null,
			myInfo: {
				avatarUrl: '',
				userName: '',
				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;
				this.myInfo = {
					avatarUrl: d.avatarUrl || '',
					userName: d.userName || '',
					phone: d.phone || '',
					avatar: d.avatar || null,
					authClientList: d.authClientList || []
				};
				this.pendingAvatarOssId = null;
			} 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];
					this.myInfo.avatarUrl = tempPath;
					this.uploading = true;
					try {
						const uploadRes = await uploadFile(tempPath);
						this.pendingAvatarOssId = uploadRes.ossId;
						uni.showToast({ title: '头像上传成功', icon: 'success' });
					} catch (e) {
						uni.showToast({ title: e || '头像上传失败', icon: 'none' });
						this.myInfo.avatarUrl = '';
					} finally {
						this.uploading = false;
					}
				}
			});
		},
		doEditName() {
			uni.showModal({
				title: '设置昵称',
				content: this.myInfo.userName,
				editable: true,
				confirmColor: '#C1001C',
				success: (res) => {
					if (res.confirm) {
						this.myInfo.userName = res.content || this.myInfo.userName;
					}
				}
			});
		},
		saveProfile() {
			if (this.uploading) return;
			uni.showModal({
				title: '确认保存',
				content: `昵称：${this.myInfo.userName}\n手机：${this.myInfo.phone}\n请确认以上信息是否填写正确？`,
				confirmText: '确认',
				cancelText: '取消',
				confirmColor: '#C1001C',
				success: async (res) => {
					if (!res.confirm) return;
					try {
						uni.showLoading({ title: '保存中' });
						const payload = { userName: this.myInfo.userName };
						if (this.pendingAvatarOssId !== null) {
							payload.avatar = this.pendingAvatarOssId;
						}
						await updateMyInfo(payload);
						uni.hideLoading();
						uni.showToast({ title: '保存成功', icon: 'success' });
						setTimeout(() => { uni.navigateBack(); }, 1200);
					} catch (e) {
						uni.hideLoading();
						uni.showToast({ title: e || '保存失败', icon: 'none' });
					}
				}
			});
		}
	}
}
</script>

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

.settings-list {
	background: #fff;
	padding: 0 40rpx;
}

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

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

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

.avatar-row {
	height: 180rpx;
}

.item-label {
	font-size: 32rpx;
	color: #333;
}

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

.avatar-wrapper {
	position: relative;
	width: 110rpx;
	height: 110rpx;
	margin-right: 20rpx;
}

.avatar-img {
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
	background: #eee;
}

.avatar-uploading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	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: 30rpx;
	color: #666;
	margin-right: 15rpx;
}

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

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

.footer-bar {
	padding: 40rpx;
	margin-top: auto;
	padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.btn-confirm {
	width: 100%;
	height: 90rpx;
	background: #C1001C;
	color: #fff;
	border-radius: 45rpx;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.section-card {
	background: #fff;
	border-radius: 24rpx;
	padding: 30rpx 40rpx;
}

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

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.section-desc {
	font-size: 24rpx;
	color: #999;
}

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

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

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

.client-index {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background: #F5F7FA;
	color: #666;
	font-size: 24rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	flex-shrink: 0;
}

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

.client-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.client-meta {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.client-class {
	font-size: 24rpx;
	color: #C1001C;
	background: rgba(193, 0, 28, 0.06);
	padding: 2rpx 12rpx;
	border-radius: 6rpx;
}

.client-date {
	font-size: 22rpx;
	color: #999;
}

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

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