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.user") }}
      </view>

      <view class="nav-actions">
        <view class="notice-wrap" @click="navigateToMessage">
          <uni-badge :text="messageCount" absolute="rightTop" size="small">
            <view class="notice-button">
              <image
                src="~@/static/home/message.png"
                style="width: 15px; height: 15px; background-color: transparent"
              />
            </view>
          </uni-badge>
        </view>
      </view>
    </view>
    <view class="content-section">
      <!--顶部个人信息栏-->
      <view class="user-info flex-col">
        <view class="flex-row" style="padding-bottom: 10px">
          <image
            class="avatar"
            :src="
              userInfo?.avatar ? userInfo?.avatar : '/static/user/avatar.png'
            "
          ></image>
          <view class="info flex-col align-center justify-start">
            <view class="text flex-row" style="align-items: center; gap: 10px">
              <text class="nickname">{{ userInfo?.nickname }}</text>
              <text
                style="
                  background-color: #e6f2fd;
                  padding: 2px 10px;
                  color: #1755dc;
                  border-radius: 20px;
                "
                >{{ userInfo.username }}</text
              >
            </view>
            <view
              class="text flex-row"
              style="
                margin-top: 10px;
                display: flex;
                align-items: center;
                gap: 5px;
              "
            >
              <uni-icons type="phone-filled" size="16" color="#656f85" />
              <text>{{ userInfo?.mobile }}</text>
            </view>
            <!-- 项目部 -->
            <view
              class="text flex-row"
              style="
                margin-top: 10px;
                display: flex;
                align-items: center;
                gap: 5px;
              "
            >
              <uni-icons type="staff" size="16" color="#656f85" />
              <text>{{ userInfo?.dept.name }}</text>
            </view>
          </view>
        </view>

        <!-- <view class="info-list flex-row w-full justify-between items-center">
          <view class="flex-col justify-center items-center list-item">
            <text class="info-text">6</text>
            <text class="info-tip">待处理</text>
          </view>
          <view
            class="flex-col justify-center items-center list-item mark-item"
          >
            <text class="info-text">6</text>
            <text class="info-tip">关注设备</text>
          </view>
          <view class="flex-col justify-center items-center list-item">
            <text class="info-text">6</text>
            <text class="info-tip">导出报表</text>
          </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>
      <button
        type="warn"
        plain="true"
        @click="logout"
        style="
          background-color: #fff;
          border: 0.5px solid #f2f4f7;
          margin-top: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <image
          style="width: 22px; height: 22px; padding-right: 8px"
          src="/static/user/logout.png"
        ></image>
        <text>{{ $t("user.logout") }}</text>
      </button>
    </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";
import { getUnreadMessageCount } from "@/api/message";
import { onShow } from "@dcloudio/uni-app";
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 navigateToMessage = () => {
  uni.navigateTo({
    url: "/pages/message/index",
  });
};

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("");
const messageCount = ref(0);

const loadUserPageData = async () => {
  const [userRes, messageRes] = await Promise.all([
    getLoginUserInfo(),
    getUnreadMessageCount(),
  ]);
  userInfo.value = userRes?.data || {};
  messageCount.value = messageRes?.code === 0 ? messageRes.data || 0 : 0;
};

onMounted(async () => {
  await loadUserPageData();
  const wgtInfo = await getCurrentWgtInfo();
  version.value = wgtInfo?.version || "";

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

onShow(() => {
  loadUserPageData();
});
</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/entry/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  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-actions {
  position: absolute;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-title {
  font-family: PingFang-SC, PingFang-SC;
  padding-bottom: 10rpx;
  font-size: 18px;
  color: #ffffff;
  line-height: 22px;
  text-align: right;
  // font-style: normal;
}

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

.notice-wrap {
  display: flex;
  align-items: center;
}

.notice-button {
  width: 30rpx;
  height: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

.info-list {
  // margin-top: 50rpx;
  border-top: 1px solid #e2e6ee;
  padding-top: 10px;
  padding-right: 20px;
  padding-left: 20px;
  .list-item {
    text-align: center;
  }
  .mark-item {
    border-left: 1px solid #e2e6ee;
    border-right: 1px solid #e2e6ee;
    padding-left: 30px;
    padding-right: 30px;
  }
  .info-text {
    font-size: 48rpx;
    font-weight: 500;
    color: #0355ed;
  }

  .info-tip {
    color: #657085;
  }
}

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

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

.nickname {
  font-size: 20px;
  font-weight: bold;
}

.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>