yizhizan-h5/my/jilu/jilu.vue

<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
  <view class="page-box">
    <navBar title="面试记录" color="#000" />
    <view class="page-content">
      <view class="sticky-tabs">
        <me-tabs
          v-model="tabIndex"
          nameKey="name"
          :tabs="tabs"
          @change="tabChange"
        ></me-tabs>
      </view>

      <view>
        <view class="box" v-for="(item, index) in goods" :key="index" @click="goNav('bossMianshiDetail?recordId='+item.recordId)">
          <view class="flex align-center justify-between padding-lr padding-tb-sm">
            <view style="color: #016bf6; font-size: 28rpx; font-weight: bold">{{
              item.statusName
            }}</view>
            <view class="text-sm" style="color: #999999">{{ item.createTime }}</view>
          </view>
          <view style="width: 100%; height: 1rpx; background: #eeeeee"></view>
          <view class="padding-lr padding-tb-sm">
            <view class="flex align-center justify-between">
              <view class="text-bold" style="color: #1f1f1f; font-size: 38rpx">
                {{ item.postPush ? item.postPush.stationName : "" }}
              </view>
              <view class="" style="color: #016bf6; font-size: 38rpx"
                ><text class="text-lg text-bold">{{
                  item.postPush ? item.postPush.salaryRange : ""
                }}</text></view
              >
            </view>
            <view class="flex" style="margin-top: 20rpx">
              <view class="" style="width: 25%"> 面试人： </view>
              <view class="" style="width: 75%">
                {{ item.userEntity ? item.userEntity.userName : "" }}
              </view>
            </view>
            <view class="flex" style="margin-top: 10rpx">
              <view class="" style="width: 25%"> 面试时间： </view>
              <view class="" style="width: 75%">
                {{ item.interviewDateTime }}
              </view>
            </view>
            <view class="flex" style="margin-top: 10rpx">
              <view class="" style="width: 25%"> 面试地点： </view>
              <view class="" style="width: 75%">
                {{ item.detailedAddress }}
              </view>
            </view>
            <view class="flex" style="margin-top: 10rpx">
              <view class="" style="width: 25%"> 面试备注： </view>
              <view class="" style="width: 75%">
                {{ item.remarks }}
              </view>
            </view>
          </view>
          <view style="width: 100%; height: 1rpx; background: #eeeeee"> </view>
          <view class="flex align-center padding-tb justify-end padding-lr">
            <view class="flex align-center">
              <view class="btn" @click.stop="goInfo(item)"> 简历详情</view>
            </view>
            <view class="flex align-center">
              <view
                class="btn"
                v-if="item.status == 1 || item.status == 2"
                @click.stop="updataServeType(item)"
              >
                修改内容</view
              >
            </view>
          </view>
        </view>
      </view>
      <empty v-if="goods.length == 0" />

      <u-popup
        v-model="mianshiShow"
        mode="bottom"
        z-index="998"
        :mask-close-able="false"
        border-radius="14"
        @close="cleanMs"
        :closeable="true"
      >
        <view class="mianshiTitle">面试邀请</view>
        <view class="mianshiTime flex justify-center">
          <view class="mianshiTime-box flex justify-between align-center">
            <view class=""> 面试时间 </view>
            <view class="flex align-center mianshiTime-box-ti">
              <u-input
                disabled
                v-model="miamshi.interviewDateTime"
                @click="msTime = true"
                type="text"
                placeholder="请选择面试时间"
              />
              <u-icon
                name="arrow-right"
                style="margin-left: 10rpx"
                color="#016BF6"
                size="28"
                @click="msTime = true"
              ></u-icon>
            </view>
          </view>
        </view>
        <view class="mianshiTime flex justify-center">
          <view class="mianshiTime-box flex justify-between align-center">
            <view class=""> 面试地址 </view>
            <view class="flex align-center mianshiTime-box-ti">
              <u-input
                disabled
                @click="goMap()"
                v-model="miamshi.detailedAddress"
                type="text"
                placeholder="请选择面试地址"
              />
              <u-icon
                name="arrow-right"
                style="margin-left: 10rpx"
                @click="goMap()"
                color="#016BF6"
                size="28"
              ></u-icon>
            </view>
          </view>
        </view>
        <view class="mianshiTime flex justify-center">
          <view class="mianshiTime-box" style="border: none">
            <view class=""> 备注 </view>
            <view class="flex align-center mianshiTime-box-ti">
              <u-input
                v-model="miamshi.remarks"
                type="textarea"
                input-align="left"
                style="
                  padding: 10rpx;
                  background-color: #f2f2f7;
                  height: 200rpx;
                  overflow: hidden;
                  border-radius: 14rpx;
                  width: 100%;
                "
                :auto-height="false"
              />
            </view>
          </view>
        </view>
        <view class="btnm flex justify-center">
          <view class="btn-box flex justify-around align-center">
            <view class="btn-close btnItem" @click="mianshiShow = false"> 取消 </view>
            <view class="btn-sub btnItem" @click="submitMs()"> 确认 </view>
          </view>
        </view>
      </u-popup>
      <u-toast ref="uToast" />
      <u-picker
        v-model="msTime"
        mode="time"
        :params="params"
        @confirm="mianshiConfirm"
        confirm-color="#016BF6"
      >
      </u-picker>
    </view>
  </view>
</template>

<script>
import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
import empty from "@/components/empty.vue";
import navBar from "@/components/nav-bar/index.vue";

export default {
  components: {
    meTabs,
    empty,
	navBar
  },
  data() {
    return {
      mianshiShow: false, //约面试弹窗
      msshow: false,
      params: {
        year: false,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false,
      },
      msTime: false,
      miamshi: {
        interviewDateTime: "", //面试时间
        companyId: "", //公司id
        remarks: "", //面试备注
        userId: "", //面试者id
        postPushId: "", //岗位id
        province: "", //省
        city: "", //市
        county: "", //区
        lng: "", //经度
        lat: "", //纬度
        detailedAddress: "", //详细地址
        recordId: "", //id
      },
      count: 0,
      goods: [], // 数据列表
      tabs: [
        {
          name: "全部",
          status: 0,
        },
        {
          name: "待接受",
          status: 1,
        },
        {
          name: "已接受",
          status: 2,
        },
        {
          name: "已拒绝",
          status: 3,
        },
        {
          name: "已过期",
          status: 4,
        },
      ],
      tabIndex: 0, // tab下标
      page: 1,
      limit: 10,
    };
  },
  onLoad(option) {
    this.$queue.showLoading("加载中...");
  },
  onShow() {
    this.getlist();
  },
  methods: {
    goInfo(item) {
      console.log(item, "1111111111111");
      if (item && item.resumesId) {
        uni.navigateTo({
          url:'/pages/talentSearch/resumeDetail?resumesId='+item.resumesId+'&postPushId='+item.postPush.postPushId
        });
      } else {
        uni.showToast({
          title: "用户不存在",
          icon: "none",
        });
      }
    },
    updataServeType(item) {
		return uni.navigateTo({
								url:`/pages/msg/interviewInvitation?recordId=${item.recordId}&postPushId=${item.postPush.postPushId}&resumesId=${item.resumesId}&interviewerId=${item.userEntity.userId}`
							})
      this.miamshi = {
        interviewDateTime: item.interviewDateTime, //面试时间
        companyId: item.companyId, //公司id
        remarks: item.remarks, //面试备注
        userId: item.userId, //面试者id
        postPushId: item.postPushId, //岗位id
        province: item.province, //省
        city: item.city, //市
        county: item.county, //区
        lng: item.lng, //经度
        lat: item.lat, //纬度
        detailedAddress: item.detailedAddress, //详细地址
        recordId: item.recordId, //id
      };
      this.mianshiShow = true;
    },
    submitMs() {
      if (!this.miamshi.interviewDateTime) {
        this.$refs.uToast.show({
          title: "请选择面试时间",
          type: "default",
          position: "bottom",
        });
        return;
      }
      if (!this.miamshi.detailedAddress) {
        this.$refs.uToast.show({
          title: "请选择面试地点",
          type: "default",
          position: "bottom",
        });
        return;
      }
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定修改面试邀请吗？",
        confirmColor: "#016BF6",
        complete(ret) {
          if (ret.confirm) {
            that.$Request
              .postJson("/app/interviewRecord/saveInterview", that.miamshi)
              .then((res) => {
                if (res.code == 0) {
                  uni.showToast({
                    title: "面试邀请已修改",
                  });
                  that.mianshiShow = false;
                  that.page = 1;
                  that.getlist();
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                  });
                }
              });
          }
        },
      });
    },
    // 点击调起地图选择位置
    goMap() {
      let that = this;
      uni.chooseLocation({
        success: function (res) {
          let arrress = res.address;
          let reg = /.+?(省|市|自治区|自治州|县|区)/g;
          let adds = arrress.match(reg);
          console.log(adds);
          that.miamshi.province = adds[0];
          that.miamshi.city = adds[1];
          that.miamshi.county = adds[2];
          that.miamshi.detailedAddress = res.address + "" + res.name;
          that.miamshi.lat = res.latitude;
          that.miamshi.lng = res.longitude;
        },
      });
    },
    //选择面试时间
    mianshiConfirm(e) {
      //获取当前时间的年份
      let date = new Date();
      let year = date.getFullYear();
      this.miamshi.interviewDateTime =
        year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":00";
    },
    //关闭弹窗的时候清空表单的值
    cleanMs() {
      this.miamshi = {
        interviewDateTime: "", //面试时间
        companyId: "", //公司id
        remarks: "", //面试备注
        userId: "", //面试者id
        postPushId: "", //岗位id
        province: "", //省
        city: "", //市
        county: "", //区
        lng: "", //经度
        lat: "", //纬度
        detailedAddress: "", //详细地址
      };
    },
    getlist() {
      let data = {
        status: this.tabIndex == 0 ? "" : this.tabIndex,
        page: this.page,
        limit: this.limit,
        companyId: uni.getStorageSync("companyId"),
      };
      this.$Request.getT("/app/interviewRecord/interviewList", data).then((res) => {
        if (res.code == 0) {
          if (this.page == 1) this.goods = []; //如果是第一页需手动制空列表
          res.data.records.forEach((ret) => {
            if (ret.status == 1) {
              ret.statusName = "待接受";
            } else if (ret.status == 2) {
              ret.statusName = "已接受";
            } else if (ret.status == 3) {
              ret.statusName = "已拒绝";
            } else if (ret.status == 4) {
              ret.statusName = "已过期";
            }
            this.goods.push(ret);
          });
          this.count = res.data.total;
        }
        uni.hideLoading();
      });
    },
    // 切换菜单
    tabChange(e) {
      console.log(e);
      this.tabIndex = e;
      this.goods = []; // 置空列表,显示加载进度条
      this.getlist();
    },
    goNav(url) {
      uni.navigateTo({
        url,
      });
    },
  },
  onReachBottom: function () {
    if (this.goods.length == this.count) {
      uni.showToast({
        title: "已经到底了",
        icon: "none",
      });
    } else {
      this.page = this.page + 1;
      this.getlist();
    }
  },
  onPullDownRefresh: function () {
    this.page = 1;
    this.getlist();
  },
};
</script>

<style lang="scss" scoped>
/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
.sticky-tabs {
  z-index: 990;
  position: sticky;
  top: var(--window-top);
  // background-color: #fff;
}
.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;
  }
}
.avatorm {
  width: 100%;
  // height: 100rpx;
  margin-top: 20rpx;
  color: #000;

  .avatorm-box {
    width: 90%;
    height: 100%;

    .avatorm-box-item {
      margin-bottom: 10rpx;

      .avatorm-box-item-t {
        width: 30%;
      }

      .avatorm-box-item-r {
        width: 70%;
      }
    }
  }
}

.mssTitle {
  width: 100%;
  margin-top: 30rpx;
  text-align: center;
  font-size: 30rpx;
  color: #000;
  font-weight: bold;
}

.btnm {
  width: 100%;
  margin-top: 20rpx;
  height: 80rpx;
  margin-bottom: 100rpx;

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

    .btnItem {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200rpx;
      height: 100%;
      border-radius: 14rpx;
    }

    .btn-close {
      color: #016bf6;
      border: 1rpx solid #016bf6;
    }

    .btn-sub {
      color: #ffffff;
      background-color: #016bf6;
    }
  }
}

.mianshiTime {
  width: 100%;
  margin-top: 20rpx;

  .mianshiTime-box {
    padding-bottom: 20rpx;
    width: 686rpx;
    height: 100%;
    color: #000000;
    border-bottom: 1rpx solid #f2f2f7;

    .mianshiTime-box-ti {
      height: 100%;
      margin-top: 20rpx;
    }
  }
}

.mianshiTitle {
  width: 100%;
  margin-top: 30rpx;
  font-size: 30rpx;
  text-align: center;
  font-weight: bold;
  color: #000000;
}

page {
  background-color: #f7f7f7;
}

.bg {
  background-color: #ffffff;
}

.box {
  background: #ffffff;
  border-radius: 24rpx;
  margin: 30rpx;
}

.argrtn {
  background: #f6f6f6;
  color: #666666;
  font-size: 24rpx;
  border-radius: 8rpx;
  padding: 5rpx 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.btn {
  border: 1px solid #016bf6;
  border-radius: 30px;
  color: #016bf6;
  padding: 14rpx 35rpx;
  margin-left: 20rpx;
}
</style>