修改招聘就业列表可视区域太小的问题

h5_web/pages.json

@@ -146,7 +146,8 @@
 				"navigationBarTitleText": "招聘就业",
 				"navigationBarBackgroundColor": "#3D5D4C",
 				"navigationBarTextStyle": "white",
-				"navigationStyle": "custom"
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
 			}
 		},
 		{

h5_web/pages/recruitment/recruitment.vue

@@ -5,122 +5,115 @@
 
 <template>
   <view class="recruitment">
-    <z-paging
-      ref="recruitmentPaging"
-      v-model="recruitmentJobList"
-      :fixed="false"
-      :paging-style="{ minHeight: '120vh' }"
-      @query="recruitmentQueryList"
-    >
-      <u-navbar slot="top" back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
-      <!-- ###################################-- 轮播图 -- ################################### -->
-      <view class="recruitment-banner" slot="top">
-        <u-swiper
-          :list="bannerList"
-          name="bannerUrl"
-          border-radius="0"
-          mode="round"
-          height="300"
-          img-mode="scaleToFill"
-          @click="swiperClick"
-          :mode="bannerList.length > 1 ? 'round' : 'none'"
-        >
-        </u-swiper>
-      </view>
+    <u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
+    <!-- ###################################-- 轮播图 -- ################################### -->
+    <view class="recruitment-banner">
+      <u-swiper
+        :list="bannerList"
+        name="bannerUrl"
+        border-radius="0"
+        height="300"
+        img-mode="scaleToFill"
+        @click="swiperClick"
+        :mode="bannerList.length > 1 ? 'round' : 'none'"
+      >
+      </u-swiper>
+    </view>
 
-      <!-- ###################################-- 请输入您关键词 -- ################################### -->
-      <view class="recruitment-usearch" slot="top">
-        <u-search
-          placeholder="请输入您关键词"
-          v-model="headerTopKeyword"
-          :show-action="false"
-          bg-color="#FFFFFF"
-          @search="searchKeyword"
-          @clear="searchKeyword"
-        ></u-search>
-      </view>
+    <!-- ###################################-- 请输入您关键词 -- ################################### -->
+    <view class="recruitment-usearch">
+      <u-search
+        placeholder="请输入您关键词"
+        v-model="headerTopKeyword"
+        :show-action="false"
+        bg-color="#FFFFFF"
+        @search="searchKeyword"
+        @clear="searchKeyword"
+      ></u-search>
+    </view>
 
-      <!-- ###################################-- 企业推荐 -- ################################### -->
-      <view class="u-card-wrap recruitment-recommend" slot="top">
-        <u-card :show-foot="false" class="recruitment-recommend-card">
-          <view slot="head">
-            <view class="recommend-card-head">
-              <view class="recommend-card-head-title">{{ recommendConfigData.title }}</view>
-              <view class="recommend-card-head-subtitle" @tap="recommendCardMoreClick">
-                {{ recommendConfigData.titlemore }}
-                <u-icon name="arrow-right" color="#A3A3A3" size="28"></u-icon>
-              </view>
+    <!-- ###################################-- 企业推荐 -- ################################### -->
+    <view class="u-card-wrap recruitment-recommend">
+      <u-card :show-foot="false" class="recruitment-recommend-card">
+        <view slot="head">
+          <view class="recommend-card-head">
+            <view class="recommend-card-head-title">{{ recommendConfigData.title }}</view>
+            <view class="recommend-card-head-subtitle" @tap="recommendCardMoreClick">
+              {{ recommendConfigData.titlemore }}
+              <u-icon name="arrow-right" color="#A3A3A3" size="28"></u-icon>
             </view>
           </view>
-          <view slot="body">
-            <view class="recommend-card-body">
-              <swiper v-if="recommendList && recommendList.length > 0" class="recommend-card-content" :display-multiple-items="4" :autoplay="true">
-                <swiper-item v-for="(recommendItem, index) in recommendList" :key="'recommendList' + index">
-                  <view class="swiper-item" @tap="tapRecommendSwiperItem(recommendItem)" :data-id="recommendItem.id" :data-index="index">
-                    <view class="img">
-                      <u-image :src="recommendItem.logoUrl" width="140" height="140" border-radius="10" mode="aspectFill">
-                        <view slot="error">
-                          <u-image src="../../static/img/default-company.png" width="140" height="140" border-radius="10" mode="aspectFill" />
-                        </view>
-                      </u-image>
-                    </view>
-                    <view class="subject">{{ recommendItem.companyName }}</view>
-                    <view class="post u-text-center">
-                      岗位
-                      <text class="postlink">{{ recommendItem.postCount }}</text
-                      >个
-                    </view>
+        </view>
+        <view slot="body">
+          <view class="recommend-card-body">
+            <swiper v-if="recommendList && recommendList.length > 0" class="recommend-card-content" :display-multiple-items="4" :autoplay="true">
+              <swiper-item v-for="(recommendItem, index) in recommendList" :key="'recommendList' + index">
+                <view class="swiper-item" @tap="tapRecommendSwiperItem(recommendItem)" :data-id="recommendItem.id" :data-index="index">
+                  <view class="img">
+                    <u-image :src="recommendItem.logoUrl" width="140" height="140" border-radius="10" mode="aspectFill">
+                      <view slot="error">
+                        <u-image src="../../static/img/default-company.png" width="140" height="140" border-radius="10" mode="aspectFill" />
+                      </view>
+                    </u-image>
                   </view>
-                </swiper-item>
-                <swiper-item v-if="recommendConfigData.listmore">
-                  <view class="swiper-item lookmore" @tap="recommendCardMoreClick">
-                    <view class="moretext">查看更多</view>
+                  <view class="subject">{{ recommendItem.companyName }}</view>
+                  <view class="post u-text-center">
+                    岗位
+                    <text class="postlink">{{ recommendItem.postCount }}</text
+                    >个
                   </view>
-                </swiper-item>
-              </swiper>
-              <u-empty v-else text="列表为空" mode="list"></u-empty>
-            </view>
+                </view>
+              </swiper-item>
+              <swiper-item v-if="recommendConfigData.listmore">
+                <view class="swiper-item lookmore" @tap="recommendCardMoreClick">
+                  <view class="moretext">查看更多</view>
+                </view>
+              </swiper-item>
+            </swiper>
+            <u-empty v-else text="列表为空" mode="list"></u-empty>
           </view>
-        </u-card>
-      </view>
+        </view>
+      </u-card>
+    </view>
 
-      <!-- ###################################-- tabs页签 -- ################################### -->
-      <view class="recruitment-tabs" slot="top">
-        <u-tabs bg-color="#f2f2f2" :list="dataAreaTabsList" @change="dataAreaTabsChange" :current="dataAreaTabsCurrent" />
-      </view>
+    <!-- ###################################-- tabs页签 -- ################################### -->
+    <view class="recruitment-tabs">
+      <u-tabs bg-color="#f2f2f2" :list="dataAreaTabsList" @change="dataAreaTabsChange" :current="dataAreaTabsCurrent" />
+    </view>
 
-      <!-- ###################################-- 招聘就业岗位 -- ################################### -->
-      <view class="recruitment-dataarea">
-        <view
-          class="recruitment-dataarea-card"
-          v-for="(item, index) in recruitmentJobList"
-          :key="'recruitmentJobList' + index"
-          @tap="tapDataAreaCard(item)"
-        >
-          <view class="dataarea-card-left">
-            <u-image :src="item.companyLogoUrl" width="120" height="120" border-radius="10" mode="aspectFill">
-              <view slot="error">
-                <u-image src="../../static/img/default-company.png" width="120" height="120" border-radius="10" mode="aspectFill" />
-              </view>
-            </u-image>
-          </view>
-          <view class="dataarea-card-content">
-            <view class="dataarea-content-left">
-              <view>{{ item.postName }}</view>
-              <view class="content">
-                {{ item.areaName }}｜ {{ getDictsLabel(workYearList, item.workYear) }}｜{{ getEducationBg(item.educationBg) }}
-              </view>
-              <view>{{ item.companyName }}</view>
+    <!-- ###################################-- 招聘就业岗位 -- ################################### -->
+    <view class="recruitment-dataarea" v-if="recruitmentJobList.length">
+      <view
+        class="recruitment-dataarea-card"
+        v-for="(item, index) in recruitmentJobList"
+        :key="'recruitmentJobList' + index"
+        @tap="tapDataAreaCard(item)"
+      >
+        <view class="dataarea-card-left">
+          <u-image :src="item.companyLogoUrl" width="120" height="120" border-radius="10" mode="aspectFill">
+            <view slot="error">
+              <u-image src="../../static/img/default-company.png" width="120" height="120" border-radius="10" mode="aspectFill" />
             </view>
-            <view class="dataarea-content-right">
-              <view>{{ item.lowestSalary }}K~{{ item.highestSalary }}K</view>
-              <view>&nbsp;</view>
-              <view>{{ $u.timeFormat(new Date(item.createTime).getTime(), 'yyyy-mm-dd') }}</view>
+          </u-image>
+        </view>
+        <view class="dataarea-card-content">
+          <view class="dataarea-content-left">
+            <view>{{ item.postName }}</view>
+            <view class="content">
+              {{ item.areaName }}｜ {{ getDictsLabel(workYearList, item.workYear) }}｜{{ getEducationBg(item.educationBg) }}
             </view>
+            <view>{{ item.companyName }}</view>
+          </view>
+          <view class="dataarea-content-right">
+            <view>{{ item.lowestSalary }}K~{{ item.highestSalary }}K</view>
+            <view>&nbsp;</view>
+            <view>{{ $u.timeFormat(new Date(item.createTime).getTime(), 'yyyy-mm-dd') }}</view>
           </view>
         </view>
       </view>
-    </z-paging>
+      <u-loadmore :status="loadStatus" @loadmore="getList()" />
+    </view>
+    <u-empty v-else text="列表为空" mode="list"></u-empty>
   </view>
 </template>
 
@@ -147,19 +140,61 @@ export default {
         }
       ],
       degrEducList: [],
-      workYearList: []
+      workYearList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        postName: undefined,
+        newest: undefined
+      },
+      loadStatus: 'loadmore',
+      totalPage: 0
     };
   },
   onLoad() {
-    // console.log(this.$u.config.v);
     // 获取企业推荐列表
     this.getRecommendList();
+    this.getRecruitmentJobList();
   },
   onShow() {
     this.getBannerList();
     this.getVeteDegrEduc();
   },
+  onPullDownRefresh() {
+    uni.startPullDownRefresh();
+    this.recruitmentJobList = [];
+    this.recommendList = [];
+    this.recommendListData = [];
+    this.bannerList = [];
+    this.queryParams = {
+      pageNum: 1,
+      pageSize: 10,
+      postName: undefined,
+      newest: undefined
+    };
+    this.getRecommendList();
+    this.getRecruitmentJobList();
+    this.getBannerList();
+    this.getVeteDegrEduc();
+    setTimeout(() => {
+      uni.stopPullDownRefresh();
+    }, 1500);
+  },
+  onReachBottom() {
+    this.loadStatus = 'loading';
+    setTimeout(() => {
+      this.queryParams.pageNum = ++this.queryParams.pageNum;
+      this.getRecruitmentJobList();
+    }, 1000);
+  },
   methods: {
+    getList() {
+      this.loadStatus = 'loading';
+      setTimeout(() => {
+        this.queryParams.pageNum = ++this.queryParams.pageNum;
+        this.getRecruitmentJobList();
+      }, 1000);
+    },
     /**
      * 获取文化程度类别
      */
@@ -268,61 +303,55 @@ export default {
     },
     /**
      * 获取招聘就业岗位列表
-     * @param { Number } newest
-     * @param { Number } pageNum
-     * @param { Number } pageSize
-     * @param { String } postName
      */
-    getRecruitmentJobList(newest, pageNum, pageSize, postName) {
+    getRecruitmentJobList() {
+      const queryParams = { ...this.queryParams };
+      queryParams.newest = this.dataAreaTabsList[this.dataAreaTabsCurrent]?.text;
+      queryParams.postName = this.headerTopKeyword;
       this.$u.api.recruitment
-        .getRecruitmentJobList({
-          pageNum,
-          pageSize,
-          postName,
-          newest
-        })
+        .getRecruitmentJobList(queryParams)
         .then((res) => {
           if (res.code === 200) {
-            this.$refs.recruitmentPaging.complete(res.rows || []);
+            this.totalPage = parseInt(Number(res.total) / this.queryParams.pageSize) + 1;
+            let list = res?.rows ?? [];
+            list.length && (this.recruitmentJobList = this.recruitmentJobList.concat(list));
+            if (this.queryParams.pageNum >= this.totalPage) {
+              this.loadStatus = 'nomore';
+            } else {
+              this.loadStatus = 'loadmore';
+            }
           } else {
+            this.loadStatus = 'nomore';
             uni.showToast({
               icon: 'none',
               title: res.msg
             });
-            this.$refs.recruitmentPaging.complete([]);
           }
         })
         .catch((err) => {
+          this.loadStatus = 'nomore';
           uni.showToast({
             title: '系统异常!',
             type: 'error'
           });
-          this.$refs.recruitmentPaging.complete([]);
         });
     },
     /**
      * @param { String } value
      */
-    searchKeyword(value) {
-      this.$refs.recruitmentPaging.reload(true);
-      this.getRecruitmentJobList(this.dataAreaTabsList[this.dataAreaTabsCurrent]?.text, 1, 10, this.headerTopKeyword);
+    searchKeyword() {
+      this.recruitmentJobList = [];
+      this.queryParams.pageNum = 1;
+      this.getRecruitmentJobList();
     },
     // tab栏切换
     dataAreaTabsChange(index) {
       this.dataAreaTabsCurrent = index;
-      this.$refs.recruitmentPaging.reload(true);
-      this.getRecruitmentJobList(this.dataAreaTabsList[index]?.text, 1, 10, this.headerTopKeyword);
-    },
-    /**
-     * 列表加载触发
-     */
-    recruitmentQueryList(pageNo, pageSize) {
-      if (this.dataAreaTabsList.length > 0) {
-        this.getRecruitmentJobList(this.dataAreaTabsList[this.dataAreaTabsCurrent]?.text, pageNo, pageSize, this.headerTopKeyword);
-      }
+      this.recruitmentJobList = [];
+      this.queryParams.pageNum = 1;
+      this.getRecruitmentJobList();
     },
     recommendCardMoreClick(index) {
-      console.log('recommendCardMoreClick: ', index);
       this.$u.route({
         url: 'pages/cooperativeEnterprise/cooperativeEnterprise',
         params: {

h5_web/pages/recruitment/scss/recruitment.scss

@@ -1,26 +1,26 @@
-page{
-	background-color: #f2f2f2;
+page {
+  background-color: #f2f2f2;
 }
-.recruitment{
-	background-color: #f2f2f2;
-  &-unavbar{
+.recruitment {
+  background-color: #f2f2f2;
+  &-unavbar {
     ::v-deep .u-border-bottom:after {
       border-bottom-width: 0 !important;
     }
   }
-  &-usearch{
+  &-usearch {
     margin: 20rpx 30rpx 0;
   }
-  
-  &-recommend{
-    &-card{
-      margin: 20rpx 30rpx 0!important;
-      .recommend-card-head{
+
+  &-recommend {
+    &-card {
+      margin: 20rpx 30rpx 0 !important;
+      .recommend-card-head {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
-        
-        &-title{
+
+        &-title {
           font-size: 36rpx;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: bold;
@@ -28,36 +28,36 @@ page{
           line-height: 50rpx;
           letter-spacing: 1px;
         }
-        
-        &-subtitle{
+
+        &-subtitle {
           font-size: 28rpx;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
-          color: #A3A3A3;
+          color: #a3a3a3;
           line-height: 50rpx;
           letter-spacing: 1px;
         }
       }
-      
-      ::v-deep .u-card__body{
+
+      ::v-deep .u-card__body {
         padding: 30rpx 16px 0 !important;
       }
-      
+
       .recommend-card-body {
-        .recommend-card-content{
+        .recommend-card-content {
           height: 240rpx !important;
-          
+
           .swiper-item {
-          	margin-right: 14rpx;
+            margin-right: 14rpx;
             text-align: center;
-            
+
             .img {
               // box-shadow: 0px 0px 10px 0px rgba(77, 77, 77, 0.23);
-							margin-bottom: 20rpx;
-							border: solid 1px #E0E0E0;
-							border-radius: 10rpx;
+              margin-bottom: 20rpx;
+              border: solid 1px #e0e0e0;
+              border-radius: 10rpx;
             }
-            
+
             .subject {
               width: 100%;
               text-align: center;
@@ -67,71 +67,73 @@ page{
               color: #000000;
               line-height: 33rpx;
               letter-spacing: 1px;
-							white-space: nowrap;
-							overflow: hidden;
-							text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
             }
-            
-            .post{
+
+            .post {
               width: 100%;
               font-size: 22rpx;
               font-family: PingFangSC-Regular, PingFang SC;
               font-weight: 400;
-              color: #6F6F6F;
+              color: #6f6f6f;
               line-height: 30rpx;
               letter-spacing: 1px;
-              
-              .postlink{
+
+              .postlink {
                 color: $u-type-warning;
               }
             }
           }
-          
-          .lookmore{
-          	background-color: #e2e2e2;
-          	text-align: center;
-          	line-height: 101rpx;
+
+          .lookmore {
+            background-color: #e2e2e2;
+            text-align: center;
+            line-height: 101rpx;
             border-radius: 10rpx;
-            
-            .moretext{
-            	color: #777;
-            	font-size: 28rpx;
+
+            .moretext {
+              color: #777;
+              font-size: 28rpx;
             }
           }
         }
       }
     }
   }
-  
-  &-tabs{
+
+  &-tabs {
     padding: 0 30rpx 10rpx;
   }
-  
-  &-dataarea{
-    padding: 0 30rpx;
+
+  &-dataarea {
+    padding: 0 30rpx 30rpx;
     width: 100%;
-    
+
     &-card {
       display: flex;
-			align-items: center;
+      align-items: center;
       margin-top: 20rpx;
       padding: 32rpx;
-      background-color: #FFFFFF;
+      background-color: #ffffff;
       border-radius: 10rpx;
-      
-      .dataarea-card-left{
-				margin-right: 24rpx;
-				border: solid 1px #E0E0E0;
-				border-radius: 10rpx;
+      &:nth-last-child(2) {
+        margin-bottom: 30rpx;
       }
-      
-      .dataarea-card-content{
+      .dataarea-card-left {
+        margin-right: 24rpx;
+        border: solid 1px #e0e0e0;
+        border-radius: 10rpx;
+      }
+
+      .dataarea-card-content {
         display: flex;
         justify-content: space-between;
-				width: 100%;
-        
-        .dataarea-content-left{
-          view:first-child{
+        width: 100%;
+
+        .dataarea-content-left {
+          view:first-child {
             margin-bottom: 9rpx;
             font-size: 30rpx;
             font-family: PingFangSC-Regular, PingFang SC;
@@ -140,54 +142,54 @@ page{
             line-height: 42rpx;
             letter-spacing: 1px;
           }
-          
-          .content{
+
+          .content {
             margin-bottom: 9rpx;
             font-size: 24rpx;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #6F6F6F;
+            color: #6f6f6f;
             line-height: 30rpx;
             letter-spacing: 1px;
           }
-          
-          view:last-child{
+
+          view:last-child {
             font-size: 24rpx;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #6F6F6F;
+            color: #6f6f6f;
             line-height: 30rpx;
             letter-spacing: 1px;
           }
         }
-        
-        .dataarea-content-right{
-          view:first-child{
+
+        .dataarea-content-right {
+          view:first-child {
             margin-bottom: 55rpx;
             text-align: right;
             font-size: 26rpx;
             font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 700;
-            color: #EE5A10;
+            color: #ee5a10;
             line-height: 30rpx;
             letter-spacing: 1px;
           }
-          
-          view:last-child{
+
+          view:last-child {
             text-align: right;
             font-size: 24rpx;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #6F6F6F;
+            color: #6f6f6f;
             line-height: 30rpx;
             letter-spacing: 1px;
           }
         }
       }
-      
-      &:last-child{
+
+      &:last-child {
         margin-bottom: 40rpx;
       }
     }
   }
-}
+}