86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<script setup>
|
|
const props = defineProps(["row", "pagename"]);
|
|
const { $copyToClipboard } = useNuxtApp();
|
|
|
|
const phone = props.row.customer__phone || props.row.party__phone || props.row.phone;
|
|
const format = (s) => `${s.slice(0, 3)} ${s.slice(3, 6)} ${s.slice(6, 20)}`;
|
|
const text = format(phone);
|
|
const showmodal = ref();
|
|
|
|
function call() {
|
|
window.open(`tel:${phone}`);
|
|
}
|
|
function sms() {
|
|
window.open(`sms:${phone}`);
|
|
}
|
|
function openZalo() {
|
|
window.open(`https://zalo.me/${phone}`, "_blank");
|
|
}
|
|
|
|
function sendSms() {
|
|
showmodal.value = {
|
|
component: "user/Sms",
|
|
title: "Nhắn tin SMS",
|
|
width: "50%",
|
|
height: "400px",
|
|
vbind: {
|
|
row: props.row,
|
|
pagename: props.pagename,
|
|
api: "customersms",
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<p class="is-flex is-gap-1 is-align-items-center">
|
|
<span class="is-size-4 font-bold">
|
|
{{ text }}
|
|
</span>
|
|
<button
|
|
class="button is-small is-light is-primary rounded-full"
|
|
@click="$copyToClipboard(phone)"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:content-copy-outline-rounded"
|
|
:size="17"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</p>
|
|
<p class="buttons are-small mt-2">
|
|
<button
|
|
class="button is-primary"
|
|
@click="call"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:call-outline-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
<span>Call</span>
|
|
</button>
|
|
<button
|
|
class="button"
|
|
@click="sms"
|
|
>
|
|
SMS
|
|
</button>
|
|
<button
|
|
class="button"
|
|
@click="openZalo"
|
|
>
|
|
Zalo
|
|
</button>
|
|
</p>
|
|
<Modal
|
|
v-if="showmodal"
|
|
v-bind="showmodal"
|
|
@close="showmodal = undefined"
|
|
/>
|
|
</div>
|
|
</template>
|