veterans_H5/h5_web/pages/recruitment/recruitment.vue

<!-- 
 * @title 招聘就业 
 * @author Rockery(1113269755@qq.com)
-->

<template>
  <view class="recruitment">
    <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">
      <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">
      <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>
        <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>
              </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>
        </view>
      </u-card>
    </view>

    <!-- ###################################-- tabs页签 -- ################################### -->
    <view class="recruitment-tabs">
      <u-tabs bg-color="#f2f2f2" :list="dataAreaTabsList" @change="dataAreaTabsChange" :current="dataAreaTabsCurrent" />
    </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>
          </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>
      <u-loadmore :status="loadStatus" @loadmore="refreshList()" />
    </view>
    <u-empty v-else text="列表为空" mode="list"></u-empty>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headerTopKeyword: '',
      bannerList: [],
      // 企业推荐列表
      recommendList: [],
      recruitmentJobList: [],
      recommendListData: [],
      recommendConfigData: {
        title: '企业推荐',
        titlemore: '更多',
        listmore: false
      },
      dataAreaTabsCurrent: 0,
      dataAreaTabsList: [
        {
          name: '最新',
          text: '1'
        }
      ],
      degrEducList: [],
      workYearList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        postName: undefined,
        newest: undefined
      },
      loadStatus: 'loadmore',
      totalPage: 0
    };
  },
  onLoad() {
    // 获取企业推荐列表
    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);
  },
  /**
   * @description: 往底部滑动触发
   * @return {*}
   */
  onReachBottom() {
    if (this.queryParams.pageNum >= this.totalPage) return;
    this.refreshList();
  },
  methods: {
    refreshList() {
      this.loadStatus = 'loading';
      setTimeout(() => {
        this.queryParams.pageNum = ++this.queryParams.pageNum;
        this.getRecruitmentJobList();
      }, 1000);
    },
    /**
     * 获取文化程度类别
     */
    getVeteDegrEduc() {
      this.$u.api
        .getDictdataUrl({
          key: 'degr_educ'
        })
        .then((res) => {
          if (res.code == 200) {
            this.degrEducList = res.data.map((item) => {
              return {
                ...item,
                value: item.text
              };
            });
          }
        });
      this.$u.api
        .getDictdataUrl({
          key: 'work_year'
        })
        .then((res) => {
          if (res.code == 200) {
            this.workYearList = res.data.map((item) => {
              return {
                ...item,
                value: item.text
              };
            });
          }
        });
    },
    /**
     * 获取教育等级名称
     * @param {Object} value
     */
    getEducationBg(value) {
      let name;
      this.degrEducList.forEach((item) => {
        if (item.value == value) {
          name = item.label;
        }
      });
      return name;
    },
    /**
     * 导航栏返回事件
     */
    navbarCustomBack() {
      this.$u.route({
        type: 'switchTab',
        url: 'pages/index/index'
      });
    },
    getBannerList() {
      this.$u.api.indexApi
        .indexBannerListApi({
          type: 1
        })
        .then((res) => {
          if (res?.code === 200) {
            this.bannerList = res.data;
          }
        });
    },
    // 轮播图点击
    swiperClick(index) {
      if (this.bannerList[index].jumpUrl) {
        let url = this.bannerList[index].jumpUrl.split('#')[1];
        this.$u.route({
          url: url
        });
      } else {
        this.$u.route({
          url: 'pages/bannerDetails/bannerDetails',
          params: {
            id: this.bannerList[index].id,
            type: 1
          }
        });
      }
    },
    /**
     * 获取企业推荐列表
     */
    getRecommendList() {
      this.$u.api.recruitment
        .getRecommendList()
        .then((res) => {
          if (res.code === 200) {
            this.recommendList = res?.data ?? [];
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: '系统异常!',
            type: 'error'
          });
        });
    },
    /**
     * 获取招聘就业岗位列表
     */
    getRecruitmentJobList() {
      const queryParams = { ...this.queryParams };
      queryParams.newest = this.dataAreaTabsList[this.dataAreaTabsCurrent]?.text;
      queryParams.postName = this.headerTopKeyword;
      this.$u.api.recruitment
        .getRecruitmentJobList(queryParams)
        .then((res) => {
          if (res.code === 200) {
            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
            });
          }
        })
        .catch((err) => {
          this.loadStatus = 'nomore';
          uni.showToast({
            title: '系统异常!',
            type: 'error'
          });
        });
    },
    /**
     * @param { String } value
     */
    searchKeyword() {
      this.recruitmentJobList = [];
      this.queryParams.pageNum = 1;
      this.getRecruitmentJobList();
    },
    // tab栏切换
    dataAreaTabsChange(index) {
      this.dataAreaTabsCurrent = index;
      this.recruitmentJobList = [];
      this.queryParams.pageNum = 1;
      this.getRecruitmentJobList();
    },
    recommendCardMoreClick(index) {
      this.$u.route({
        url: 'pages/cooperativeEnterprise/cooperativeEnterprise',
        params: {
          flag: 'recruitment'
        }
      });
    },
    tapRecommendSwiperItem(param) {
      this.$u.route({
        url: 'pages/businessDetails/businessDetails',
        params: {
          id: param?.id,
          flag: 'recruitment'
        }
      });
    },
    tapDataAreaCard(param) {
      this.$u.route({
        url: 'pages/jobDetails/jobDetails',
        params: {
          id: param?.id
        }
      });
    },
    /**
     * 通过value获取label
     * @param {Object} list
     * @param {Object} value
     */
    getDictsLabel(list, value) {
      let label = '-';
      try {
        list.forEach((item) => {
          if (Number(item.text) === Number(value)) {
            throw item;
          }
        });
      } catch (e) {
        label = e?.label;
      }
      return label;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './scss/recruitment.scss';
</style>