xyy-m/src/components/CreateNote/HeaderBanner.vue

<template>
  <div style="height: calc(100vw * 0.59)" class="w-full">
    <div
      v-if="!bannerUrl"
      class="flex h-full w-full items-center justify-center bg-[url('~/assets/img/note-create/note_create_banner_bg.png')]"
    >
      <div
        @click="handleSelectImage"
        class="flex h-40 w-150 active:bg-[#000]/[0.1] bg-[#FFFFFF]/[0.2] items-center justify-center space-x-10 rounded-full border-2 border-white"
      >
        <div class="w-16 h-16">
          <van-image width="100%" height="100%" :src="icon_image_fill" />
        </div>
        <span class="text-sm font-normal pt-4 text-[#FF9300]">设置游记头图</span>
      </div>
    </div>

    <div v-else class="relative h-full w-full">
      <img :src="bannerUrl" class="h-full w-full" alt="" />
      <div
        @click="open"
        class="absolute rounded-full bottom-10 right-10 flex cursor-pointer items-center space-x-8 bg-[#00000080] px-15 py-8 hover:opacity-90"
      >
        <div class="w-16 h-16">
          <van-image width="100%" height="100%" :src="image" />
        </div>

        <span class="text-base text-white">重新上传头图</span>
      </div>
    </div>

    <!-- <van-dialog title="图片剪裁" v-model:show="cropperDialogVisible" width="375"> -->
    <!-- <div class="h-full w-full"> -->
    <!-- <img ref="cropperRef" :src="cropperImageBase64" alt="" /> -->
    <!-- <vueCropper
          ref="cropperRef"
          :img="cropperImageBase64"
          autoCrop
          :outputSize="1"
          centerBox
          fixed
          fixedBox
          original
          :full="true"
          :fixedNumber="[3.2, 1]"
        ></vueCropper> -->
    <!-- </div> -->
    <!-- <template #footer>
        <div class="flex items-center justify-center space-x-20 pt-10 pb-10">
          <van-button
            round
            plain
            color="#FF9300"
            type="primary"
            @click="cropperDialogVisible = false"
          >
            取消
          </van-button>
          <van-button
            round
            type="primary"
            @click="handleCropperOk"
            :loading="loading"
            color="#FF9300"
          >
            确认
          </van-button>
        </div>
      </template> -->
    <!-- </van-dialog> -->
  </div>
</template>

<script setup>
import { useFileDialog } from '@vueuse/core'
import icon_image_fill from '~/assets/img/note-create/icon-image-fill.png'
import image from '~/assets/img/note-create/image.svg'
// import { VueCropper } from 'vue-cropper'
// import 'vue-cropper/dist/index.css'

const bannerUrl = defineModel('bannerUrl')

const { open, onChange } = useFileDialog({
  accept: '.png,.png,.jpeg,.JPG,Png '
})

// const cropperImageBase64 = ref('')

function handleSelectImage() {
  open()
}

onChange(async (files) => {
  if (!files.length) return
  const reader = new FileReader()
  reader.readAsDataURL(files[0])
  reader.onload = () => {
    bannerUrl.value = reader.result
    handleCropperOk(files[0])
  }
})

// const cropperRef = ref(null)
// const cropperDialogVisible = ref(false)
const loading = ref(false)

async function handleCropperOk(data) {
  try {
    loading.value = true
    // 此处需上传图片，保存URL
    const formData = new FormData()

    formData.append('uploadFile', data)
    formData.append('asImage', true)
    formData.append('fieldName', 'travelNotesBanner')
    const res = await request('/admin/app/tourismProjectTravelNotesWrite/upload', {
      method: 'post',
      body: formData
    })
    const url = res.data.fileUrl
    loading.value = true
    bannerUrl.value = url
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped></style>