|
|
@@ -0,0 +1,501 @@
|
|
|
+<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>
|
|
|
+ <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: 60rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-family: DM Sans;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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>
|
