xiaokuaisong-Web/CampusExpressDelivery/src/view/system/Carousel/Carousel.vue

<template>
  <a-card>
    <a-card :loading="loading">
      <div style="display: flex;justify-content: right;margin-bottom: 1%">
        <a-button type="primary" @click="showModal">增加</a-button>
      </div>
      <div style="display: flex;flex-wrap: wrap;">
        <div v-for="item in carouselData" style="margin: 1.8%">
          <a-card>
            <template #cover>
              <a-image :src="item?.content" style="width: 200px;height: 100px"/>
            </template>
            <template #actions>
              <a-button type="primary" danger @click="deleteCarousel(item.id)">删除</a-button>
            </template>
          </a-card>
        </div>
      </div>
    </a-card>
    <div>
      <a-modal v-model:open="modalOpen" :afterClose="onClose" keyboard title="新增轮播图" @ok="submit">
        <a-upload
            style="margin: 5%"
            :max-count="1"
            name="avatar"
            :show-upload-list="false"
            :customRequest="handleChange"
            list-type="picture-card"
            class="avatar-uploader"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="example" style="width: 100%"/>
          <div v-else>
            <div class="ant-upload-text">+</div>
          </div>
        </a-upload>
      </a-modal>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import myAxios from "../../../api/myAxios.ts";
import {onMounted, ref} from "vue";
import {message} from "ant-design-vue";

//加载按钮
const loading = ref(false)
//轮播图信息
const carouselData: any = ref({})
//弹出框开关
const modalOpen = ref<boolean>(false);
//图片地址
const imageUrl = ref('')

onMounted(() => {
  getCarousel()
})

/**
 * 获取轮播图列表
 */
const getCarousel = async () => {
  loading.value = true;
  const res: any = await myAxios.post('/system/list', {
    type: 1
  })
  console.log(res)
  if (res.code === 0 && res.data) {
    loading.value = false;
    carouselData.value = res.data
  } else {
    message.error(`获取数据失败：${res.message}`);
  }
}

/**
 * 删除轮播图
 */
const deleteCarousel = async (id: number) => {
  const res: any = await myAxios.post('/system/delete', {
    id: id
  })
  if (res.code !== 0) {
    message.error(`删除失败：${res.message}`);
  }
  await getCarousel()
}

/**
 * 打开弹出框
 */
const showModal = () => {
  if (carouselData.value.length > 7) {
    message.error(`添加失败,轮播图不能大于8张`);
    return
  }
  modalOpen.value = true;
};

/**
 * 关闭弹出框
 */
const onClose = () => {
  imageUrl.value = ""
  modalOpen.value = false;
};

/**
 * 上传图片
 */
const handleChange = async (row: any) => {
  let formData = new FormData()
  formData.append("file", row.file)
  const result = await myAxios({
    url: '/file/upload/server',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data: {
      //biz: "user_avatar",
      biz: "system",
      // 需根据名字取出，否则为空
      file: formData.get("file")
    }
  })
  // 传出图片地址
  if (result.data) {
    imageUrl.value = result.data
  } else {
    message.error(`图片上传失败`);
  }
}


/**
 * 确认添加
 */
const submit = async () => {
  if (imageUrl.value === '' || undefined) {
    message.error(`请上传图片`);
    return
  }
  const res: any = await myAxios.post('/system/add', {
    type: 1,
    content: imageUrl.value
  })
  if (res.code !== 0) {
    message.error(`更新失败：${res.message}`);
  }
  await getCarousel()
  modalOpen.value = false;
  imageUrl.value = '';
}

</script>

<style scoped>

</style>