veterans_H5/h5_web/pages/recruitment/recruitment.vue

<!-- 
 * @title 招聘就业 
 * @author Rockery(1113269755@qq.com)
-->

<template>
	<view class="recruitment">
		<!-- <u-navbar title-color="#FFFFFF" :customBack="navbarCustomBack" :bpay-bottom="false" back-icon-color="#FFFFFF"
			:background="{background: '#3D5D4C' }" title="招聘就业" class="recruitment-unavbar" /> -->
		<z-paging ref="recruitmentPaging" v-model="recruitmentJobList" @query="recruitmentQueryList">
			<u-navbar slot="top" back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
			<!-- ###################################-- 轮播图 -- ################################### -->
			<view class="recruitment-banner" slot="top">
				<u-swiper :list="bannerList" name="bannerUrl" border-radius="0" mode="round" height="300"
					img-mode="scaleToFill" @click="swiperClick" :mode="bannerList.length > 1 ? 'round' : 'none'"></u-swiper>
			</view>

			<!-- ###################################-- 请输入您关键词 -- ################################### -->
			<view class="recruitment-usearch" slot="top">
				<u-search placeholder="请输入您关键词" v-model="headerTopKeyword" :show-action="false" bg-color="#FFFFFF"
					@search="searchKeyword" @clear="searchKeyword"></u-search>
			</view>

			<!-- ###################################-- 企业推荐 -- ################################### -->
			<view class="u-card-wrap recruitment-recommend" slot="top">
				<u-card :show-foot="false" class="recruitment-recommend-card">
					<view slot="head">
						<view class="recommend-card-head">
							<view class="recommend-card-head-title">{{recommendConfigData.title}}</view>
							<view class="recommend-card-head-subtitle" @tap="recommendCardMoreClick">
								{{recommendConfigData.titlemore}}
								<u-icon name="arrow-right" color="#A3A3A3" size="28"></u-icon>
							</view>
						</view>
					</view>
					<view slot="body">
						<view class="recommend-card-body">
							<swiper v-if="recommendList&&recommendList.length>0" class="recommend-card-content"
								:display-multiple-items="4" :autoplay="true">
								<swiper-item v-for="(recommendItem, index) in recommendList"
									:key="'recommendList' + index">
									<view class="swiper-item" @tap="tapRecommendSwiperItem(recommendItem)"
										:data-id="recommendItem.id" :data-index="index">
										<view class="img">
											<!-- <u-image :src="recommendItem.logoUrl" mode="aspectFill" width="140"
												height="140" border-radius="10" /> -->
											<u-image :src="recommendItem.logoUrl" width="140" height="140" border-radius="10" mode="aspectFill">
												<view slot="error">
													<u-image src="../../static/img/default-company.png" width="140" height="140" border-radius="10" mode="aspectFill"/>
												</view>
											</u-image>
										</view>
										<view class="subject">{{recommendItem.companyName}}</view>
										<view class="post u-text-center">
											岗位
											<text class="postlink">{{recommendItem.postCount}}</text>个
										</view>
									</view>
								</swiper-item>
								<swiper-item v-if="recommendConfigData.listmore">
									<view class="swiper-item lookmore" @tap="recommendCardMoreClick">
										<view class="moretext">查看更多</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</u-card>
			</view>

			<!-- ###################################-- tabs页签 -- ################################### -->
			<view class="recruitment-tabs" slot="top">
				<u-tabs bg-color="transparent" :list="dataAreaTabsList" @change="dataAreaTabsChange"
					:current="dataAreaTabsCurrent" />
			</view>


			<!-- ###################################-- 招聘就业岗位 -- ################################### -->
			<view class="recruitment-dataarea">
				<view class="recruitment-dataarea-card" v-for="(item,index) in recruitmentJobList"
					:key="'recruitmentJobList' + index" @tap="tapDataAreaCard(item)">
					<view class="dataarea-card-left">
						<!-- <u-image :src="item.companyLogoUrl" mode="aspectFill" width="120" height="120"
							border-radius="10" /> -->
						<u-image :src="item.companyLogoUrl" width="120" height="120" border-radius="10" mode="aspectFill">
							<view slot="error">
								<u-image src="../../static/img/default-company.png" width="120" height="120" border-radius="10" mode="aspectFill"/>
							</view>
						</u-image>
					</view>
					<view class="dataarea-card-content">
						<view class="dataarea-content-left">
							<view>{{item.postName}}</view>
							<view class="content">
								{{ item.areaName }}｜经验{{ item.workYear }}年｜{{ getEducationBg(item.educationBg) }}
							</view>
							<view>{{item.companyName}}</view>
						</view>
						<view class="dataarea-content-right">
							<view>{{item.lowestSalary}}K~{{item.highestSalary}}K</view>
							<view>&nbsp;</view>
							<view>{{$u.timeFormat(new Date(item.createTime).getTime(), 'yyyy-mm-dd')}}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerTopKeyword: '',
				bannerList: [],
				// 企业推荐列表
				recommendList: [],
				recruitmentJobList: [],
				recommendListData: [],
				recommendConfigData: {
					title: '企业推荐',
					titlemore: '更多',
					listmore: false
				},
				dataAreaTabsCurrent: 0,
				dataAreaTabsList: [{
					name: '最新',
					text: '1'
				}],
				degrEducList: []
			}
		},
		onLoad() {
			// console.log(this.$u.config.v);
			// 获取企业推荐列表
			this.getRecommendList();
		},
		onShow() {
			this.getBannerList();
			this.getVeteDegrEduc();
		},
		methods: {
			/**
			 * 获取文化程度类别
			 */
			getVeteDegrEduc() {
				this.$u.api.getDictdataUrl({
					key: 'degr_educ'
				}).then(res => {
					if (res.code == 200) {
						this.degrEducList = res.data.map(item => {
							return {
								...item,
								value: item.text
							}
						});
					}
				});
			},
			/**
			 * 获取教育等级名称
			 * @param {Object} value
			 */
			getEducationBg(value) {
				let name;
				this.degrEducList.forEach(item => {
					if (item.value == value) {
						name = item.label
					}
				})
				return name;
			},
			/**
			 * 导航栏返回事件
			 */
			navbarCustomBack() {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/index/index'
				});
			},
			getBannerList() {
				this.$u.api.indexApi.indexBannerListApi({
					type: 1
				}).then(res => {
					if (res?.code === 200) {
						this.bannerList = res.data;
					}
				})
			},
			// 轮播图点击
			swiperClick(index) {
				if (this.bannerList[index].jumpUrl) {
					let url = this.bannerList[index].jumpUrl.split('#')[1];
					this.$u.route({
						url: url,
					});
				} else {
					this.$u.route({
						url: 'pages/bannerDetails/bannerDetails',
						params: {
							id: this.bannerList[index].id,
							type: 1
						}
					})
				}
			},
			/**
			 * 获取企业推荐列表
			 */
			getRecommendList() {
				this.$u.api.recruitment.getRecommendList().then(res => {
					if (res.code === 200) {
						this.recommendList = res.data || [];
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '系统异常!',
						type: 'error'
					});
				});
			},
			/**
			 * 获取招聘就业岗位列表
			 * @param { Number } newest
			 * @param { Number } pageNum
			 * @param { Number } pageSize
			 * @param { String } postName
			 */
			getRecruitmentJobList(newest, pageNum, pageSize, postName) {
				this.$u.api.recruitment.getRecruitmentJobList({
					pageNum,
					pageSize,
					postName,
					newest
				}).then(res => {
					if (res.code === 200) {
						this.$refs.recruitmentPaging.complete(res.rows || []);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						this.$refs.recruitmentPaging.complete([]);
					}
				}).catch(err => {
					uni.showToast({
						title: '系统异常!',
						type: 'error'
					});
					this.$refs.recruitmentPaging.complete([]);
				});
			},
			/**
			 * @param { String } value
			 */
			searchKeyword(value) {
				this.$refs.recruitmentPaging.reload(true)
				this.getRecruitmentJobList(this.dataAreaTabsList[this.dataAreaTabsCurrent]?.text, 1, 10, this
					.headerTopKeyword);
			},
			// tab栏切换
			dataAreaTabsChange(index) {
				this.dataAreaTabsCurrent = index;
				this.$refs.recruitmentPaging.reload(true)
				this.getRecruitmentJobList(this.dataAreaTabsList[index]?.text, 1, 10, this.headerTopKeyword);
			},
			/**
			 * 列表加载触发
			 */
			recruitmentQueryList(pageNo, pageSize) {
				if (this.dataAreaTabsList.length > 0) {
					this.getRecruitmentJobList(this.dataAreaTabsList[this.dataAreaTabsCurrent]?.text, pageNo, pageSize,
						this.headerTopKeyword);
				}
			},
			recommendCardMoreClick(index) {
				console.log("recommendCardMoreClick: ", index);
				this.$u.route({
					url: 'pages/cooperativeEnterprise/cooperativeEnterprise',
					params: {
						flag: 'recruitment'
					}
				});
			},
			tapRecommendSwiperItem(param) {
				this.$u.route({
					url: 'pages/businessDetails/businessDetails',
					params: {
						id: param?.id,
						flag: 'recruitment'
					}
				});
			},
			tapDataAreaCard(param) {
				this.$u.route({
					url: 'pages/jobDetails/jobDetails',
					params: {
						id: param?.id
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './scss/recruitment.scss';
</style>