76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<template>
|
|
<div class="py-8" ref="container">
|
|
<div class="text-center text-2xl mb-4">Liens des réseaux sociaux et de votre site</div>
|
|
<div class="px-5 py-4 flex flex-col space-y-4">
|
|
<div v-for="network in socialNetworks" :key="network.field">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">{{ network.label }}</label>
|
|
</div>
|
|
<v-text-field v-model="network.value" :label="network.label" variant="outlined"></v-text-field>
|
|
</div>
|
|
<div class="flex flex-col space-y-4">
|
|
<div class="flex items-center mb-2">
|
|
<label class="text-lg mr-4">Icon</label>
|
|
<v-file-input v-model="iconFile" label="Téléverser une icône" @change="onFileChange"></v-file-input>
|
|
</div>
|
|
<div v-if="iconUrl" class="flex justify-center">
|
|
<img :src="iconUrl" alt="Icon" class="icon-preview">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end space-x-2 px-4">
|
|
<v-btn class="save-btn" @click="saveAll">Enregistrer</v-btn>
|
|
<router-link :to="`/${currentUserName}`">
|
|
<v-btn class="save-btn">Retour</v-btn>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script async setup>
|
|
import { ref } from 'vue';
|
|
|
|
const socialNetworks = ref([
|
|
{ label: 'Instagram', field: 'instagram', value: '' },
|
|
{ label: 'TikTok', field: 'tiktok', value: '' },
|
|
{ label: 'Facebook', field: 'facebook', value: '' },
|
|
{ label: 'X', field: 'X', value: '' },
|
|
{ label: 'LinkedIn', field: 'linkedin', value: '' },
|
|
{ label: 'Site Web', field: 'website', value: '' }
|
|
]);
|
|
|
|
const iconUrl = ref('');
|
|
|
|
const onFileChange = (event) => {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
iconUrl.value = e.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
const saveAll = () => {
|
|
const formData = socialNetworks.value.reduce((acc, network) => {
|
|
acc[network.field] = network.value;
|
|
return acc;
|
|
}, {});
|
|
|
|
console.log('Form data:', formData);
|
|
console.log('Icon URL:', iconUrl.value);
|
|
// Logic to save all fields and the icon
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.save-btn {
|
|
z-index: 10;
|
|
}
|
|
.icon-preview {
|
|
max-width: 250px;
|
|
max-height: 250px;
|
|
}
|
|
</style>
|