flat: 视频版本0.1

pages/careerfair/careerfair.vue

@@ -39,7 +39,7 @@
                 <scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
                     <view class="cards" v-if="fairList.length">
                         <view
-                            class="card btn-incline"
+                            class="card press-button"
                             v-for="(item, index) in fairList"
                             :key="index"
                             @click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.jobFairId)"
@@ -83,6 +83,7 @@
                     <empty v-else pdTop="200"></empty>
                 </scroll-view>
             </view>
+            <Tabbar :currentpage="1"></Tabbar>
         </view>
     </view>
 </template>
@@ -90,6 +91,7 @@
 <script setup>
 import { reactive, inject, watch, ref, onMounted } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
+import Tabbar from '@/components/tabbar/midell-box.vue';
 import useLocationStore from '@/stores/useLocationStore';
 import { storeToRefs } from 'pinia';
 const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());

pages/chat/chat.vue

@@ -62,10 +62,11 @@
             <view class="chatmain-warpper">
                 <ai-paging ref="paging"></ai-paging>
             </view>
+            <!-- 自定义tabbar -->
+            <view class="chatmain-footer" v-show="!isDrawerOpen">
+                <Tabbar :currentpage="2"></Tabbar>
+            </view>
         </view>
-
-        <!-- 自定义tabbar -->
-        <!-- <tabbar-custom :currentpage="2"></tabbar-custom> -->
     </view>
 </template>
 
@@ -73,6 +74,7 @@
 import { ref, inject, nextTick, computed } from 'vue';
 const { $api, navTo, insertSortData } = inject('globalFunction');
 import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
+import Tabbar from '@/components/tabbar/midell-box.vue';
 import useChatGroupDBStore from '@/stores/userChatGroupStore';
 import useUserStore from '@/stores/useUserStore';
 import aiPaging from './components/ai-paging.vue';
@@ -108,16 +110,16 @@ onHide(() => {
     paging.value?.handleTouchCancel();
     if (isDrawerOpen.value) {
         isDrawerOpen.value = false;
-        uni.showTabBar();
+        // uni.showTabBar();
     }
 });
 
 const toggleDrawer = () => {
     isDrawerOpen.value = !isDrawerOpen.value;
     if (isDrawerOpen.value) {
-        uni.hideTabBar();
+        // uni.hideTabBar();
     } else {
-        uni.showTabBar();
+        // uni.showTabBar();
     }
 };
 
@@ -144,6 +146,7 @@ function updateSetting() {
 
 <style lang="stylus" scoped>
 header-height = 88rpx
+footer-height = 98rpx
 
 /* 页面容器 */
 .container {
@@ -277,6 +280,8 @@ header-height = 88rpx
     transition: margin-left 0.3s ease-in-out;
     position: relative
     background: #FFFFFF
+    display: flex
+    flex-direction: column
     .head
         display: block;
         box-sizing: border-box;
@@ -304,15 +309,20 @@ header-height = 88rpx
             height: 37rpx;
 
 .chatmain-warpper
-    height: 'calc(100% - %s)' % header-height
+    height: 'calc(100% - %s)' %( header-height + footer-height)
     position: relative;
     display: block;
     box-sizing: border-box;
     width: 100%;
     border-top: 2rpx solid #F4F4F4;
+    flex: 1
 
 /* 页面被挤压时向右移动 */
 .main-content.shift {
     margin-left: 500rpx;
 }
-</style>
+
+.chatmain-footer{
+    height: footer-height;
+}
+</style>

pages/index/components/index-one.vue

@@ -9,11 +9,11 @@
                 <view class="chart button-click">职业图谱</view>
             </view>
             <view class="cards">
-                <view class="card btn-feel" @click="navTo('/pages/nearby/nearby')">
+                <view class="card press-button" @click="navTo('/pages/nearby/nearby')">
                     <view class="card-title">附近工作</view>
                     <view class="card-text">好岗职等你来</view>
                 </view>
-                <view class="card btn-feel" @click="navTo('/packageA/pages/choiceness/choiceness')">
+                <view class="card press-button" @click="navTo('/packageA/pages/choiceness/choiceness')">
                     <view class="card-title">精选企业</view>
                     <view class="card-text">优选职得信赖</view>
                 </view>
@@ -132,6 +132,14 @@
         </view>
         <!-- 筛选 -->
         <select-filter ref="selectFilterModel"></select-filter>
+
+        <view class="maskFristEntry" v-if="maskFristEntry">
+            <view class="entry-content">
+                <text>左滑查看视频</text>
+                <image class="indicateArrow" src="/static/gif/indicateArrow.gif"></image>
+            </view>
+            <view class="maskFristEntry-Close" @click="closeFristEntry"></view>
+        </view>
     </view>
 </template>
 
@@ -153,11 +161,13 @@ import { useScrollDirection } from '@/hook/useScrollDirection';
 import { useColumnCount } from '@/hook/useColumnCount';
 const { isScrollingDown, handleScroll } = useScrollDirection();
 const recommedIndexDb = useRecommedIndexedDBStore();
+const emits = defineEmits(['onShowTabbar']);
 
 const waterfallsFlowRef = ref(null);
 const loadmoreRef = ref(null);
 const conditionSearch = ref({});
 const waterfallcolumn = ref(2);
+const maskFristEntry = ref(false);
 const state = reactive({
     tabIndex: 'all',
 });
@@ -193,6 +203,12 @@ const isLoaded = ref(false);
 //     { name: '创意总监', highlight: false },
 // ]);
 
+onLoad(() => {
+    // 判断浏览器是否有 fristEntry 第一次进入
+    let fristEntry = uni.getStorageSync('fristEntry') || true; // 默认未读
+    maskFristEntry.value = fristEntry;
+});
+
 const { columnCount, columnSpace } = useColumnCount(() => {
     pageState.pageSize = 10 * (columnCount.value - 1);
     getJobRecommend('refresh');
@@ -202,6 +218,11 @@ const { columnCount, columnSpace } = useColumnCount(() => {
     });
 });
 
+function closeFristEntry() {
+    uni.setStorageSync('fristEntry', false);
+    maskFristEntry.value = false;
+}
+
 // onLoad(() => {
 //     getJobRecommend('refresh');
 // });
@@ -286,6 +307,7 @@ function nextDetail(job) {
 
 function openFilter() {
     showFilter.value = true;
+    emits('onShowTabbar', false);
     selectFilterModel.value?.open({
         title: '筛选',
         maskClick: true,
@@ -301,6 +323,7 @@ function openFilter() {
         },
         cancel: () => {
             showFilter.value = false;
+            emits('onShowTabbar', true);
         },
     });
 }
@@ -438,6 +461,51 @@ defineExpose({ loadData });
 </script>
 
 <style lang="stylus" scoped>
+.maskFristEntry
+    position: fixed;
+    right: 20rpx;
+    bottom: calc(50% - 200rpx);
+    // background: rgba(0,0,0,0.3)
+    .entry-content
+        display: flex;
+        align-items: center
+        text
+            font-size: 36rpx
+            background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text; /* 有些浏览器兼容用 */
+            text-fill-color: transparent;
+        .indicateArrow
+            height: 76rpx
+            width: 68rpx
+    .maskFristEntry-Close
+        position: absolute;
+        left: calc(50% - 10rpx);
+        top: 86rpx
+        width: 42rpx
+        height: 42rpx
+        background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
+        border-radius: 50%;
+    .maskFristEntry-Close::before
+        position: absolute;
+        left: calc( 50% - 2rpx)
+        top: calc( 50% - 10rpx)
+        transform: rotate(45deg);
+        content: ''
+        background: #FFFFFF
+        width: 4rpx
+        height: 20rpx
+    .maskFristEntry-Close::after
+        position: absolute;
+        left: calc( 50% - 2rpx)
+        top: calc( 50% - 10rpx)
+        transform: rotate(-45deg);
+        content: ''
+        background: #FFFFFF
+        width: 4rpx
+        height: 20rpx
+
 
 .app-container
     width: 100%;

pages/index/components/index-two.vue

@@ -29,16 +29,40 @@
             </view>
         </view>
         <view class="cards">
-            <scroll-view :scroll-y="true" class="tab-scroll">
+            <scroll-view :scroll-y="true" class="tab-scroll" @scrolltolower="scrollBottom">
                 <view class="scroll-content">
-                    <custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list">
-                        <template v-slot:default="item">
-                            <view class="item">
-                                <view class="title">{{ item.title }}</view>
-                                <view class="desc">{{ item.desc }}</view>
+                    <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">
+                                        <!-- <uni-icons type="location" size="14"></uni-icons> -->
+                                        <view class="descText">{{ job.companyName }}</view>
+                                    </view>
+                                </view>
                             </view>
                         </template>
                     </custom-waterfalls-flow>
+                    <loadmore ref="loadmoreRef"></loadmore>
                 </view>
             </scroll-view>
         </view>
@@ -47,77 +71,100 @@
 
 <script setup>
 import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
+import { usePagination } from '@/hook/usePagination';
 const { $api, navTo } = inject('globalFunction');
 import { storeToRefs } from 'pinia';
 import useUserStore from '@/stores/useUserStore';
-
+import img from '@/static/icon/filter.png';
+import { useColumnCount } from '@/hook/useColumnCount';
+import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
+const recommedIndexDb = useRecommedIndexedDBStore();
+// status
 const { userInfo } = storeToRefs(useUserStore());
 const isLoaded = ref(false);
 const waterfallsFlowRef = ref(null);
+const loadmoreRef = ref(null);
 const state = reactive({
     tabIndex: 'all',
 });
-const data = reactive({
-    list: [
-        {
-            image: 'https://via.placeholder.com/200x500.png/ff0000',
-            title: '我是标题1',
-            desc: '描述描述描述描述描述描述描述描述1',
+
+// 响应式搜索条件（可以被修改）
+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',
+        onBeforeRequest: () => {
+            loadmoreRef.value?.change('loading');
         },
-        {
-            image: 'https://via.placeholder.com/200x200.png/2878ff',
-            title: '我是标题2',
-            desc: '描述描述描述描述描述描述描述描述2',
-        },
-        {
-            image: 'https://via.placeholder.com/200x100.png/FFB6C1',
-            title: '我是标题3',
-            desc: '描述描述描述描述描述描述描述描述3',
-        },
-        {
-            image: 'https://via.placeholder.com/200x300.png/9400D3',
-            title: '我是标题4',
-            desc: '描述描述描述描述描述描述描述描述4',
-        },
-        {
-            image: 'https://via.placeholder.com/100x240.png/B0E0E6',
-            title: '我是标题5',
-            desc: '描述描述描述描述描述描述描述描述5',
-        },
-        {
-            image: 'https://via.placeholder.com/140x280.png/7FFFAA',
-            title: '我是标题6',
-            desc: '描述描述描述描述描述描述描述描述6',
-        },
-        {
-            image: 'https://via.placeholder.com/40x60.png/EEE8AA',
-            title: '我是标题7',
-            desc: '描述描述描述描述描述描述描述描述7',
-        },
-        {
-            image: 'https://via.placeholder.com/140x280.png/7FFFAA',
-            title: '我是标题6',
-            desc: '描述描述描述描述描述描述描述描述6',
-        },
-        {
-            image: 'https://via.placeholder.com/40x60.png/EEE8AA',
-            title: '我是标题7',
-            desc: '描述描述描述描述描述描述描述描述7',
-        },
-    ],
+    }
+);
+
+function imageloaded() {
+    loadmoreRef.value?.change('more');
+}
+
+const { columnCount, columnSpace } = useColumnCount(() => {
+    pageSize.value = 10 * (columnCount.value - 1);
+    nextTick(() => {
+        waterfallsFlowRef.value?.refresh?.();
+        useLocationStore().getLocation();
+    });
 });
 
 async function loadData() {
     try {
         if (isLoaded.value) return;
         isLoaded.value = true;
+        refresh();
     } catch (err) {
         isLoaded.value = false; // 重置状态允许重试
         throw err;
     }
 }
 
-async function choosePosition() {}
+async function choosePosition(index) {
+    state.tabIndex = index;
+    if (index === 'all') {
+        searchParams.value.jobTitle = '';
+    } else {
+        searchParams.value.jobTitle = userInfo.value.jobTitle[index];
+    }
+    console.log(searchParams.value);
+    refresh('refresh');
+    waterfallsFlowRef.value.refresh();
+}
+
+function scrollBottom() {
+    loadMore();
+}
+
+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 dataToImg(data) {
+    return data.map((item) => ({
+        ...item,
+        // image: item.cover,
+        image: img,
+        hide: true,
+    }));
+}
 
 defineExpose({ loadData });
 </script>
@@ -159,9 +206,10 @@ defineExpose({ loadData });
             .jobs-left
                 display: flex
                 flex-wrap: nowrap
+                align-items: center
                 .job
                     font-weight: 400;
-                    font-size: 36rpx;
+                    font-size: 28rpx;
                     color: #666D7F;
                     margin-right: 32rpx;
                     white-space: nowrap
@@ -174,9 +222,11 @@ defineExpose({ loadData });
             align-items: center;
             justify-content: center;
             font-weight: 400;
-            font-size: 32rpx;
+            font-size: 28rpx;
             color: #666D7F;
             line-height: 38rpx;
+            .iconsearch
+                margin-right: 6rpx
     .filter-bottom
         display: flex
         justify-content: space-between
@@ -202,4 +252,71 @@ defineExpose({ loadData });
                 height: 26rpx;
             .active
                 transform: rotate(180deg)
+
+.slot-item
+    background: #f4f4f4;
+    // background: #f6f8fa;
+    .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;
+        }
+    }
+    .job-info{
+        padding: 10rpx 24rpx 24rpx 24rpx
+    }
+    .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;
+        display: flex
+        .descText{
+            white-space: pre-wrap
+        }
 </style>

pages/index/index.vue

@@ -6,21 +6,35 @@
                 <swiper class="swiper" :current="state.current" @change="changeSwiperType">
                     <swiper-item class="swiper-item" v-for="(_, index) in 2" :key="index">
                         <!-- #ifndef MP-WEIXIN -->
-                        <component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
+                        <component
+                            :is="components[index]"
+                            @onShowTabbar="changeShowTabbar"
+                            :ref="(el) => handelComponentsRef(el, index)"
+                        />
                         <!-- #endif -->
                         <!-- #ifdef MP-WEIXIN -->
-                        <IndexOne v-show="currentIndex === 0" :ref="(el) => handelComponentsRef(el, index)" />
-                        <IndexTwo v-show="currentIndex === 1" :ref="(el) => handelComponentsRef(el, index)" />
+                        <IndexOne
+                            v-show="currentIndex === 0"
+                            @onShowTabbar="changeShowTabbar"
+                            :ref="(el) => handelComponentsRef(el, index)"
+                        />
+                        <IndexTwo
+                            v-show="currentIndex === 1"
+                            @onShowTabbar="changeShowTabbar"
+                            :ref="(el) => handelComponentsRef(el, index)"
+                        />
                         <!-- #endif -->
                     </swiper-item>
                 </swiper>
             </view>
+            <Tabbar v-show="showTabbar" :currentpage="0"></Tabbar>
         </view>
     </view>
 </template>
 
 <script setup>
 import { reactive, inject, watch, ref, onMounted } from 'vue';
+import Tabbar from '@/components/tabbar/midell-box.vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import IndexOne from './components/index-one.vue';
 import IndexTwo from './components/index-two.vue';
@@ -30,6 +44,7 @@ const components = [IndexOne, IndexTwo];
 import { storeToRefs } from 'pinia';
 import { useReadMsg } from '@/stores/useReadMsg';
 const { unreadCount } = storeToRefs(useReadMsg());
+const showTabbar = ref(true);
 
 onShow(() => {
     // 获取消息列表
@@ -49,6 +64,11 @@ const handelComponentsRef = (el, index) => {
         swiperRefs[index].value = el;
     }
 };
+
+function changeShowTabbar(val) {
+    showTabbar.value = val;
+}
+
 // 查看消息类型
 function changeSwiperType(e) {
     const index = e.detail.current;

pages/mine/mine.vue

@@ -96,12 +96,16 @@
                 ></uni-popup-dialog>
             </uni-popup>
         </view>
+        <template #footer>
+            <Tabbar :currentpage="4"></Tabbar>
+        </template>
     </AppLayout>
 </template>
 
 <script setup>
 import { reactive, inject, watch, ref, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
+import Tabbar from '@/components/tabbar/midell-box.vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 const { $api, navTo } = inject('globalFunction');
 import useUserStore from '@/stores/useUserStore';
@@ -170,7 +174,7 @@ function getUserstatistics() {
             width: auto;
 			max-width: 60%;
 			white-space: nowrap
-			overflow:hidden;
+			overflow:hidden;
 			text-overflow: ellipsis;
         }
         .top-btn{
@@ -307,4 +311,4 @@ function getUserstatistics() {
     border-radius: 2rpx
     background: #A2A2A2;
     transform: rotate(45deg)
-</style>
+</style>

pages/msglog/msglog.vue

@@ -27,6 +27,8 @@
                     </swiper-item>
                 </swiper>
             </view>
+
+            <Tabbar :currentpage="3"></Tabbar>
         </view>
     </view>
 </template>
@@ -34,6 +36,7 @@
 <script setup>
 import { reactive, inject, watch, ref, onMounted } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
+import Tabbar from '@/components/tabbar/midell-box.vue';
 import ReadComponent from './read.vue';
 import UnreadComponent from './unread.vue';
 const loadedMap = reactive([false, false]);

pages/msglog/read.vue

@@ -2,7 +2,7 @@
     <scroll-view scroll-y class="main-scroll">
         <view class="scrollmain">
             <view
-                class="list-card btn-feel"
+                class="list-card press-button"
                 v-for="(item, index) in msgList"
                 :key="index"
                 @click="seeDetail(item, index)"

pages/msglog/unread.vue

@@ -2,7 +2,7 @@
     <scroll-view scroll-y class="main-scroll">
         <view class="scrollmain">
             <view
-                class="list-card btn-feel"
+                class="list-card press-button"
                 v-for="(item, index) in unreadMsgList"
                 :key="index"
                 @click="seeDetail(item)"

pages/search/search.vue

@@ -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>