189 lines
4.6 KiB
Vue
189 lines
4.6 KiB
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>
|