pms-app/pages/user/index.vue

<template>
  <view class="page mine-container" :style="{ height: `${windowHeight}px` }">
    <view class="page-back"></view>
    <view class="navgator justify-center align-center">
      <view class="nav-title">
        {{ $t("app.appName") }}
      </view>
    </view>
    <view class="content-section">
      <!--顶部个人信息栏-->
      <view class="user-info flex-row justify-start align-center">
        <image
          class="avatar"
          :src="
            userInfo?.avatar ? userInfo?.avatar : '/static/common/avata.gif'
          "></image>
        <view class="info flex-col align-center justify-start">
          <view class="text flex-row">
            <span class="span">{{ $t("user.username") }}:</span
            >{{ userInfo?.nickname }}
          </view>
          <view class="text flex-row">
            <span class="span">{{ $t("user.phone") }}:</span
            >{{ userInfo?.mobile }}
          </view>
        </view>
      </view>
      <!-- 菜单 -->
      <view class="menu-list">
        <view
          class="card-cell flex-row align-center justify-between"
          @click="navigateToChange">
          <image
            src="/static/user/anquanzhongxin.svg"
            mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t("user.securityCenter") }}
              </view>
              <view class="subtitle">
                {{ $t("user.modifyPhoneAndPassword") }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>

        <view class="card-cell flex-row align-center justify-between">
          <image src="/static/user/guanyuwomen.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t("user.aboutUs") }}
              </view>
              <view class="subtitle">
                {{ $t("user.currentVersion") + " " + version }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>

        <view
          class="card-cell flex-row align-center justify-between"
          @click="logout">
          <image src="/static/user/tuichu.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t("user.logout") }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getCurrentWgtInfo } from "@/utils/hot-update";
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { getLoginUserInfo } from "@/api/login";
const { t } = useI18n({
  useScope: "global",
});

import $store from "@/store";
// const userStore = $store('user');
//
// const userInfo = ref(JSON.parse(getUserInfo()))
// userInfo.value = JSON.parse(userInfo.value).user
// console.log('useer---', userInfo.value)
// const avatar = userInfo.value.avatar
// const name = userInfo.value.nickname
// const phone = userInfo.value.phone || ''
const windowHeight = ref(0);
uni.getSystemInfo({
  success: function (res) {
    windowHeight.value = res.windowHeight;
  },
});

const navigateToChange = () => {
  uni.navigateTo({
    url: "/pages/user/change?info=" + JSON.stringify(userInfo.value),
  });
};

const userStore = $store("user");
const logout = () => {
  uni.showModal({
    title: t("api.message"),
    content: `${t("login.logoutConfirm")}？`,
    success: async function (res) {
      if (res.confirm) {
        await userStore.LogOut();
        await uni.reLaunch({
          url: "/pages/user/login",
        });
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};

const userInfo = ref({});
const version = ref("");
onMounted(async () => {
  const wgtInfo = await getCurrentWgtInfo();
  version.value = wgtInfo?.version || "";
  userInfo.value = (await getLoginUserInfo()).data;

  uni.$once("updateUserInfo", async () => {
    userInfo.value = (await getLoginUserInfo()).data;
  });
});
</script>

<style lang="scss" scoped>
.page {
  padding: 10px !important;
}

.mine-container {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.page-back {
  background-image: url("/static/common/1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 350px;
  z-index: 0;
}

.navgator {
  position: fixed;
  top: 1.5625rem;
  left: 0;
  width: 100%;
  height: 55px;
  padding: 15px 0;

  z-index: 2;
  // background-image: url('/static/common/nav-back.png');
}

.nav-title {
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
  line-height: 22px;
  text-align: right;
  font-style: normal;
}

.content-section {
  position: relative;
  margin-top: 70px;
  width: 100%;
  height: calc(100% - 55px - 20px);
  overflow-y: auto;
}

.user-info {
  width: 100%;
  height: 80px;
  padding: 14px 20px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  color: #333333;

  .avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-right: 18px;
  }

  .info {
    width: calc(100% - 52px - 18px);
  }
}

.text {
  height: 19px;
  width: 100%;

  .span {
    display: block;
    min-width: 70px;
  }
}

.menu-list {
  height: 274px;
  background: #ffffff;
  border-radius: 6px;
  margin-top: 10px;
  padding: 20px;
  box-sizing: border-box;
}

.card-cell {
  width: 100%;
  height: 50px;

  image {
    width: 32px;
    height: 32px;
  }
}

.cell-con {
  margin-left: 20px;
  margin-right: 10px;
  width: calc(100% - 32px - 20px - 10px);
  height: 100%;
  border-bottom: 0.5px solid #cacccf;
}

.cell-text {
  font-weight: 500;

  .title {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
  }

  .subtitle {
    font-size: 12px;
    color: #999999;
    line-height: 17px;
    margin-left: 10px;
  }

  .icon {
    width: 6px;
    height: 10px;
  }
}
</style>