yizhizan-h5/my/renzheng/companyWelfare.vue

<template>
	<view class="page-container">
		<nav-bar title="公司信息">
			<view class="nav-bar-right-btn" slot="right" @click="toNext">跳过</view>
		</nav-bar>
		
		<view class="content">
			<view class="num-title">
				<text class="current-num">2</text>
				<text>/6</text>
			</view>
			
			<view class="main-title">公司福利</view>
			<view>选择公司提供的福利信息，以吸引更多求职者</view>

			<view class="section">
				<view class="title">工作时间</view>
				<view class="input-wrapper">
					<view class="input-content flex-1" @click="openSelectTimePopup(1)">
						<text class="input-value" v-if="startWorkTime">{{ startWorkTime }}</text>
						<text class="input-placeholder" v-else>请选择开始时间</text>
					</view>
					<view>至</view>
					<view class="input-content flex-1" @click="openSelectTimePopup(2)">
						<text class="input-value" v-if="endWorkTime">{{ endWorkTime }}</text>
						<text class="input-placeholder" v-else>请选择结束时间</text>
					</view>
				</view>
			</view>
			
			<view class="section">
				<view class="title">休息时间（可选）</view>
				<view class="select-button-wrapper">
					<view
						class="select-button"
						:class="{ 'select-active-button': setLightClassName(1, item) }"
						v-for="(item, index) in companyRestTime"
						:key="index"
						@click="handleSelect(1, item)"
					>{{ item }}</view>
				</view>
			</view>
			
			<view class="section">
				<view class="title">加班情况（可选）</view>
				<view class="select-button-wrapper">
					<view
						class="select-button"
						:class="{ 'select-active-button': setLightClassName(2, item) }"
						v-for="(item, index) in companyOvertimeSituation"
						:key="index"
						@click="handleSelect(2, item)"
					>{{ item }}</view>
				</view>
			</view>
			
			<view class="section">
				<view class="title">公司福利</view>
				<view class="input-wrapper" @click="showWelfarePopup = true">
					<view class="tags" v-if="companyWelfareTag.length">
						<view class="tag" v-for="(item, index) in companyWelfareTag" :key="index">{{ item }}</view>
					</view>
					<view class="tags-placeholder" v-else>请选择公司福利</view>
					<u-icon name="arrow-down" style="paddingLeft: 6px;"></u-icon>
				</view>
			</view>
			
			<!-- 时间组件 -->
			<u-select
				v-model="showTimeModal"
				:default-value="defaultTime"
				mode="mutil-column"
				:list="timeList"
				@confirm="confirmTime"
			></u-select>
			
			<!-- 福利弹窗 -->
			<u-popup v-model="showWelfarePopup" :mask-close-able="false" mode="top" border-radius="14">
				<view class="welfare-popup">
					<view class="tags-wrapper">
						<view class="welfare-popup-title">公司福利标签</view>
						<view class="welfare-tip">选择公司提供的福利信息，以吸引更多求职者</view>
						
						<view class="tags-box">
							<view class="tag-item" v-for="(item, index) in companyWelfare" :key="index">
								<view class="tag-title">{{ item.title }}</view>
								<view class="tags">
									<view
										class="tag"
										:class="{ 'active-tag': setWelfareClassName(tag) }"
										v-for="tag in item.content"
										:key="tag"
										@click="handleChangeWelfare(tag)"
									>{{ tag }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="buttons-wrapper">
						<view class="button plain" @click="handleClear">清空</view>
						<view class="button primary" @click="showWelfarePopup = false">确定</view>
					</view>
				</view>
			</u-popup>
		</view>
		
		<view class="fixed-button">
			<view class="button" @click="handleSave">保存</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar/index.vue'
	import { companyRestTime, companyOvertimeSituation, companyWelfare } from '@/constants/common.js'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				companyId: '',
				startWorkTime: '',
				endWorkTime: '',
				restTime: '', // 休息情况
				companyRestTime: companyRestTime,
				overTime: '', // 加班情况
				companyOvertimeSituation: companyOvertimeSituation,
				companyWelfare: companyWelfare,
				companyWelfareTag: [], // 公司福利
				showTimeModal: false,
				timeList: [],
				timeType: 1, // 1开始时间，2结束时间
				showWelfarePopup: false
			};
		},
		computed: {
			// 时间回显值
			defaultTime() {
				let currentTime = this.timeType == 1 ? this.startWorkTime : this.endWorkTime
				if (!currentTime) {
					return []
				}
				let hours = currentTime.split(':')[0]
				let min = currentTime.split(':')[1]
				let hoursIndex = 0
				let minIndex = 0
				if (this.timeList.length == 2) {
					hoursIndex = this.timeList[0].findIndex(item => item.value == hours)
					minIndex = this.timeList[1].findIndex(item => item.value == min)
				}
				return [hoursIndex < 0 ? 0 : hoursIndex, minIndex < 0 ? 0 : minIndex]
			}
		},
		onLoad() {
			this.initTimeList()
			this.getCompanyInfo()
		},
		methods: {
			// 初始化选择的时间列表
			initTimeList() {
				let hoursList = []
				let minList = []
				for (let i = 0; i < 60; i++) {
					let value = i < 10 ? `0${i}` : `${i}`
					if (i < 24) {
						hoursList.push({
							label: value,
							value
						})
					}
					minList.push({
						label: value,
						value
					})
				}
				this.timeList = [hoursList, minList]
			},
			
			// 跳转至下一步 
			toNext() {
				uni.redirectTo({
					url: '/my/renzheng/editCompanyDesc'
				})
			},
			
			// 获取公司信息
			getCompanyInfo() {
				uni.showLoading({ title: '加载中' })
				this.$Request.get('/app/company/selectCompanyByUserId')
					.then((res) => {
						if (res.code != 0) {
							uni.showToast({
								title: res.msg || '查询状态失败',
								icon: 'none'
							});
							return
						}
						this.companyId = res.data.companyId
						const workTimes = res.data.workTime?.split('-')
						if (workTimes) {
							this.startWorkTime = workTimes[0]
							this.endWorkTime = workTimes[1]
						}
						this.restTime = res.data.workRestTime
						this.overTime = res.data.workOverTime
						if (res.data.welfare) {
							this.companyWelfareTag = res.data.welfare.split(',')
						}
						uni.hideLoading()
					})
					.catch((err) => {
						uni.hideLoading()
						uni.showToast({
							title: '网络异常',
							icon: 'none'
						})
					})
			},
			
			openSelectTimePopup(type) {
				this.timeType = type
				this.showTimeModal = true
			},
			
			// 选择时间
			confirmTime(e) {
				let time = e.map(item => item.value).join(':')
				this.timeType == 1 ? this.startWorkTime = time : this.endWorkTime = time
			},
			
			// 设置高亮class
			setLightClassName(type, value) {
				return type == 1 ? this.restTime == value : this.overTime == value
			},
			
			// 选择休息时间/加班情况
			handleSelect(type, value) {
				type == 1 ? this.restTime = value : this.overTime = value
			},
			
			// 选择福利
			handleChangeWelfare(value) {
				const index = this.companyWelfareTag.findIndex(tag => tag == value)
				index == -1 ? this.companyWelfareTag.push(value) : this.companyWelfareTag.splice(index, 1)
			},
			
			setWelfareClassName(tag) {
				return this.companyWelfareTag.includes(tag)
			},
			
			// 清空福利
			handleClear() {
				this.companyWelfareTag = []
				this.showWelfarePopup = false
			},
			
			// 比较时间大小
			compareTime(time1, time2) {
				const [h1, m1] = time1.split(":").map(Number);
				const [h2, m2] = time2.split(":").map(Number);
			
				if (h1 !== h2) {
					return h1 - h2;
				}
				return m1 - m2;
			},
			
			handleSave() {
				if (this.loading) return
				
				// 验证时间选择
				if (!this.startWorkTime || !this.endWorkTime) {
					uni.showToast({
						title: "请选择完整的工作时间",
						icon: "none",
					});
					return;
				}
				
				// 这里可以添加时间逻辑验证，比如结束时间不能早于开始时间
				if (this.compareTime(this.startWorkTime, this.endWorkTime) >= 0) {
					uni.showToast({
						title: "结束时间必须晚于开始时间",
						icon: "none",
					});
					return;
				}
				
				uni.showLoading({ title: '保存中' })
				this.loading = true
				// 将选择的时间数据传递到下一页或保存
				const companyData = {
					companyId: this.companyId,
					workTime: `${this.startWorkTime}-${this.endWorkTime}`,
					workRestTime: this.restTime,
					workOverTime: this.overTime,
					welfare: this.companyWelfareTag.join(',')
				};
				
				this.$Request.postJson('/app/company/updateCompany', companyData)
					.then(res => {
						if(res.code == 0){
							uni.showToast({
								title: '提交成功',
								duration: 1500,
							});
							setTimeout(()=>{
								uni.$emit('updateCompanyInfo')
								uni.navigateBack()
							}, 500)
						}
						this.loading = true
						uni.hideLoading()
					})
					.catch(() => {
						this.loading = true
						uni.hideLoading()
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './company.scss';
	
	.welfare-popup {
		padding-bottom: 36rpx;
		
		.tags-wrapper {
			padding: 36rpx 64rpx 100rpx;
			.welfare-popup-title {
				color: rgba(31, 44, 55, 1);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				margin-bottom: 24rpx;
			}
			.welfare-tip {
				color: rgba(158, 158, 158, 1);
				font-size: 28rpx;
				font-weight: 400;
				line-height: 36rpx;
				margin-bottom: 24rpx;
			}
			.tags-box {
				.tag-item {
					margin-bottom: 24rpx;
					.tag-title {
						color: rgba(31, 44, 55, 1);
						font-size: 28rpx;
						font-weight: 500;
						line-height: 44rpx;
						margin-bottom: 24rpx;
					}
				}
			}
		}
		
		.buttons-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 40rpx;
			gap: 16rpx;
			.button {
				flex: 1;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 80rpx;
				font-size: 32rpx;
				&.plain {
					color: rgba(1, 107, 246, 1);
					background: rgba(1, 107, 246, 0.1);
				}
				&.primary {
					color: #fff;
					background: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1));
				}
			}
		}
	}
</style>