图片上传组件

components.d.ts

@@ -27,6 +27,7 @@ declare module 'vue' {
     Empty: typeof import('./src/components/Empty/index.vue')['default']
     HeadSearch: typeof import('./src/components/headSearch/index.vue')['default']
     HotPromoted: typeof import('./src/components/Enterprise/hotPromoted.vue')['default']
+    Img: typeof import('./src/components/Upload/img.vue')['default']
     'Index copy': typeof import('./src/components/CtForm/index copy.vue')['default']
     IndustryTypeCard: typeof import('./src/components/industryTypeCard/index.vue')['default']
     Info: typeof import('./src/components/Enterprise/info.vue')['default']

src/components/Upload/img.vue

@@ -0,0 +1,78 @@
+<template>
+  <div v-if="!src" class="upload d-flex align-center justify-center" @click="openFileInput">
+    <v-icon color="#ccc" size="50">mdi-plus</v-icon>
+    <input
+      type="file"
+      ref="fileInput"
+      accept="image/*"
+      style="display: none;"
+      @change="handleUploadFile"
+    />
+  </div>
+  <div v-else style="position: relative;">
+    <v-img :src="src" width="120" height="120" rounded></v-img>
+    <v-icon color="primary" class="close" @click="handleClose">mdi-close-circle</v-icon>
+  </div>
+</template>
+
+<script setup>
+// 图片上传
+defineOptions({ name: 'upload-img'})
+import { ref } from 'vue'
+import { uploadFile } from '@/api/common'
+import { useI18n } from '@/hooks/web/useI18n'
+import Snackbar from '@/plugins/snackbar'
+
+const emit = defineEmits(['success', 'delete'])
+
+const { t } = useI18n()
+const src = ref('')
+
+// 选择文件
+const fileInput = ref()
+const clicked = ref(false)
+const openFileInput = () => {
+  if (clicked.value) return
+  clicked.value = true
+  fileInput.value.click()
+  clicked.value = false
+}
+
+// 文件上传
+const handleUploadFile = async (e) => {
+  const file = e.target.files[0]
+  const size = file.size
+  if (size / (1024*1024) > 10) {
+    Snackbar.warning(t('common.fileSizeExceed'))
+    return
+  }
+  const formData = new FormData()
+  formData.append('file', file)
+  const { data } = await uploadFile(formData)
+  if (!data) return Snackbar.error('上传失败')
+  src.value = data
+  Snackbar.success(t('common.uploadSucMsg'))
+  emit('success', data)
+}
+
+const handleClose = () => {
+  src.value = ''
+  emit('delete')
+}
+</script>
+
+<style scoped lang="scss">
+.upload {
+  width: 120px;
+  height: 120px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.close {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  cursor: pointer;
+}
+</style>

src/views/recruit/enterprise/informationManagement/informationSettingsComponents/authentication.vue

@@ -13,8 +13,19 @@
   <div v-else>
     <div class="topTip">为了您在平台有更好的操作体验，请进行实名认证</div>
     <div class="d-flex align-center justify-center flex-column">
-      <CtForm ref="CtFormRef" :items="formItems" style="width: 300px;"></CtForm>
-      <v-btn class="buttons" color="primary" @click="authentication = !authentication">{{ $t('common.submit') }}</v-btn>
+      <CtForm ref="CtFormRef" :items="formItems" style="width: 300px;">
+        <template #idCardImg1="{ item }">
+          <div class="color-666 font-size-14 mr-5">{{ item.label }}</div>
+          <Img @success="val => item.value = val" @delete="item.value = ''"></Img>
+        </template>
+        <template #idCardImg2="{ item }">
+          <div class="mt-5 d-flex">
+            <div class="color-666 font-size-14 mr-5">{{ item.label }}</div>
+            <Img @success="val => item.value = val" @delete="item.value = ''"></Img>
+          </div>
+        </template>
+      </CtForm>
+      <v-btn class="buttons mt-5" color="primary" @click="authentication = !authentication">{{ $t('common.submit') }}</v-btn>
     </div>
   </div>
 </template>
@@ -42,6 +53,18 @@ const formItems = ref({
       value: '',
       label: '身份证号码 *',
       rules: [v => !!v || '请输入您的身份证号码']
+    },
+    {
+      slotName: 'idCardImg1',
+      value: '',
+      label: '身份证-国徽照 *',
+      rules: [v => !!v || '请上传']
+    },
+    {
+      slotName: 'idCardImg2',
+      value: '',
+      label: '身份证-人像照 *',
+      rules: [v => !!v || '请上传']
     }
   ]
 })
@@ -62,4 +85,11 @@ const formItems = ref({
   font-size: 14px;
   padding: 25px;
 }
+.upload {
+  width: 120px;
+  height: 120px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+}
 </style>