yizhizan-h5/package/records/records.vue

<template>
  <view>
	  <nav-bar title="求职记录"></nav-bar>
    <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)" v-for="(item, index) in dataList"
          :key="index">
          <view class="gwList-box-item-box">
            <view v-if="item && title != '面试记录'" class="gwList-box-item-box-title flex justify-between align-center">
              <text>{{ item.ruleClassifyName || item.postPush && item.postPush.ruleClassifyName }}</text>
              <text>
				{{ item.salaryRange || item.postPush && item.postPush.salaryRange }}
				<template v-if="item.salaryTimes || (item.postPush && item.postPush.salaryTimes)"> · {{ item.salaryTimes || item.postPush.salaryTimes }}</template>
			</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-if="item.company && item.company.workRestTime">{{ item.company.workRestTime }}
                </view>
                <view class="gw-tag" v-for="(ite, ind) in formatWelfare(item, 'welfareTag', ';')" :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.hrAvatar ? item.hrAvatar : '/static/logo.png'" class="user-info-img"
                    mode="aspectFill"></image>
                  <text class="user-info-name">{{ item.hrName }}·{{ item.hrPosition }}</text>
                  <!-- <view class="info-tag" v-if="item.salaryTimes">{{ item.salaryTimes }}</view> -->
                </view>
                <view class="gwList-box-item-box-info-r address-text">
                  <!-- {{ 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-if="item.company && item.company.workRestTime">{{ item.company.workRestTime }}
                </view>
                <view class="gw-tag" v-for="(ite, ind) in formatWelfare(item, 'welfareTag', ';')"
                  :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" class="user-info-name">{{ item.companyLegalPerson }}·创始人</text>
                  <!-- <view class="info-tag" v-if="item.salaryTimes">{{ item.salaryTimes }}</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.company && item.company.companyName ? item.company.companyName : "匿名公司" }}</text>
                <text>{{ item.company && item.company.companyPeople ? item.company.companyPeople : 0 }}</text>
              </view>
              <view class="gwList-box-item-box-label flex align-center flex-wrap">
                <view class="gw-tag" v-if="item.company && item.company.workRestTime">{{ item.company.workRestTime }}
                </view>
                <view class="gw-tag" v-for="(ite, ind) in (item.postPush && item.postPush.welfareTag ? item.postPush.welfareTag.split(';') : [])"
                  :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.company && item.company.companyLogo ? item.company.companyLogo : '../../static/logo.png'"
                    class="user-info-img" mode=""></image>
                  <text class="user-info-name">{{ item.userEntity && item.userEntity.userName || '匿名'
                  }}·{{ item.hr && item.hr.hrPosition || '创始人' }}</text>
                  <!-- <view class="info-tag" v-if="item.postPush && item.postPush.salaryTimes">{{ item.postPush.salaryTimes
                  }}
                  </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-info flex justify-between align-center padding0">
				<view class="logo-wrapper flex align-center justify-center">
				  <image
					:src="item.company && item.company.companyLogo ? item.company.companyLogo : '../../static/logo.png'"
					class="company-info-img" mode=""></image>						
				</view>
                <view class="companyRight">
                  <view class="gwList-box-item-box-info-l flex justify-between align-center">

                    <text class="companyName">{{ item.company && item.company.companyName || '匿名公司' }}</text>
                    <view :class="['info-tag']">
                      {{ item.status == 1 ? '待接受' : (item.status == 2 ? '已同意' : (item.status == 3 ? '已拒绝' : '已过期')) }}
                    </view>
                  </view>
                  <view class="position-base-info">
                    <text>{{ item.postPush && item.postPush.ruleClassifyName ? item.postPush.ruleClassifyName : "匿名"
                    }}</text>·<text>{{ item.postPush && item.postPush.salaryRange }}</text>
                  </view>
				  <view class="main-tip-text">
					  {{ item.interviewDateTime && item.interviewDateTime.substring(0, 10) || '' }}
					  <text>{{ item.detailTime }}</text>
				  </view>
				  <view class="main-tip-text">{{ item.address }}</view>
                 <!-- <view class="gwList-box-item-box-label flex align-center flex-wrap">
                    <view class="gw-tag" v-if="item.company && item.company.workRestTime">{{ item.company.workRestTime
                    }}
                    </view>
                    <view class="gw-tag"
                      v-for="(ite, ind) in (item.company && item.company.welfare ? item.company.welfare.split(';') : [])"
                      :key="ind">{{
                        ite }}</view>
                  </view> -->
                  <!-- <view class="gwList-box-item-box-info-r">
                    {{ item.interviewDateTime && item.interviewDateTime.substring(0, 10) || '' }}
                    <text>{{ item.detailTime }}</text>
                  </view> -->
                  <!-- <view class="gwList-box-item-box-info-r">
                    {{ item.address }}
                  </view> -->
                </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-if="item.company && item.company.workRestTime">{{ item.company.workRestTime }}
                </view>
                <view class="gw-tag" v-for="(ite, ind) in formatWelfare(item, 'welfareTag', ';')"
                  :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.hrAvatar ? item.hrAvatar : '/static/logo.png'" class="user-info-img"
                    mode="aspectFill"></image>
                  <text class="user-info-name">{{ item.hrName }}·{{ item.hrPosition }}</text>

                  <!-- <view class="info-tag" v-if="item.salaryTimes">{{ item.salaryTimes }}</view> -->
                </view>
                <view class="gwList-box-item-box-info-r address-text">
                  <!-- {{ item.county }} -->
                  {{ item.address }}
                </view>
              </view>
            </block>
          </view>
        </view>
      </view>
    </view>

    <!-- 暂无数据 -->
    <view class="gwList" v-else>
      <empty />
    </view>
    <!-- 筛选悬浮 -->
    <view hidden class="filterSe" @click="goScreen()">
      <image src="../../static/images/my/filterSe.png" mode=""></image>
    </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,
      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;
    var that = this
    that.getFilter()
    uni.$on('updateRecord', function () {
      that.page = 1;
      that.getFilter()
    })
  },
  onUnload() {
    uni.removeStorageSync("browse");
    uni.$off('updateRecord')
  },
  onReachBottom() {
    if (this.page < this.pages) {
      this.page += 1;
      if (this.title == "我的收藏") {
        this.getMyCollectionList();
      } else if (this.title == "浏览记录") {
        this.getDataList();
      } else if (this.title == "投递记录") {
        this.getDataLists();
      } else if (this.title == "沟通记录") {
        this.getDataLists(1);
      } else if (this.title == "面试记录") {
        this.getDataLists(3);
      }
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    if (this.title == "我的收藏") {
      this.getMyCollectionList();
    } else if (this.title == "投递记录") {
      this.getDataLists();
    } else if (this.title == "沟通记录") {
      this.getDataLists(1);
    } else if (this.title == "面试记录") {
      this.getDataLists(3);
    }
  },
  methods: {
    // 去筛选
    goScreen() {
      uni.navigateTo({
        url: "/package/screen/screen?isBrowse=1",
      });
    },
    tabClick(e) {
      this.tabIndex = e;
      if (this.tabIndex == 3) {
        this.title = "我的收藏"
        this.getMyCollectionList();
      } else if (this.tabIndex == 1) {
        this.title = "投递记录"
        this.getDataLists();
      } else if (this.tabIndex == 0) {
        this.title = "沟通记录"
        this.getDataLists(1);
      } else if (this.tabIndex == 2) {
        this.title = "面试记录"
        this.getDataLists(3);
      }
      /* if (e == 2) {
        uni.navigateTo({
          url: "/my/jilu/mianshiDetail",
        });
      } */
    },
    getFilter() {
      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 = ""; //公司规模
      }
      if (this.title == "我的收藏") {
        this.tabIndex = 3
        this.getMyCollectionList();
      } else if (this.title == "投递记录") {
        this.tabIndex = 1
        this.getDataLists();
      } else if (this.title == "沟通记录") {
        this.tabIndex = 0
        this.getDataLists(1);
      } else if (this.title == "面试记录") {
        this.tabIndex = 2
        this.getDataLists(3);
      }
    },
    /**
     * 我的收藏记录列表
     */
    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 = this.formatWelfare(item);
            }
          });
          this.pages = res.data.pages;
          if (this.page == 1) {
            this.dataList = res.data.records;
          } else {
            this.dataList = [...this.dataList, ...res.data.records];
          }
        }
      });
    },
	formatWelfare(data, key = 'positionWelfare', s = ',') {
		if (!data?.positionWelfare) return []
		return data[positionWelfare]?.split(s) || []
	},
    gotoInfo(item) {
      if (this.title == "面试记录") {
        if (item.status != 2)
          return this.$queue.showToast('已同意方可查看详情')
        uni.navigateTo({
          url: "/my/jilu/mianshiDetail?recordId=" + item.recordId,
        });
        return
      }
      var postPushId = item.postPushId
      if (!postPushId) {
        uni.showToast({
          title: "岗位不存在",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/index/game/order?postPushId=" + postPushId,
      });
    },
    getDataLists(types = 0) {
      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, //行业
      };
      let action = '/app/sendRecord/getMyRecordListV2'
      switch (types) {
        case 0:
          break;
        case 1:
          action = '/app/sendRecord/getConversationList'
          break;
        case 3:
          action = '/app/interviewRecord/interviewList'
          break;

      }
      this.$Request.getT(action, data).then((res) => {
        uni.stopPullDownRefresh();
        uni.hideLoading();
        if (res.code == 0) {
          res.data.records.map((item) => {
            if (item.positionWelfare) {
              item.positionWelfare = this.formatWelfare(item);
            }
          });
          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 = this.formatWelfare(item)
            } 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: 0 10rpx;
            flex-shrink: 0;
            // 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;
            flex-shrink: 0;
          }

          .user-info-name {
            white-space: nowrap;
          }
        }
		.address-text {
			text-align: right;
		}
		
		.logo-wrapper {
			align-self: flex-start;
			width: 96rpx;
			height: 96rpx;
			border-radius: 8px;
			background: rgba(246, 246, 246, 1);
			margin-right: 20rpx;
			
			.company-info-img {
			  width: 80rpx;
			  height: 80rpx;
			  border: 1px solid rgba(240, 240, 240, 1);
			  border-radius: 50%;
			}
		}

        .gwList-box-item-box-info-r {
          // max-width: 340rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          flex: 1;
		  margin-left: 30rpx;

          text {
            margin-left: 10rpx
          }
        }

        .companyRight {
          // width: 100%;
		  flex: 1;

          .companyName {
            margin-right: 20rpx;
			color: rgba(23, 23, 37, 1);
			font-size: 28rpx;
			font-weight: 400;
			line-height: 44rpx;
          }
		  .position-base-info {
			  color: rgba(120, 130, 138, 1);
			  font-size: 28rpx;
			  font-weight: 400;
			  line-height: 36rpx;
			  margin-top: 8rpx;
		  }
		  .main-tip-text {
			  color: rgba(1, 107, 246, 1);
			  font-family: DM Sans;
			  font-style: Regular;
			  font-size: 24rpx;
			  font-weight: 400;
			  line-height: 32rpx;
			  margin-top: 8rpx;
		  }
        }
      }

      .padding0 {
        padding-top: 0
      }
    }
  }
}

.qz-record {
  padding: 20rpx 40rpx;
  box-sizing: border-box;

  .qz-title {
	color: rgba(51, 51, 51, 1);
	font-family: DM Sans;
	font-style: Bold;
	font-size: 48rpx;
	font-weight: 700;
	line-height: 60rpx;
  }

  .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>