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)"
          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||item.postPush&&item.postPush.stationName }}</text>
              <text>{{ item.salaryRange||item.postPush&&item.postPush.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-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-for="(ite, ind) in item.postPush&&item.postPush.positionWelfare&&item.postPush.positionWelfare.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 
			        >{{ item.userEntity&&item.userEntity.userName||'匿名' }}·{{item.hr&&item.hr.hrPosition||'创始人'}}</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-info flex justify-between align-center padding0">
				  <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="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="gwList-box-item-box-name">
						<text>{{ item.postPush&&item.postPush.ruleClassifyName ? item.postPush.ruleClassifyName : "匿名" }}</text>·<text>{{ item.postPush&&item.postPush.salaryRange }}</text>
					  </view>
					  <view class="gwList-box-item-box-info-r">
					    {{ item.interviewDateTime&&item.interviewDateTime.substring(0,10)||''}}  <text>{{item.detailTime}}</text>
					  </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-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 hidden 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: "面试",
        },
        {
          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.getDataList();
    } 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==4) {
	  		  this.title = "我的收藏"
	    this.getMyCollectionList();
	  } else if (this.tabIndex==0) {
	  		  this.title = "浏览记录"
	    this.getDataList();
	  } else if(this.tabIndex==2) {
	  		  this.title = "投递记录"
	    this.getDataLists();
	  }else if(this.tabIndex==1) {
	  		  this.title = "沟通记录"
	    this.getDataLists(1);
	  }else if(this.tabIndex==3) {
	  		  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=4
	    this.getMyCollectionList();
	  } else if (this.title == "浏览记录") {
		  this.tabIndex=0
	    this.getDataList();
	  } else if (this.title == "投递记录"){
		  this.tabIndex=2
	    this.getDataLists();
	  }else if (this.title == "沟通记录"){
		  this.tabIndex=1
	    this.getDataLists(1);
	  }else if (this.title == "面试记录"){
		  this.tabIndex=3
	    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 = 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(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 = 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;
          }
		  .company-info-img{
			  width: 100rpx;
			  height: 100rpx;
			  border: 1rpx solid rgba(240, 240, 240, 1);
			  border-radius: 50%;
			  margin-right: 30rpx;
		  }
        }

        .gwList-box-item-box-info-r {
          max-width: 340rpx;
		  text{
			  margin-left:10rpx
		  }
        }
		.companyRight{
			width: 100%;
			.companyName{
				font-size: 26rpx;
				color: #353535;
				margin-right: 20rpx;
			}
		}
      }
	  .padding0{
		  padding-top:0
	  }
    }
  }
}
.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>