visitor/src/components/face-model.vue

<template>
  <div @click.self="onClickCancel" class='fixed-model'>
    <div class="model">
      <header>
        <h3>员工人脸照片</h3>
        <div class="upload-box">
          <div class="span">点击上传</div>
          <img v-if="faceImg" class="face-img" :src="props.faceImg" alt="">

          <input @change="onChangeFile" type="file" accept="image/*"/>
        </div>
      </header>
      <p class="tips">注：点击照片框进行人脸照片上传</p>
      <div class="button-box">
        <div @click="onClickCancel" class="cancel-button">取消</div>
        <div @click="onClickSave" class="save-button" :class="{ disabled: !file }" :style="{ pointerEvents: file ? 'auto' : 'none' }">保存</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {rulesForm, resetForm, rulesPhone} from '@/com/index'

/* @data */
const router = useRouter()
const store = useStore()
const emits = defineEmits(['change', 'cancel', 'save'])

const props = defineProps({
  faceImg: {
    default: ''
  },
})
const file = ref()

/* @setup */

/* @method */
// 上传图片
const onChangeFile = (e) => {
  file.value = e.target.files[0]
  emits('change', e.target.files[0])
}
const onClickCancel = () => {
  emits('cancel')
}
const onClickSave = () => {
  // 如果既没有新文件也没有原始图片，则不允许保存
  if (!file.value && !props.faceImg) {
    return;
  }
  emits('save', file.value)
}

</script>

<style lang='scss' scoped>
.fixed-model {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(60, 60, 67, 0.6);

  .model {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-65%);
    width: 8.1867rem /* 614/75 */
  ;
    // height: 394px;
    background: #FFFFFF;
    border-radius: .5333rem /* 40/75 */
  ;
    padding: 0 0 .7733rem /* 58/75 */
  ;
    box-sizing: border-box;

    header {
      width: 100%;
      height: 10.5333rem /* 790/75 */
    ;
      background: #FFFFFF;
      border-radius: .5333rem /* 40/75 */
    ;
      background: url('../assets/img/renlianbeijing.png') left top/100% 100% no-repeat;

      h3 {
        line-height: .7733rem /* 58/75 */
      ;
        font-size: .5333rem /* 40/75 */
      ;
        font-family: Source Han Sans CN, serif;
        font-weight: 500;
        color: #222222;
        padding: .8533rem /* 64/75 */
        0 0;
        text-align: center;
        box-sizing: border-box;
      }

      .upload-box {
        position: relative;
        width: 4.4rem /* 330/75 */
      ;
        height: 4.4rem /* 330/75 */
      ;
        background: #FFFFFF;
        box-shadow: 0px .1067rem /* 8/75 */
        .8rem /* 60/75 */
        .2667rem /* 20/75 */
        rgba(68, 140, 247, 0.4);
        border-radius: .2667rem /* 20/75 */
      ;
        margin: 1.28rem /* 96/75 */
        auto 0;
        overflow: hidden;

        .span {
          text-align: center;
          line-height: 4.4rem /* 330/75 */
        ;
          font-size: $size30;
          font-family: Source Han Sans CN, serif;
          font-weight: 400;
          color: #999999;

        }

        // display: flex;
        .face-img, input {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: .2667rem /* 20/75 */
        ;
          opacity: 0;
        }

        .face-img {
          opacity: 1;
        }

      }
    }

    .tips {
      line-height: .5333rem /* 40/75 */
    ;
      font-size: $md-size;
      font-family: Source Han Sans CN, serif;
      font-weight: 400;
      color: #5F6583;
      text-align: center;
      margin-top: -1.6rem /* 120/75 */
    ;
    }

    .button-box {
      // margin-top: 1.1467rem /* 86/75 */;
      display: flex;
      padding: 0 .7733rem /* 58/75 */
    ;
      box-sizing: border-box;
      margin-top: .6133rem /* 46/75 */
    ;

      div {
        // width: 240px;
        flex: 1;
        height: 1.0667rem /* 80/75 */
      ;
        line-height: 1.0667rem /* 80/75 */
      ;
        background: #448CF7;
        border-radius: 1.3333rem /* 100/75 */
      ;
        text-align: center;
        font-size: $md-size;
        color: #FFFFFF;
      }

      .cancel-button {
        margin-right: .2667rem /* 20/75 */
      ;
        background: #448CF7; // #D9D9D9;
        color: #FFFFFF; // #999999;

      }

      .save-button {
        &.disabled {
          background: #D9D9D9;
          color: #999999;
        }
      }
    }
  }
}
</style>