yizhizan-h5/pages/my/myCompany.vue

<template>
	<view class="my-company-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-leftward" color="#FFF" size="42"></u-icon>
				</view>
				<view class="nav-title">我的公司</view>
				<view class="nav-right"></view>
			</view>
		</view>
		
		<!-- 头部渐变背景区域 -->
		<view class="header-section">
			<!-- 插画区域 -->
			<view class="illustration-area">
				<image src="/static/images/gongsi.svg" class="company-illustration" mode="aspectFit" />
			</view>
			
			<!-- 公司名称显示 -->
			<view class="company-name-section">
				<view class="company-brand">汉睿国际</view>
				<view class="company-full-name">深圳市汉睿国际猎头服务有限公司</view>
			</view>
		</view>
		
		<!-- 公司信息卡片和按钮整体 -->
		<view class="company-content-wrapper">
			<view class="company-info-card">
				<view class="info-item">
					<view class="info-label">公司规模</view>
					<view class="info-value">0-20人</view>
				</view>
				<view class="info-item">
					<view class="info-label">融资阶段</view>
					<view class="info-value">暂无融资</view>
				</view>
				<view class="info-item">
					<view class="info-label">所属行业</view>
					<view class="info-value">跨境电商</view>
				</view>
			</view>
			
			<!-- 操作按钮 -->
			<view class="action-buttons">
				<view class="leave-btn" @click="leaveCompany">
					<text>离开公司</text>
				</view>
				<view class="change-btn" @click="changeCompany">
					<text>更换公司</text>
				</view>
			</view>
		</view>
		
		<!-- 离开公司确认弹窗 -->
		<u-popup 
			v-model="showLeaveModal" 
			mode="center" 
			width="630rpx"
			border-radius="24"
			:closeable="false"
		>
			<view class="leave-modal">
				<view class="modal-content">
                    <view class="modal-title">离开公司可能造成的影响:</view>
					<view class="impact-list">
						<view class="impact-item">
							<text class="item-number">1.</text>
							<text class="item-text">注销招聘者的身份 (后续需要重新认证)</text>
						</view>
						<view class="impact-item">
							<text class="item-number">2.</text>
							<text class="item-text">发布中的职位将会被关闭</text>
						</view>
						<view class="impact-item">
							<text class="item-number">3.</text>
							<text class="item-text">正在使用中的付费职位等相关权益不在生效, 并且不做退还</text>
						</view>
						<view class="impact-item">
							<text class="item-number">4.</text>
							<text class="item-text">更换/离开公司后, 若您有绑定的免密支付将自动解除</text>
						</view>
					</view>
				</view>
				
				<view class="modal-buttons">
					<view class="cancel-btn" @click="closeLeaveModal">
						<text>取消</text>
					</view>
					<view class="confirm-btn" @click="confirmLeaveCompany">
						<text>仍要离开</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			companyInfo: {
				name: '汉睿国际',
				fullName: '深圳市汉睿国际猎头服务有限公司',
				size: '0-20人',
				finance: '暂无融资',
				industry: '跨境电商'
			},
			showLeaveModal: false // 控制弹窗显示
		};
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 离开公司
		leaveCompany() {
			this.showLeaveModal = true;
		},
		
		// 关闭离开公司弹窗
		closeLeaveModal() {
			this.showLeaveModal = false;
		},
		
		// 确认离开公司
		confirmLeaveCompany() {
			this.showLeaveModal = false;
			uni.showLoading({
				title: '处理中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '已离开公司',
					icon: 'success'
				});
				
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}, 1500);
		},
		
		// 更换公司
		changeCompany() {
			uni.navigateTo({
				url: '/pages/my/changeCompanies'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.my-company-page {
	min-height: 100vh;
	background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
	background-size: 100% 35%;
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
	padding-bottom: 40rpx;
}

/* 导航栏 */
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	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;
			gap: 8rpx;
			
			.nav-breadcrumb {
				color: rgba(255, 255, 255, 1);
				font-family: DM Sans;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
			}
		}
		
		.nav-title {
            color: rgba(255, 255, 255, 1);
            font-family: DM Sans;
            font-size: 32rpx;
            font-weight: 700;
            line-height: 52rpx;
            letter-spacing: 0.5%;
			text-align: center;
		}
		
		.nav-right {
			width: 60rpx;
		}
	}
}

/* 头部区域 */
.header-section {
	padding: 160rpx 40rpx  66rpx 40rpx;
	text-align: center;
}

.illustration-area {
	margin-bottom: 30rpx;
	
	.company-illustration {
		width: 280rpx;
		height: 180rpx;
		max-width: 100%;
	}
}

.company-name-section {
	.company-brand {
        color: rgba(255, 255, 255, 1);
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 44rpx;
        letter-spacing: 0%;
        text-align: center;
		margin-bottom: 8rpx;
	}
	
	.company-full-name {
        color: rgba(255, 255, 255, 1);
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 44rpx;
        letter-spacing: 0%;
        text-align: center;
	}
}

/* 公司内容整体包装 */
.company-content-wrapper {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px 10px 0px 0px;
    padding: 54rpx 76rpx;
    
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

/* 公司信息卡片 */
.company-info-card {
	background: rgba(255, 255, 255, 1);
	border-radius: 24rpx;
	overflow: hidden;
}

.info-item {
	display: flex;
	align-items: center;
	padding: 12rpx 24rpx;
    gap: 32rpx;
	
	.info-label , .info-value {
        color: rgba(153, 153, 153, 1);
        font-family: DM Sans;
        font-size: 26rpx;
        font-weight: 400;
        line-height: 32rpx;
        letter-spacing: 0%;
        text-align: left;
	}
}

.leave-btn {
	flex: 1;
	height: 88rpx;
	background: transparent;
	border: 2rpx solid rgba(255, 122, 69, 1);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
    margin-bottom: 38rpx;
	
	text {
        color: rgba(255, 102, 0, 1);
        font-family: DM Sans;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 48rpx;
        letter-spacing: 0%;
        text-align: center;
	}
	
	&:active {
		background: rgba(255, 122, 69, 0.1);
	}
}

.change-btn {
	flex: 1;
	height: 88rpx;
	background: linear-gradient(90deg, rgba(255, 122, 69, 1) 0%, rgba(255, 122, 69, 1) 100%);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	text {
        color: rgba(255, 255, 255, 1);
        font-family: DM Sans;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 48rpx;
        letter-spacing: 0%;
        text-align: center;
	}
	
	&:active {
		opacity: 0.8;
	}
}

/* 离开公司弹窗样式 */
.modal-title {
    color: rgba(88, 88, 88, 1);
    font-family: DM Sans;
    font-size: 28rpxpx;
    font-weight: 700;
    line-height: 36rpx;
    letter-spacing: 0%;
    text-align: left;
    margin-bottom: 30rpx;
}

.modal-content {
	padding: 40rpx;
}

.impact-list {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.impact-item {
	display: flex;
	gap: 8rpx;
}

.item-number , .item-text {
    color: rgba(158, 158, 158, 1);
    font-family: DM Sans;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 26rpx;
    letter-spacing: 0%;
    text-align: left;
}

.modal-buttons {
	display: flex;
}

.cancel-btn {
	flex: 1;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
    border-right: 0.5px solid rgba(153, 153, 153, 0.2);
    border-top: 0.5px solid rgba(153, 153, 153, 0.2);
}

.cancel-btn text {
    color: rgba(153, 153, 153, 0.5);
    font-family: DM Sans;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 36rpx;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
}

.confirm-btn {
	flex: 1;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
    border-top: 0.5px solid rgba(153, 153, 153, 0.2);
}

.confirm-btn text {
    color: rgba(1, 107, 246, 1);
    font-family: DM Sans;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 36rpx;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
}
</style>