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

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

		<!-- 2. 资料列表 -->
		<view class="settings-list" :style="{ marginTop: '10px' }">
			<view class="item-row avatar-row" @click="doChooseImage">
				<text class="item-label">头像</text>
				<view class="item-right">
					<image class="avatar-img" :src="myInfo.avatarUrl" mode="aspectFill"></image>
					<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.nickName }}</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.phoneNum }}</text>
				</view>
			</view>
			<view class="item-row no-tap">
				<text class="item-label">授权客户</text>
				<view class="item-right">
					<text class="item-value readonly">{{ myInfo.orgName }}</text>
				</view>
			</view>
		</view>

		<view class="footer-bar">
			<button class="btn-confirm" @click="saveProfile">确认保存</button>
		</view>
	</view>
</template>

<script>
import ErpNavBar from '@/components/erp-nav-bar.vue';
export default {
	components: { ErpNavBar },
	data() {
		return {
			myInfo: {
				avatarUrl: 'https://img.icons8.com/clouds/200/manager.png',
				nickName: '张经理',
				phoneNum: '138-8888-8888',
				orgName: '广东粤铝材实业有限公司'
			}
		}
	},
	methods: {
		goBack() { uni.navigateBack(); },
		doChooseImage() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.myInfo.avatarUrl = res.tempFilePaths[0];
					uni.showToast({ title: '头像已选好', icon: 'none' });
				}
			});
		},
		doEditName() {
			uni.showModal({
				title: '设置昵称',
				content: this.myInfo.nickName,
				editable: true,
				confirmColor: '#C1001C', // 重点修复点：弹窗确认按钮强制采用主题红
				success: (res) => {
					if (res.confirm) {
						this.myInfo.nickName = res.content || '未命名';
					}
				}
			});
		},
		saveProfile() {
			uni.showLoading({ title: '保存中' });
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({ title: '保存成功' });
				setTimeout(() => { uni.navigateBack(); }, 1200);
			}, 600);
		}
	}
}
</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-img {
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
	background: #eee;
	margin-right: 20rpx;
}

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