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 flex-column">
        <view class="flex-grow flex-center">
          <image
            src="/static/images/user/round.png"
            mode="heightFix"
            style="height: 100%"
          />
        </view>
        <view class="main flex-shrink">
          <view
            class="avatar"
            @click="toPage(3)"
            :style="{
              'background-image': `url(${user.avatar})`,
            }"
          ></view>
          <view class="phone fs-40 fw-500">{{ user.mobilePhoneFormat }}</view>
          <view class="money flex-align-center pressable" hover-class="pressed" hover-stay-time="80" @click="toPage(-1)">
            <uni-icons
              type="wallet-filled"
              size="24"
              color="var(--color-primary)"
            ></uni-icons>
            <view class="color-primary ml-12" style="font-size: 16px"
              >钱包 | 充值</view
            >
            <view class="fs-40 fw-500 ml-auto mt-12 color-primary">¥</view>
            <view class="fs-60 fw-500 ml-12 mr-48 color-primary">{{
              user.balance
            }}</view>
          </view>
        </view>
      </view>

      <view class="body">
        <block v-for="(item, index) in menu" :key="index">
          <view
            class="menu flex-align-center pressable"
            hover-class="pressed"
            hover-stay-time="80"
            v-if="
              index !== menu.length - 1 || user.mobilePhone === '15986907592'
            "
            @click="toPage(index)"
          >
            <view class="menu-icon">
              <uni-icons v-if="item.iconType" :type="item.iconType" size="26" color="rgba(28,43,41,0.65)"></uni-icons>
              <image v-else :src="item.icon" mode="aspectFit"></image>
            </view>
            <view>{{ item.title }}</view>
            <view class="ml-auto">
              <uni-icons
                type="right"
                size="12"
                color="rgba(28,43,41,0.4)"
              ></uni-icons>
            </view>
          </view>
        </block>
      </view>
    </view>
  </block>
  <block v-else>
    <view class="container" :style="containerStyle">
      <view class="header flex-column">
        <view class="flex-grow flex-center">
          <image
            src="/static/images/user/round.png"
            mode="heightFix"
            style="height: 100%"
          />
        </view>
        <view class="main flex-shrink flex-column flex-align-center pt-40">
          <view class="fs-32 color-000-6 mt-40">登录后查看更多功能</view>
          <view class="mt-32">
            <button class="login-btn" @click="goToLogin">登录/注册</button>
          </view>
        </view>
      </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 { ref } from "vue";
const containerStyle = ref({});
const user = ref<any>({
  avatar: "",
});
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: "联系我们（工作时间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",
  },
]);
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);
    res.avatar = res.avatar
      ? res.avatar
      : "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
    user.value = res;
  });
});
</script>

<style lang="scss">
@use "../../styles/dialog.scss";
.login-btn {
  width: 480rpx;
  height: 80rpx;
  background: var(--color-primary);
  color: #fff;
  font-size: 30rpx;
  border-radius: 40rpx;
  line-height: 80rpx;
  transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.login-btn:active {
  background: var(--color-primary-deep);
}
.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;
}

.header {
  height: 400rpx;
  width: 100%;

  .main {
    height: 334rpx;
    background: rgba(254, 255, 255, 0.7);
    border-radius: 40rpx 40rpx 0 0;
    position: relative;
    text-align: center;

    .avatar {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -50rpx;
      width: 110rpx;
      height: 110rpx;
      border: 2rpx solid #ffffff;
      filter: drop-shadow(0px 4rpx 8rpx rgba(0, 24, 60, 0.1));
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 50%;
    }

    .phone {
      padding-top: 78rpx;
      color: #1c2b29;
    }

    .money {
      width: 690rpx;
      height: 118rpx;
      background: #ffffff;
      border-radius: 120rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      color: #1c2b29;
      padding: 0 24rpx 0 40rpx;
      box-shadow: 0 4rpx 16rpx rgba(28, 43, 41, 0.05);
    }
  }
}

.body {
  width: 100%;
  background-color: #fff;
  padding: 0rpx 30rpx;

  .menu {
    background-color: #fff;
    height: 120rpx;
    border-bottom: 1rpx solid var(--divider);

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

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

    &:last-child {
      border-bottom: none;
    }
  }
}
</style>