个人招工表单开发

pages/recruit/subPage/recruit.vue

@@ -17,50 +17,31 @@
         	
         	<view class="form-wrapper">
         		<view class="require">您的招工需求</view>
-        		<!-- <u--textarea v-model="value2" height="140" placeholder="请输入内容" count ></u--textarea>
-        		<u-cell-group style="margin: 20rpx 0;">
-        			<u-cell  title="技能要求" :isLink="true"></u-cell>
-        			<u-cell  title="任务区域" :isLink="true" value=""></u-cell>
-        		</u-cell-group> -->
-				<u--form
-					labelPosition="left"
-					:model="model1"
-					:rules="rules"
-					ref="uForm"
-				>
-					<u-form-item
-						label="名称"
-						prop="userInfo.name"
-						borderBottom
-						ref="item1"
-					>
-								<u--input
-										v-model="model1.userInfo.name"
-										border="none"
-								></u--input>
-							</u-form-item>
-							<u-form-item
-									label="性别"
-									prop="userInfo.sex"
-									borderBottom
-									@click="showSex = true; hideKeyboard()"
-									ref="item1"
-							>
-								<u--input
-										v-model="model1.userInfo.sex"
-										disabled
-										disabledColor="#ffffff"
-										placeholder="请选择性别"
-										border="none"
-								></u--input>
-								<u-icon
-										slot="right"
-										name="arrow-right"
-								></u-icon>
-							</u-form-item>
-						</u--form>
+				<view class="u-demo-block">
+					<view class="u-demo-block__content">
+						<view class="typeButtonWrapper">
+							<view class="typeButtonLeft">
+						
+								<view v-for="(item, index) in nonReactiveArray" :key="index"
+									:class="['typeButton', index == activeTab ? 'activeButton' : '']" @click="changeTab(index)">{{ item
+									}}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view v-if="activeTab == 0" class="u-demo-block" style="padding: 20rpx;">
+					<!-- <view>发布任务</view> -->
+					<Task></Task>
+				</view>
+				<view v-if="activeTab == 1" class="u-demo-block" style="padding: 20rpx;">
+					<!-- <view>发布岗位</view> -->
+					<Work></Work>
+				</view>
+				<view v-if="activeTab == 2" class="u-demo-block" style="padding: 20rpx;padding-bottom: 140rpx;">
+					<Person></Person>
+				</view>
         	</view>
-        	<view style="font-size: 36rpx;color: #000;font-weight: bold;padding: 0 20rpx;">招工指引</view>
+        	<!-- <view style="font-size: 36rpx;color: #000;font-weight: bold;padding: 0 20rpx;">招工指引</view>
         	<view class="zhiyin">
         		<view class="item">
         			<span>在线填写</span>
@@ -79,17 +60,9 @@
         	</view>
         	<view class="bottom">
         		<view class="btn">提交</view>
-        	</view>
+        	</view> -->
         </view>
-		<u-action-sheet
-						:show="showSex"
-						:actions="actions"
-						title="请选择性别"
-						description="如果选择保密会报错"
-						@close="showSex = false"
-						@select="sexSelect"
-				>
-				</u-action-sheet>
+		
         <CustomTabbar :currentpage="1"></CustomTabbar>
     </view>
 </template>
@@ -97,45 +70,17 @@
 <script>
     import CustomNavbar from '@/components/CustomNavbar/navbar.vue'
     import CustomTabbar from '@/components/CustomTabbar/custom_tabbar.vue'
+	import Task from './task.vue' // 发布任务
+	import Work from './work.vue' // 发布岗位
+	import Person from './person.vue' // 个人招工
 	export default {
-        components: {CustomTabbar, CustomNavbar},
+        components: {CustomTabbar, CustomNavbar, Task, Work, Person},
 		data() {
 			return {
 				value2: '招工内容',
-				showSex: false,
-				model1: {
-					userInfo: {
-						name: 'uView UI',
-						sex: '',
-					},
-				},
-				actions: [{
-					name: '男',
-				},
-				{
-					name: '女',
-				},
-				{
-					name: '保密',
-				},
-				],
-							rules: {
-								'userInfo.name': {
-									type: 'string',
-									required: true,
-									message: '请填写姓名',
-									trigger: ['blur', 'change']
-								},
-								'userInfo.sex': {
-									type: 'string',
-									max: 1,
-									required: true,
-									message: '请选择男或女',
-									trigger: ['blur', 'change']
-								},
-							},
-							radio: '',
-							switchVal: false
+				fileList1: [],
+				nonReactiveArray: ["发布任务", "发布岗位", "个人招工"],
+				activeTab: 0,
 			}
 		},
 		methods: {
@@ -143,7 +88,10 @@
 			    uni.reLaunch({
 			        url: '/pages/my/my'
 			    })
-			}
+			},
+			changeTab: function (e) {
+				this.activeTab = e;
+			},
 		}
 	}
 </script>
@@ -196,6 +144,7 @@
 	}
 	.form-wrapper {
 		padding: 20rpx;
+		margin-bottom: 40rpx;
 		.require {
 			font-size: 36rpx;
 			font-weight: 500;
@@ -250,4 +199,30 @@
 		}
 	}
 }
+.typeButtonWrapper {
+	width: 92%;
+	margin: 0 auto;
+	display: flex;
+	justify-content: space-between;
+	/* margin-bottom: 10rpx; */
+}
+
+.typeButtonLeft {
+	display: flex;
+    
+}
+
+.typeButton {
+	font-size: 14px;
+	padding: 10rpx 40rpx;
+	background: #f6f6f6;
+	border-radius: 50px;
+	margin-right: 10rpx;
+    white-space: nowrap;
+}
+
+.activeButton {
+	color: #4171f9;
+	background-color: #cfdaf8;
+}
 </style>