|
@@ -0,0 +1,122 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="box defaultBgc">
|
|
|
+ <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
|
|
|
+ <PositionList :list="positionListData" :noMore="false"></PositionList>
|
|
|
+ <uni-load-more :status="more" />
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, reactive } from 'vue'
|
|
|
+import PositionList from '@/components/PositionList'
|
|
|
+import { dealDictArrayData } from '@/utils/position'
|
|
|
+import { getSimilarPosition } from '@/api/position'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ id: String
|
|
|
+})
|
|
|
+const more = ref('more')
|
|
|
+
|
|
|
+const positionListData = ref([])
|
|
|
+const query = reactive({
|
|
|
+ pageSize: 10,
|
|
|
+ pageNo: 1,
|
|
|
+ id: props.id
|
|
|
+})
|
|
|
+console.log(props.id, '==================')
|
|
|
+const getData = async () => {
|
|
|
+ try {
|
|
|
+ const res = await getSimilarPosition(query)
|
|
|
+ const arr = res?.data?.list || []
|
|
|
+ // 推荐接口返回数据需要拼接
|
|
|
+ const list = arr
|
|
|
+ positionListData.value.push(...dealDictArrayData(list))
|
|
|
+ if (positionListData.value.length === +res.data.total) {
|
|
|
+ more.value = 'noMore'
|
|
|
+ return
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ query.pageNo--
|
|
|
+ more.value = 'more'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const scrollTop = ref(0)
|
|
|
+const old = ref({
|
|
|
+ scrollTop: 0
|
|
|
+})
|
|
|
+const onScroll = (e) =>{
|
|
|
+ old.value.scrollTop = e.detail.scrollTop
|
|
|
+}
|
|
|
+
|
|
|
+// 加载更多
|
|
|
+const loadingMore = () => {
|
|
|
+ more.value = 'loading'
|
|
|
+ query.pageNo++
|
|
|
+ getData()
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.stick {
|
|
|
+ z-index: 1;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+.stickFilter {
|
|
|
+ z-index: 1;
|
|
|
+ position: sticky;
|
|
|
+ box-shadow: 0px 10rpx 12rpx 0px rgba(195, 195, 195, .25);
|
|
|
+ top: 120rpx;
|
|
|
+}
|
|
|
+.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
|
|
|
+.pb-10 {
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+.pb-20 { padding-bottom: 20px; }
|
|
|
+.px-5 { padding-left: 5px; padding-right: 5px; }
|
|
|
+.px-10 { padding-left: 10px; padding-right: 10px; }
|
|
|
+.mx-10 { margin-left: 10px; margin-right: 10px }
|
|
|
+.mx-20 { margin-left: 20px; margin-right: 20px; }
|
|
|
+.mb-10 { margin-bottom: 10px; }
|
|
|
+.box {
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-bottom: 120rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.scrollBox{
|
|
|
+ flex: 1;
|
|
|
+ height: 0 !important;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+:deep(.uni-searchbar__box) {
|
|
|
+ width: calc(100% - 105px);
|
|
|
+ height: 40px !important;
|
|
|
+ border: 1px solid #00897B;
|
|
|
+ padding-right: 20px;
|
|
|
+ flex: none;
|
|
|
+}
|
|
|
+.search-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 11px;
|
|
|
+ top: 10px;
|
|
|
+ width: 110px;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ background-color: #00897B;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 0 5px 5px 0;
|
|
|
+ z-index: 9;
|
|
|
+}
|
|
|
+:deep(.picker-view) {
|
|
|
+ padding-bottom: 80px !important;
|
|
|
+}
|
|
|
+</style>
|