ks-app-employment-service/packageRc/pages/demand/demandail.vue

<!--
 * @Date: 2024-10-08 14:29:36
 * @LastEditors: shirlwang
 * @LastEditTime: 2025-11-03 16:29:26
-->
<template>
	<view class="page" style="background-image: url('../../../packageRc/static/pageBg.png');">
		<view class="page-header df_flex" style="display:flex;align-items:center;justify-content:space-between;padding:20rpx 0rpx;">
			<u-icon class="back-icon" name="arrow-left" color="#fff" size="16" @click="goBack()"></u-icon>
			<view class="title df_flex_1" style="padding-left: 32rpx;" >{{isAdd ? '需求新增' : '需求维护'}}</view>
			<u-icon  style="margin-right: 32rpx;" @tap="$store.commit('SET_SHOWEXITPOPUP', true)" name="list"  size="44rpx" color="#fff"></u-icon>
		</view>
		<view class="tab-list" v-if="showTab != 1">
			<view class="tab" :class="{active: activeType == 1}" @click="canChangeType ? changeType(1) : ''">求职<br>需求
			</view>
			<view class="tab" :class="{active: activeType == 3}" @click="canChangeType ? changeType(3) : ''">创业<br>需求
			</view>
			<view class="tab" :class="{active: activeType == 4}" @click="canChangeType ? changeType(4) : ''">培训<br>需求
			</view>
			<view class="tab" :class="{active: activeType == 5}" @click="canChangeType ? changeType(5) : ''">其他<br>需求
			</view>
		</view>	
		<jobService v-if="activeType == 1" :needId="id" :name="name" ref="type1" />
		<entrepreneurshipService :needId="id" :name="name" v-if="activeType == 3" ref="type3" />
		<trainService v-if="activeType == 4" :needId="id" :name="name" ref="type4" />
		<otherService v-if="activeType == 5" :needId="id" :name="name" ref="type5" />
		<!-- 社区端 - 显示隐藏退出组件 -->
		<exitPopup />
	</view>
</template>

<script>
	import jobService from './components/jobService.vue';
	import entrepreneurshipService from './components/entrepreneurshipService.vue';
	import trainService from './components/trainService.vue';
	import otherService from './components/otherService.vue';
	export default {
		components: {
			jobService,
			entrepreneurshipService,
			trainService,
			otherService,
		},
		data() {
			return {
				isAdd: true,
				activeType: 1,
				canChangeType: true,
				id: '',
				name:"",
			}
		},
		onLoad(options) {
			this.showTab = options.showTab
			this.id = options.id
			console.log("this.id",this.id)
			this.name = options.name
			if (options.id && options.type) {
				this.isAdd = false
				this.activeType = options.type
				this.canChangeType = false;
				this.$nextTick(() => {
					this.$refs['type' + options.type].getDetail(options.id)
				})
			} else {
				// 添加需求的时候根据传入的类型 判断对应的表单
				this.changeType(options.activeType || 1)
			}

		},
		methods: {
			changeType(type) {
				this.activeType = type
				this.$nextTick(() => {
					this.$refs['type' + type].addOne()
				})
			},
			goBack() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">


	.page {
		background-color: #F4F4F4 !important;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% auto;

	}

	.button-area {
		padding: 24rpx 32rpx 68rpx;
		width: 100%;
		background: #fff;
		display: flex;
		box-sizing: border-box;
		margin-top: 40rpx;
		border-radius: 16px 16px 0px 0px;

		.btn {
			line-height: 72rpx;
			width: 176rpx;
			margin-right: 16rpx;
			font-size: 28rpx;
			border: 1px solid #B8C5D4;
			color: #282828;
			text-align: center;
			border-radius: 8rpx;
		}

		.reset {
			background: #DCE2E9;
		}

		.save {
			background: linear-gradient(103deg, #1D64CF 0%, #1590D4 99%);
			color: #fff;
			border: 0;
			flex-grow: 1;
		}
	}

	.noValue {
		color: rgb(192, 196, 204);
	}

	.disabledLine {
		background: rgb(245, 247, 250);
		cursor: not-allowed;
	}

	.tab-list {
		display: flex;
		width: calc(100% - 64rpx);
		margin: 16rpx auto 30rpx;
		text-align: center;
		border-radius: 16rpx;
		background: #fff;
		;

		.tab {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 4rpx solid #FFFFFF;
			background: #fff;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #878787;
			height: 106rpx;

			&.active {
				background: #1A62CE;
				color: #fff;
				position: relative;
				font-weight: bold;

				&::before {
					content: '';
					position: absolute;
					bottom: -13rpx;
					border-top: 14rpx solid #1A62CE;
					border-left: 12rpx solid transparent;
					border-right: 12rpx solid transparent;
					left: calc(50% - 7rpx);
					z-index: 2;
				}

				&::after {
					content: '';
					position: absolute;
					z-index: 1;
					bottom: -18rpx;
					border-top: 14rpx solid #fff;
					border-left: 12rpx solid transparent;
					border-right: 12rpx solid transparent;
					left: calc(50% - 7rpx);
				}
			}
		}
	}
</style>