hfysite/pages/manger/index/carousel.vue

<script>
import axios from "axios";
import {defineComponent} from "vue";
import RoundedTitle from "../../../components/public/roundedTitle.vue";
import {rCode} from "../../../map/rcodeMap_esm";
import handle from "../../../until/handle";
import ImageViewer from "../../../components/public/imageViewer.vue";
import ImageTable from "../../../components/public/imageTable.vue";
import Pop from "../../../components/public/pop.vue";
import PopCard from "../../../components/public/popCard.vue";
export default defineComponent({
  name: 'carousel',
  components: {PopCard, Pop, ImageTable, ImageViewer, RoundedTitle},
  async asyncData(ctx){
    // 加载轮播图数据
    let [err,res] = await handle(axios.get('/api/base/carousel'));
    if(err){
      return {};
    }
    let result = res.data;
    if(result.code === rCode.OK){
      return {carouselList: result.data}
    }else{
      this.$message.error(result.msg);
      return {}
    }
    return {}
  },
  data(){
    return {
      loading: false,
      carouselList: [],
      popShow: false,
      popLoading: false,
      carouselPopShow: true,
      carouselPopLoading: false,
      isEditCarousel: false,
    }
  },
  mounted() {
    if(this.carouselList.length === 0){
      this.getCarouselList();
    }
  },
  methods: {
    async getCarouselList(){
      this.loading = true;
      let [err,res] = await handle(this.$axios.get('/api/base/carousel'));
      this.loading = false;
      if(err){
        if(this.NotificationKey){
          this.$notification.close(this.NotificationKey);
        }
        this.NotificationKey = `open${Date.now()}`;

        return this.$notification.error({
          message: '轮播数据加载失败',
          description:`异常: ${err.message}`,
          duration: 0,
          btn: h => {
            return h(
              'a-button',
              {
                props: {
                  type: 'primary',
                  size: 'small',
                },
                on: {
                  click: () => {
                    this.$notification.close(this.NotificationKey);
                    this.getCarouselList();
                  },
                },
              },
              '重试',
            );
          },
          key:this.NotificationKey,
          onClose: close,
        });
      }
      let result = res.data;
      if(result.code === rCode.OK){
        this.carouselList = result.data;
        return {carouselList: result.data}
      }else{
        this.$message.error(result.msg);
        return {}
      }
    },
    async addCarouselItem(){
      // 打开弹窗. 选择图片,填写链接地址,排序

    },
    showPop(){
      this.popShow = true;
      this.popLoading = false;
    },
    cancelPop(){
      this.popShow = false;
      this.popLoading = false;
    },
    okHandle(fileItem){
      console.log(fileItem);
      this.cancelPop();
    }
  },

})
</script>

<template>
<div class="w-full p-2">
  <rounded-title>轮播图管理</rounded-title>
  <div class="mt-2 rounded bg-white p-2">
<!--    轮播图list , 左侧轮播图片, 右侧 轮播信息 -->
  <div class="mt-2 rounded bg-white p-2">
    <div class="py-1 border-b border-cyan-300 flex justify-between">
        点击下方快进行管理轮播图数据,一次性不要添加过多轮播图
<!--      新增按钮-->
      <a-button type="primary" class="ant-icon-btn" icon="plus" @click="addCarouselItem" :loading="loading"></a-button>
<!--      刷新按钮-->
      <a-button type="primary" class="ant-icon-btn" icon="reload" @click="getCarouselList" :loading="loading"></a-button>
    </div>
    <div class="w-full h-auto transition">
      <div v-show="loading" class="w-full h-64 flex justify-center items-center ">
        <a-spin size="large" />
      </div>

      <div
        v-for="(item,index) in carouselList"
        :key="'carouse-'+index"
        class="mt-2 rounded border flex h-72 overflow-hidden"
      >
        <div class="media w-1/2 h-full">
          <image-viewer :src="item.filePath"></image-viewer>
        </div>
        <div class="w-1/2 h-full box-border pl-2">
          <a-button @click="showPop">编辑</a-button>
          排序{{item.sort}},数字越小越靠前
          链接地址: {{item.href}}
        </div>

      </div>
    </div>

  </div>
  </div>

  <pop :show="popShow" :loading="popLoading">
    <image-table @cancel="cancelPop" @ok="okHandle"></image-table>
    <!--      <choose-to-sit></choose-to-sit>-->
  </pop>
  <pop :show="carouselPopShow" :loading="carouselPopLoading">
    <pop-card>
      <template slot="header" class="w-full">
        {{isEditCarousel ? '编辑轮播图' : '新增轮播图'}}
      </template>
      <template slot="close-group">取消</template>
      <div class="w-full">
        内容
      </div>
      <template class="w-full" slot="footer">
        <a-button>{{isEditCarousel? '保存': '新增'}}</a-button>
      </template>
    </pop-card>
  </pop>
</div>
</template>

<style scoped>

</style>