buddhism/pages/personalCenter/personalCenter.vue

<template>
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar ref="customNavbar" title="个人中心" />
    <view class="user-info">
      <view class="avatar-container">
        <image
          class="avatar"
          mode="aspectFill"
          src="https://api.ccttiot.com/image-1755237410755.png"
        />
      </view>
      <view class="user-details">
        <text class="phone-number">{{ userInfo.phone }}</text>
        <view class="verification-status">
          <text class="status-text">{{ userInfo.verificationStatus }}</text>
        </view>
      </view>
    </view>
    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
      <!-- 用户信息区域 -->

      <!-- 功能菜单区域 -->
      <view class="menu-section">
        <view
          v-for="(item, index) in menuItems"
          :key="index"
          class="menu-item"
          @click="handleMenuClick(item)"
        >
          <view class="menu-icon">
            <image :src="item.icon" mode="aspectFit" />
          </view>
          <text class="menu-text">{{ item.title }}</text>
          <view class="menu-arrow">
            <image :src="CommonEnum.RIGHT_CHEVRON" mode="aspectFit" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { CommonEnum } from "@/enum/common.js";

export default {
  data() {
    return {
      bgc: {
        backgroundColor: "#F5F0E7",
      },
      CommonEnum,
      // 加载状态
      loading: false,
      // 用户信息
      userInfo: {
        phone: "138****8912",
        verificationStatus: "未实名",
      },
      // 菜单项数据
      menuItems: [
        {
          title: "我的预约",
          icon: CommonEnum.MY_APPOINTMENT,
          path: "/pages/personalCenter/myAppointment",
        },
        {
          title: "我的收藏",
          icon: CommonEnum.MY_COLLECTION,
          path: "/pages/personalCenter/myCollection",
        },
        {
          title: "捐赠历史记录",
          icon: CommonEnum.MY_DONOR,
          path: "/pages/personalCenter/donationHistory",
        },
        {
          title: "祈福记录",
          icon: CommonEnum.MY_PRAY,
          path: "/pages/personalCenter/prayerRecords",
        },
        {
          title: "寺庙活动",
          icon: CommonEnum.MY_ACTIVITY,
          path: "/pages/personalCenter/templeActivities",
        },
      ],
    };
  },
  onLoad() {
    // 页面加载时获取用户信息
    this.loadUserInfo();
  },
  methods: {
    // 加载用户信息
    async loadUserInfo() {
      this.loading = true;
      try {
        // TODO: 调用获取用户信息API
        // const response = await getUserInfo()
        // this.userInfo = response.data

        // 模拟加载
        setTimeout(() => {
          this.loading = false;
        }, 500);
      } catch (error) {
        console.error("获取用户信息失败:", error);
        this.loading = false;
      }
    },

    // 处理菜单点击
    handleMenuClick(item) {
      console.log("点击菜单项:", item.title);

      // 跳转到对应页面
      if (item.path) {
        uni.navigateTo({
          url: item.path,
          fail: (err) => {
            console.error("页面跳转失败:", err);
            uni.showToast({
              title: "页面开发中",
              icon: "none",
            });
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  width: 650rpx;
  margin-top: 24rpx;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 38rpx 50rpx 50rpx 50rpx;
  background: #fffbf5;
  border-radius: 20rpx;
  border: 2rpx solid #c7a26d;
  margin-bottom: 40rpx;
}

// 用户信息区域
.user-info {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 50rpx;
  margin: 52rpx 0 54rpx 0;
  //border: red solid 2px;
}

.avatar-container {
  margin-right: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background: #f0f0f0;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.phone-number {
  font-size: 36rpx;
  font-weight: 500;
  color: #695347;
  margin-bottom: 16rpx;
  line-height: 1.2;
  text-align: left;
  //border: red solid 2px;
}

.verification-status {
  align-self: flex-start;
}

.status-text {
  background: #c7a26d;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-weight: 400;
}

// 菜单区域
.menu-section {
  width: 100%;
  flex: 1;
}

.menu-item {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  background: #faf8f3;
  border-radius: 16rpx;
  //border: 1rpx solid #d8189b;
  transition: all 0.3s ease;

  &:active {
    background: #f0e8d8;
    transform: scale(0.98);
  }
}

.menu-icon {
  width: 60rpx;
  height: 100rpx;
  margin-right: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  //border: 1rpx solid #d8189b;

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

.menu-text {
  flex: 1;
  font-size: 32rpx;
  font-weight: 400;
  color: #695347;
  line-height: 100rpx;
  text-align: left;
  align-items: center;
  //border: red solid 2px;
}

.menu-arrow {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  //border: red solid 2px;

  image {
    width: 32rpx;
    height: 32rpx;
  }
}
</style>