ks-app-employment-service/packageRc/pages/service/serviceDetail.vue

<!--
 * @Date: 2024-10-08 14:29:36
 * @LastEditors: shirlwang
 * @LastEditTime: 2025-11-04 17:11:33
-->
<template>
	<view class="page" style="background-image: url('../../../packageRc/static/pageBg.png');position:relative;">
		<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 == 2}" @click="canChangeType ? changeType(2) : ''">政策法规<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>
		<investigate :userId="userId" :name="name" v-if="activeType == 1" ref="type1" />
		<policyConsultation v-if="activeType == 2" ref="type2" />
		<jobRecommend v-if="activeType == 3" ref="type3" :showInfo="showInfo"/>
		<skillTrain v-if="activeType == 4" ref="type4" />
		<jobTrack v-if="activeType == 5" ref="type5" />

	</view>
</template>

<script>
	import investigate from './components/investigate.vue';
	import policyConsultation from './components/policyConsultation.vue';
	import jobRecommend from './components/jobRecommend.vue';
	import skillTrain from './components/skillTrain.vue';
	import jobTrack from './components/jobTrack.vue';
	export default {
		components: {
			investigate,
			policyConsultation,
			jobRecommend,
			skillTrain,
			jobTrack,
		},
		data() {
			return {
				isAdd: true,
				activeType: 1,
				showTab: undefined,
				canChangeType: true,
				userId: '',
				name:"",
				showInfo: '0'
			}
		},
		onLoad(options) {
			this.userId = options.userId
			this.name = options.name
			this.showTab = options.showTab
			this.showInfo = options.showInfo || '0'
			if (options.id && options.type) {
				this.activeType = options.type
				this.canChangeType = false;
				this.isAdd = false
				// 获取服务详情
				this.$nextTick(() => {
					this.$refs['type' + options.type].getDetail(options.id)
				})
			} else if (options.personName && options.personId) {
				this.canChangeType = false;
				this.activeType = options.type
				this.$nextTick(() => {
					this.$refs['type' + options.type].setPersonName(options)
				})
			}

			// else if (options.personName && options.personId) {
			// 	this.canChangeType = false;
			// 	this.activeType = options.type
			// 	this.$nextTick(() => {
			// 		// 获取求职需求详情
			// 		this.$refs['type' + options.type].addForPerson(options)
			// 	})
			// }
			else {
				this.changeType(options.activeType || 1)
			}
		},
		onReady() {},
		created() {},
		methods: {
			changeType(type) {
				this.activeType = type
				this.$nextTick(() => {
					this.$refs['type' + type].addOne()
				})
			},
			goBack() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
	@import "/packageRc/static/scss/index.scss";
	.page {
		background-color: #F4F4F4 !important;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: relative;
	}

	.button-area {
		padding: 24rpx 32rpx 68rpx;
		background: #fff;
		display: flex;
		width: 100%;
		box-sizing: border-box;
		margin-top: 40rpx;
		border-radius: 16px 16px 0px 0px;
		position: absolute;
		bottom: 0;
		left: 0;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

		.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;
	}

	.inner {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
	}
	.input-outer-part{
		// width: calc(100% - 64rpx);
		padding-top: 32rpx;
		// margin: 0 auto;;
	}

	.inner-part {
		width: 100%;
	}
	.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>