yizhizan-h5/pages/my/changePosition.vue

<template>
	<view class="change-position-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-leftward" color="#333" size="32"></u-icon>
				</view>
				<view class="nav-title">更换职务</view>
				<view class="nav-right"></view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-area">
			<view class="position-section">
				<view class="section-title">我的职务</view>
				<view class="section-desc">填写职务名称,让求职者更了解您的身份</view>
				
				<view class="input-container">
					<view class="input-box">
						<u-input
							v-model="positionName"
							placeholder="请填写职务名称"
							maxlength="50"
                            input-align="left"
                            height="96"
                            padding="40"
                            class="position-input"
							clearable
						/>
					</view>
					<view class="hint-text">每个月可修改3次,您还有2次机会</view>
				</view>
			</view>
		</view>
		
		<!-- 底部确定按钮 -->
		<view class="bottom-confirm-btn" @click="confirmPosition">
			<text>确定</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			positionName: '',
			remainingChanges: 2 // 剩余修改次数
		};
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 确认职务修改
		confirmPosition() {
			if (!this.positionName.trim()) {
				uni.showToast({
					title: '请输入职务名称',
					icon: 'none'
				});
				return;
			}
			
			if (this.remainingChanges <= 0) {
				uni.showToast({
					title: '本月修改次数已用完',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '处理中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '职务修改成功',
					icon: 'success'
				});
				
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}, 1500);
		}
	}
}
</script>

<style lang="scss" scoped>
.change-position-page {
	min-height: 100vh;
	// background: #f5f5f5;
}

/* 自定义导航栏 */
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 9999;
	
	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 40rpx;
		padding-top: 80rpx;
		
		.nav-left {
			display: flex;
			align-items: center;
		}
		
		.nav-title {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			font-weight: 600;
			line-height: 44rpx;
			text-align: center;
		}
		
		.nav-right {
			width: 60rpx;
		}
	}
}

/* 内容区域 */
.content-area {
	padding: 160rpx 30rpx 30rpx;
}

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

.section-title {
    color: rgba(51, 51, 51, 1);
    font-family: DM Sans;
    font-size: 48rpx;
    font-weight: 700;
    line-height: 60rpx;
    letter-spacing: 0px;
    text-align: left;
	margin-bottom: 12rpx;
}

.section-desc {
    color: rgba(102, 102, 102, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    letter-spacing: 0.5%;
    text-align: left;
	margin-bottom: 20rpx;
}

.input-container {
	.input-box {
		margin-bottom: 20rpx;
		
		.position-input {
			background: rgba(247, 248, 249, 1);
            // padding: 32rpx;
		}
	}
	
	.hint-text {
        color: rgba(102, 102, 102, 1);
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 32rpx;
        letter-spacing: 0.5%;
        margin-left: rpx;
        text-align: left;
	}
}

/* 底部确定按钮 */
.bottom-confirm-btn {
    width: 90%;
	height: 88rpx;
	background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
    margin: 0 auto;
	
	text {
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-weight: 600;
		line-height: 44rpx;
	}
	
	&:active {
		opacity: 0.8;
	}
}
</style>