GCLS_Page_Learn/src/views/teacher/create_course/step_one/PresetCover.vue

<template>
  <el-dialog :visible="visible" width="800px" @close="dialogClose">
    <div class="preset-cover">
      <div v-for="{ file_id, file_url } in coverList" :key="file_id">
        <el-image :src="file_url" @click="$emit('selectCover', file_url, file_id)" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PresetCover'
};
</script>

<script setup>
import { ref } from 'vue';
import { GetFileResource } from '@/api/app';

defineProps({
  visible: {
    default: false,
    type: Boolean
  }
});

const emits = defineEmits(['selectCover', 'dialogClose']);

let coverList = ref([]);
GetFileResource({
  resource_key_list: [
    'TRC_LB_BROWN',
    'TRC_LB_GREEN',
    'TRC_LB_PURPLE',
    'TRC_ZB_BLUE',
    'TRC_ZB_GREEN',
    'TRC_ZB_YELLOW',
    'TRC_KC_BLUE',
    'TRC_KC_GREEN',
    'TRC_KC_PURPLE'
  ]
}).then(({ file_list }) => {
  coverList.value = file_list;
});

function dialogClose() {
  emits('dialogClose');
}
</script>

<style lang="scss" scoped>
.preset-cover {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-bottom: 24px;

  .el-image {
    width: 213.33px;
    height: 120px;
    cursor: pointer;
  }
}
</style>