BlueWhale-Frontend/src/views/manager/CreateStore.vue

<script setup lang="ts">
import {computed, ref} from 'vue'
import {createStore} from "../../api/store.ts"
import {uploadImage} from "../../api/image.ts"

// 输入框值
const name = ref('')
const location = ref('')
let logoUrl = ref('')

// 用于前端阻拦不合法输入
const hasNameInput = computed(() => name.value != '')
const hasLocationInput = computed(() => location.value != '')

const nameLegal = hasNameInput
const locationLegal = hasLocationInput

const isDragging = ref(false)
const files = ref([])
const fileInputRef = ref(null)

function onChange() {
  files.value = [...fileInputRef.value.files]
}

function dragover(e) {
  e.preventDefault()
  isDragging.value = true
}

function dragleave() {
  isDragging.value = false
}

function drop(e) {
  e.preventDefault()
  fileInputRef.value.files = e.dataTransfer.files
  onChange()
  isDragging.value = false
}

function generateURL(file) {
  let formData = new FormData();
  formData.append('file', file);
  uploadImage(formData).then(res => {
    logoUrl.value = res.result;
  });

  let fileSrc = URL.createObjectURL(file);
  setTimeout(() => {
    URL.revokeObjectURL(fileSrc);
  }, 1000);

  return fileSrc;
}

function remove(i) {
  files.value.splice(i, 1);
  console.log(files.value)
}

const createDisabled = computed(() => {
  return !(nameLegal.value && locationLegal.value && files.value);
})

function handleCreateStore() {
  const payload = {
    name: name.value,
    location: location.value,
    logoUrl: logoUrl.value
  };
  createStore(payload).then(res => {
    if (res.code === '000') {
      ElMessage({
        message: '添加商户成功！',
        type: 'success',
        center: true,
      })
      name.value = '';
      location.value = '';
      logoUrl.value = '';
      files.value.splice(0);
    } else if (res.code === '400') {
      ElMessage({
        message: res.msg,
        type: 'error',
        center: true,
      })
    }
  });
}
</script>

<template>

  <el-main class="main-frame">


    <el-card class="current-card">

      <div>

        <h1 >
          添加商店
        </h1>

        <el-form>

          <el-form-item>
            <label for="name">商店名</label>
            <el-input id="name" v-model="name"
                   required
                   placeholder="请输入商店名"/>
          </el-form-item>

          <el-form-item>
            <label for="location">商店地址</label>
            <el-input id="location" v-model="location"
                   required
                   placeholder="楼层-门牌号 如：3楼-305" />
          </el-form-item>

          <el-form-item>
            <label for="logoUrl">商店Logo</label>
            <div class="main">
              <div
                  class="dropzone-container"
                  @dragover="dragover"
                  @dragleave="dragleave"
                  @drop="drop"
              >
                <input
                    type="file"
                    multiple
                    name="file"
                    id="fileInput"
                    class="hidden-input"
                    @change="onChange"
                    ref="fileInputRef"
                    accept=".pdf,.jpg,.jpeg,.png"
                />

                <label for="fileInput" class="file-label">
                  <div v-if="isDragging">释放以将文件放到此处。</div>
                  <div v-else>将文件拖到此处或单击此处上传。</div>
                </label>

                <div class="preview-container mt-4" v-if="files.length">
                  <div v-for="file in files" :key="file.name" class="preview-card">
                    <div>
                      <img class="preview-img" :src="generateURL(file)"/>
                      <p>
                        {{ file.name }}
                      </p>
                    </div>
                    <div>
                      <button
                          class="ml-2"
                          type="button"
                          @click="remove(files.indexOf(file))"
                          title="Remove file"
                      >
                        <b>×</b>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <button @click.prevent="handleCreateStore()"
                    :disabled="createDisabled"
                    class="block my-3 w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-3 text-center disabled:bg-primary-100">
              添加
            </button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </el-main>
</template>

<style scoped>

.main-frame {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.current-card {
  width: 60%;
  padding: 10px;
}

</style>