base_ui/pages/settings/pages/MyAccount.vue

<template>
  <div class=" ">
    <div class="">
      <div v-if="canView">
        <div class="tab-content">
          <div
            class="fade show active"
            id="nav-myAccount"
            role="tabpanel"
            aria-labelledby="nav-myAccount-tab"
          >
            <div class="my-profile__container" style="position: relative">
              <div class="my-profile">
                <div class="my-profile__pic">
                  <div id="aks-file-upload">
                    <div class="aks-file-upload">
                      <input
                        type="file"
                        name="aksfileupload[]"
                        @change="onFileChange($event)"
                        id="aksfileupload"
                        multiple=""
                        hidden=""
                      />
                      <div class="aks-file-upload-content">
                        <label
                          for="aksfileupload"
                          class="aks-file-upload-label row"
                        >
                          <div class="profile__avatar">
                            <img
                              :src="profile.newAvatar ?? userAvatar(profile)"
                              :alt="profile.first_name"
                            />
                          </div>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="my-profile__form">
                  <div class="mt-4">
                    <div class="form-row d-flex justify-content-around">
                      <label class="col-12 col-md-5" for="">{{ $t("Name") }}:</label>
                      <input
                        class="form-control col-12 col-md-6"
                        type="text"
                        v-model.trim="profile.first_name"
                      />
                    </div>
                    <div class="form-row justify-content-around mt-3">
                      <label class="col-12 col-md-5" for="">{{ $t("LastName") }}:</label>
                      <input
                        class="form-control col-12 col-md-6"
                        type="text"
                        v-model.trim="profile.last_name"
                      />
                    </div>
                    <div class="form-row justify-content-around mt-3">
                      <label class="col-12 col-md-5" for="">{{ $t("Mobile") }}:</label>
                      <input
                        class="form-control col-12 col-md-6"
                        dir="ltr"
                        type="text"
                        v-model.trim="profile.mobile"
                      />
                    </div>
                    <div class="form-row justify-content-around mt-3">
                      <label class="col-12 col-md-5" for="">{{ $t("Email") }}:</label>
                      <input
                        class="form-control col-12 col-md-6"
                        dir="ltr"
                        type="text"
                        v-model.trim="profile.mail"
                      />
                    </div>
                  </div>
                  <div class="d-flex justify-content-end mt-3">
                    <a @click="edit" class="button" data-dismiss="modal">{{
                      $t("Save")
                    }}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <no-data v-else>
        <!-- <the-content-loading v-if="fetchingData"></the-content-loading> -->

        <div class="d-flex justify-content-center align-items-center">
          <div
            class="alert alert-warning d-flex justify-content-center align-items-center"
          >
            <span
              class="tavasi tavasi-warning-circle color-inherit ml-1 text__32"
            ></span>
            {{ $t("Inaccessibility") }}
          </div>
        </div>
      </no-data>
    </div>
  </div>
</template>

<script>
import settingsMixin from "../../../mixins/settings/settingsMixin";

export default {
  props:["currentTab"],
  mixins: [settingsMixin],
  mounted() {
    if (this.isRealUser) {
      this.canView = true;
    } else this.canView = false;

    // this.setTab(1);
    // this.checkPermisionBeforGetList("settings_my-account").then(() => {
    //   this.setTab(1);
    // });
  },
};
</script>

<style lang="scss" scoped>
.user-modal {
  border: none !important;
  /* height:45em !important; */
  margin-top: 0 !important;
  .my-profile__pic {
    padding-bottom: 18px !important;
  }
  .my-profile {
    padding-bottom: unset !important;
  }
}
.fix-user-modal {
  position: relative;
  margin: auto;
  top: 255px;
}
.fix {
  position: relative;
  margin: auto;
}
.my-profile {
  padding-right: 50px;
}

.popUp-tab__content {
  padding-top: 0.5em !important;
}
.my-profile__form {
  max-width: 40em;
}
.my-profile {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  &__pic {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px #f1f1f1;
    position: relative;

    .aks-file-upload-content {
      display: flex;
    }

    .aks-file-upload-preview {
      height: unset !important;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .aks-file-upload-image {
      img {
        width: 72px;
        height: 72px !important;
        border-radius: 50%;
      }
    }

    label {
      margin: 0;
    }

    .aks-file-upload-p-header {
      display: none;
    }

    .aks-file-upload-label {
      background: #f7fafe;
      border-radius: 50%;
      // display:none;
      width: 80px;
      height: 80px;
      border: 2px #f1f1f1;
      position: relative;
      color: rgba(0, 0, 0, 0);
      display: flex;
      overflow: hidden;

      &::before {
        content: "+";
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: absolute;
        color: #bac4ce;
        font-weight: bold;
        font-size: 18px;
        cursor: pointer;
      }

      .profile__avatar {
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

// .form-control {
//   border-radius: 0.25em;
//   border: solid 1px #7ed6ec;
//   width: 15em;

// }
// .popUp-tab__content {
//   padding: 1em;
//   border: 1px solid #d3d3d3;
//   border-radius: 1.3rem;

//   label {
//     margin-bottom: 0;
//   }

// }
</style>