ks-app-employment-service/pages/search/search.vue

<template>
    <view class="container">
        <view>
            <view class="top">
                <image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image>
                <view class="search-box">
                    <uni-icons
                        class="iconsearch"
                        color="#666666"
                        type="search"
                        size="18"
                        @confirm="searchCollection"
                    ></uni-icons>
                    <input
                        class="inputed"
                        type="text"
                        focus
                        v-model="searchValue"
                        placeholder="搜索职位名称"
                        placeholder-class="placeholder"
                        @confirm="searchBtn"
                    />
                </view>
                <view class="search-btn button-click" @click="searchBtn">搜索</view>
            </view>
            <view class="view-top" v-show="listCom.length || list.length">
                <view class="top-item" @click="changeType(0)" :class="{ active: currentTab === 0 }">综合</view>
                <view class="top-item" @click="changeType(1)" :class="{ active: currentTab === 1 }">视频</view>
            </view>
        </view>
        <scroll-view scroll-y class="Detailscroll-view" v-show="listCom.length" @scrolltolower="choosePosition">
            <view class="cards-box" v-show="currentTab === 0">
                <renderJobs :list="listCom" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
            </view>
            <view class="cards-box" style="padding-top: 24rpx" v-show="currentTab === 1">
                <custom-waterfalls-flow
                    ref="waterfallsFlowRef"
                    :column="columnCount"
                    :columnSpace="columnSpace"
                    @loaded="imageloaded"
                    :value="list"
                >
                    <template v-slot:default="job">
                        <view class="slot-item">
                            <view class="job-image btn-feel" @click="nextVideo(job)">
                                <image class="cover-image" :src="job.cover" mode="aspectFill"></image>
                                <view class="cover-triangle"></view>
                            </view>
                            <view class="job-info" @click="nextDetail(job)">
                                <view class="salary">
                                    <Salary-Expectation
                                        :max-salary="job.maxSalary"
                                        :min-salary="job.minSalary"
                                        :is-month="true"
                                    ></Salary-Expectation>
                                    <image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
                                </view>
                                <view class="title">{{ job.jobTitle }}</view>
                                <view class="desc">{{ job.companyName }}</view>
                            </view>
                        </view>
                    </template>
                </custom-waterfalls-flow>
                <loadmore ref="loadmoreRef"></loadmore>
            </view>
        </scroll-view>
        <view class="main-content" v-show="!listCom.length">
            <view class="content-top">
                <view class="top-left">历史搜索</view>
                <view class="top-right button-click" @click="remove">
                    <uni-icons type="trash" color="#C1C1C1" size="20"></uni-icons>
                </view>
            </view>
            <view class="content-history">
                <view class="history-tag" v-for="(item, index) in historyList" :key="index" @click="searchFn(item)">
                    {{ item }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { inject, ref, reactive, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navBack, navTo } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
import { storeToRefs } from 'pinia';
import { useColumnCount } from '@/hook/useColumnCount';
import { usePagination } from '@/hook/usePagination';
import img from '@/static/icon/filter.png';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const searchValue = ref('');
const historyList = ref([]);
const listCom = ref([]);
const pageState = reactive({
    page: 0,
    total: 0,
    maxPage: 2,
    pageSize: 10,
    search: {
        order: 0,
    },
});
const isLoaded = ref(false);
const waterfallsFlowRef = ref(null);
const loadmoreRef = ref(null);
const currentTab = ref(0);
// 响应式搜索条件（可以被修改）
const searchParams = ref({});
const pageSize = ref(10);

const { list, loading, refresh, loadMore } = usePagination(
    (params) => $api.createRequest('/app/job/littleVideo', params, 'GET', true),
    dataToImg, // 转换函数
    {
        pageSize: pageSize,
        search: searchParams,
        dataKey: 'data',
        autoWatchSearch: true,
        onBeforeRequest: () => {
            loadmoreRef.value?.change('loading');
        },
        onAfterRequest: () => {
            loadmoreRef.value?.change('more');
        },
    }
);

async function choosePosition(index) {
    if (currentTab.value === 0) {
        getJobList('add');
    } else {
        loadMore();
    }
}

function imageloaded() {
    loadmoreRef.value?.change('more');
}

const { columnCount, columnSpace } = useColumnCount(() => {
    pageSize.value = 10 * (columnCount.value - 1);
    nextTick(() => {
        waterfallsFlowRef.value?.refresh?.();
        useLocationStore().getLocation();
    });
});

onLoad(() => {
    let arr = uni.getStorageSync('searchList');
    if (arr) {
        historyList.value = uni.getStorageSync('searchList');
    }
});

function changeType(type) {
    if (currentTab.value === type) return;
    switch (type) {
        case 0:
            currentTab.value = 0;
            getJobList('refresh');
            break;
        case 1:
            currentTab.value = 1;
            refresh();
            waterfallsFlowRef.value?.refresh?.();
            break;
    }
}
function searchFn(item) {
    searchValue.value = item;
    searchBtn();
}

function searchBtn() {
    if (!searchValue.value) {
        return;
    }
    historyList.value.unshift(searchValue.value);
    historyList.value = unique(historyList.value);
    uni.setStorageSync('searchList', historyList.value);
    searchParams.value = {
        jobTitle: searchValue,
    };
    if (currentTab.value === 0) {
        getJobList('refresh');
    } else {
        refresh();
        waterfallsFlowRef.value?.refresh?.();
    }
}

function searchCollection(e) {
    const value = e.detail.value;
    pageState.search.jobTitle = value;
    getJobList('refresh');
}

function unique(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {
                //第一个等同于第二个，splice方法删除第二个
                arr.splice(j, 1);
                j--;
            }
        }
    }
    return arr;
}

function remove() {
    uni.removeStorage({
        key: 'searchList',
    });
    historyList.value = [];
}

function nextDetail(job) {
    // 记录岗位类型，用作数据分析
    if (job.jobCategory) {
        const recordData = recommedIndexDb.JobParameter(job);
        recommedIndexDb.addRecord(recordData);
    }
    navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
}

function nextVideo(job) {
    uni.setStorageSync(`job-Info`, job);
    navTo(`/packageA/pages/tiktok/tiktok`);
}

function getJobList(type = 'add') {
    if (type === 'add' && pageState.page < pageState.maxPage) {
        pageState.page += 1;
    }
    if (type === 'refresh') {
        pageState.page = 1;
        pageState.maxPage = 2;
    }
    let params = {
        current: pageState.page,
        pageSize: pageState.pageSize,
        ...pageState.search,
        jobTitle: searchValue.value,
    };

    $api.createRequest('/app/job/list', params, 'GET', true).then((resData) => {
        const { rows, total } = resData;
        if (type === 'add') {
            const str = pageState.pageSize * (pageState.page - 1);
            const end = listCom.value.length;
            const reslist = rows;
            listCom.value.splice(str, end, ...reslist);
        } else {
            listCom.value = rows;
        }
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
        if (rows.length < pageState.pageSize) {
            // loadmoreRef.value?.change('noMore');
        } else {
            // loadmoreRef.value?.change('more');
        }
    });
}

function dataToImg(data) {
    return data.map((item) => ({
        ...item,
        // image: item.cover,
        image: img,
        hide: true,
    }));
}
</script>

<style lang="stylus" scoped>
.cards-box{
     padding: 0 28rpx 28rpx 28rpx
}
.Detailscroll-view{
    flex: 1
    overflow: hidden

}
.container{
    display: flex
    flex-direction: column
    background: #F4f4f4
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    .view-top{
        display: flex;
        justify-content: space-around
        background: #FFFFFF;
        .top-item{
            padding: 6rpx 0 18rpx 0
        }
        .active{
            color: #256BFA;
            font-weight: 500;
            position: relative;
        }
        .active::after{
            position: absolute;
            content: ''
            left: calc(50% - 12rpx)
            bottom: 10rpx
            width: 24rpx
            height: 6rpx
            background: #256BFA
        }
    }
    .main-content{
        background: #FFFFFF
        height: 100%
        .content-top{
            padding: 28rpx
            display: flex
            justify-content: space-between
            align-items: center
            .top-left{
                font-weight: 600;
                font-size: 36rpx;
                color: #000000;
                line-height: 42rpx;
            }
        }
        .content-history{
            padding: 0 28rpx;
            display: flex
            flex-wrap: wrap
            .history-tag{
                margin-right: 40rpx
                margin-bottom: 20rpx
                white-space: nowrap
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
                background: #F5F5F5;
                border-radius: 12rpx 12rpx 12rpx 12rpx;
                width: fit-content;
                padding: 12rpx 20rpx
            }
        }
    }
    .top {
		display: flex;
		align-items: center;
        justify-content: space-between
		background-color: #fff;
		padding: 20rpx 20rpx;
        position: sticky;
        top: 0
        .btnback{
            width: 60rpx;
            height: 60rpx;
        }
        .search-box{
            flex: 1;
            padding: 0 24rpx 0 6rpx;
            position: relative
            .inputed {
                padding-left: 30rpx
                width: 100%;
            	background: #F8F8F8;
            	font-size: 28rpx;
            	font-family: PingFang SC;
            	font-weight: 400;
            	line-height: 36rpx;
            	color: #666666;
            	padding: 0 30rpx 0 80rpx;
            	box-sizing: border-box;
                height: 80rpx;
                background: #F5F5F5;
                border-radius: 75rpx 75rpx 75rpx 75rpx;
            }
            .iconsearch{
                position: absolute
                top: 50%
                left: 36rpx
                transform: translate(0, -50%)
            }
        }
		.search-btn {
            padding-right: 18rpx;
			text-align: center;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #256BFA;
		}
	}
}

.slot-item
    // background: #f4f4f4;
    background: #FFFFFF;
    .job-info{
        padding: 10rpx 24rpx 24rpx 24rpx
    }
    .job-image{
        width: 100%;
        height: 280rpx;
        position: relative;
        .cover-image{
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cover-triangle{
            position: absolute;
            right: 20rpx;
            top: 20rpx
            width: 36rpx
            height: 36rpx
            border-radius: 50%
            background: rgba(0,0,0,0.3)
        }
        .cover-triangle::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-40%, -50%) rotate(90deg);
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;
          border-right: 8rpx solid transparent;
          border-bottom: 12rpx solid #fff;
        }
    }
    .salary
        color: #4C6EFB;
        font-size: 28rpx
        display: flex
        align-items: flex-start
        justify-content: space-between
        .flame
            margin-top: 4rpx
            margin-right: 4rpx
            width: 24rpx
            height: 31rpx
    .title
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        margin-top: 6rpx;
        white-space: pre-wrap
    .desc
        font-weight: 400;
        font-size: 24rpx;
        color: #6C7282;
        margin-top: 6rpx;
</style>