yizhizan-h5/package/myLove/myLove.vue

<template>
  <view class="page-box">
    <navBar title="我的收藏" color="#000" />
    <view class="page-content">
      <view class="qyList flex justify-center">
        <view class="qyList-box">
          <view
            class="qyList-box-item flex justify-center"
            v-for="(item, index) in dataList"
            :key="index"
            @click="goNav('/pages/index/game/orderDet?resumesId=' + item.resumesId)"
          >
            <view class="qyList-box-item-box">
              <view class="qyList-box-item-info flex justify-between align-center">
                <view class="qyList-box-item-info-l">
                  <view
                    class=""
                    style="color: #212121; font-size: 38rpx; font-weight: 800"
                  >
                    {{ item.resumesName }}
                  </view>
                  <view
                    class="flex align-center flex-wrap"
                    style="color: #999999; font-size: 26rpx; margin-top: 10rpx"
                  >
                    <text>{{ item.resumesAge }}岁</text>
                    <text style="margin-left: 20rpx; margin-right: 20rpx">|</text>
                    <text>{{ item.resumesWorkExperience }}</text>
                    <text style="margin-left: 20rpx; margin-right: 20rpx">|</text>
                    <text>{{ item.school }}</text>
                    <text style="margin-left: 20rpx; margin-right: 20rpx">|</text>
                    <text>期望{{ item.resumesCompensation }}</text>
                  </view>
                </view>
                <view class="qyList-box-item-info-r">
                  <image
                    :src="item.avatar ? item.avatar : '../../static/logo.png'"
                    style="width: 95rpx; height: 95rpx; border-radius: 50%"
                    mode=""
                  ></image>
                </view>
              </view>
              <view class="qyList-box-item-job flex align-center">
                <u-icon
                  name="heart-fill"
                  color="#016BF6"
                  size="30"
                  style="margin-right: 16rpx"
                >
                </u-icon>
                期望岗位:{{ item.resumesPost }}
              </view>
              <view
                v-if="item.resumesCompanyList && item.resumesCompanyList.length > 0"
                class="qyList-box-item-job flex align-center"
              >
                <image
                  src="../../static/images/qi.png"
                  style="width: 30rpx; height: 32rpx; margin-right: 16rpx"
                  mode=""
                ></image>
                {{ item.resumesCompanyList[0].resumesTitle }} /
                {{ item.resumesCompanyList[0].resumesPost }}
              </view>
              <view class="qyList-box-item-rem" v-if="item.resumesDetails">
                优势:{{ item.resumesDetails }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <empty v-if="dataList.length == 0" />
      <!-- 筛选悬浮 -->
      <view class="filterSe" @click="goScreen()">
        <image src="../../static/images/my/filterSe.png" mode=""></image>
      </view>
    </view>
  </view>
</template>

<script>
import empty from "../../components/empty.vue";
import navBar from "@/components/nav-bar/index.vue";
export default {
  components: {
    empty,
    navBar,
  },
  data() {
    return {
      dataList: [],
      page: 1,
      pages: 1,
      limit: 10,
      myId: "",
      isVip: false,
      filter: {
        resumesCompensation: "", //薪资
        resumesEducation: "", //学历
        resumesWorkExperience: "", //经验
        industryName: "", //行业
      },
    };
  },
  onLoad(e) {
    this.$queue.showLoading("加载中...");
    this.myId = uni.getStorageSync("userId");
    this.getBrowseList();
  },
  watch: {
    filter: {
      handler() {
        this.page = 1;
        this.getBrowseList();
      },
      deep: true,
      immediate: true,
    },
  },
  onUnload() {
    uni.removeStorageSync("isCompyBrowse");
  },
  onShow() {
    if (
      uni.getStorageSync("isCompyBrowse") &&
      uni.getStorageSync("isCompyBrowse").length > 0
    ) {
      let isCompyBrowse = uni.getStorageSync("isCompyBrowse");
      isCompyBrowse.map((item) => {
        let arr = [];
        item.list.map((ite) => {
          if (ite.value != "不限") {
            arr.push(ite.value);
          }
        });
        switch (item.name) {
          case "学历":
            this.filter.resumesEducation = arr.join(",");
            break;
          case "薪资":
            this.filter.resumesCompensation = arr.join(",");
            break;
          case "经验":
            this.filter.resumesWorkExperience = arr.join(",");
            break;
          case "行业":
            this.filter.industryName = arr.join(",");
            break;
        }
      });
    } else {
      this.filter.resumesEducation = ""; //学历
      this.filter.resumesWorkExperience = ""; //经验
      this.filter.industryName = ""; //行业
      this.filter.resumesCompensation = ""; //薪资
    }
  },
  methods: {
    // 去筛选
    goScreen() {
      uni.navigateTo({
        url: "/package/screen/screen?isCompyBrowse=1",
      });
    },
    goNav(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // 足迹
    getBrowseList() {
      let data = {
        page: this.page,
        limit: this.limit,
        resumesCompensation: this.filter.resumesCompensation, //薪资
        resumesEducation: this.filter.resumesEducation, //学历
        resumesWorkExperience: this.filter.resumesWorkExperience, //经验
        industryName: this.filter.industryName, //行业
      };
      this.$Request
        .get("/app/myCollection/getCompanyCollectionList", data)
        .then((res) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          if (res.code == 0) {
            this.pages = res.data.pages;
            if (this.page == 1) {
              this.dataList = res.data.records;
            } else {
              this.dataList = [...this.dataList, ...res.data.records];
            }
            console.log(this.dataList);
          } else {
            console.log(res.msg);
          }
        });
    },
    // 跳转订单
    goDetail(e) {
      uni.navigateTo({
        url: "/pages/index/game/orderDet?resumesId=" + e.resumes.resumesId,
      });
    },
    // 删除
    delData(e) {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定删除吗？",
        confirmColor: "#016BF6",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            let data = {
              id: e.id,
            };
            that.$Request.post("/app/userBrowse/deleteMyBrowse", data).then((res) => {
              if (res.code == 0) {
                uni.showToast({
                  title: "删除成功！",
                  icon: "none",
                });
                that.getBrowseList();
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
  onReachBottom: function () {
    if (this.page < this.pages) {
      this.page += 1;
      this.getBrowseList();
    }
  },
  onPullDownRefresh: function () {
    this.page = 1;
    this.getBrowseList();
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f7;
}
.page-box {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .page-content {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
  }
}

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

  image {
    width: 100rpx;
    height: 100rpx;
    // border-radius: 50%;
  }
}

.qyList {
  width: 100%;
  height: auto;
  margin-top: 20rpx;

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

    .qyList-box-item {
      width: 100%;
      // height: 400rpx;
      padding-bottom: 40rpx;
      background-color: #ffffff;
      border-radius: 24rpx;
      margin-bottom: 20rpx;

      .qyList-box-item-box {
        width: 626rpx;
        height: 100%;
      }

      .qyList-box-item-info {
        margin-top: 40rpx;
      }

      .qyList-box-item-job {
        color: #121212;
        font-size: 28rpx;
        font-weight: 500;
        margin-top: 20rpx;
      }

      .qyList-box-item-rem {
        color: #999999;
        font-size: 26rpx;
        margin-top: 20rpx;
      }
    }
  }
}
</style>