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

<template>
	<view>

		<!-- 筛选 -->
		<view class="screenButton" @click="showPopUp = true">
			筛选
			<view class="arrow-up-right">

			</view>
		</view>
		<u-popup :show="showPopUp" mode="right" @close="closePopUp" @open="openPopUp">
			<view class="popUpWrapper">
				<verticalMenu></verticalMenu>
			</view>
		</u-popup>
		<v-tabs :tabs="['最新', '附近', '推荐']" height="45px" v-model="activeTab" color="#999" activeColor="#000"
			fontSize="36rpx" activeFontSize="36rpx" @change='changeTab' />
		<image src="../../static/img/search.svg" @click="goSeach" class="topseach" mode=""></image>

		<block v-if="activeTab == 0">
			<view v-if="newList.length > 0">
				<block v-for="(item, index) in newList" :key="index">
					<companyList :companyitem="item"></companyList>
					<view class="baddd"></view>
				</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="baddd"></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 class="baddd"></view>
			</view>

			<view v-if="companyList.length > 0">
				<block v-for="(item, index) in companyList" :key="item.id">
					<companyList :companyitem="item" :near="activeTab === 0"></companyList>
					<view class="baddd"></view>
				</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-if="recommendList.length > 0">
				<block v-for="(item, index) in recommendList" :key="item.id">
					<companyList :companyitem="item"></companyList>
					<view class="baddd"></view>
				</block>
			</view>

			<view v-else>
				<image src="../../static/img/pic_notask.svg" mode="" class="nothing"></image>
				<view class="nothingContnt">
					完善技能，获取精推荐
				</view>
				<view class="btn" @click="goResume">
					完善技能
				</view>
			</view>
		</block>

		<cs-button></cs-button>
	</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 {
	newMissionAll,
	recommendMission,
	nearMission
} from '@/api/mission.js';
import {
	getcoder
} from "@/api/map.js";
import verticalMenu from '@/components/vertical-menu/vertical-menu.vue';
export default {
	components: {
		vTabs,
		companyList, verticalMenu
	},
	data() {
		return {
			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
			},
			currentAddress: '',
			currentPoint: {
				latitude: 0,
				longitude: 0
			},
			key: 'FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI',
			open: false,
			showPopUp: false,
			indexList: ["年龄", "学历", "工资"],
			itemArr: [
				['列表A1', '列表A2', '列表A3'],
				['列表B1', '列表B2', '列表B3'],
				['列表C1', '列表C2', '列表C3'],
			]
		}
	},
	onLoad: function () {
		this.getData()
	},
	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'
			})
		},
		changeTab: function (e) {
			this.activeTab = e;
		},
		//附近任务；
		getNearList: function (point) {
			nearMission(this.nearPage.current, this.nearPage.size, point.latitude, point.longitude, 50).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);
				}
			})
		},
		//推荐任务；
		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.current += 1;
				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);
				}
			})
		},
		//上拉加载
		upLoad: function () {
			if (this.activeTab === 0) {
				if (this.nearPage.current <= Math.ceil(this.nearPage.total / this.nearPage.size)) {
					this.getNearList(this.currentPoint);
				} 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) {
				if (this.newPage.current <= Math.ceil(this.newPage.total / this.newPage.size)) {
					this.getNewList();
				} else {
					uni.showToast({
						icon: "none",
						title: '已经是最后一页',
					})
				}
				return
			}
		},
		//下拉刷新
		download: function () {
			if (this.activeTab === 0) {
				this.nearPage.current = 1;
				this.getLocation();
				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.newPage.current = 1;
				this.getNewList();
				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();
			}
		},

		openPopUp() {
			// console.log('open');
		},
		closePopUp() {
			this.showPopUp = false
			// console.log('close');
		}
	}
}
</script>

<style>
.screenButton {
	position: absolute;
	top: 10px;
	z-index: 1;
	left: 30rpx;
	/* border: 1px solid black; */
	width: 50px;
	text-align: center;
	line-height: 30px;
	font-size: 14px;
	background-color: #f3f4f8;
}

.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;
}

.baddd {
	background: #f6f6f6;
	height: 20rpx;
}

.popUpWrapper {
	width: 300px;
}
</style>