charge-java/charge-front/src/pages/user/user.vue

<template>
  <navigation-bar title="个人中心"></navigation-bar>

  <image src="/static/images/user-bg.png" mode="widthFix" class="bg" />

  <block v-if="user && user.mobilePhone">
    <view class="container" :style="containerStyle">
      <view class="header">
        <view class="phone fs-34 color-fff">{{ user.mobilePhoneFormat }}</view>
      </view>

      <!-- 钱包余额主卡（品牌色块，呼应顶部背景） -->
      <view
        class="panel pressable"
        hover-class="pressed"
        hover-stay-time="80"
        @click="toPage(-1)"
      >
        <view class="flex-column">
          <view class="fs-24 panel-label">钱包余额（元）</view>
          <view class="flex-align-baseline mt-8">
            <text class="fs-32 fw-500 panel-label">¥</text>
            <text class="fs-64 fw-600 ml-8 balance-num">{{ user.balance }}</text>
          </view>
        </view>
        <view class="recharge-btn flex-center fs-26 fw-500">充值</view>
      </view>

      <!-- 功能菜单分组 -->
      <view class="menu-group" v-for="(group, gi) in menuGroups" :key="gi">
        <template v-for="idx in group" :key="idx">
          <view
            class="menu flex-align-center pressable"
            hover-class="pressed"
            hover-stay-time="80"
            v-if="idx !== menu.length - 1 || user.mobilePhone === '15986907592'"
            @click="toPage(idx)"
          >
            <view class="menu-icon">
              <uni-icons
                v-if="menu[idx].iconType"
                :type="menu[idx].iconType"
                size="26"
                color="rgba(28,43,41,0.65)"
              ></uni-icons>
              <image v-else :src="menu[idx].icon" mode="aspectFit"></image>
            </view>
            <view class="menu-content flex-column flex-grow">
              <view class="menu-title fs-28">{{ menu[idx].title }}</view>
              <view class="menu-desc fs-22 mt-4" v-if="menu[idx].desc">{{
                menu[idx].desc
              }}</view>
            </view>
            <view class="ml-auto">
              <uni-icons
                type="right"
                size="12"
                color="rgba(28,43,41,0.3)"
              ></uni-icons>
            </view>
          </view>
        </template>
      </view>

      <view style="height: 40rpx"></view>
    </view>
  </block>
  <block v-else>
    <view class="container" :style="containerStyle">
      <view class="guest flex-column flex-align-center">
        <image
          class="guest-logo"
          src="/static/images/map-logo.png"
          mode="aspectFit"
        />
        <view class="fs-28 mt-40" style="color: #5c6b69"
          >登录后查看更多功能</view
        >
        <button class="login-btn mt-48" @click="goToLogin">登录/注册</button>
      </view>
    </view>
  </block>
</template>

<script setup lang="ts">
import { fetchContact } from "@/api";
import { fetchProfile } from "@/api/user";
import { isAuthenticated, requireAuth } from "@/utils/auth";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { computed, ref } from "vue";
const containerStyle = ref({});
const user = ref<any>({});
const service = ref("");
const menu = ref([
  {
    title: "我的卡包",
    path: "/pages-charge/card/card",
    icon: "/static/images/user/0.png",
  },
  {
    title: "充电订单",
    path: "/pages-charge/orders/orders",
    icon: "/static/images/user/1.png",
  },
  {
    title: "发票抬头",
    path: "/pages-user/invoice-title",
    iconType: "compose",
  },
  {
    title: "我的收藏",
    path: "/pages-user/collect/collect",
    icon: "/static/images/user/2.png",
  },
  {
    title: "个人信息",
    path: "/pages-user/profile/profile",
    icon: "/static/images/user/3.png",
  },
  {
    title: "联系我们",
    desc: "工作时间 7:00-24:00",
    path: "",
    icon: "/static/images/user/4.png",
  },
  {
    title: "常见问题",
    path: "/pages-common/faq/faq",
    icon: "/static/images/user/5.png",
  },
  {
    title: "充电站列表",
    path: "/pages/list/list",
    icon: "/static/images/user/1.png",
  },
]);
// 菜单分组渲染：资产/订单 + 服务；索引与 menu 对应（toPage/鉴权依赖原索引）
const menuGroups = computed(() => [
  [0, 1, menu.value.length - 1],
  [2, 3, 4, 5, 6],
]);
const AUTH_REQUIRED_INDICES = [0, 1, 2, 3, 4];

const goToLogin = () => {
  requireAuth("/pages/user/user");
};

const toPage = (index: number) => {
  if (index < 0) {
    if (!requireAuth("/pages-user/wallet/wallet")) return;
    uni.navigateTo({
      url: "/pages-user/wallet/wallet",
    });
    return;
  }
  const item = menu.value[index];
  if (!item.path) {
    uni.makePhoneCall({
      phoneNumber: service.value,
    });
    return;
  }
  if (AUTH_REQUIRED_INDICES.includes(index) && !requireAuth(item.path)) {
    return;
  }
  uni.navigateTo({
    url: item.path + (item.title === "常见问题" ? `?service=${service.value}` : ""),
  });
};

onLoad(() => {
  const bound = uni.getMenuButtonBoundingClientRect();
  containerStyle.value = {
    top: `${bound.bottom + 10}px`,
  };
  fetchContact().then((res) => {
    if (res && res.mobile) {
      service.value = res.mobile;
    }
  });
});
onShow(() => {
  if (!isAuthenticated()) {
    return;
  }
  fetchProfile().then((res) => {
    res.mobilePhoneFormat =
      res.mobilePhone.slice(0, 3) + "****" + res.mobilePhone.slice(7);
    user.value = res;
  });
});
</script>

<style lang="scss">
@use "../../styles/dialog.scss";

page {
  background-color: var(--bg-page);
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 660rpx;
}

.container {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.header {
  height: 160rpx;
  display: flex;
  align-items: flex-end;
  padding-bottom: 32rpx;
}

.panel {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #2d9e95 0%, #23807a 100%);
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(45, 158, 149, 0.25);

  .panel-label {
    color: rgba(255, 255, 255, 0.75);
  }

  .balance-num {
    color: #ffffff;
    line-height: normal;
  }

  .recharge-btn {
    flex-shrink: 0;
    width: 128rpx;
    height: 56rpx;
    border-radius: 28rpx;
    background: #ffffff;
    color: var(--color-primary-deep);
    transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  }

  &:active .recharge-btn {
    opacity: 0.85;
  }
}

.menu-group {
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: 20rpx;
  padding: 0 30rpx;

  .menu {
    height: 112rpx;
    border-bottom: 1rpx solid var(--divider);

    &:last-child {
      border-bottom: none;
    }
  }

  .menu-icon {
    width: 52rpx;
    height: 52rpx;
    margin-right: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    image {
      width: 52rpx;
      height: 52rpx;
    }
  }

  .menu-title {
    color: #1c2b29;
    line-height: 34rpx;
  }

  .menu-desc {
    color: #8c9997;
    line-height: 28rpx;
  }
}

.guest {
  padding-top: 200rpx;
}

.guest-logo {
  width: 160rpx;
  height: 160rpx;
}

.login-btn {
  width: 400rpx;
  height: 88rpx;
  background: var(--color-primary);
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  border-radius: 44rpx;
  line-height: 88rpx;
  transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.login-btn:active {
  background: var(--color-primary-deep);
}
</style>