yizhizan-h5/pages/my/myCompany.vue

<template>
	<view class="my-company-page flex flex-direction">
		<!-- 自定义导航栏 -->
		<nav-bar title="我的公司" color="#fff"></nav-bar>

		<!-- 头部渐变背景区域 -->
		<view class="header-section">
			<!-- 插画区域 -->
			<view class="illustration-area">
				<image src="/static/images/gongsi.svg" class="company-illustration" mode="aspectFit" />
			</view>
		</view>
		
		<template v-if="!loading">
			<!-- 管理员端 -->
			<view class="admin-container" v-if="isAdmin">
				<view class="company-name">{{ companyInfo.companyAllName }}</view>
				<view class="buttons flex">
					<view class="button" @click="showLeaveModal = true">离开公司</view>
					<view class="button" @click="showChangeModal = true">变更账号</view>
				</view>
				
				<view class="list-wrapper">
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="list">
							<view class="list-title">账号审核列表</view>
							<view class="account-item" v-for="(item, index) in auditList" :key="index">
								<view class="account-info flex justify-between">
									<view class="account-info-l">
										<view class="title flex align-center">
											<text>{{ item.userName }}/{{ item.phone }}</text>
											<view class="badge" v-if="item.isAdmin">管理员</view>
										</view>
										<view class="sub-title">提交时间：{{ item.createTime }}</view>
										<view class="sub-title">{{ item.hrPosition || '--' }}</view>
									</view>
									<view class="status-text" :class="getStatusClass(item.status)" @click="handleAudit(item)">{{ item.status | statusText }}</view>
								</view>
								<view class="bottom-button" v-if="item.status == 2" @click="changeSelectAccount(item)">变更账号</view>
							</view>
						</view>
					</scroll-view>					
				</view>
			</view>
			
			<!-- 非管理员端 -->
			<view class="un-admin-container" v-else>
				<view class="company-name">{{ companyInfo.companyAllName }}</view>
				
				<view class="content-wrapper">
					<view class="info-list">
						<view class="info-item">
							<text>公司规模</text>
							<text>{{ companyInfo.companyPeople || '--' }}</text>
						</view>
						<view class="info-item">
							<text>融资阶段</text>
							<text>{{ companyInfo.companyDevelop || '--' }}</text>
						</view>
						<view class="info-item">
							<text>所属行业</text>
							<text>{{ companyInfo.companyScope || '--' }}</text>
						</view>
					</view>
					
					<view class="buttons">
						<view class="button plain" @click="showLeaveModal = true">离开公司</view>
						<view class="button primary" @click="showChangeModal = true">变更账号</view>
					</view>
				</view>
			</view>
		</template>
		
		<!-- 审核 -->
		<c-modal
			:value="showAuditModal"
			:maskCloseAble="true"
			title="审核"
			cancel-button-text="拒绝"
			confirm-button-text="通过"
			@cancel="handleRejest"
			@confirm="handlePass"
			@close="handleCloseModal"
		>
			<view class="audit-modal">
				<view>请审核账号是否为您公司的员工</view>
				
				<view class="account-info flex">
					<view class="account-info-l">
						<view class="title flex align-center">
							<text>王先生/18828000000</text>
						</view>
						<view class="sub-title">提交时间：2021.09.22 09:55</view>
						<view class="sub-title">总监</view>
					</view>
				</view>
				
				<view class="check-bar flex align-center">
					<u-checkbox v-model="auditChecked" label-size="24">通过并设置为管理员</u-checkbox>
					<view class="tip">仅能设置2个管理员</view>
				</view>
			</view>
		</c-modal>
		
		<!-- 离开公司 -->
		<c-modal
			:value="showLeaveModal"
			:maskCloseAble="true"
			title="温馨提示"
			cancel-button-text="确定离开"
			confirm-button-text="去变更"
			@cancel="handleLeave"
			@confirm="handleChange"
			@close="handleCloseModal"
		>
			<view class="audit-modal">
				<view>您是企业的超级管理员</view>
				<view>如若需要保留数据请取消，并变更账号</view>
				<view>如您确定离开公司，公司及其相关所有数据均会删除，请确认！</view>
			</view>
		</c-modal>

		<!-- 变更账号 -->
		<c-modal
			:value="showChangeModal"
			title="请填写您需要变更的账号"
			@cancel="showChangeModal = false"
			@confirm="submitChangeAccount"
		>
			<view class="input-wrapper" style="margin-top: 30px">
				<input v-model="phoneNum" type="number" placeholder="请输入要变更的手机号码" maxlength="11" placeholder-class="placeholder" />
			</view>
			<view class="input-wrapper flex align-center justify-between" style="margin-bottom: 30px;">
				<input v-model="verifyCode" type="number" placeholder="输入验证码" maxlength="6" class="verify-input" placeholder-class="placeholder" />
				<view class="verify-btn" @click="getVerifyCode">{{ disabled ? `${countdown}s` : '获取验证码' }}</view>
			</view>
		</c-modal>
	</view>
</template>

<script>
import navBar from '@/components/nav-bar/index.vue'
import cModal from '@/components/c-modal.vue'
	
export default {
	components: {
		navBar,
		cModal
	},
	data() {
		return {
			companyInfo: {
				isNo: true,
			},
			isAdmin: false,
			companyId: '',
			loading: false,
			showAuditModal: false,
			auditChecked: false, // 是否设置成管理员
			showLeaveModal: false,
			auditList: [],
			updating: false,
			currentAuditItem: {}, // 当前被审核人
			showChangeModal: false, // 变更弹窗
			disabled: false,
			timer: null,
			countdown: 60,
			getting: false,
			verifyCode: '',
			phoneNum: '', // 输入手机号
			changePhoneNum: '', // 被变更手机号
			userPhoneNum: '', // 当前登录人手机号
		};
	},
	filters: {
		statusText(status) {
			switch (status) {
				case 1:
					return '请审核'
				case 2:
					return '已通过'
				case 3:
					return '已拒绝'
				default:
					return ''
			}
		}
	},
	watch: {
		showAuditModal(nValue) {
			if (!nValue) {
				this.auditChecked = false
			}
		},
		showChangeModal(nValue) {
			if (!nValue) {
				// 关闭弹窗时清除选择的手机号
				this.changePhoneNum = ''
				this.verifyCode = ''
				this.phoneNum = ''
				this.clearCountdownTimer()
			}
		}
	},
	onLoad() {
		// /app/user/selectUserById
		this.getCompanyStatus()
	},
	onUnload() {
		this.clearCountdownTimer()
	},
	methods: {
		getStatusClass(status) {
			switch (status) {
			    case 1:
			        return 'btn'; // 待审核
			    case 2:
			        return '';    // 已通过
			    case 3:
			        return 'info';  // 已拒绝
			    default:
			        return '';
			}
		},
		getCompanyStatus() {
			uni.showLoading({ title: '加载中' })
			this.loading = true
			this.$Request.get("/app/company/selectCompanyByUserId")
				.then((res) => {
					this.loading = false
					uni.hideLoading()
					if (res.code == 0 && res.data) {
						this.companyInfo = res.data
						this.companyId = res.data.companyId
						this.userPhoneNum = res.data.phone
						this.auditList = res.data.companyUserVos || []
						if (res.data.companyUser?.isAdmin == 1) {
							this.isAdmin = true
						}
					} else {
						this.companyInfo = {
							isNo: true,
						};
					}
				}).catch(err => {
					this.loading = false
					uni.hideLoading()
				});
		},
		
		// 审核账号
		handleAudit(item) {
			if (item.status != 1) return
			this.showAuditModal = true
			this.currentAuditItem = item
		},
		
		handleCloseModal() {
			this.showAuditModal = false
			this.showLeaveModal = false
		},
		
		// 审核账号
		auditAccount(status) {
			if (this.updating) return
			this.updating = true
			uni.showLoading({ title: '处理中' })
			this.$Request.getT('/app/company/auditCompanyUser', {
				companyId: this.companyId,
				auditedUserId: this.currentAuditItem.userId,
				isAdmin: this.auditChecked ? 1: 0,
				status
			}).then(res => {
				if (res.code == 0) {
					this.$queue.showToast('操作成功')
					this.showAuditModal = false
					this.getCompanyStatus()
				} else {
					this.$queue.showToast(res.msg || '操作成功')
				}
				this.updating = false
				uni.hideLoading()
			}).catch(() => {
				this.$queue.showToast('失败了，请重试')
				this.updating = false
				uni.hideLoading()
			})
		},
		
		// 审核拒绝
		handleRejest() {
			this.auditAccount(3)
		},
		
		// 审核通过
		handlePass() {
			this.auditAccount(2)
		},
		
		// 确定离开
		handleLeave() {
			if (this.updating) return
			this.updating = true
			uni.showLoading({ title: '处理中' })
			this.$Request.getT('/app/company/deleteCompany', {
				companyId: this.companyId
			}).then(res => {
				if (res.code == 0) {
					this.showLeaveModal = false
					this.logout()
				} else {
					this.$queue.showToast(res.msg || '出错了，请稍后再试')
				}
				this.updating = false
				uni.hideLoading()
			}).catch(() => {
				this.$queue.showToast('出错了，请稍后再试')
				this.updating = false
				uni.hideLoading()
			})
			// /sqx_fast/app/company/deleteCompany
		},
		
		// 去变更
		handleChange() {
			this.showLeaveModal = false
			this.showChangeModal = true
		},
		
		// 获取验证码
		getVerifyCode() {
			if (!this.phoneNum) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}
			if (!/^1[3-9]\d{9}$/.test(this.phoneNum)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			if (this.disabled || this.getting) return
			
			uni.showLoading({ title: '正在发送验证码' })
			this.getting = true
			this.$Request
				.getT('/app/Login/sendMsg/' + this.phoneNum + '/bind')
				.then((res) => {
					if (res.code === 0) {
						this.startCountdown()
					} else {
						uni.showModal({
							showCancel: false,
							title: '短信发送失败',
							content: res.msg ? res.msg : '请一分钟后再获取验证码',
						});
					}
				})
				.finally(() => {
					this.getting = false
					uni.hideLoading();
				})
		},
		
		startCountdown() {
			this.disabled = true
			this.timer = setInterval(() => {
				this.countdown--
				if (this.countdown <= 0) {
				    this.clearCountdownTimer()
				}
			}, 1000)
		},
		clearCountdownTimer() {
		    if (this.timer) {
				clearInterval(this.timer)
				this.timer = null // 重置定时器实例
				this.countdown = 60
				this.disabled = false
			}
		},
		
		// 变更选择的账号
		changeSelectAccount(item) {
			this.changePhoneNum = item.phone
			this.showChangeModal = true
		},
		
		// 提交变更
		submitChangeAccount() {
			if (this.updating) return
			this.updating = true
			
			if (!this.phoneNum) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}
			
			if (!this.verifyCode) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				return
			}
			
			uni.showLoading({ title: '处理中' })
			this.$Request.postJson('/app/company/giveCompany', {
				phone: this.changePhoneNum || this.userPhoneNum,
				msg: this.verifyCode,
				givePhone: this.phoneNum
			}).then(res => {
				if (res.code == 0) {
					this.showChangeModal = false
					this.logout()
				} else {
					this.$queue.showToast(res.msg || '出错了，请稍后再试')
				}
			}).finally(() => {
				uni.hideLoading()
				this.updating = false
			})
		},
		
		logout() {
			uni.showToast({
				title: '操作成功',
				icon: 'none',
			})
			setTimeout(() => {
				this.$queue.toLogin()
				this.$queue.logout()
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.my-company-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: linear-gradient(90.00deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
	background-size: 100% 40%;
	background-position: center top;
	background-repeat: no-repeat;
	font-family: DM Sans;
	font-style: Regular;
}

/* 头部区域 */
.header-section {
	text-align: center;
}

.illustration-area {
	.company-illustration {
		display: block;
		width: 280rpx;
		height: 180rpx;
		margin: 0 auto;
	}
}

// 管理员端
.admin-container {
	flex: 1;
	.company-name {
		font-weight: 500;
		line-height: 44rpx;
		color: #fff;
		text-align: center;
		margin: 20rpx 40rpx;
	}
	.buttons {
		padding: 0 40rpx 28rpx;
		gap: 20rpx;
		.button {
			flex: 1;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(255, 255, 255, 0.2);
			font-size: 32rpx;
			font-weight: 400;
			text-align: center;
			color: #fff;
			line-height: 80rpx;
		}
	}
	.list-wrapper {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
	}
	.scroll-view {
		height: calc(100vh - 470rpx);
		overflow-y: auto;
	}
	.list {
		padding: 40rpx;
		.list-title {
			font-size: 32rpx;
			font-weight: 500;
			line-height: 56rpx;
			color: rgba(51, 51, 51, 1);
		}
		.account-item {
			padding: 32rpx 32rpx 28rpx 0;
			.title {
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 400;
				line-height: 44rpx;
				.badge {
					box-sizing: border-box;
					border: 1px solid rgba(1, 107, 246, 1);
					border-radius: 3px;
					background: rgba(1, 107, 246, 0.1);
					font-size: 20rpx;
					font-weight: 400;
					line-height: 24rpx;
					color: rgba(1, 107, 246, 1);
					margin-left: 16rpx;
					padding: 6rpx 12rpx;
				}
			}
			.sub-title {
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
				font-weight: 400;
				line-height: 28rpx;
				margin-top: 10rpx;
			}
			.status-text {
				height: 54rpx;
				padding: 12rpx 24rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 28rpx;
				color: rgba(1, 107, 246, 1);
				box-sizing: border-box;
				&.info {
					color: rgba(153, 153, 153, 1);
				}
				&.btn {
					color: #fff;
					background-color: #016BF6;
				}
			}
			.bottom-button {
				height: 44rpx;
				text-align: center;
				border-radius: 2px;
				background: rgba(1, 107, 246, 0.1);
				font-size: 24rpx;
				line-height: 44rpx;
				color: rgba(1, 107, 246, 1);
				margin-top: 10rpx;
			}
		}
	}
}

// 非管理员端
.un-admin-container {
	.company-name {
		margin: 40rpx 40rpx 60rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-weight: 500;
		line-height: 44rpx;
		text-align: center;
	}
	.content-wrapper {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		padding: 52rpx 76rpx;
		.info-list {
			.info-item {
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
				font-weight: 400;
				line-height: 32rpx;
				margin-bottom: 12rpx;
				text {
					padding-right: 48rpx;
				}
			}
		}
		.buttons {
			margin-top: 40rpx;
			.button {
				width: 100%;
				height: 40px;
				box-sizing: border-box;
				border: 1px solid rgba(1, 107, 246, 1);
				border-radius: 40px;
				background: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 38px;
				font-size: 16px;
				font-weight: 400;
				margin-bottom: 40rpx;
				&.plain {
					color: rgba(1, 107, 246, 1);
				}
				&.primary {
					color: #fff;
					background: rgba(1, 107, 246, 1);
				}
			}
		}
	}
}

// 审核弹窗
.audit-modal {
	min-height: 180rpx;
	.title {
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-weight: 400;
		line-height: 44rpx;
		margin-top: 48rpx;
		.badge {
			box-sizing: border-box;
			border: 1px solid rgba(1, 107, 246, 1);
			border-radius: 3px;
			background: rgba(1, 107, 246, 0.1);
			font-size: 20rpx;
			font-weight: 400;
			line-height: 24rpx;
			color: rgba(1, 107, 246, 1);
			margin-left: 16rpx;
			padding: 6rpx 12rpx;
		}
	}
	.sub-title {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-weight: 400;
		line-height: 28rpx;
		margin-top: 10rpx;
	}
	.check-bar {
		font-size: 24rpx;
		margin-top: 50rpx;
		::v-deep .u-checkbox__label {
			margin-right: 20rpx;
		}
		.tip {
			padding-bottom: 5px;
		}
	}
}

// 更换账号弹窗
.input-wrapper {
	box-sizing: border-box;
	border: 1px solid rgba(242, 242, 242, 1);
	border-radius: 6px;
	background: rgba(250, 250, 250, 1);
	margin-bottom: 16rpx;
	padding: 10rpx 24rpx;
	font-size: 28rpx;
	line-height: 60rpx;
	input {
		height: 60rpx;
		font-size: 28rpx;
		color: #1f2c37;
	}
	.placeholder {
		color: rgba(158, 161, 168, 1);
	}
	.verify-input {
		width: 300rpx;
	}
	.verify-btn {
		color: rgba(1, 107, 246, 1);
	}
}
</style>