update code

src/components/artist-information/personal-information/PersonalInformation.ts

@@ -35,10 +35,11 @@ export default defineComponent({
   components: {
     UploadImage,
   },
-  setup() {
+  setup(_, context) {
     const selectedFile = (value: FileList) => {
-      console.log(value);
-      console.log(URL.createObjectURL(value[0]));
+      // console.log(value);
+      // console.log(URL.createObjectURL(value[0]));
+      context.emit('SetAvatar',{file:value[0], url:URL.createObjectURL(value[0])})
     };
     const upload = ref(null);
     const uploadBanner = () => {
@@ -176,5 +177,6 @@ export default defineComponent({
     'update:artistLevel',
     'update:status',
     'addNewArtist',
+    'SetAvatar'
   ],
 });

src/components/artist-information/personal-information/index.vue

@@ -3,9 +3,19 @@
     <q-space></q-space>
     <div class="col-5">
       <div class="row q-mt-sm flex-center">
-        <div class="col-3 text-weight-medium">
-          <q-card style="max-width: 65%" @click="uploadBanner">
-            <!--  -->
+        <div class="col-3 text-weight-medium"></div>
+        <div class="col-8 flex flex-center">
+          <div>
+            <q-card style="margin-bottom: 8px" v-if="avatar !== null">
+              <q-img :src="avatar" style="height: 180px; width: 135px"></q-img>
+            </q-card>
+            <q-card v-else style="margin-bottom: 8px">
+              <q-img
+                src="~/assets/noavatar.png"
+                style="height: 180px; width: 135px"
+              ></q-img>
+            </q-card>
+            <q-card @click="uploadBanner">
               <div align="center" class="flex flex-center q-py-xs">
                 <q-icon name="mdi-plus-circle-outline" :size="'xs'"></q-icon>
                 <div class="q-mt-xs">{{ $t('uploadImage.uploadBanner') }}</div>
@@ -17,15 +27,9 @@
                 type="file"
                 accept="image/png, image/jpeg"
               />
-            <!-- / @change="$emit('selectedFile', $event.target.files)" -->
             </q-card>
           </div>
-        <div class="col-8 flex flex-center">
-          <div style="width: 100%">
-            <q-img :src="avatar" style="max-width: 120px"></q-img>
-          </div>
         </div>
-        <!-- @selectedFile="uploadAvatar" -->
       </div>
       <div class="row q-mt-sm flex-center">
         <div class="col-3 text-weight-medium">

src/pages/cap-nhat-thong-tin-nghe-sy/index.vue

@@ -58,6 +58,7 @@
               :profession-options="professionOptions"
               :artist-level-options="artistLevelOptions"
               :work-options="workOptions"
+              @SetAvatar="setAvatar($event)"
             ></PersonalInformation>
           </q-tab-panel>
           <q-tab-panel name="vabAccount">

src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts

@@ -35,6 +35,10 @@ import {
   TypeCardType,
 } from 'src/assets/type';
 
+export type AvatarType ={
+  file?:File,
+  url?:string | null
+}
 export default defineComponent({
   components: {
     PersonalInformation,
@@ -47,6 +51,7 @@ export default defineComponent({
     UpdateHotProduct,
     UploadEmbedDialog,
   },
+ 
   setup() {
     const route = useRoute();
     const tab = ref('information');
@@ -122,10 +127,7 @@ export default defineComponent({
       console.log(response, 'Artist Detail Info');
       const ArtistInformation = response.data.data;
       id.value = ArtistInformation.id;
-      // avatar.value = ArtistInformation.avatar
-
-      avatar.value =
-        'https://static2.yan.vn/YanNews/2167221/201911/son-tung-mtp-so-huu-3-cong-ty-giai-tri-o-tuoi-25-cdm-qua-gioi-f53bb404.jpg';
+      avatar.value = ArtistInformation.avatar;
       account.value = ArtistInformation.account;
       artistCode.value = ArtistInformation.artistCode;
       fullName.value = ArtistInformation.fullName;
@@ -164,6 +166,11 @@ export default defineComponent({
         );
       }
     };
+    
+    const setAvatar =(value:BannerType)=>{
+      console.log(value);
+      avatar.value = value.url as string
+    };
     const getFieldOptions = async () => {
       const response = (await api({
         url: API_PATHS.getFieldOptions,
@@ -443,6 +450,7 @@ export default defineComponent({
       getTypeCardOptions,
       rowDataAccBank,
       avatar,
+      setAvatar
     };
   },
 });