Files
ks-app-employment-service/pages/search/search.vue
2025-05-15 14:17:51 +08:00

248 lines
6.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<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"
/>
</view>
<view class="search-btn button-click" @click="searchBtn">搜索</view>
</view>
<scroll-view scroll-y class="Detailscroll-view" v-show="list.length" @scrolltolower="getJobList('add')">
<view class="cards-box">
<renderJobs :list="list" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
</view>
</scroll-view>
<view class="main-content" v-show="!list.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 } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navBack } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
import { storeToRefs } from 'pinia';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const searchValue = ref('');
const historyList = ref([]);
const list = ref([]);
const pageState = reactive({
page: 0,
total: 0,
maxPage: 2,
pageSize: 10,
search: {
order: 0,
},
});
onLoad(() => {
let arr = uni.getStorageSync('searchList');
if (arr) {
historyList.value = uni.getStorageSync('searchList');
}
});
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);
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 getJobList(type = 'add') {
console.log(type);
if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1;
}
if (type === 'refresh') {
list.value = [];
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).then((resData) => {
const { rows, total } = resData;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = list.value.length;
const reslist = rows;
list.value.splice(str, end, ...reslist);
} else {
list.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');
}
});
}
</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));
.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;
}
}
}
</style>