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

<template>
	<view class="settings-root">
		<!-- 1. 自定义导航栏：解决蓝线顽疾 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-area" @click="goBack">
					<text class="back-arrow"></text>
				</view>
				<view class="nav-title">个人资料设置</view>
				<view class="right-placeholder"></view>
			</view>
		</view>

		<!-- 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>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				myInfo: {
					avatarUrl: 'https://img.icons8.com/clouds/200/manager.png',
					nickName: '张经理',
					phoneNum: '138-8888-8888',
					orgName: '广东粤铝材实业有限公司'
				}
			}
		},
		onLoad() {
			const info = uni.getSystemInfoSync();
			this.statusBarHeight = info.statusBarHeight;
		},
		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; }
	
	/* 自定义导航栏样式 */
	.custom-navbar { background: #fff; flex-shrink: 0; }
	.nav-content { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 30rpx; }
	.back-area { width: 60rpx; height: 44px; display: flex; align-items: center; }
	.back-arrow { width: 22rpx; height: 22rpx; border-left: 4rpx solid #333; border-bottom: 4rpx solid #333; transform: rotate(45deg); margin-left: 10rpx; }
	.nav-title { font-size: 34rpx; font-weight: bold; color: #333; }
	.right-placeholder { width: 60rpx; }

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