web/pages/mine/modules/user-info.vue

<template>
  <div class="user-box" :class="{ 'mobile-user': isMobile }">
    <div class="user-info">
      <div class="label">{{t('myInfo.nickname')}}：</div>
      <div class="label-info">{{ user.name }}</div>
    </div>
    <div class="user-info">
      <div class="label">{{t('myInfo.phone')}}：</div>
      <div class="label-info">
        {{ user.contact }}
        <span class="bqfl-iconfont icon-xiugai cursor ml5 f16" @click="handleEdit('info')">{{t('myInfo.modify')}}</span>
      </div>
    </div>
    <div class="user-info">
      <div class="label">{{t('common.register.password')}}：</div>
      <div class="label-info">
        <span class="bqfl-iconfont icon-xiugai cursor ml5 f16" @click="handleEdit('password')">{{t('myInfo.modify')}}</span>
      </div>
    </div>
    <div class="user-info">
      <div class="label">{{t('myInfo.companyName')}}：</div>
      <div class="label-info">
        {{ user.companyName || "--" }}
        <span class="bqfl-iconfont icon-xiugai cursor ml5 f16" @click="handleEdit('info')">{{t('myInfo.modify')}}</span>
      </div>
    </div>
    <div class="user-info">
      <div class="label">{{t('myInfo.position')}}：</div>
      <div class="label-info">
        {{ user.addr || "--" }}
        <span class="bqfl-iconfont icon-xiugai cursor ml5 f16" @click="handleEdit('info')">{{t('myInfo.modify')}}</span>
      </div>
    </div>
    <div class="user-info">
      <div class="label">{{t('myInfo.email')}}：</div>
      <div class="label-info">
        {{ user.email }}
        <span class="bqfl-iconfont icon-xiugai cursor ml5 f16" @click="handleEdit('info')">{{t('myInfo.modify')}}</span>
      </div>
    </div>
  </div>
  <n-modal :show="editVisible" preset="dialog" :title="editTitle" :showIcon="false" :close-on-esc="false" :mask-closable="false" @close="editVisible = false" :class="{ 'login-dialog': isMobile }">
    <updatePwd v-if="editType == 'password'" @closeSginDialog="closeSginDialog"></updatePwd>
    <updateInfo :info="user" v-if="editType == 'info'" @closeSginDialog="closeSginDialog"></updateInfo>
  </n-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { createDiscreteApi } from "naive-ui";
import { set } from "~/node_modules/nuxt/dist/app/compat/capi";
import updateInfo from "./update-info.vue";
import { useI18n } from "#imports";
const message = createDiscreteApi(["message"]);
const { t } = useI18n();
const props = defineProps({
  isMobile: {
    type: Boolean,
    default: false,
  },
});

const user = ref({});
const editVisible = ref(false);
const editTitle = ref(t('myInfo.modify'));
const editType = ref("password");

const getUser = async () => {
  let { code, data } = await getUser_Api();
  if (code === 200) {
    user.value = data;
  }
};

const handleEdit = (type: string) => {
  editType.value = type;
  editVisible.value = true;
  if (type == "password") {
    editTitle.value = t('myInfo.password');
  } else {
    editTitle.value = t('reportPop.title');
  }
};

const closeSginDialog = () => {
  editVisible.value = false;
  editType.value = "";
  getUser();
};
getUser();
</script>

<style lang="scss" scoped>
.user-box {
  height: 100%;

  .user-info {
    display: flex;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;

    .label {
      display: inline-block;
      width: 160px;
      text-align: right;
    }

    .label-info {
      color: #808080;
    }
  }
}

.mobile-user.user-box {
  .user-info {
    .label {
      text-align: left;
    }
  }
}

.n-dialog {
  min-width: 550px;
  padding-top: 48px;
  border-radius: 20px;

  .n-dialog__title {
    display: block;
    font-size: 24px;
    color: #1a1a1a;
    font-weight: bold;
    text-align: center;
  }
}

.login-dialog.n-dialog {
  min-width: auto;

  padding-top: 20px;
  border-radius: 10px;

  .n-dialog__title {
    font-size: 18px;
  }

  .n-dialog__content {
    .container {
      padding: 20px 10px;

      .login-btn {
        height: 45px;
      }

      .n-form {
        .n-form-item {
          .n-form-item-label {
            width: 85px !important;
            font-size: 12px;
          }
          .n-form-item-feedback-wrapper {
            min-height: 10px;
          }
        }
      }
    }
  }
}
</style>