You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.8 KiB
79 lines
2.8 KiB
<template>
|
|
<div class="tw-min-w-full tw-min-h-full lg:tw-w-[908px] tw-bg-white tw-px-[30px] tw-py-[30px] xl:tw-py-[20px]">
|
|
<div class="tw-flex tw-items-center tw-py-[11px] tw-mb-5 md:tw-mb-[30px]">
|
|
<div class="circle-decoration tw-mr-[6px]"></div>
|
|
<div class="circle-decoration tw-mr-[30px]"></div>
|
|
<div class="tw-t18 tw-font-bold">{{ $t('Contact Info') }}</div>
|
|
</div>
|
|
<div v-if="userContact.length < 1" class="tw-flex tw-justify-center">
|
|
<div>
|
|
<img :src="contactImg" alt="" class="tw-h-[142px] tw-w-[160px]">
|
|
<div class="tw-text-center tw-t16">{{ $t('No Contact yet ...') }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="tw-w-full">
|
|
<ContactInfoContent
|
|
:contacts="userContact"
|
|
@refetch-contact-info="successUpdate"
|
|
></ContactInfoContent>
|
|
</div>
|
|
<div :class="userContact.length < 1 ? 'tw-flex tw-justify-center tw-mt-[50px] md:tw-mt-[60px]' : 'tw-flex tw-justify-center tw-mt-[20px] md:tw-mt-[30px]'">
|
|
<button @click="$modal.show('add-contact-modal')" type="button" class="tw-bg-primary-1 tw-px-6 tw-rounded-2xl tw-h-[40px] tw-w-[169px]">
|
|
<div class="tw-flex tw-items-center">
|
|
<img :src="plusImg" alt="" class="tw-h-[18px] tw-w-[18px] tw-mr-2">
|
|
<span class="tw-t16 tw-text-white">{{ $t('Add Contact') }}</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<AddContactModal @update="successUpdate"></AddContactModal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import AddContactModal from '../newComponent/modal/UserAddContactModal.vue'
|
|
import ContactInfoContent from './contactInfoContent.vue'
|
|
import Swal from 'sweetalert2'
|
|
export default {
|
|
// async asyncData() {
|
|
// const { data } = await axios.get(`/member/contacts?jwt=${this.$auth.$storage.getUniversal('jwt').token || ''}`).then( res => {
|
|
// return { userContact: data.contacts }
|
|
// })
|
|
// },
|
|
components: {
|
|
ContactInfoContent,
|
|
AddContactModal,
|
|
},
|
|
data() {
|
|
return {
|
|
contactImg: require('../../assets/img/noContact.png'),
|
|
plusImg: require('../../assets/img/plus-white.png'),
|
|
userContact: [],
|
|
}
|
|
},
|
|
methods: {
|
|
fetchContactInfo() {
|
|
this.$axios.get(`/member/contacts?jwt=${this.$auth.$storage.getUniversal('jwt').token || ''}`)
|
|
.then((result) => {
|
|
this.userContact = result.data.contacts
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
});
|
|
},
|
|
successUpdate() {
|
|
Swal.fire({
|
|
position: 'top',
|
|
icon: 'success',
|
|
title: 'Your work has been saved',
|
|
showConfirmButton: false,
|
|
timer: 1500
|
|
})
|
|
this.fetchContactInfo()
|
|
},
|
|
},
|
|
created() {
|
|
if (this.$auth.loggedIn) {
|
|
this.fetchContactInfo()
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped lang="scss"></style>
|