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

<template>
    <view class="container safe-area-top">
        <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>
        <scroll-view scroll-y class="Detailscroll-view" v-show="listCom.length" @scrolltolower="choosePosition">
            <view class="cards-box">
                <renderJobs :list="listCom" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
            </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 searchParams = ref({});
const listCom = ref([]);
const pageState = reactive({
    page: 0,
    total: 0,
    maxPage: 2,
    pageSize: 10,
    search: {
        order: 0,
    },
});
// 响应式搜索条件（可以被修改）

async function choosePosition(index) {
    getJobList('add');
}

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

function changeType(type) {
    getJobList('refresh');
}
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,
    };
    getJobList('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>