changes

app/components/common/Phone.vue

@@ -1,82 +1,85 @@
+<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="fsb-30">
-      {{ text }}
-      <a
-        class="ml-3"
-        @click="copy()"
+    <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)"
       >
-        <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 24 }"></SvgIcon>
-      </a>
+        <span class="icon">
+          <Icon
+            name="material-symbols:content-copy-outline-rounded"
+            :size="17"
+          />
+        </span>
+      </button>
     </p>
-    <p class="buttons mt-4">
+    <p class="buttons are-small mt-2">
       <button
         class="button is-primary"
-        @click="call()"
+        @click="call"
       >
-        Call
+        <span class="icon">
+          <Icon
+            name="material-symbols:call-outline-rounded"
+            :size="18"
+          />
+        </span>
+        <span>Call</span>
       </button>
       <button
-        class="button is-primary"
-        @click="sms()"
+        class="button"
+        @click="sms"
       >
         SMS
       </button>
       <button
-        class="button is-primary"
-        @click="openZalo()"
+        class="button"
+        @click="openZalo"
       >
         Zalo
       </button>
     </p>
     <Modal
-      @close="showmodal = undefined"
-      v-bind="showmodal"
       v-if="showmodal"
-    ></Modal>
+      v-bind="showmodal"
+      @close="showmodal = undefined"
+    />
   </div>
 </template>
-<script>
-export default {
-  props: ["row", "pagename"],
-  data() {
-    return {
-      text: undefined,
-      phone: this.row.customer__phone || this.row.party__phone || this.row.phone,
-      showmodal: undefined,
-    };
-  },
-  created() {
-    var format = function (s) {
-      return `${s.slice(0, 3)} ${s.slice(3, 6)} ${s.slice(6, 20)}`;
-    };
-    this.text = format(this.phone);
-  },
-  methods: {
-    call() {
-      window.open(`tel:${this.phone}`);
-    },
-    sms() {
-      window.open(`sms:${this.phone}`);
-    },
-    sendSms() {
-      let api = this.row.code.indexOf("CN") >= 0 ? "customersms" : undefined;
-      if (this.row.code.indexOf("LN") >= 0) api = "loansms";
-      else if (this.row.code.indexOf("TS") >= 0) api = "collateralsms";
-      this.showmodal = {
-        component: "user/Sms",
-        title: "Nhắn tin SMS",
-        width: "50%",
-        height: "400px",
-        vbind: { row: this.row, pagename: this.pagename, api: api },
-      };
-    },
-    copy() {
-      this.$copyToClipboard(this.phone);
-    },
-    openZalo() {
-      window.open(`https://zalo.me/${this.phone}`, "_blank");
-    },
-  },
-};
-</script>