yizhizan-h5/pages/index/game/gameList.vue

<template>
	<view class="page-container" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
		<!-- 搜索栏 -->
		<view class="search-section" :class="{'fixed': isFixed}" :style="isFixed ? { paddingTop: (12 + statusBarHeight) + 'px' } : {}">
			<view class="search-bar">
				<u-icon name="search" color="#999999" size="32" class="search-icon"></u-icon>
				<input type="text" placeholder="搜索职位" class="search-input" v-model="searchKeyword" @confirm="handleSearch" />
			</view>
			<text class="search-btn" @click="handleSearch">搜索</text>
		</view>
		
		<!-- tabs和筛选 -->
		<view class="topbg-type flex justify-center" :class="{'fixed': isFixed}">
			<view class="topbg-type-box">
				<!-- 第一行：tabs -->
				<view class="topbg-type-box-row flex justify-between align-center">
					<view class="topbg-type-box-l flex align-center">
						<view class="topbg-type-box-l-i" :class="current==index?'active':''"
							@tap="current = index" v-for="(item,index) in typeList" :key="index">
							{{item.label}}
						</view>
					</view>
					<!-- 添加求职意向 -->
					<view class="topbg-yx-box-r flex align-center"
						@click="goNav('/package/jobIntention/jobIntention')">
						<image src="../../../static/images/index/Attachment.svg" class="attachment-icon" />
					</view>
				</view>
				
				<!-- 第二行：筛选 -->
				<view class="topbg-sx-box flex justify-between align-center">
					<!-- 分类 -->
					<view class="topbg-sx-box-l flex align-center">
						<view class="topbg-sx-box-l-i" :class="currentSx==index?'active3':''"
							@click="currentSx = index" v-for="(item,index) in sxTypeList" :key="index">
							{{item.name}}
						</view>
					</view>
					
					<view class="topbg-sx-box-r flex align-center">
						<!-- 城市 -->
						<view class="topbg-sx-box-r-i flex align-center" style="">
							<text style="margin-right: 10rpx;"
							@click="goNavs('/package/jobIntention/city')">{{city?city:'选择城市'}}</text>
							<u-icon name="arrow-down" color="#00B78F" size="16"
								@click="goNavs('/package/jobIntention/city')"></u-icon>
						</view>

						<!-- 筛选 -->
						<view class="topbg-sx-box-filter flex align-center">
							<text style="margin-right: 10rpx;"
								@click="goNavs('/package/screen/screen')">筛选</text>
							<u-icon name="arrow-down" color="#999999" size="16"
								@click="goNavs('/package/screen/screen')"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 职位列表 -->
		<view class="job-list-section">
			<view class="job-list-header">
				<text class="job-list-title">亿职赞急聘推荐</text>
				<view class="refresh-btn" @click="refreshJobList">
					<text>换一批推荐</text>
					<image src="../../../static/images/index/shuaxin.svg" class="refresh-icon"></image>
				</view>
			</view>
			
			<view class="job-list" v-if="dataList.length > 0">
				<view class="job-item" @click="gotoInfo(item.postPushId)" v-for="(item, index) in dataList" :key="index">
					<view class="job-item-content">
						<!-- 公司logo -->
						<image :src="item.company ? item.company.companyLogo : '../../../static/logo.png'" 
							class="company-logo" mode="aspectFill"></image>
						
						<view class="job-info">
							<!-- 公司名称 -->
							<view class="company-name">{{item.company ? item.company.companyName : ''}}</view>
							
							<!-- 公司规模-行业 -->
							<view class="company-details">
								<text>{{item.company ? item.company.companyPeople : '0人'}}</text>
								<text>{{item.company ? item.industry.split(',').join(' ') : '未知行业'}}</text>
							</view>
							
							<!-- 工作时间-福利 -->
							<view class="job-benefits">
								<text>上午9:00-下午06:30</text>
								<text v-for="(benefit, idx) in item.positionWelfare" :key="idx">{{benefit}}</text>
							</view>
						</view>
						
						<!-- 右箭头 -->
						<u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
					</view>
				</view>
			</view>
			
			<!-- 暂无数据 -->
			<view class="empty-state" v-else>
				<text>暂无急聘职位</text>
			</view>
		</view>
		
		<!-- 求职列表 -->
		<view class="job-search-section">			
			<view class="job-search-list" v-if="jobSearchList.length > 0">
				<view class="job-search-item" @click="gotoInfo(item.postPushId)" v-for="(item, index) in jobSearchList" :key="index">
					<!-- 急聘标签 -->
					<view class="urgent-tag">
						<image src="../../../static/images/index/jijiji.svg" class="urgent-icon"></image>
					</view>
					
					<view class="job-search-content">
						<!-- 职位标题 -->
						<view class="job-title">{{item.stationName || item.positionName || '职位名称'}}</view>
						
						<!-- 公司信息 -->
						<view class="company-info">
							<text class="company-name">{{item.company ? item.company.companyName : ''}}</text>
							<text class="company-name">{{item.company ? item.company.companyPeople : '0人'}}</text>
						</view>
						
						<!-- 薪资 -->
						<view class="salary" v-if="item.salaryRange">
							<text>￥{{item.salaryRange}}/月</text>
                            <text>
                                <text class="bonus-tag">奖</text>
                                <text class="bonus-xin">16薪</text>
                            </text>
						</view>
						
						<!-- 职位要求标签 -->
						<view class="job-requirements" v-if="item.experience || item.education || item.positionWelfare">
							<text class="requirement-tag" v-if="item.experience">{{item.experience}}</text>
							<text class="requirement-tag" v-if="item.education">{{item.education}}</text>
							<text class="requirement-tag" v-for="(welfare, idx) in item.positionWelfare" :key="idx">{{welfare}}</text>
						</view>
						
						<!-- 联系人信息 -->
						<view class="contact-info">
							<image :src="item.company?item.company.companyLogo:'../../../static/logo.png'"
								style="width: 58rpx;height: 58rpx;border-radius: 50%;margin-right: 20rpx;" mode=""></image>
							<view class="company-info-text" v-if="item.company">
								{{item.company.companyLegalPerson?item.company.companyLegalPerson:'未知'}}·人事总监
							</view>
							<view class="reply-time">10分钟前回复</view>
						</view>
						
						<!-- 地址和距离 -->
						<view class="location-info">
							<u-icon name="map" color="#999999" size="16"></u-icon>
							<text class="address">{{item.province || ''}}{{item.city || ''}}{{item.county || ''}}{{item.address || ''}}</text>
							<image src="../../../static/images/index/navigation.svg" class="distance-icon"></image>
							<text class="distance">{{item.distance || '22km'}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 暂无数据 -->
			<view class="empty-state" v-else>
				<text>暂无更多职位</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'gameList',
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				current: 0,
				typeList: [],
				currentSx: 0,
				sxTypeList: [{
						id: 1,
						name: '推荐',
					},
					{
						id: 2,
						name: '最新',
					}
				],
				city: '',
				searchKeyword: '', // 搜索关键词
				dataList: [], // 职位列表
				jobSearchList: [], // 求职列表
				page: 1,
				limit: 10,
				searchPage: 1,
				searchLimit: 10,
				latitude: '',
				longitude: '',
				isFixed: false, // 是否固定
				fixedThreshold: 300, // 固定阈值
			};
		},
		onLoad() {
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			
			this.getTypeList()
			this.getLocation()
			this.getJobSearchList()
		},
		onPageScroll(e) {
			// 监听页面滚动
			const scrollTop = e.scrollTop
			if (scrollTop > this.fixedThreshold) {
				this.isFixed = true
			} else {
				this.isFixed = false
			}
		},
		methods: {
			// 获取工作性质列表
			getTypeList() {
				this.$Request.getT('/app/dict/list', {
					type: '工作性质'
				}).then(res => {
					if (res.code == 0) {
						this.typeList = res.data.map(item => ({
							label: item.value,
							value: item.code
						}))
						// 获取到tabs数据后调用职位列表
						this.getJobList()
					}
				})
			},
			// 跳转到搜索页面
			goNavs(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 跳转到求职意向页面
			goNav(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 处理搜索
			handleSearch() {
				if (this.searchKeyword.trim()) {
					uni.navigateTo({
						url: '/package/search/search?keyword=' + encodeURIComponent(this.searchKeyword)
					})
				} else {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none'
					})
				}
			},
			// 获取位置信息
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.getJobList()
					},
					fail: function() {
						that.getJobList()
					}
				})
			},
			// 获取职位列表
			getJobList() {
				let data = {
					page: this.page,
					limit: this.limit,
					postType: this.typeList.length > 0 ? this.typeList[this.current].label : '',
					screen: +this.currentSx + 1, //1推荐 2最新
					city: this.city == '全国' ? '' : this.city,
					lng: this.longitude,
					lat: this.latitude,
					userId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
				}
				this.$Request.get('/app/postPush/userGetPostPushList', data).then(res => {
					if (res.code == 0) {
						res.data.records.map(item => {
							if (item.positionWelfare) {
								item.positionWelfare = item.positionWelfare.split(',')
							} else {
								item.positionWelfare = []
							}
							if (item.distance) {
								if (parseFloat(item.distance) > 1000) {
									item.distance = (parseFloat(item.distance) / 1000).toFixed(2) + 'km'
								} else {
									item.distance = (parseFloat(item.distance)).toFixed(2) + 'm'
								}
							} else {
								item.distance = ''
							}
						})
						if (this.page == 1) {
							this.dataList = res.data.records.slice(0, 2)
						} else {
							this.dataList = [...this.dataList, ...res.data.records.slice(0, 2)]
						}
					}
				})
			},
			// 跳转到职位详情
			gotoInfo(postPushId) {
				uni.navigateTo({
					url: '/pages/index/game/order?postPushId=' + postPushId
				})
			},
			// 判断岗位名称与职位名称是否相同
			isSameName(className, name) {
				let str1 = className.trim();
				let str2 = name.trim();
				if (str1.length !== str2.length) {
					return true;
				}
				return str1.toLowerCase() !== str2.toLowerCase();
			},
			// 刷新职位列表
			refreshJobList() {
				this.page = 1
				this.getJobList()
			},
			// 获取求职列表
			getJobSearchList() {
				let data = {
					page: this.searchPage,
					limit: this.searchLimit,
					postType: this.typeList.length > 0 ? this.typeList[this.current].label : '',
					screen: +this.currentSx + 1, //1推荐 2最新
					city: this.city == '全国' ? '' : this.city,
					lng: this.longitude,
					lat: this.latitude,
					userId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
				}
				this.$Request.get('/app/postPush/userGetPostPushList', data).then(res => {
					if (res.code == 0) {
						res.data.records.map(item => {
							if (item.positionWelfare) {
								item.positionWelfare = item.positionWelfare.split(',')
							} else {
								item.positionWelfare = []
							}
							if (item.distance) {
								if (parseFloat(item.distance) > 1000) {
									item.distance = (parseFloat(item.distance) / 1000).toFixed(2) + 'km'
								} else {
									item.distance = (parseFloat(item.distance)).toFixed(2) + 'm'
								}
							} else {
								item.distance = ''
							}
						})
						if (this.searchPage == 1) {
							this.jobSearchList = res.data.records
						} else {
							this.jobSearchList = [...this.jobSearchList, ...res.data.records]
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F2F7;
	}

	.page-container {
		width: 100%;
		height: 40vh;
		background-image: url('../../../static/images/index/jipinBac.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.search-section {
		width: 100%;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;

		.search-bar {
			flex: 1;
			height: 52rpx;
			background-color: #ffffff;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-right: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

			.search-icon {
				margin-right: 20rpx;
			}

			.search-input {
				flex: 1;
				height: 100%;
				font-size: 24rpx;
				color: #333333;
				border: none;
				outline: none;
				background: transparent;

				&::placeholder {
					color: #999999;
				}
			}
		}

		.search-btn {
            color: rgba(255, 255, 255, 1);
            font-family: DM Sans;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: 0%;
            text-align: center;
		}
	}

	.active {
		font-size: 38rpx !important;
		font-weight: 800 !important;
	}

	.active2 {
		color: #1A1A1A !important;
		font-size: 38rpx !important;
		font-weight: 800 !important;
	}

	.active3 {
		color: #1A1A1A !important;
		font-size: 28rpx !important;
		font-weight: 800 !important;
	}

	.topbg-type {
		width: 710rpx;
		border-radius: 6px;
		box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.05);
		background: rgba(255, 255, 255, 1);
		padding: 18rpx 25rpx;
		margin: 0rpx auto 12rpx auto;

		.topbg-type-box {
			width: 686rpx;
		}

		.topbg-type-box-row {
			margin-bottom: 20rpx;
		}

		.topbg-type-box-l {
			flex: 1;
			white-space: nowrap;
			overflow-x: auto;
		}

		.topbg-type-box-l-i {
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 18px;
			letter-spacing: 0%;
			text-align: left;
			margin-right: 14rpx;

			&.active {
				background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				text-fill-color: transparent;
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 700;
				line-height: 48rpx;
				letter-spacing: 0%;
				text-align: left;
			}
		}

		.topbg-type-box-r {
			color: #ffffff;
		}

		.attachment-icon {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.topbg-sx-box {
		width: 100%;
		margin-top: 0rpx;

		.topbg-sx-box-l-i {
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 18px;
			letter-spacing: 0%;
			text-align: center;
			margin-right: 20rpx;
			border-radius: 6px;
			background: rgba(198, 198, 198, 0.1);
			padding: 8rpx 12rpx;
			display: inline-block;
			min-width: 60rpx;
			white-space: nowrap;

			&.active3 {
				font-family: DM Sans;
				font-size: 24rpx !important;
				font-weight: 400 !important;
				line-height: 18px;
				letter-spacing: 0%;
				text-align: left;
				padding: 8rpx 12rpx !important;
				color: rgba(1, 107, 246, 1) !important;
				background: rgba(252, 233, 220, 1) !important;
				border: 1px solid rgba(1, 107, 246, 1);
			}
		}

		.topbg-sx-box-r-i {
			color: rgba(1, 107, 246, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 18px;
			letter-spacing: 0%;
			text-align: center;
			margin-right: 20rpx;
			border-radius: 6px;
			background: rgba(252, 233, 220, 1);
			padding: 8rpx 12rpx;
			display: inline-block;
			min-width: 60rpx;
			white-space: nowrap;
			cursor: pointer;
			transition: all 0.3s ease;
			border: 0.5px solid rgba(1, 107, 246, 1);
		}

		.topbg-sx-box-filter {
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 18px;
			letter-spacing: 0%;
			text-align: center;
			border-radius: 6px;
			background: rgba(198, 198, 198, 0.1);
			padding: 8rpx 12rpx;
			display: inline-block;
			min-width: 60rpx;
			white-space: nowrap;
			cursor: pointer;
			transition: all 0.3s ease;
		}
	}

	.job-list-section {
		padding: 20rpx;
        margin: 20rpx;
        border-radius: 6px;
        box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.05);
        background: linear-gradient(180.00deg, rgba(255, 179, 180, 1) 1%,rgba(255, 255, 255, 1) 38%);

		.job-list-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.job-list-title {
                color: rgba(255, 89, 89, 1);
                font-family: DM Sans;
                font-size: 32rpx;
                font-weight: 700;
                line-height: 21px;
                text-align: left;
			}

			.refresh-btn {
                color: rgba(255, 89, 89, 1);
                font-family: DM Sans;
                font-size: 18rpx;
                font-weight: 400;
                line-height: 10px;
                text-align: right;
                display: flex;
                align-items: center;
                gap: 8rpx;
                
                .refresh-icon {
                    width: 28rpx;
                    height: 28rpx;
                }
			}
		}

		.job-list {
			.job-item {
				background-color: #ffffff;
				border-radius: 12rpx;
				margin-bottom: 16rpx;
				padding: 20rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

				.job-item-content {
					display: flex;
					align-items: center;
					gap: 20rpx;

					.company-logo {
						width: 80rpx;
						height: 80rpx;
						border-radius: 8rpx;
						flex-shrink: 0;
					}

					.job-info {
						flex: 1;

						.company-name {
                            color: rgba(29, 33, 41, 1);
                            font-family: DM Sans;
                            font-size: 24rpx;
                            font-weight: 500;
                            line-height: 13px;
                            letter-spacing: 0%;
                            text-align: left;
                            margin-bottom: 8rpx;
						}

						.company-details {
							display: flex;
							gap: 16rpx;
							margin-bottom: 8rpx;

							text {
                                color: rgba(153, 153, 153, 1);
                                font-family: DM Sans;
                                font-size: 20rpx;
                                font-weight: 400;
                                line-height: 13px;
                                letter-spacing: 0%;
                                text-align: left;
							}
						}

						.job-benefits {
							display: flex;
							gap: 12rpx;
							flex-wrap: nowrap;
							overflow: hidden;
							width: 450rpx;

							text {
                                color: rgba(153, 153, 153, 1);
                                font-family: DM Sans;
                                font-size: 20rpx;
                                font-weight: 400;
                                line-height: 13px;
                                letter-spacing: 0%;
                                text-align: left;
                                white-space: nowrap;
                                flex-shrink: 0;
							}
						}
					}
				}
			}
		}

		.empty-state {
			text-align: center;
			padding: 60rpx 0;
			color: #999999;
			font-size: 28rpx;
		}
	}
	
	// 求职列表样式
	.job-search-section {
		width: 100%;
		padding: 0 20rpx 20rpx 20rpx;
		
		.job-search-header {
			margin-bottom: 20rpx;
			
			.job-search-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}
		}
		
		.job-search-list {
			.job-search-item {
				background-color: #ffffff;
				border-radius: 12rpx;
				margin-bottom: 16rpx;
				padding: 30rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				position: relative;
				
				.urgent-tag {
					position: absolute;
					top: 0rpx;
					right: 40rpx;
					
					.urgent-icon {
						width: 80rpx;
						height: 80rpx;
					}
				}
				
				.job-search-content {
					.job-title {
                        color: rgba(29, 33, 41, 1);
                        font-family: DM Sans;
                        font-size: 36rpx;
                        font-weight: 500;
                        line-height: 21px;
                        letter-spacing: 0%;
                        text-align: left;
					}
					
					.company-info {
						display: flex;
						gap: 16rpx;
						margin: 12rpx 0; 
						
						.company-name {
                            color: rgba(156, 164, 171, 1);
                            font-family: DM Sans;
                            font-size: 24rpx;
                            font-weight: 400;
                            line-height: 20px;
                            letter-spacing: 0%;
                            text-align: left;
						}
					}
					
					.salary {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        color: rgba(255, 89, 89, 1);
                        font-family: DM Sans;
                        font-size: 32rpx;
                        font-weight: 700;
                        line-height: 23px;
                        letter-spacing: 0%;
                        text-align: left;

                        .bonus-tag {
                            color: rgba(255, 255, 255, 1);
                            font-family: DM Sans;
                            padding: 4rpx;
                            font-size: 24rpx;
                            font-weight: 400;
                            letter-spacing: 0%;
                            text-align: center;
                            border-radius: 4rpx;
                            background: rgba(255, 89, 89, 1);
                            margin-right: 12rpx;
                        }

                        .bonus-xin {
                            color: rgba(255, 89, 89, 1);
                            font-family: DM Sans;
                            font-size: 24rpx;
                            font-weight: 700;
                            line-height: 20px;
                            letter-spacing: 0%;
                            text-align: right;
                        }
					}
					
					.job-requirements {
						display: flex;
						gap: 12rpx;
						flex-wrap: wrap;
						margin-bottom: 12rpx;
						
						.requirement-tag {
							font-size: 18rpx;
							color: rgba(1, 107, 246, 1);
							padding: 6rpx 10rpx;
                            background: rgba(153, 196, 250, 0.4);
							border-radius: 12rpx;
                            margin: 12rpx 0;
						}
					}
					
					.contact-info {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;
						
						.company-info-text {
                            color: rgba(51, 51, 51, 1);
                            font-family: DM Sans;
                            font-size: 24rpx;
                            font-weight: 400;
                            line-height: 20px;
                            letter-spacing: 0%;
                            text-align: left;
						}
						
						.reply-time {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							padding: 8rpx;
							font-family: DM Sans;
							font-size: 20rpx;
							font-weight: 400;
							line-height: 30rpx;
							letter-spacing: 0.5%;
							text-align: left;
							border-radius: 12rpx;
							background: #ECE1FD;
							color: #8858C5;
							margin-left: 12rpx;
						}
					}
					
					.location-info {
						display: flex;
						align-items: center;
						gap: 8rpx;
						
						.address {
							font-size: 22rpx;
							color: #999999;
							flex: 1;
						}
						
						.distance-icon {
							width: 24rpx;
							height: 24rpx;
						}
						
						.distance {
							font-size: 22rpx;
							color: #999999;
						}
					}
				}
			}
		}
		
		.empty-state {
			text-align: center;
			padding: 60rpx 0;
			color: #999999;
			font-size: 28rpx;
		}
	}
	
	// 固定样式
	.search-section.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-image: url('../../../static/images/index/jipinBac.png');
		background-size: cover;
		background-position: top center;
		background-repeat: no-repeat;
		height: 19vh;
	}
	
	.topbg-type.fixed {
		position: fixed;
		top: 9vh;
		left: 50%;
		transform: translateX(-50%);
		z-index: 101;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10rpx);
	}
</style>