yizhizan-h5/my/jilu/mianshiDetail.vue

<template>
  <view class="ms-detail">
    <view class="detail-bg"></view>
    <nav-bar title="面试详情"></nav-bar>
    <view class="detail-index">
      <view class="detail-title">
		<block v-if="info.status==2">
		  <block v-if="currentStep === 1&&info.restHour>3">
	  {{info.statusText}} {{info.interviewDate}}
	  </block>
	  <block v-else-if="currentStep === 1&&info.restHour<=3&&info.restHour>0">
		  {{info.restHour*60}}分钟后面试
	  </block>
	  <block v-else-if="currentStep === 1&&info.restHour==0">
	  		  面试已开始，待签到
	  </block>
	  <block v-else-if="currentStep === 2">
	  		  面试已签到
	  </block>
	  <block v-else-if="currentStep === 3">
	  		  面试中
	  </block>
	  <block v-else-if="currentStep === 4">
	  		  面试已完成
	  </block>
	  </block>
	  <block v-else-if="info.status==3">
		  面试已取消
		</block>
	  </view>
      <view class="detail-item">
        <view class="user-title">
          <view class="user-img">
            <image :src="info.company&&info.company.companyLogo||'../../static/images/geren.png'" mode="aspectFill" />
          </view>
          <view class="user-name-box">
            <view class="user-name-com">{{info.company&&info.company.companyName||'匿名公司'}}</view>
            <view class="user-info-img">
              <image :src="info.hr&&info.hr.hrImg||'../../static/images/geren.png'" mode="aspectFill" />
              <view class="user-name">{{info.hrUserEntity&&info.hrUserEntity.userName||'匿名'}}·{{info.hr&&info.hr.hrPosition||'匿名职务'}}</view>
            </view>
          </view>
        </view>
        <view class="msg-box">
			<view class="msg-item">
			  <view class="msg-label">面试类型</view>
			  <view class="msg-value">{{onlineText}}</view>
			</view>
          <view class="msg-item">
            <view class="msg-label">时间</view>
            <view class="msg-value">{{info.interviewDateTime}}</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">职位</view>
            <view class="msg-value">{{info.postPush&&info.postPush.ruleClassifyName}} {{info.postPush&&info.postPush.salaryRange}}</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">联系人</view>
            <view class="msg-value">{{info.hrName}}  {{info.hrPhone}}</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">备注</view>
            <view class="msg-value">{{info.remarks}}</view>
          </view>
          <view class="msg-item" v-if="!isOnline" @tap.stop="gotoMap()">
            <view class="msg-label">地址</view>
            <view class="msg-value">{{info.address}} {{info.detailedAddress}}</view>
			<u-icon name="arrow-right"></u-icon>
          </view>
		  <view class="msg-item" v-if="isOnline">
		    <view class="msg-label">面试方式</view>
		    <view class="msg-value">{{interviewTypeText}}</view>
		  </view>
		  <view class="msg-item" v-if="isOnline">
		    <view class="msg-label">面试地址</view>
		    <view class="msg-value">{{info.onlineMsg}}</view>
		  </view>
        </view>
        <view class="map-box">
          <map v-if="info.lng" name="map" class="map" :longitude="parseFloat(info.lng)" :latitude="parseFloat(info.lat)" :markers="covers"></map>
        </view>
      </view>
      <view class="detail-item" v-if="info&&info.status==2">
        <view class="process-top">
          <view class="process-title">面试进度</view>
          <view hidden class="process-status">爽约说明</view>
        </view>
        <view class="process-index">
          <view class="interview-process">
            <!-- 流程步骤 -->
            <view class="process-steps">
              <!-- 步骤1: 面试时间到 -->
              <view
                class="step-item"
                :class="{ active: currentStep >= 1, completed: currentStep > 1 }"
              >
                <view class="step-icon">
                  <view class="step-number">1</view>
                  <view class="step-check" v-if="currentStep > 1">
                    <u-icon name="checkmark" color="#fff" size="16"></u-icon>
                  </view>
                </view>
                <view class="step-content">
                  <view class="step-title">{{info.expired?'面试时间到':'接受面试'}}</view>
                  <view class="step-desc">{{info.expired?'面试已开始，此时不能取消面试':'离面试开始3小时内，不可以取消面试'}}</view>
                </view>
                <view class="step-line"></view>
              </view>

              <!-- 步骤2: 面试签到 -->
              <view
                class="step-item"
                :class="{ active: currentStep >= 2, completed: currentStep > 2 }"
              >
                <view class="step-icon">
                  <view class="step-number">2</view>
                  <view class="step-check" v-if="currentStep > 2">
                    <u-icon name="checkmark" color="#fff" size="16"></u-icon>
                  </view>
                </view>
                <view class="step-content">
                  <view class="step-title">面试签到</view>
                  <view class="step-desc">到场后请及时签到，可体验面试全流程服务</view>
				  <u-tag :text="currentStep<2?(info.expired?'签到超时':'请签到'):'已签到'" type="primary" :mode="currentStep<2&&!info.expired?'plain':'light'" size="mini"/>
                </view>
                <view class="step-line"></view>
              </view>

              <!-- 步骤3: 进行面试 -->
              <view
                class="step-item"
                :class="{ active: currentStep >= 3, completed: currentStep > 3 }"
              >
                <view class="step-icon">
                  <view class="step-number">3</view>
                  <view class="step-check" v-if="currentStep > 3">
                    <u-icon name="checkmark" color="#fff" size="16"></u-icon>
                  </view>
                </view>
                <view class="step-content">
                  <view class="step-title">进行面试</view>
                  <view class="step-desc">面试过程中，如有问题，可向客服投诉</view>
                </view>
                <view class="step-line"></view>
              </view>

              <!-- 步骤4: 面试结果 -->
              <view
                class="step-item"
                :class="{ active: currentStep >= 4, completed: currentStep > 4 }"
              >
                <view class="step-icon">
                  <view class="step-number">4</view>
                  <view class="step-check" v-if="currentStep > 4">
                    <u-icon name="checkmark" color="#fff" size="16"></u-icon>
                  </view>
                </view>
                <view class="step-content">
                  <view class="step-title">面试结果</view>
                  <view class="step-desc">面试完后30天内可向招聘方获取面试结果</view>
				  <u-tag v-if="currentStep>=4&&info.interviewResultType==null" text="等待面试结果" type="primary" mode="plain" size="mini"/>
				  <u-tag v-if="currentStep>=4&&info.interviewResultType!=null" :text="info.interviewResultType==0?'面试通过':(info.interviewResultType==2?'面试未通过':'结果待定')" :type="info.interviewResultType==0?'primary':'error'" mode="light" size="mini"/>
				  <u-tag v-if="currentStep==3" text="获取面试结果" type="info" mode="light" size="mini"/>
                </view>
                <view class="step-line"></view>
              </view>

              <!-- 步骤5: 获取面试结果 -->
              <!-- <view
                class="step-item"
                :class="{ active: currentStep >= 5, completed: currentStep > 5 }"
              >
                <view class="step-icon">
                  <view class="step-number">5</view>
                  <view class="step-check" v-if="currentStep > 5">
                    <u-icon name="checkmark" color="#fff" size="16"></u-icon>
                  </view>
                </view>
                <view class="step-content">
                  <view class="step-title">获取面试结果</view>
                  <view class="step-desc"></view>
                </view>
              </view> -->
            </view>

            
          </view>
        </view>
      </view>
	  <!-- 操作按钮 -->
	  <view class="process-actions" v-if="info&&info.status==2">
	  	<button class="action-btn" v-if="currentStep === 1&&info.restHour>3" @click="updateRecord(1,3)">
	  	  取消面试
	  	</button>
	    <button class="action-btn" v-if="currentStep === 1&&info.restHour<=3" @click="updateRecord(2,2)">
	      签到
	    </button>
	    <button
	      class="action-btn"
	      v-if="currentStep === 2"
	      @click="updateRecord(3,2)"
	    >
	      开始面试
	    </button>
      <button
	      class="action-btn"
	      v-if="currentStep === 3"
	      @click="updateRecord(4, 2)"
	    >
	      面试已完成
	    </button>
	    <button
	      class="action-btn"
	      v-if="currentStep === 4"
	      @click="handleGetResult"
	    >
	      获取结果
	    </button>
	   <!-- <button
	      class="action-btn complaint-btn"
	      v-if="currentStep === 3"
	      @click="handleComplaint"
	    >
	      投诉
	    </button> -->
	  </view>	  
    </view>
	
  </view>
</template>
<script>
import navBar from "@/components/nav-bar/index.vue";
import { onlineInterviewType } from "@/constants/common";

export default {
  data() {
    return {
      currentStep: 1,
	  recordId:'',
	  companyId:"",
	  info:{},
	  covers: []
    };
  },
  components: {
    navBar,
  },
  computed: {
	  isOnline() {
	  		  return this?.info?.type == 1
	  },
	  onlineText() {
	  		  return this?.info?.type == 1 ? '线上面试' : '线下面试'
	  },
	  interviewTypeText() {
	  		  console.log(onlineInterviewType)
	  		  return onlineInterviewType[this?.info?.onlineType]?.name ?? ''
	  }
  },
  onLoad(options){
		this.recordId=options&&options.recordId?options.recordId:''
		this.companyId=options&&options.companyId?options.companyId:''
		this.getData()
  },
  methods: {
	 getData(){
	 	var that=this
	 	this.$Request.getT("/app/interviewRecord/getInterviewInfo", {companyId:this.companyId,recordId:this.recordId}).then((res) => {
	 	  if (res.code == 0) {
			  let statusArr=['','待接受','已同意','已拒绝','已过期']
			  res.data.statusText=statusArr[res.data.status]
			  var detailTime=res.data.detailTime?that.$queue.convert12to24(res.data.detailTime):''
			  res.data.interviewDateTime=res.data.interviewDateTime.substring(0,10)+' '+detailTime
			   var expired=that.$queue.isDateExpired(res.data.interviewDateTime)
			   res.data.expired=expired[0]
				res.data.restHour=expired[1]
			  res.data.interviewDate=res.data.interviewDateTime.slice(0, 10)
	 		  that.info=res.data
			  console.log(that.info)
			  that.currentStep=!res.data.interviewProcesses||res.data.interviewProcesses==0?res.data.interviewProcesses+1:res.data.interviewProcesses
			  that.covers.push({
				  id:1,
				latitude: res.data.lat,
				longitude: res.data.lng,
				iconPath:'../../static/images/mapMarker.png',
				alpha:0.5,
				width:20,
				height:20,
					callout: {
						// content: res.data.detailedAddress,
						content: res.data.address,
						color: '#000', //文字颜色
						fontSize: 10, //文本大小
						padding: 5, //附近留白
						borderRadius: 24, //边框圆角
						bgColor: '#FFFFFF', //背景颜色
						display: 'ALWAYS', //常显
					}
			  })
	 	  } else {
	 	    uni.showToast({
	 	      title: res.msg,
	 	      icon: "none",
	 	    });
	 	  }
	 	});
	 }, 
    handleSignIn() {
      this.$emit("sign-in");
      uni.showToast({
        title: "签到成功",
        icon: "success",
      });
    },

    handleStartInterview() {
      this.$emit("start-interview");
    },

    handleGetResult() {
		if(this.info.interviewResultType==null)
			return this.$queue.showToast('还未出结果，请耐心等待')
		uni.showModal({
		  title: "面试"+(this.info.interviewResultType==0?'已通过':(this.info.interviewResultType==2?'未通过':'结果待定')),
		  content: this.info.interviewResultMsg||'祝您生活愉快',
		  editable: false,
		  showCancel:false
		});
      this.$emit("get-result");
    },
    handleComplaint() {
      this.$emit("complaint");
      uni.showModal({
        title: "客服投诉",
        content: "请描述您遇到的问题",
        editable: true,
        placeholderText: "请输入问题描述...",
        success: (res) => {
          if (res.confirm && res.content) {
            uni.showToast({
              title: "投诉已提交",
              icon: "success",
            });
          }
        },
      });
    },
	updateRecord(interviewProcesses,status=2){
		var that=this
		that.$Request.postJson("/app/interviewRecord/saveInterview", {
			recordId:that.recordId,
			status:status,
			interviewProcesses:interviewProcesses
		}).then(res => {
			if (res.code === 0) {
				that.info.interviewProcesses=interviewProcesses
				that.info.status=status
				that.currentStep=interviewProcesses
			} else {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
			}
		})
	},
	//拉起地图导航
	gotoMap() {
		let that = this
		uni.openLocation({
			latitude: that.info.lat,
			longitude: that.info.lng,
			address: that.info.address+that.info.detailedAddress,
			complete(ret) {
	
			}
		})
	},
  },
};
</script>
<style scoped lang="scss">
.ms-detail {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .detail-bg {
    height: 744rpx;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 102, 0, 1), rgba(255, 102, 0, 0) 100%);
    position: absolute;
    left: 0;
    top: 0;
  }
  .detail-index {
    position: relative;
    z-index: 2;
    padding: 40rpx;
    box-sizing: border-box;
	flex: 1;
	overflow: auto;
    .detail-item {
      padding: 36rpx;
      box-sizing: border-box;
      border: 1rpx solid rgba(227, 231, 236, 1);
      border-radius: 6px;
      background: rgba(255, 255, 255, 1);
      margin-top: 20rpx;
      .process-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .process-title {
          color: rgba(29, 33, 41, 1);
          font-family: DM Sans;
          font-size: 24rpx;
          font-weight: 500;
          line-height: 32rpx;
        }
        .process-status {
          color: #016bf6;
          font-family: DM Sans;
          font-size: 20rpx;
          font-weight: 700;
          line-height: 26rpx;
        }
      }
      .user-title {
        display: flex;
        align-items: center;
        .user-img {
          overflow: hidden;
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 24rpx;
          border: 8rpx solid #f6f6f6;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .user-name-box {
          .user-name-com {
            color: #171725;
            font-family: DM Sans;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 44rpx;
            text-align: left;
          }
          .user-info-img {
            display: flex;
            align-items: center;
            margin-top: 8rpx;
            image {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              margin-right: 8rpx;
            }
            .user-name {
              color: #9ca4ab;
              font-family: DM Sans;
              font-size: 16rpx;
              font-weight: 400;
              line-height: 40rpx;
            }
          }
        }
      }
    }
  }
  .msg-box {
    .msg-item {
      display: flex;
      align-items: center;
      color: rgba(153, 153, 153, 1);
      font-family: DM Sans;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 32rpx;
      margin-top: 12rpx;
      .msg-label {
        min-width: 120rpx;
        margin-right: 24rpx;
      }
    }
  }
  .detail-title {
    color: #fff;
    font-size: 50rpx;
    font-weight: 500;
    font-family: DM Sans;
  }
}
.map-box {
  margin-top: 24rpx;
  border-radius: 12rpx;
  overflow: hidden;
  .map {
    width: 100%;
    height: 154rpx;
  }
}
.interview-process {
  margin-top: 24rpx;
}

.process-header {
  margin-bottom: 40rpx;
}

.process-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.process-steps {
  position: relative;
}

.step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 50rpx;
  position: relative;

  &:last-child {
    margin-bottom: 0;

    .step-line {
      display: none;
    }
  }
}

.step-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.step-number {
  font-size: 20rpx;
  font-weight: bold;
  color: #999;
}

.step-check {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step-content {
  flex: 1;
}

.step-title {
  color: rgba(29, 33, 41, 1);
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 600;
  line-height: 32rpx;
  margin-bottom: 8rpx;
}

.step-desc {
  color: rgba(153, 153, 153, 1);
  font-family: DM Sans;
  font-size: 20rpx;
  font-weight: 400;
  line-height: 26rpx;
  margin-bottom: 10rpx;
}

.step-line {
  position: absolute;
  left: 16rpx;
  top: 42rpx;
  bottom: -30rpx;
  width: 2rpx;
  background: #f0f0f0;
  z-index: 1;
}

/* 激活状态 */
.step-item.active {
  .step-icon {
    background: #016bf6;
  }

  .step-number {
    color: #fff;
  }

  .step-title {
    color: #016bf6;
    font-weight: bold;
  }

  .step-line {
    background: #016bf6;
  }
}

/* 完成状态 */
.step-item.completed {
  .step-icon {
    background: #016bf6;
  }

  .step-number {
    display: none;
  }

  .step-check {
    display: block;
  }
}

/* 操作按钮 */
.process-actions {
  margin-top: 50rpx;
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1;
  background: #016bf6;
  color: #fff;
  border: none;
  border-radius: 100rpx;
  padding: 6rpx 24rpx;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 1);
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 400;
  text-align: center;
  &::after {
    border: none;
  }

  &:active {
    background: #009974;
  }
}

.complaint-btn {
  background: #ff4444;

  &:active {
    background: #dd3333;
  }
}
</style>