yizhizan-h5/package/records/records.vue

<template>
  <view>
    <view class="qz-record">
      <view class="qz-title">求职记录</view>
      <view class="qz-desc"
        >当前记录仅自己可见，招聘者无法看到你所浏览过或投递过的
        其他岗位，当前数据仅保留半年的记录。</view
      >
    </view>
    <u-tabs :list="list" @change="tabClick" :current="tabIndex" class="tab-list"></u-tabs>
    <view class="gwList flex justify-center" v-if="dataList.length > 0">
      <view class="gwList-box">
        <view
          class="gwList-box-item flex justify-center"
          @click="gotoInfo(item.postPushId)"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <view class="gwList-box-item-box">
            <view
              v-if="item"
              class="gwList-box-item-box-title flex justify-between align-center"
            >
              <text>{{ item.stationName }}</text>
              <text>{{ item.salaryRange }}</text>
            </view>
            <block v-if="title == '我的收藏'">
              <view class="gwList-box-item-box-name">
                <text>{{ item.companyName ? item.companyName : "匿名公司" }}</text>
                <text v-if="item.companyPeople">{{ item.companyPeople }}</text>
              </view>
              <view class="gwList-box-item-box-label flex align-center flex-wrap">
                <view
                  class="gw-tag"
                  v-for="(ite, ind) in item.positionWelfare"
                  :key="ind"
                  >{{ ite }}</view
                >
              </view>
              <view class="gwList-box-item-box-info flex justify-between align-center">
                <view class="gwList-box-item-box-info-l flex align-center">
                  <image
                    :src="item.companyLogo ? item.companyLogo : '../../static/logo.png'"
                    class="user-info-img"
                    mode=""
                  ></image>
                  <text v-if="item.companyLegalPerson"
                    >{{ item.companyLegalPerson }}·创始人</text
                  >
                  <view class="info-tag">3分钟前回复</view>
                </view>
                <view class="gwList-box-item-box-info-r">
                  {{ item.county }}
                  {{ item.address }}
                </view>
              </view>
            </block>
            <block v-else-if="title == '浏览记录'">
              <view class="gwList-box-item-box-name">
                <text>{{ item.companyName ? item.companyName : "匿名公司" }}</text>
                <text>{{ item.companyPeople ? item.companyPeople : 0 }}</text>
              </view>
              <view class="gwList-box-item-box-label flex align-center flex-wrap">
                <view
                  class="gw-tag"
                  v-for="(ite, ind) in item.positionWelfare"
                  :key="ind"
                  >{{ ite }}</view
                >
              </view>
              <view class="gwList-box-item-box-info flex justify-between align-center">
                <view class="gwList-box-item-box-info-l flex align-center">
                  <image
                    :src="item.companyLogo ? item.companyLogo : '../../static/logo.png'"
                    class="user-info-img"
                    mode=""
                  ></image>
                  <text v-if="item.companyLegalPerson"
                    >{{ item.companyLegalPerson }}·创始人</text
                  >
                  <view class="info-tag">3分钟前回复</view>
                </view>
                <view class="gwList-box-item-box-info-r">
                  {{ item.county }}
                  {{ item.address }}
                </view>
              </view>
            </block>
            <block v-else>
              <view class="gwList-box-item-box-name">
                <text>{{ item.companyName ? item.companyName : "匿名公司" }}</text>
                <text v-if="item.companyPeople">{{ item.companyPeople }}</text>
              </view>
              <view class="gwList-box-item-box-label flex align-center flex-wrap">
                <view
                  class="gw-tag"
                  v-for="(ite, ind) in item.positionWelfare"
                  :key="ind"
                  >{{ ite }}</view
                >
              </view>
              <view class="gwList-box-item-box-info flex justify-between align-center">
                <view class="gwList-box-item-box-info-l flex align-center">
                  <image
                    :src="item.companyLogo ? item.companyLogo : '../../static/logo.png'"
                    class="user-info-img"
                    mode=""
                  ></image>
                  <text v-if="item.companyLegalPerson"
                    >{{ item.companyLegalPerson }}·创始人</text
                  >
                  <view class="info-tag">3分钟前回复</view>
                </view>
                <view class="gwList-box-item-box-info-r">
                  {{ item.county }}
                  {{ item.address }}
                </view>
              </view>
            </block>
          </view>
        </view>
      </view>
    </view>

    <!-- 暂无数据 -->
    <view class="gwList" v-else>
      <empty />
    </view>
    <!-- 筛选悬浮 -->
    <view class="filterSe" @click="goScreen()">
      <image src="../../static/images/my/filterSe.png" mode=""></image>
    </view>
  </view>
</template>

<script>
import empty from "../../components/empty.vue";
export default {
  components: {
    empty,
  },
  data() {
    return {
      dataList: [],
      page: 1,
      limit: 10,
      pages: "",
      title: "",
      tabIndex: 0, //tab选中的索引
      filter: {
        education: "", //学历
        salaryRange: "", //薪资
        experience: "", //经验
        companyPeople: "", //公司规模
        industry: "", //行业
      },
      list: [
        {
          name: "我看过",
        },
        {
          name: "沟通过",
        },
        {
          name: "面试过",
        },
        {
          name: "收藏职位",
        },
      ],
    };
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: option.title,
    });
    uni.showLoading({
      title: "加载中",
    });
    this.title = option.title;
    if (option.title == "我的收藏") {
      this.getMyCollectionList();
    } else if (option.title == "浏览记录") {
      this.getDataList();
    } else {
      this.getDataLists();
    }
  },
  onUnload() {
    uni.removeStorageSync("browse");
  },
  watch: {
    filter: {
      handler() {
        this.page = 1;
        if (this.title == "我的收藏") {
          this.getMyCollectionList();
        } else if (this.title == "浏览记录") {
          this.getDataList();
        } else {
          this.getDataLists();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  onShow() {
    if (uni.getStorageSync("browse") && uni.getStorageSync("browse").length > 0) {
      let browse = uni.getStorageSync("browse");
      console.log(browse, "2222222222");
      browse.map((item) => {
        let arr = [];
        item.list.map((ite) => {
          if (ite.value != "不限") {
            arr.push(ite.value);
          }
        });
        switch (item.name) {
          case "学历":
            this.filter.education = arr.join(",");
            break;
          case "薪资":
            this.filter.salaryRange = arr.join(",");
            break;
          case "经验":
            this.filter.experience = arr.join(",");
            break;
          case "公司规模":
            this.filter.companyPeople = arr.join(",");
            break;
          case "行业":
            this.filter.industry = arr.join(",");
            break;
        }
      });
    } else {
      this.filter.education = ""; //学历
      this.filter.experience = ""; //经验
      this.filter.industry = ""; //行业
      this.filter.salaryRange = ""; //薪资
      this.filter.companyPeople = ""; //公司规模
    }
  },
  onReachBottom() {
    if (this.page < this.pages) {
      this.page += 1;
      if (this.title == "我的收藏") {
        this.getMyCollectionList();
      } else if (this.title == "浏览记录") {
        this.getDataList();
      } else {
        this.getDataLists();
      }
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    if (this.title == "我的收藏") {
      this.getMyCollectionList();
    } else if (this.title == "浏览记录") {
      this.getDataList();
    } else {
      this.getDataLists();
    }
  },
  methods: {
    // 去筛选
    goScreen() {
      uni.navigateTo({
        url: "/package/screen/screen?isBrowse=1",
      });
    },
    tabClick(e) {
      this.tabIndex = e;
    },
    /**
     * 我的收藏记录列表
     */
    getMyCollectionList() {
      let data = {
        page: this.page,
        limit: this.limit,
        education: this.filter.education, //学历
        salaryRange: this.filter.salaryRange, //薪资
        experience: this.filter.experience, //经验
        companyPeople: this.filter.companyPeople, //公司规模
        industry: this.filter.industry, //行业
      };
      this.$Request.getT("/app/myCollection/getMyCollectionListV2", data).then((res) => {
        uni.stopPullDownRefresh();
        uni.hideLoading();
        if (res.code == 0) {
          res.data.records.map((item) => {
            if (item.positionWelfare) {
              item.positionWelfare = item.positionWelfare.split(",");
            }
          });
          this.pages = res.data.pages;
          if (this.page == 1) {
            this.dataList = res.data.records;
          } else {
            this.dataList = [...this.dataList, ...res.data.records];
          }
        }
      });
    },
    gotoInfo(postPushId) {
      if (!postPushId) {
        uni.showToast({
          title: "岗位不存在",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/index/game/order?postPushId=" + postPushId,
      });
    },
    getDataLists() {
      let data = {
        page: this.page,
        limit: this.limit,
        userId: uni.getStorageSync("userId"),
        education: this.filter.education, //学历
        salaryRange: this.filter.salaryRange, //薪资
        experience: this.filter.experience, //经验
        companyPeople: this.filter.companyPeople, //公司规模
        industry: this.filter.industry, //行业
      };
      this.$Request.getT("/app/sendRecord/getMyRecordListV2", data).then((res) => {
        uni.stopPullDownRefresh();
        uni.hideLoading();
        if (res.code == 0) {
          res.data.records.map((item) => {
            if (item.positionWelfare) {
              item.positionWelfare = item.positionWelfare.split(",");
            }
          });
          this.pages = res.data.pages;
          if (this.page == 1) {
            this.dataList = res.data.records;
          } else {
            this.dataList = [...this.dataList, ...res.data.records];
          }
        }
      });
    },
    getDataList() {
      let data = {
        page: this.page,
        limit: this.limit,
        education: this.filter.education, //学历
        salaryRange: this.filter.salaryRange, //薪资
        experience: this.filter.experience, //经验
        companyPeople: this.filter.companyPeople, //公司规模
        industry: this.filter.industry, //行业
        // browseType:1
      };
      this.$Request.getT("/app/userBrowse/selectMyBrowseV2", data).then((res) => {
        uni.stopPullDownRefresh();
        uni.hideLoading();
        if (res.code == 0) {
          res.data.records.map((item) => {
            if (item.positionWelfare) {
              item.positionWelfare = item.positionWelfare.split(",");
            } else {
              item.positionWelfare = [];
            }
          });
          this.pages = res.data.pages;
          if (this.page == 1) {
            this.dataList = res.data.records;
          } else {
            this.dataList = [...this.dataList, ...res.data.records];
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #fff;
}

.filterSe {
  position: fixed;
  bottom: 10vh;
  right: 30rpx;

  image {
    width: 100rpx;
    height: 100rpx;
    // border-radius: 50%;
  }
}
.tab-list {
  margin-bottom: 20rpx;
}
.gwList {
  width: 100%;

  .gwList-box {
    width: 686rpx;
    height: 100%;

    .gwList-box-item {
      width: 100%;
      box-sizing: border-box;
      border: 1rpx solid rgba(227, 231, 236, 1);
      border-radius: 12rpx;
      background: #fdfdfd;
      padding: 36rpx;
      margin-bottom: 20rpx;
    }

    .gwList-box-item-box {
      width: 623rpx;
      height: 100%;

      .gwList-box-item-box-title {
        text:nth-of-type(1) {
          color: #171725;
          font-family: DM Sans;
          font-size: 32rpx;
          font-weight: 700;
          line-height: 48rpx;
        }

        text:nth-of-type(2) {
          color: #016bf6;
          font-family: DM Sans;
          font-size: 24rpx;
          font-weight: 700;
          line-height: 40rpx;
        }
      }

      .gwList-box-item-box-label {
        display: flex;
        align-items: center;
        gap: 8rpx;
        .gw-tag {
          /* 自动布局 */
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 8rpx;
          border-radius: 8rpx;
          box-sizing: border-box;
          background: #c6c6c61a;
          color: rgba(153, 153, 153, 1);
          font-family: DM Sans;
          font-size: 20rpx;
          font-weight: 400;
          line-height: 20rpx;
        }
      }

      .gwList-box-item-box-name {
        color: #9ca4ab;
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 40rpx;
        padding: 6rpx 0;
        box-sizing: border-box;
        text {
          margin-right: 8rpx;
        }
        // text:nth-of-type(1) {
        //   width: 450rpx;
        // }
      }
      .gwList-box-item-box-info {
        font-size: 26rpx;
        padding-top: 20rpx;
        box-sizing: border-box;
        color: #9ca4ab;
        font-family: DM Sans;
        font-size: 16rpx;
        font-weight: 400;
        line-height: 40rpx;
        text-align: left;
        .gwList-box-item-box-info-l {
          .info-tag {
            border-radius: 8rpx;
            background: rgba(236, 225, 253, 1);
            padding: 8rpx;
            box-sizing: border-box;
            font-family: DM Sans;
            color: #7659d2;
            font-size: 16rpx;
            font-weight: 400;
            line-height: 20rpx;
            margin-left: 8rpx;
          }
          .user-info-img {
            width: 40rpx;
            height: 40rpx;
            border: 1rpx solid rgba(240, 240, 240, 1);
            border-radius: 50%;
            margin-right: 8.62rpx;
          }
        }

        .gwList-box-item-box-info-r {
          max-width: 340rpx;
        }
      }
    }
  }
}
.qz-record {
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  .qz-title {
    font-family: DM Sans;
    font-size: 60rpx;
    color: rgba(51, 51, 51, 1);
    font-weight: 800;
  }
  .qz-desc {
    color: rgba(102, 102, 102, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin-top: 20rpx;
  }
}
</style>