yizhizan-h5/my/jilu/bossMianshiDetail.vue

<template>
  <view class="ms-detail">
    <view class="detail-bg"></view>
    <nav-bar title="面试详情"></nav-bar>
    <view class="detail-index">
      <view class="detail-title">明天14:00面试</view>
      <view class="detail-item">
        <view class="user-title">
          <view class="user-img-name">
            <view class="user-img">
              <image src="@/static/images/geren.png" mode="aspectFill" />
            </view>
            <view class="user-name"
              >孙先生
              <u-icon
                name="arrow-right"
                color="#c6c5ca"
                size="20"
                style="margin-left: 16rpx"
              ></u-icon
            ></view>
          </view>
          <view class="img-phone">
            <view class="img-item-icon">
              <image src="@/static/images/my/fujianjianli.svg" mode="scaleToFill" />
              <text>附件简历</text>
            </view>
            <view class="img-item-icon">
              <image src="@/static/images/my/dianhua.svg" mode="scaleToFill" />
              <text>电话</text>
            </view>
          </view>
        </view>
      </view>
      <view class="detail-item">
        <view class="user-title"> 面试信息 </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·16薪</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">联系人</view>
            <view class="msg-value">熊女士·18000000000</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="txt-content">
          <view class="txt-desc">求职者不错？向他发起录用吧~</view>
          <view class="txt-btn">录用邀约</view>
        </view>
      </view>
      <view class="detail-item">
        <view class="user-title-second" style="padding-bottom: 28rpx">
          将面试结果发送给对方
        </view>
        <view class="txt-content">
          <view class="txt-content-item">
            <image src="@/static/images/my/mianshitongguo.svg" mode="scaleToFill" />
            <view class="txt-mianshi">通过</view>
          </view>
          <view class="txt-content-item">
            <image src="@/static/images/my/kaolvyixia.svg" mode="scaleToFill" />
            <view class="txt-mianshi">考虑一下</view>
          </view>
          <view class="txt-content-item">
            <image src="@/static/images/my/butongguo.svg" mode="scaleToFill" />
            <view class="txt-mianshi">不通过</view>
          </view>
        </view>
      </view>
      <view class="detail-item" @click="showRecord = true">
        <view class="user-title-second"> 面试记录 </view>
        <view class="tag-box">
          <view class="mianshi-tag">待定</view>
        </view>
        <view class="mianshi-result-txt">
          这是一条文案这是一条文案这是一条文案这是一条文案这是一条文案
          这是一条文案这是一条文案这是一条文案这是一条文案这是一条文案
        </view>
      </view>
      <view class="detail-item" @click="showResult = true">
        <view class="user-title-second">
          <text>面试结果</text>
          <view class="user-img-result">
            <image
              src="@/static/images/my/mianshitongguo.svg"
              mode="scaleToFill"
            />面试通过
          </view></view
        >
        <view class="mianshi-result-txt">
          这是一条文案这是一条文案这是一条文案这是一条文案这是一条文案
          这是一条文案这是一条文案这是一条文案这是一条文案这是一条文案
        </view>
      </view>
    </view>
    <view class="btn-bottom">
      <view class="btn-item" @click="cancelInterview = true">取消面试</view>
      <view class="btn-item" @click="onEdit">修改面试</view>
    </view>
    <u-popup v-model="showRecord" mode="bottom" border-radius="40">
      <view class="mianshi-record">
        <view class="mianshi-title"> 面试记录 <text>(求职者不可用)</text> </view>
        <view class="mianshi-record-content">
          <view class="record-tag-box">
            <view
              class="record-tag"
              :class="{ 'record-tag-check': isCheck == index }"
              @click="CheckTag(index)"
              v-for="(item, index) in recordList"
              :key="index"
              >{{ item }}</view
            >
          </view>
          <view class="check-box">
            <textarea
              v-model="text"
              placeholder="请补充其他说明，不超过500个字"
              maxlength="500"
              @input="onInput"
              class="textarea"
              style="width:100%;height:100%;"
            ></textarea>
            <view class="word-count">
              <text>{{ text ? text.length : 0 }}</text> /500</view
            >
          </view>
        </view>
        <view class="btn-mianshi">保存</view>
      </view>
    </u-popup>
    <u-popup v-model="showResult" mode="bottom" border-radius="40">
      <view class="mianshi-record">
        <view class="mianshi-title"> 面试结果</view>
        <view class="mianshi-record-content">
          <view class="txt-content" style="padding: 54rpx;box-sizing:border-box;">
            <view class="txt-content-item">
              <image src="@/static/images/my/mianshitongguo.svg" mode="scaleToFill" />
              <view class="txt-mianshi">通过</view>
            </view>
            <view class="txt-content-item">
              <image src="@/static/images/my/kaolvyixia.svg" mode="scaleToFill" />
              <view class="txt-mianshi">考虑一下</view>
            </view>
            <view class="txt-content-item">
              <image src="@/static/images/my/butongguo.svg" mode="scaleToFill" />
              <view class="txt-mianshi">不通过</view>
            </view>
          </view>
          <view class="check-box">
            <textarea
              v-model="text"
              placeholder="请补充其他说明，不超过500个字"
              maxlength="500"
              @input="onInput"
              class="textarea"
              style="width:100%;height:100%;"
            ></textarea>
            <view class="word-count">
              <text>{{ text ? text.length : 0 }}</text> /500</view
            >
          </view>
        </view>
        <view class="btn-mianshi">保存</view>
      </view>
    </u-popup>
    <u-popup v-model="cancelInterview" mode="bottom" border-radius="40">
			<view class="mianshi-record">
        <view class="mianshi-title">
          <view>申请面试取消</view>
          <view class="cancel-text">请选择取消面试的原因，提交后将发送给对方</view>
        </view>
        <view class="mianshi-record-content">
          <view class="record-tag-box" style="gap: 16rpx 24rpx;">
            <view
              class="record-item"
              :class="{ 'record-tag-check': isCheck == index }"
              @click="CheckTag(index)"
              v-for="(item, index) in cancelList"
              :key="index"
              >{{ item }}</view
            >
          </view>
          <view class="check-box">
            <textarea
              v-model="text"
              placeholder="请输入具体原因，不超过40个字"
              maxlength="40"
              @input="onInput"
              class="textarea"
              style="width:100%;height:100%;"
            ></textarea>
            <view class="word-count">
              <text>{{ text ? text.length : 0 }}</text> /40</view
            >
          </view>
        </view>
        <view class="btn-mianshi" hover-class="btn-pressed" @click="() => {cancelInterview = false;cancel = true;}">提交</view>
      </view>
		</u-popup>
    <u-popup v-model="cancel" mode="center" border-radius="40">
			<view class="pop-rules">
				<view class="pop-text">
					<view class="pop-rules-title">面试取消</view>
					<view>这是面试取消的原因，全部展示出来</view>
				</view>
				<view>
					<button class="confirm" @click="cancel = false">确认</button>
				</view>
			</view>
		</u-popup>
  </view>
</template>
<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  data() {
    return {
      currentStep: 3,
      showActions: true,
      showRecord: false,
      isCheck: 0,
      showResult: false,
      recordList: [
        "需要二面",
        "待定",
        "淘汰",
        "面试通过",
        "逻辑清晰",
        "经验丰富",
        "自我驱动",
      ],
      text: "",
      cancelInterview:false,
      cancelList:['已招到人员','求职者已招到工作','面试官有事','时间不合适','其他'],
      cancel:false
    };
  },
  components: {
    navBar,
  },
  methods: {
    CheckTag(index) {
      this.isCheck = index;
    },
    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",
            });
          }
        },
      });
    },
    onEdit(){
      uni.navigateTo({
        url: '/my/jilu/editInterview'
      })
    }
  },
};
</script>
<style scoped lang="scss">
.ms-detail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  .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 {
    flex: 1;
    position: relative;
    z-index: 2;
    overflow: hidden;
    overflow-y: auto;
    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;
        justify-content: space-between;
        .user-img-name {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .img-phone {
          display: flex;
          align-items: center;
          gap: 28rpx;
          .img-item-icon {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            image {
              width: 48rpx;
              height: 48rpx;
            }
            text {
              color: #999999;
              font-family: DM Sans;
              font-size: 20rpx;
              font-weight: 400;
              margin-top: 5rpx;
              line-height: 26rpx;
            }
          }
        }
        .user-img {
          overflow: hidden;
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 24rpx;
          border: 8rpx solid #f6f6f6;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .user-title-second {
        color: #1d2129;
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 32rpx;
        padding-bottom: 12rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .user-img-result {
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 30rpx;
          height: 30rpx;
          margin-right: 4rpx;
        }
        color: rgba(102, 102, 102, 1);
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 26rpx;
      }
      .tag-box {
        display: flex;
        .mianshi-tag {
          border-radius: 8rpx;
          background: rgba(252, 233, 220, 1);
          padding: 8rpx;
          box-sizing: border-box;
          color: #016bf6;
          font-family: DM Sans;
          font-size: 16rpx;
          font-weight: 400;
          line-height: 20rpx;
        }
      }
      .mianshi-result-txt {
        color: #999999;
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 26rpx;
        margin-top: 4rpx;
      }
      .txt-desc {
        color: #1d2129;
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 32rpx;
        letter-spacing: 0%;
      }
      .txt-btn {
        color: #016bf6;
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 700;
        line-height: 26rpx;
        letter-spacing: 0%;
      }
    }
  }
  .txt-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .txt-content-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      image {
        width: 60rpx;
        height: 60rpx;
      }
      .txt-mianshi {
        color: rgba(153, 153, 153, 1);
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 26rpx;
        margin-top: 10rpx;
      }
    }
  }
  .btn-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16rpx;
    padding-bottom: 48rpx;
    padding-right: 40rpx;
    box-sizing: border-box;
    .btn-item {
      box-sizing: border-box;
      border: 2rpx solid;
      border-radius: 999px;
      background: rgba(255, 255, 255, 1);
      color: #016bf6;
      font-family: DM Sans;
      font-size: 24rpx;
      font-weight: 400;
      padding: 16rpx 68rpx;
      box-sizing: border-box;
    }
  }
  .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;
  }
}
.mianshi-record {
  height: 700rpx;
  border: 1rpx solid rgba(227, 231, 236, 1);
  border-radius: 40rpx 40rpx 0px 0px;
  background: rgba(253, 253, 253, 1);
  display: flex;
  flex-direction: column;
  padding: 40rpx;
  box-sizing: border-box;
  .mianshi-title {
    flex-shrink: 0;
    color: rgba(34, 37, 42, 1);
    font-family: DM Sans;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 26rpx;
    text-align: center;
    border-bottom: 2rpx solid rgba(153, 153, 153, 0.25);
    padding-bottom: 16rpx;
    box-sizing: border-box;
    text {
      font-size: 20rpx;
      margin-left: 12rpx;
    }
    .cancel-text{
      color: rgba(34, 37, 42, 1);
      font-family: DM Sans;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 32rpx;
      letter-spacing: 0px;
      margin-top: 16rpx;
    }
  }
  
  .mianshi-record-content {
    width: 100%;
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    .record-tag-box {
      display: flex;
      align-items: center;
      gap: 16rpx 44rpx;
      flex-wrap: wrap;
      padding-top: 28rpx;
      box-sizing: border-box;
      .record-tag {
        flex-shrink: 0;
        border-radius: 16rpx;
        background: rgba(245, 248, 254, 1);
        padding: 12rpx 20rpx;
        box-sizing: border-box;
        color: rgba(153, 153, 153, 1);
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 400;
        border: 1rpx solid rgba(245, 248, 254, 1);
      }
      .record-item{
        width: calc((100% - 24rpx) / 2);
        flex-shrink: 0;
        border-radius: 16rpx;
        background: rgba(245, 248, 254, 1);
        padding: 12rpx 0;
        box-sizing: border-box;
        color: rgba(153, 153, 153, 1);
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 400;
        text-align: center;
        box-sizing: border-box;
        border: 1rpx solid rgba(245, 248, 254, 1);
      }
      .record-tag-check {
        border: 1rpx solid #016bf6;
        background: rgba(252, 233, 220, 1);
        color: #016bf6;
      }
    }
    .check-box {
      width: 100%;
      height: 170rpx;
      border-radius: 12rpx;
      background: rgba(240, 240, 240, 1);
      padding: 34rpx;
    //   padding-top: 40rpx;
      box-sizing: border-box;
      margin: 20rpx 0;
      .word-count {
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 26rpx;
        text-align: right;
        text {
          color: #016bf6;
        }
      }
    }
  }
  .btn-mianshi {
    background: rgba(0, 106, 244, 1);
    border-radius: 100rpx;
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    padding: 6rpx;
    box-sizing: border-box;
  }
  .btn-pressed{
	background: rgba(0, 106, 244, 0.8);
	transition: background-color 0.1s ease;
  }
}
.process-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.process-steps {
  position: relative;
}
/* 操作按钮 */
.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;
  }
}
.pop-rules{
  width: 270px;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  color: rgba(158, 158, 158, 1);
  font-family: DM Sans;
  font-size: 20rpx;
  font-weight: 400;
  .pop-text{
    padding: 40rpx;
    .pop-rules-title {
      color: rgba(88, 88, 88, 1);
      font-size: 28rpx;
      font-weight: 700;
      line-height: 36rpx;
      letter-spacing: 0%;
      margin-bottom: 30rpx;   
    }
  }
  .confirm {
    height: 80rpx;
    border-radius: 999px;
    background: linear-gradient(90.00deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 80rpx;
    letter-spacing: 0%;
    text-align: center;
    margin: 0 40rpx 40rpx;
	&:active{
		background: linear-gradient(90.00deg, rgba(13, 39, 247, 0.8), rgba(19, 193, 234, 0.8) 100%);
	}
  }
}
::v-deep .u-btn {
  padding: 0 !important;
}
::v-deep .textarea-placeholder {
  color: rgba(153, 153, 153, 1);
  font-family: DM Sans;
  font-size: 20rpx !important;
  font-weight: 400;
  line-height: 26rpx;
}
::v-deep .uni-textarea-textarea {
  font-size: 20rpx;
  color: #585858;
}
::v-deep .uni-textarea{
    height: 170rpx !important;
}
::v-deep uni-button:after {
    border: none !important;
}
</style>