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.
119 lines
3.1 KiB
119 lines
3.1 KiB
<template>
|
|
<modal name="delete-contact-modal" width="100%" :clickToClose="false">
|
|
<div class="tw-p-[20px] md:tw-p-[30px] tw-overflow-auto">
|
|
<div
|
|
class="modal-header tw-flex tw-justify-between tw-w-full tw-items-center tw-mb-[30px]"
|
|
>
|
|
<div
|
|
class="tw-grid tw-grid-cols-[24px_auto] tw-gap-[10px] tw-items-center tw-mr-[10px] md:tw-gap-[15px]"
|
|
>
|
|
<img src="~/assets/svg/deleteWarning.svg" alt="" />
|
|
<div class="tw-text-[18px] tw-font-bold md:tw-text-[20px]">
|
|
{{ $t("Delete Contact Info") }}
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="close tw-transition tw-btn-md"
|
|
@click="$modal.hide('delete-contact-modal')"
|
|
></button>
|
|
</div>
|
|
<div
|
|
class="tw-text-[14px] tw-mb-[30px] md:tw-text-[16px] md:tw-mb-[40px]"
|
|
>
|
|
{{ `"${contactName}" ` + $t("will be removed in your list") }}
|
|
</div>
|
|
<div class="modal-footer tw-grid tw-grid-cols-2 tw-gap-[15px]">
|
|
<button
|
|
class="tw-bg-white tw-text-error-default tw-text-[16px] tw-rounded-[12px] tw-py-[10px] md:tw-text-[18px]"
|
|
@click="$modal.hide('delete-contact-modal')"
|
|
>
|
|
{{ $t("Cancel") }}
|
|
</button>
|
|
<button
|
|
class="tw-bg-error-default tw-text-white tw-text-[16px] tw-rounded-[12px] tw-py-[10px] md:tw-text-[18px]"
|
|
@click="deleteContactInfo"
|
|
>
|
|
{{ $t("Delete") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</modal>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "delete-contact-modal",
|
|
props: {
|
|
contactId: {
|
|
type: String,
|
|
},
|
|
contactName: {
|
|
type: String,
|
|
},
|
|
},
|
|
methods: {
|
|
deleteContactInfo() {
|
|
this.$axios
|
|
.post(
|
|
`/trending/api/Members/Contact?ContactID=${this.contactId}`
|
|
)
|
|
.then((response) => {
|
|
console.log(JSON.stringify(response));
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data){
|
|
console.log("刪除成功");
|
|
this.$modal.hide("delete-contact-modal");
|
|
this.$emit("update");
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.close {
|
|
// position: absolute;
|
|
right: 30px;
|
|
top: 32px;
|
|
background-image: url("~/assets/svg/close.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 14px;
|
|
height: 14px;
|
|
@media screen and (min-width: 768px) {
|
|
right: 40px;
|
|
top: 40px;
|
|
}
|
|
}
|
|
|
|
.v--modal-overlay::v-deep {
|
|
.v--modal {
|
|
// max-width: 294px !important;
|
|
|
|
width: fit-content !important;
|
|
height: fit-content !important;
|
|
border-radius: 16px;
|
|
@media screen and (min-width: 768px) {
|
|
width: fit-content !important;
|
|
}
|
|
}
|
|
|
|
.v--modal-box {
|
|
width: 294px !important;
|
|
height: fit-content !important;
|
|
@media screen and (min-width: 768px) {
|
|
width: fit-content !important;
|
|
}
|
|
}
|
|
|
|
.v--modal-background-click {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|