jobslink-user-clent/pages/project/project.vue

<template>
	<view>
		<view class="titleSearch">
			<view class="searchName">搜 索</view>

			<u-search placeholder="搜任务/搜岗位/搜政策/搜招工" @focus="goSeach" shape="round" :showAction="false"></u-search>
		</view>
        <view class="navPosition" @click="navTo('/pages/project/projectList')">
            <u-icon name="map" color="#2979ff" size="16"></u-icon>
            <view class="positionText">四川德阳市</view>
            <u-icon name="arrow-right" color="#666666" size="14"></u-icon>
        </view>
		<view class="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 class="screenButton" @click="showPopUp = true">
					筛选
					<view class="arrow-up-right"> </view>
				</view>
			</view>

			<u-popup closeable :show="showPopUp" mode="right" @close="closePopUp">
				<view class="popUpWrapper">
					<verticalMenu :closePopUp="closePopUp" :subMitPopUp="subMitPopUp" />
				</view>
			</u-popup>

			<block v-if="activeTab == 0">
				<view v-if="newList.length > 0" style="padding-bottom: 20rpx;">
					<block v-for="(item, index) in newList" :key="index">
						<companyList :companyitem="item"></companyList>
					</block>
				</view>
				<view v-else>
					<image src="../../static/img/pic_notask.svg" class="nothing" mode=""></image>
					<view class="nothing_text">暂无信息</view>
				</view>
			</block>

			<block v-if="activeTab == 1">
				<view>
					<!-- <view class="location" @click="gomap">
						<image src="../../static/img/location.svg" mode=""></image>
						{{ currentAddress }}（切换位置）
						<image src="../../static/img/right.svg" mode=""></image>
					</view> -->
				</view>

				<view v-if="companyList.length > 0" style="padding-bottom: 20rpx;">
					<block v-for="(item, index) in companyList" :key="item.id">
						<workList :companyitem="item" :near="activeTab === 0"></workList>
					</block>
				</view>
				<view v-else>
					<image src="../../static/img/pic_notask.svg" mode="" class="nothing"></image>
					<view class="nothingContnt">
						暂无信息
					</view>
				</view>
			</block>
            <block v-if="activeTab == 2">
            	<view>
            		<!-- <view class="location" @click="gomap">
            			<image src="../../static/img/location.svg" mode=""></image>
            			{{ currentAddress }}（切换位置）
            			<image src="../../static/img/right.svg" mode=""></image>
            		</view> -->
            	</view>
            
            	<view v-if="policyContentList.length > 0" style="padding-bottom: 20rpx;">
            		<block v-for="(item, index) in policyContentList" :key="item.id">
            			<userrecruitList :companyitem="item"></userrecruitList>
            		</block>
            	</view>
            	<view v-else>
            		<image src="../../static/img/pic_notask.svg" mode="" class="nothing"></image>
            		<view class="nothingContnt">
            			暂无信息
            		</view>
            	</view>
            </block>

			<!-- <block v-if="activeTab == 2">
				
				<view v-for="(item, index) in policyContentList" :key="index" style="width: 90%;height: 100rpx;background-color: #fff;border-radius: 10rpx;margin:20rpx 5% 20rpx 5%;display: flex;align-items: center" @click="goPolicyInfo(item.id)">
					<image :src="item.headPic" style="width: 60rpx;height: 60rpx;margin: 0 20rpx;"></image>
					<view style="font-size: 26rpx;">{{ item.articleTitle }}</view>
				</view>
			</block> -->

			<cs-button></cs-button>
		</view>

	</view>
</template>

<script>
import vTabs from '@/components/v-tabs/v-tabs.vue';
import testData from '@/common/textdata.js';
import companyList from '@/components/companyList/companyList.vue';
import workList from '@/components/companyList/workList.vue'
import userrecruitList from './userrecruitList.vue'
import {
	newMissionAll,
	recommendMission,
	nearMission
} from '@/api/mission.js';
import {getPolicyContent} from '@/api/newIndex.js'
import {getPushListByUserId } from '@/api/userrecruit.js'
import {
	getcoder
} from "@/api/map.js";
import verticalMenu from '@/components/vertical-menu/vertical-menu.vue';

export default {
	components: {
		vTabs,
		companyList, 
		verticalMenu,
		workList,
        userrecruitList
	},

	data() {
		return {
			policyContentList: [],
			activeTab: 0,
			companyList: [],
			recommendList: [],
			newList: [],
			
			nearPage: {
				current: 1,
				size: 10,
				total: 0
			},
			recommendPage: {
				current: 1,
				size: 10,
				total: 0
			},
			newPage: {
				current: 1,
				size: 10,
				total: 0
			},
            policyPage: {
            	current: 1,
            	size: 10,
            	total: 0
            },
			currentAddress: '',
			currentPoint: {
				latitude: 0,
				longitude: 0
			},
			key: 'FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI',
			open: false,
			showPopUp: false,

			nonReactiveArray: ["推荐任务", "推荐岗位", "个体户招工"],
		}
	},
	onLoad: function () {
		this.getData()
		this.getPolicy()
	},
	onShow: function () {
		if (this.$store.state.user.token) {
			this.$store.dispatch('refreshAuthState').then((e) => {
				var auth = this.$store.state.auth
				if (!auth.bankCardState) {
					this.step()
				}
			})
		}

		const value = uni.getStorageSync('active');
		if (value) {
			this.activeTab = value;
			uni.removeStorageSync('active')
		}
	},
	/*页面滚动到底部 换页*/
	onReachBottom: function () {
		this.upLoad()
	},
	/*下拉刷新*/
	onPullDownRefresh: function () {
		if (!this.$store.state.user.token) {
			uni.redirectTo({
				url: "/pages/login/login"
			});
		} else {
			this.download();
		}
	},
	methods: {
		step() {
			var that = this
			that.open = true
			uni.showModal({
				title: '实名认证',
				content: `检查到您还未实名认证，实名认证之后才可进行操作哦`,
				showCancel: false,
				confirmText: '立即认证',
				success: function (res) {
					if (res.confirm) {
						that.goSign(0)
					} else if (res.cancel) {
						that.step()
					}
					that.open = false
				}
			});
		},
		// 步骤
		goSign(active) {
			uni.navigateTo({
				url: `/pages/projectInfo/signContract?active=${active}`
			})
		},
		goResume: function () {
			uni.navigateTo({
				url: '/pageMy/my/resume/addSkill'
			})
		},
		/*定位*/
		getLocation: function () {
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				success: function (res) {
					that.currentPoint = {
						latitude: res.latitude,
						longitude: res.longitude
					}
					that.getAddrByPoint(res);
					that.getNearList(that.currentPoint)
				},
				complete: function (e) { }
			});
		},
		/*逆地址解析*/
		getAddrByPoint: function (point) {
			var that = this;
			var location = point.latitude + ',' + point.longitude
			getcoder(location, encodeURI(that.key), 0).then(res => {
				that.currentAddress = res.data.result.address
			});
		},
		goSeach: function () {
			uni.navigateTo({
				url: '../seach/seach'
			})
		},
		gomap: function () {
			uni.navigateTo({
				url: '../mapSeach/mapSeach'
			})
		},
		getPolicy(){
            let params = {
                current: this.policyPage.current,
                size: this.policyPage.size,
            }
            getPushListByUserId(params).then((res) => {
                if(res.data.code === 200 ){
                    const {records, current, total, size } = res.data.data
                    console.log('个体招工', records, current, total, size)
                    if(!records.length) {
                        return uni.showToast({
                        	icon: "none",
                        	title: '没有更多了',
                        })
                    }
                    if(current === 1) {
                        this.policyContentList = records
                    } else {
                        this.policyContentList = this.policyContentList.concat(records);
                    }
                    this.policyPage.current = current + 1;
                    this.policyPage.total = total;
                }
            })
			// getPolicyContent(1).then(res=>{
			// 	this.policyContentList=res.data.data.records
			// })
		},
		changeTab: function (e) {
			this.activeTab = e;
		},
		//附近任务；
		getNearList: function (point) {
			nearMission(this.nearPage.current, this.nearPage.size).then(res => {
				if (this.nearPage.current === 1) {
					this.companyList = [];
				}
				this.nearPage.current += 1;
				this.nearPage.total = res.data.data.total;
				if (res.data.data && res.data.data.records.length) {
					this.companyList = this.companyList.concat(res.data.data.records);
				}
			})
		},
		goPolicyInfo(data){
			if(data){
				// var val=encodeURIComponent(data)
				
				uni.navigateTo({
					url:`/pages/user/policyContent?id=${data}`
				})
				
			}
			else{
				// uni.showToast({
				// 	title:'暂无内容',
				// 	icon:'none'
				// })
			}
		},
		//推荐任务；
		getRecommendList: function () {
			recommendMission(this.recommendPage.current, this.recommendPage.size, '').then(res => {
				if (this.recommendPage.current === 1) {
					this.recommendList = [];
				}
				this.recommendPage.current += 1;
				this.recommendPage.total = res.data.data.total;
				if (res.data.data && res.data.data.records.length) {
					this.recommendList = this.recommendList.concat(res.data.data.records);
				}
			})
		},
		//最新任务；
		getNewList: function () {
			newMissionAll(this.newPage.current, this.newPage.size, '').then(res => {
				if (this.newPage.current === 1) {
					this.newList = [];
				}
				this.newPage.total = res.data.data.total;
				if (res.data.data && res.data.data.records.length) {
					this.newList = this.newList.concat(res.data.data.records);
                    this.newPage.current += 1;
				}
			})
		},
		//上拉加载
		upLoad: function () {
			if (this.activeTab === 0) {
				if (this.nearPage.current <= Math.ceil(this.nearPage.total / this.nearPage.size)) {
					// this.getNearList(this.currentPoint);
                        this.getNewList();
				} else {
					uni.showToast({
						icon: "none",
						title: '已经是最后一页',
					})
				}
				return
			}
			if (this.activeTab === 1) {
				if (this.recommendPage.current <= Math.ceil(this.recommendPage.total / this.recommendPage.size)) {
					this.getRecommendList();
				} else {
					uni.showToast({
						icon: "none",
						title: '已经是最后一页',
					})
				}
				return
			}
			if (this.activeTab === 2) {
                    this.getPolicy()
			}
		},
		//下拉刷新
		download: function () {
			if (this.activeTab === 0) {
				this.nearPage.current = 1;
                this.newPage.current = 1;
				this.getLocation();
                this.getNewList();
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
				return
			}
			if (this.activeTab === 1) {
				this.recommendPage.current = 1;
				this.getRecommendList();
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
				return
			}
			if (this.activeTab === 2) {
                this.policyPage.current = 1;
                this.getPolicy()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
				return
			}
		},
		getData: function () {
			if (!this.$store.state.user.token) {
				uni.redirectTo({
					url: "/pages/login/login"
				});
			} else {
				uni.$emit('newsReadChange');
				this.nearPage.current = 1;
				this.recommendPage.current = 1;
				this.newPage.current = 1;
				this.getLocation();
				this.getRecommendList();
				this.getNewList();
				this.getNearList();
			}
		},


		closePopUp() {
			this.showPopUp = false
		},
		subMitPopUp({submitData,areaModal,industryModal}) {
			console.log(submitData,areaModal,industryModal,"------确定");
			this.showPopUp = false
		}
	}
}
</script>

<style scoped>
.navPosition{
    padding: 0 24rpx 20rpx 30rpx;
    display: flex;
    align-item: center;
    font-size: 26rpx;
    .positionText{
        margin: 0 10rpx;
    }
}
.titleSearch {
	display: flex;
	width: 80%;
	margin: 0 auto;
	font-size: 22px;
	font-weight: bold;
	padding: 20rpx;
}



.searchName {
	margin-right: 28rpx;
}

.content {
	background-color: #f3f4f8;
	padding-top: 20rpx;
	min-height: 80vh;
}



.screenButton {
	/* position: absolute;
	top: 10px;
	z-index: 1;
	left: 30rpx; */
	position: relative;
	width: 50px;
	text-align: center;
	line-height: 30px;
	font-size: 14px;
	background-color: #fff;
}

.typeButtonWrapper {
	width: 92%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	/* margin-bottom: 10rpx; */
}

.typeButtonLeft {
	display: flex;
    
}

.typeButton {
	font-size: 14px;
	padding: 10rpx 30rpx;
	background: #fff;
	border-radius: 50px;
	margin-right: 10rpx;
    white-space: nowrap;
}

.activeButton {
	color: #4171f9;
	background-color: #cfdaf8;
}

.arrow-up-right {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid #949396;
	/* 这里的颜色可以根据你的需要进行修改 */
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 3px;
	right: 3px;

}


.topseach {
	width: 25px;
	height: 25px;
	position: absolute;
	top: 10px;
	right: 30rpx;
}

.location image:last-child {
	margin-left: auto;
}

.location image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.location {
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #333333;
}

.btn {
	margin: 0 auto;
	color: #999;
	border: 1rpx solid #999;
	font-size: 28rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	width: 180rpx;
	border-radius: 5rpx;
	margin-top: 30rpx;
}

.nothing_text {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #666666;
	text-align: center;
}

.nothingContnt {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #333333;
	margin-top: 30rpx;
	text-align: center;
}

.nothing {
	width: 400rpx;
	height: 200rpx;
	display: block;
	margin: 0 auto;
	margin-top: 300rpx;
}



.popUpWrapper {
	width: 100%;
}
</style>