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">已面试08月27日</view>
      <view class="detail-item">
        <view class="user-title">
          <view class="user-img">
            <image src="@/static/images/geren.png" mode="aspectFill" />
          </view>
          <view class="user-name-box">
            <view class="user-name-com">深圳市世迪贸易科技有限公司</view>
            <view class="user-info-img">
              <image src="@/static/images/geren.png" mode="aspectFill" />
              <view class="user-name">孙先生·人事经理</view>
            </view>
          </view>
        </view>
        <view class="msg-box">
          <view class="msg-item">
            <view class="msg-label">时间</view>
            <view class="msg-value">2025-09-19 20:00:00</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">职位</view>
            <view class="msg-value">资深产品经理 15-25K</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">联系人</view>
            <view class="msg-value">熊女士</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">备注</view>
            <view class="msg-value">请携带一份最新的简历</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">地址</view>
            <view class="msg-value">光谷软件园F21602栋</view>
          </view>
        </view>
        <view class="map-box">
          <map name="map" class="map"></map>
        </view>
      </view>
      <view class="detail-item">
        <view class="process-top">
          <view class="process-title">面试进度</view>
          <view 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">面试时间到</view>
                  <view class="step-desc">面试一开始，此时不能取消面试</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>
                </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>
                </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 class="process-actions" v-if="showActions">
              <button class="action-btn" v-if="currentStep === 2" @click="handleSignIn">
                立即签到
              </button>
              <button
                class="action-btn"
                v-if="currentStep === 3"
                @click="handleStartInterview"
              >
                开始面试
              </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>
      </view>
    </view>
  </view>
</template>
<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  data() {
    return {
      currentStep: 3,
      showActions: true,
    };
  },
  components: {
    navBar,
  },
  method: {
    handleSignIn() {
      this.$emit("sign-in");
      uni.showToast({
        title: "签到成功",
        icon: "success",
      });
    },

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

    handleGetResult() {
      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",
            });
          }
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.ms-detail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  .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;
    .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;
}

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