招聘页面优化

This commit is contained in:
dengxin
2024-02-15 18:30:40 +08:00
parent 365b69f391
commit a4aaf7856c
10 changed files with 24157 additions and 321 deletions

View File

@@ -1,11 +1,24 @@
<template>
<view>
<v-tabs :tabs="['最新','附近','推荐']" height="45px" v-model="activeTab" color="#999" activeColor="#000" fontSize="36rpx"
activeFontSize="36rpx" @change='changeTab' />
<!-- 筛选 -->
<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-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>
@@ -17,20 +30,20 @@
</view>
</block>
<block v-if="activeTab==1">
<block v-if="activeTab == 1">
<view>
<view class="baddd"></view>
<view class="location" @click="gomap">
<image src="../../static/img/location.svg" mode=""></image>
{{currentAddress}}切换位置
{{ currentAddress }}切换位置
<image src="../../static/img/right.svg" mode=""></image>
</view>
<view class="baddd"></view>
</view>
<view v-if="companyList.length>0">
<view v-if="companyList.length > 0">
<block v-for="(item, index) in companyList" :key="item.id">
<companyList :companyitem="item" :near="activeTab===0"></companyList>
<companyList :companyitem="item" :near="activeTab === 0"></companyList>
<view class="baddd"></view>
</block>
</view>
@@ -42,8 +55,8 @@
</view>
</block>
<block v-if="activeTab==2">
<view v-if="recommendList.length>0">
<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>
@@ -66,340 +79,387 @@
</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()
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
}
const value = uni.getStorageSync('active');
if (value) {
this.activeTab = value;
uni.removeStorageSync('active')
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
}
},
/*页面滚动到底部 换页*/
onReachBottom: function() {
this.upLoad()
//下拉刷新
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
}
},
/*下拉刷新*/
onPullDownRefresh:function(){
getData: function () {
if (!this.$store.state.user.token) {
uni.redirectTo({
url: "/pages/login/login"
});
} else {
this.download();
uni.$emit('newsReadChange');
this.nearPage.current = 1;
this.recommendPage.current = 1;
this.newPage.current = 1;
this.getLocation();
this.getRecommendList();
this.getNewList();
}
},
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>
.topseach {
width: 25px;
height: 25px;
position: absolute;
top: 10px;
right: 30rpx;
}
.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;
}
.location image:last-child {
margin-left: auto;
}
.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;
.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;
}
.topseach {
width: 25px;
height: 25px;
position: absolute;
top: 10px;
right: 30rpx;
}
.nothing_text {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #666666;
text-align: center;
}
.location image:last-child {
margin-left: auto;
}
.nothingContnt {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #333333;
margin-top: 30rpx;
text-align: center;
}
.location image {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.nothing {
width: 400rpx;
height: 200rpx;
display: block;
margin: 0 auto;
margin-top: 300rpx;
}
.location {
padding: 20rpx 30rpx;
display: flex;
align-items: center;
justify-content: flex-start;
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #333333;
}
.baddd {
background: #f6f6f6;
height: 20rpx;
}
.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>