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

<template>
	<view>
		<u-button text="月落"></u-button>
		<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";
	export default {
		components: {
			vTabs,
			companyList
		},
		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
			}
		},
		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();
				}
			}
		}
	}
</script>

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