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/map')">
            <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" :isTask="activeTab === 0" />
                </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,
        newMissionAllSearch,
        recommendMissionSearch,
        nearMissionSearch,
    } 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,
                isSearch: false,
                searchData: {},

                // nonReactiveArray: ["推荐任务", "推荐岗位", "个体户招工"],
                nonReactiveArray: ["推荐零工任务", "推荐岗位"],
            }
        },
        onLoad: function() {
            this.getData()
            // this.getPolicy()
        },
        onShow: function() {
            this.download();

            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.isSearch = false;
                this.activeTab = e;
                this.download();
            },

            goPolicyInfo(data) {
                if (data) {
                    // var val=encodeURIComponent(data)

                    uni.navigateTo({
                        url: `/pages/user/policyContent?id=${data}`
                    })

                } else {
                    // uni.showToast({
                    // 	title:'暂无内容',
                    // 	icon:'none'
                    // })
                }
            },

            //个人户招工；
            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
                // })
            },
            //推荐岗位；
            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);
                    }
                })
            },

            //推荐任务；
            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.newPage.current <= Math.ceil(this.newPage.total / this.newPage.size)) {

                        if (this.isSearch) {
                            this.getNewListSearch()
                        } else {
                            this.getNewList();
                        }
                    } else {
                        uni.showToast({
                            icon: "none",
                            title: '已经是最后一页',
                        })
                    }
                    return
                }
                if (this.activeTab === 1) {
                    if (this.nearPage.current <= Math.ceil(this.nearPage.total / this.nearPage.size)) {

                        if (this.isSearch) {
                            this.getNearListSearch();
                        } else {
                            this.getNearList();
                        }
                    } else {
                        uni.showToast({
                            icon: "none",
                            title: '已经是最后一页',
                        })
                    }
                    return
                }
                if (this.activeTab === 2) {
                    if (this.policyPage.current <= Math.ceil(this.policyPage.total / this.policyPage.size)) {
                        if (this.isSearch) {
                            this.getPolicySearch()
                        } else {
                            this.getPolicy();
                        }
                    } else {
                        uni.showToast({
                            icon: "none",
                            title: '已经是最后一页',
                        })
                    }
                    return
                }
            },
            //下拉刷新
            download: function() {
                this.isSearch = false;
                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.nearPage.current === 1
                    this.getNearList();
                    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.policyPage.current = 1;
                    this.newPage.current = 1;
                    this.getLocation();
                    // this.getNewList();
                    // this.getNearList();
                    // this.getPolicy()
                }
            },


            closePopUp() {
                this.showPopUp = false
            },
            subMitPopUp({
                submitData,
                areaModal,
                industryModal
            }) {
                this.searchData = {
                    submitData,
                    areaModal,
                    industryModal
                }
                console.log(this.searchData, this.activeTab, '------');
                if (submitData || areaModal || industryModal) {
                    this.isSearch = true;
                }

                switch (this.activeTab) {
                    case 0:
                        this.newPage.current = 1;
                        this.getNewListSearch()
                        break;
                    case 1:
                        this.nearPage.current = 1
                        this.getNearListSearch()
                        break;
                    case 2:
                        this.policyPage.current = 1
                        this.getPolicySearch()
                        break;

                    default:
                        break;
                }
                this.showPopUp = false
            },


            //个体户招工搜索；
            getPolicySearch: function() {
                const {
                    submitData,
                    areaModal,
                    industryModal
                } = this.searchData;
                let params = {
                    current: this.policyPage.current,
                    size: this.policyPage.size,
                    education: submitData["学历"],
                    salary: submitData["工资"],
                    industry: industryModal?.industry,
                    // province: areaModal?.address1[0],
                    // city: areaModal?.address1[1],
                    cityId: areaModal?.info.map((v) => v.areaName).join('-')
                }
                nearMissionSearch(params).then(res => {
                    if (this.policyPage.current === 1) {
                        this.policyContentList = [];
                    }
                    this.policyPage.current += 1;
                    this.policyPage.total = res.data.data.total;
                    if (res.data.data && res.data.data.records.length) {
                        this.policyContentList = this.policyContentList.concat(res.data.data.records);
                    }

                })
            },
            //推荐岗位搜索；
            getNearListSearch: function() {
                const {
                    submitData,
                    areaModal,
                    industryModal
                } = this.searchData;
                let params = {
                    current: this.nearPage.current,
                    size: this.nearPage.size,
                    education: submitData["学历"],
                    salary: submitData["工资"],
                    industry: industryModal?.industry,
                    // province: areaModal?.address1[0],
                    // city: areaModal?.address1[1],
                    cityId: areaModal?.info.map((v) => v.areaName).join('-')
                }
                newMissionAllSearch(params).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);
                    }
                })
            },
            //推荐任务搜索；
            getNewListSearch: function() {
                const {
                    submitData,
                    areaModal,
                    industryModal
                } = this.searchData;
                let params = {
                    current: this.policyPage.current,
                    size: this.policyPage.size,
                    education: submitData["学历"],
                    salary: submitData["工资"],
                    industry: industryModal?.industry,
                    // province: areaModal?.address1[0],
                    // city: areaModal?.address1[1],
                    wageUnitCategory: submitData["wageUnitCategory"],
                    cityId: areaModal?.info.map((v) => v.areaName).join('-')
                }
                recommendMissionSearch(params).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;
                    }
                })
            },
        }
    }
</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>