changes

app/components/user/UserInfo.vue

@@ -1,44 +1,52 @@
+<script setup>
+import { ref, onMounted, getCurrentInstance } from "vue";
+
+const props = defineProps({ userId: Number });
+const store = useStore();
+const { $getdata } = useNuxtApp();
+
+const record = ref();
+const isVietnamese = store.lang === "vi";
+
+onMounted(async () => {
+  record.value = await $getdata("user", {
+    first: true,
+    params: {
+      filter: { id: props.userId || store.login.id },
+      values: "id,username,fullname,type,type__name,create_time",
+    },
+  });
+});
+</script>
 <template>
   <div v-if="record">
     <Caption
       v-bind="{
         title: isVietnamese ? 'Thông tin tài khoản' : 'User information',
-        type: 'has-text-warning',
-        size: 18,
+        type: 'has-text-primary',
+        size: 16,
       }"
-    ></Caption>
-    <div class="columns is-multiline mx-0 mt-2">
-      <div class="column is-3">
+    />
+    <div class="columns is-multiline mt-2">
+      <div class="column is-4">
         <div class="field">
-          <label class="label"
-            >{{ isVietnamese ? "Tên người dùng" : "User name" }}<b class="ml-1 has-text-danger">*</b></label
-          >
+          <label class="label">{{ isVietnamese ? "Tên người dùng" : "User name" }}</label>
           <div class="control">
             {{ record.username }}
           </div>
         </div>
       </div>
-      <div class="column is-3">
+      <div class="column is-4">
         <div class="field">
-          <label class="label">{{ isVietnamese ? "Họ tên" : "Full name" }}<b class="ml-1 has-text-danger">*</b></label>
+          <label class="label">{{ isVietnamese ? "Họ tên" : "Full name" }}</label>
           <div class="control">
             {{ record.fullname }}
           </div>
         </div>
       </div>
-      <!-- <div class="column is-3">
+      <div class="column is-4">
         <div class="field">
-          <label class="label">{{ isVietnamese ? "Điện thoại" : "Phone" }}<b class="ml-1 has-text-danger">*</b></label>
-          <div class="control">
-            {{ record.phone }}
-          </div>
-        </div>
-      </div> -->
-      <div class="column is-3">
-        <div class="field">
-          <label class="label"
-            >{{ isVietnamese ? "Thời gian tạo" : "Create time" }}<b class="ml-1 has-text-danger">*</b></label
-          >
+          <label class="label">{{ isVietnamese ? "Thời gian tạo" : "Create time" }}</label>
           <div class="control">
             {{ $dayjs(record.create_time).format("L") }}
           </div>
@@ -47,29 +55,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["userId"],
-  setup() {
-    const store = useStore();
-    return { store };
-  },
-  data() {
-    return {
-      errors: {},
-      record: undefined,
-      reginfo: undefined,
-      isVietnamese: this.store.lang === "vi",
-    };
-  },
-  async created() {
-    this.record = await this.$getdata("user", {
-      first: true,
-      params: {
-        filter: { id: this.userId || this.store.login.id },
-        values: "id,username,fullname,type,type__name,create_time",
-      },
-    });
-  },
-};
-</script>