sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flat: 视频版本0.1

Browse Source
This commit is contained in:
史典卓
2025-06-26 08:56:42 +08:00
parent 857dedad01
commit 36798d3054
28 changed files with 1437 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
pages/search/search.vue
View File

@@ -1,33 +1,70 @@
<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"
@confirm="searchBtn"
/>
<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 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>
<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="!list.length">
<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">
@@ -44,16 +81,19 @@
</template>
<script setup>
import { inject, ref, reactive } from 'vue';
import { inject, ref, reactive, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navBack } = inject('globalFunction');
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 list = ref([]);
const listCom = ref([]);
const pageState = reactive({
page: 0,
total: 0,
@@ -63,6 +103,47 @@ const pageState = reactive({
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),
dataToImg, // 转换函数
{
pageSize: pageSize,
search: searchParams,
dataKey: 'data',
autoWatchSearch: true,
onBeforeRequest: () => {
loadmoreRef.value?.change('loading');
},
}
);
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');
@@ -71,6 +152,20 @@ onLoad(() => {
}
});
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();
@@ -83,7 +178,15 @@ function searchBtn() {
historyList.value.unshift(searchValue.value);
historyList.value = unique(historyList.value);
uni.setStorageSync('searchList', historyList.value);
getJobList('refresh');
searchParams.value = {
jobTitle: searchValue,
};
if (currentTab.value === 0) {
getJobList('refresh');
} else {
refresh();
waterfallsFlowRef.value?.refresh?.();
}
}
function searchCollection(e) {
@@ -112,12 +215,25 @@ function remove() {
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') {
list.value = [];
pageState.page = 1;
pageState.maxPage = 2;
}
@@ -132,11 +248,11 @@ function getJobList(type = 'add') {
const { rows, total } = resData;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = list.value.length;
const end = listCom.value.length;
const reslist = rows;
list.value.splice(str, end, ...reslist);
listCom.value.splice(str, end, ...reslist);
} else {
list.value = rows;
listCom.value = rows;
}
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
@@ -147,6 +263,15 @@ function getJobList(type = 'add') {
}
});
}
function dataToImg(data) {
return data.map((item) => ({
...item,
// image: item.cover,
image: img,
hide: true,
}));
}
</script>
<style lang="stylus" scoped>
@@ -156,12 +281,35 @@ function getJobList(type = 'add') {
.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%
@@ -244,4 +392,67 @@ function getJobList(type = 'add') {
}
}
}
.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>