Dining_Hall/pages/mine/me/faceUpload.vue

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
<!--    <view class="header">-->
<!--      <view class="back-icon" @click="goBack">-->
<!--        <image class="icon" :src="require('@/static/images/icons/back.png')" mode="aspectFit"></image>-->
<!--      </view>-->
<!--      <text class="title">人脸上传</text>-->
<!--    </view>-->

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 上传区域 -->
      <view class="upload-area" @click="handleChooseImage">
        <view class="upload-box" :class="{ 'has-image': imageUrl }">
          <image
            v-if="imageUrl"
            :src="imageUrl"
            mode="aspectFill"
            class="preview-image"
          />
          <view v-else class="upload-placeholder">
            <image class="camera-icon" :src="require('@/static/images/my/camera.png')" mode="aspectFit"></image>
            <text class="upload-text">点击上传照片</text>
          </view>
        </view>
      </view>

      <!-- 提示信息 -->
      <view class="tips">
        <text class="tip-item">·五官端正，面部无遮挡（请使用人脸照片）</text>
        <text class="tip-item">·不要带视频（如墨镜等）</text>
        <text class="tip-item">·请在光线明亮的纯色背景下拍照（建议背景颜色为白色）</text>
        <text class="tip-item">·上传照片后需保存，保存失败照片将被清除</text>
      </view>

      <!-- 隐私协议 -->
<!--      <view class="privacy-agreement">-->
<!--        <checkbox-->
<!--          :checked="agreed"-->
<!--          @click="agreed = !agreed"-->
<!--          color="#FF8126"-->
<!--        />-->
<!--        <text class="agreement-text">我已阅读并同意</text>-->
<!--        <text class="agreement-link" @click="showAgreement">《东华管理生物特征采集私隐声明》</text>-->
<!--      </view>-->

      <!-- 按钮组 -->
      <view class="button-group">
        <button
          class="submit-btn"
          :disabled="!agreed || !imageUrl"
          @click="handleUpload"
        >
          确定上传
        </button>
        <button
          class="cancel-btn"
          @click="goBack"
        >
          取消
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      agreed: false
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    handleChooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0]
        }
      })
    },
    handleUpload() {
      if (!this.agreed || !this.imageUrl) return

      uni.showLoading({
        title: '上传中...'
      })

      // 这里添加实际的上传逻辑
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '上传成功',
          icon: 'success',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              this.goBack()
            }, 2000)
          }
        })
      }, 1500)
    },
    showAgreement() {
      uni.navigateTo({
        url: '/pages/privacy-agreement/index'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #fff;
}

.header {
  padding: 44px 32rpx 0;
  height: 88rpx;
  display: flex;
  align-items: center;

  .back-icon {
    padding: 20rpx;
    margin-left: -20rpx;

    .icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    color: #333;
    margin-right: 60rpx;
  }
}

.content {
  padding: 32rpx;
}

.upload-area {
  margin-bottom: 48rpx;

  .upload-box {
    width: 75%;
    height: 400rpx;
    border: 2rpx dashed #CCCCCC;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
  }

  &.has-image {
    border-style: solid;
  }

  .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;

    .camera-icon {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 16rpx;
    }

    .upload-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}


.tips {
  margin-bottom: 48rpx;
  width: 75%;
  margin-left: auto;
  margin-right: auto;

  .tip-item {
    display: block;
    font-size: 24rpx;
    color: #999;
    line-height: 1.6;
    text-align: left;
  }
}

.privacy-agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 48rpx;
  /deep/ .uni-checkbox-input {
    border-radius: 50% !important;
  }
}

.button-group {
  margin-top: 32rpx;
  .submit-btn {
    width: 100%;
    height: 88rpx;
    background: #FF8126;
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    margin-bottom: 24rpx;

    &:disabled {
      opacity: 0.5;
    }

    &:active {
      opacity: 0.9;
    }
  }

  .cancel-btn {
    width: 100%;
    height: 88rpx;
    background: #fff;
    color: #333;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #CCCCCC;

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