Vent-App/pages/user/people.vue

<template>
  <view>
    <scroll-view scroll-y class="page">
      <!-- 头部logo-->
      <view class="UCenter-bg">
        <view class="avatar-box"> </view>
      </view>
      <view class="padding flex text-center bg-white userinfo-box">
        <view class="user1" :style="[{ animationDelay: '0.2s' }]">
          <view class="username1">
            <view class="text-xl" style="color: #fff">{{
              personalList.realname
            }}</view>
            <view class="text-info">姓名</view>
          </view>
          <view class="usericon1"> </view>
        </view>

        <view class="user2" :style="[{ animationDelay: '0.2s' }]">
          <view class="username2">
            <view class="text-xl" style="color: #fff">{{
              personalList.username
            }}</view>
            <view class="text-info">账号</view>
          </view>
          <view class="usericon2"> </view>
        </view>
      </view>
      <!-- 列表list-->
      <view
        class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius people-menu"
      >
        <!-- <view
          class="cu-item arrow animation-slide-bottom"
          :style="[{ animationDelay: '0.3s' }]"
          @tap="scan"
        >
          <view class="content">
            <text class="cuIcon-scan menu-icon"></text>
            <text class="text-grey">扫码</text>
          </view>
        </view> -->
        <navigator
          class="cu-item arrow animation-slide-bottom"
          url="/pages/user/userdetail"
          :style="[{ animationDelay: '0.6s' }]"
        >
          <view class="content">
            <text class="cuIcon-settings menu-icon"></text>
            <text class="text-grey">设置</text>
          </view>
        </navigator>

        <view
          class="cu-item arrow animation-slide-bottom"
          :style="[{ animationDelay: '0.7s' }]"
          hover-class="none"
          @tap="confirmExit"
        >
          <view class="content">
            <text class="cuIcon-exit menu-icon"></text>
            <text class="text-grey">退出</text>
          </view>
        </view>
      </view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>

    <!-- 退出登录确认弹窗 -->
    <u-popup
      :show="exitShow"
      mode="center"
      :round="16"
      :closeable="false"
      :closeOnClickOverlay="true"
      @close="closeExit"
    >
      <view class="exit-modal">
        <view class="exit-modal-header">
          <text class="exit-modal-title">提示</text>
          <view class="exit-modal-close" @click="closeExit">
            <u-icon name="close" size="16" color="#2b7cff"></u-icon>
          </view>
        </view>
        <view class="exit-modal-divider"></view>
        <view class="exit-modal-body">
          <view class="exit-confirm-box">
            <!-- 退出图标位置：待替换为正式图标 -->
            <image
              class="exit-confirm-icon"
              src="/static/user/loginout.svg"
            ></image>
            <text class="exit-confirm-text">确定退出登录吗？</text>
          </view>
        </view>
        <view class="exit-modal-footer">
          <view class="exit-btn exit-btn-plain" @click="closeExit">
            <text class="exit-btn-text">取消</text>
          </view>
          <view class="exit-btn exit-btn-primary" @click="doLogout">
            <text class="exit-btn-text">确定</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import api from "@/api/api";
import { ACCESS_TOKEN, USER_NAME, USER_INFO } from "@/common/util/constants";
export default {
  name: "people",
  data() {
    return {
      personalList: {
        realname: "",
        username: "",
      },
      positionUrl: "/sys/position/list",
      departUrl: "/sys/user/userDepartList",
      userUrl: "/sys/user/queryById",
      postUrl: "/sys/position/queryByCode",
      userId: "",
      id: "",
      logoutJumping: false, // 防止重复点击退出
      exitShow: false, // 退出确认弹窗
    };
  },
  watch: {
    cur: {
      immediate: true,
      handler() {
        console.log("watch", this.cur);
        const userInfo = uni.getStorageSync(USER_INFO) || {};
        this.userId = userInfo.id || "";
        this.personalList.realname = userInfo.realname || "";
        this.personalList.username = userInfo.username || "";
        this.load();
      },
    },
  },
  methods: {
    // 退出登录：先弹确认框，确认后直接退出并回到登录页
    confirmExit() {
      this.exitShow = true;
    },
    closeExit() {
      this.exitShow = false;
    },
    doLogout() {
      if (this.logoutJumping) {
        return;
      }
      this.logoutJumping = true;
      this.exitShow = false;
      const token = uni.getStorageSync(ACCESS_TOKEN);
      // 退出接口失败不影响本地退出流程
      if (token) {
        api.logout(token).catch(() => {});
      }
      this.clearLoginState();
      // 直接回到登录页，清空页面栈，避免侧滑返回系统内部页面
      uni.reLaunch({ url: "/pages/login/login" });
    },
    clearLoginState() {
      [
        ACCESS_TOKEN,
        USER_NAME,
        USER_INFO,
        "menuPermission",
        "btnPermission",
      ].forEach((key) => {
        uni.removeStorageSync(key);
      });
      this.$store.commit("SET_TOKEN", "");
      this.$store.commit("SET_NAME", { username: "", realname: "" });
      this.$store.commit("SET_DICT", "");
    },
    scan() {
      console.log("进来了");
      // #ifndef H5
      uni.scanCode({
        success: function (res) {
          console.log("条码res：" + res);
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
        },
      });
      // #endif
      // #ifdef H5
      this.$tip.alert("暂不支持");
      // #endif
    },
    load() {
      if (!this.userId) {
        return;
      }
      this.$http
        .get(this.userUrl, { params: { id: this.userId } })
        .then((res) => {
          console.log("res", res);
          if (res.data.success) {
            let perArr = res.data.result;
            let avatar =
              perArr.avatar && perArr.avatar.length > 0
                ? api.getFileAccessHttpUrl(perArr.avatar)
                : "/static/user2.png";
            this.personalList.realname = perArr.realname;
            console.log(perArr, "用户信息");
            this.personalList.username = perArr.username;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.UCenter-bg {
  /* #ifdef MP-WEIXIN */
  background-image: url("/static/topnavbar.png");
  /* #endif */
  /* #ifndef MP-WEIXIN */
  background-image: url("/static/user/usertopbg.png");
  /* #endif */
  background-size: cover;
  height: 400rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.avatar-box {
  position: relative;
  width: 250rpx;
  height: 250rpx;
  background-image: url("/static/user/userTop.png");
  background-size: 100% 100%;
}
.avatar {
  position: absolute;
  width: 100%;
  height: 95%;
  background-image: url("/static/user2.png");
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
}
.userinfo-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  margin: 16rpx 15rpx 0;
  box-sizing: border-box;
  border-radius: 12rpx;
  background-color: #f9f9fb;
  border: 1px solid #fff;
}

.user1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  background-image: url("/static/user/userbg1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0;
  padding: 14rpx 10rpx 10rpx 20rpx;
  height: 128rpx;
  border-radius: 16rpx;
}
.usericon1 {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  width: 72px;
  height: 80px;
  margin: 0 0px -5px 0;
  align-self: flex-end;
  background-image: url("/static/user/user.png");
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.username1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding-bottom: 8rpx;
  text-align: left;
}
.user2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  background-image: url("/static/user/userbg2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 0 0 16rpx;
  padding: 14rpx 10rpx 10rpx 20rpx;
  height: 128rpx;
  border-radius: 16rpx;
}
.usericon2 {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  width: 80px;
  height: 79px;
  margin: 0 -1px -4px 0;
  align-self: flex-end;
  background-image: url("/static/user/user1.png");
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.username2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding-bottom: 8rpx;
  text-align: left;
}
.username1 .text-xl,
.username2 .text-xl {
  overflow: hidden;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.username1 .text-info,
.username2 .text-info {
  color: rgba(255, 255, 255, 0.92);
  font-size: 22rpx;
  font-weight: 400;
}
.UCenter-bg text {
  opacity: 0.8;
}

.UCenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.UCenter-bg .gif-wave {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100rpx;
}

map,
.mapBox {
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100rpx;
}

map,
.mapBox {
  width: 750rpx;
  height: 300rpx;
}
.card-menu {
  margin: 20rpx;
}
.people-menu {
  overflow: visible;
  margin-top: 20rpx;
  background-color: transparent;
  box-shadow: none;
}
.people-menu > .cu-item {
  min-height: 80rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  background-color: #f9f9fb;
  border: 1rpx solid #fff;
}
.people-menu > .cu-item:last-child {
  margin-bottom: 0;
}
.people-menu > .cu-item.arrow:before {
  color: #1677ff;
}
.people-menu .menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52rpx;
  height: 52rpx;
  margin-right: 16rpx;
  border-radius: 8rpx;
  background: linear-gradient(135deg, #80b4ff, #347df3);
  color: #fff;
  font-size: 30rpx;
  vertical-align: middle;
}
.people-menu .content > text[class*="cuIcon"] {
  width: 52rpx;
  margin-right: 16rpx;
}
.text-grey {
  color: #000;
  font-weight: bold;
}

/* ===== 退出登录确认弹窗 ===== */
.exit-modal {
  width: 620rpx;
  background: #f9f9fb;
  border-radius: 16rpx;
  border: 1px solid #fff;
  overflow: hidden;
  padding-bottom: 28rpx;
  box-sizing: border-box;
}

.exit-modal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 28rpx 20rpx;
}

.exit-modal-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.exit-modal-close {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-modal-divider {
  height: 1rpx;
  background: #eef0f4;
  margin: 0 24rpx;
}

.exit-modal-body {
  padding: 24rpx 28rpx;
}

/* 内容框 */
.exit-confirm-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 36rpx 24rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  background-color: #eaeefc;
  border: 1px solid #fff;
}

/* 退出图标：uni-app image 默认 320x240，必须显式给宽高 */
.exit-confirm-icon {
  width: 56rpx;
  height: 56rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.exit-confirm-text {
  font-size: 28rpx;
  color: #1a1a1a;
  white-space: nowrap;
}

.exit-modal-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20rpx;
  padding: 0 28rpx;
}

.exit-btn {
  flex: 1;
  height: 64rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.exit-btn-text {
  font-size: 28rpx;
  font-weight: 500;
}

.exit-btn-plain {
  background: #ffffff;
  border: 1rpx solid #0065f8;
}

.exit-btn-plain .exit-btn-text {
  color: #0065f8;
}

.exit-btn-primary {
  background: #0065f8;
}

.exit-btn-primary .exit-btn-text {
  color: #ffffff;
}
</style>