scc-astro/src/components/NoticeIDPage.vue

93 lines
4.3 KiB
Vue

<template>
<div class="container mx-auto px-4 text-justify">
<!-- <div v-for="files in file" :key="file.id">
<a :href="'https://api8.siliconpin.com/assets/'+files[0]">wsrvfsgv</a>
</div> -->
<div v-if="isLoading" class="">
<div class="text-center text-2xl flex flex-col justify-center place-items-center">
<svg class="animate-spin delay-1000 mt-24" fill="#1068c6" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 26.349 26.35" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <circle cx="13.792" cy="3.082" r="3.082"></circle> <circle cx="13.792" cy="24.501" r="1.849"></circle> <circle cx="6.219" cy="6.218" r="2.774"></circle> <circle cx="21.365" cy="21.363" r="1.541"></circle> <circle cx="3.082" cy="13.792" r="2.465"></circle> <circle cx="24.501" cy="13.791" r="1.232"></circle> <path d="M4.694,19.84c-0.843,0.843-0.843,2.207,0,3.05c0.842,0.843,2.208,0.843,3.05,0c0.843-0.843,0.843-2.207,0-3.05 C6.902,18.996,5.537,18.988,4.694,19.84z"></path> <circle cx="21.364" cy="6.218" r="0.924"></circle> </g> </g> </g></svg>
Loading....
</div>
</div>
<div v-else="content" class="py-10">
<p class="text-center text-2xl font-bold pb-4 font-smooth underline">{{ page.title }}</p>
<div class="flex flex-col justify-center place-items-center w-[100%] " v-html="content"></div>
</div>
<div v-if="fileAttached">
<h2>Attachments.</h2>
<div>
<div v-for="(file, index) in files">
{{index+1}}.
<a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' " :download="file.filename_download">
{{ file.filename_download }}
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
page: null,
attachment:null,
fileAttached:false,
content:null,
isLoading: true,
fileAttached: false,
file: null,
}
},
mounted: function () {
let path=window.location.pathname.split('/');
// console.log(path[2]);
// fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
let queryP='https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&filter[slug][_eq]='+path[2];
fetch(queryP)
.then(response => response.json())
.then(data => {
this.page = data.data[0]
this.content = this.page.content
this.file = this.page.attachments
// console.log(this.file)
this.isLoading = false
return this.page.id
})
.then((pageID) => {
console.log(pageID)
fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
.then(resp => resp.json())
.then(file => {
console.log(file)
let attIDs = ''
let t = 0
file.data.forEach(ids => {
if (t == 0) attIDs = ids.directus_files_id
else attIDs = attIDs + ',' + ids.directus_files_id
t++
});
if(t>0) this.fileAttached=true
return attIDs
})
.then((attIDs) => {
fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
.then(resp => resp.json())
.then(file => {
this.files = file.data
})
})
})
.catch((error) => {
console.log(error)
});
}
}
</script>