couponCenter_mpapp/src/pages/me/me.vue

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { LOGIN_PAGE } from '@/router/config'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'

definePage({
  style: {
    navigationBarTitleText: '我的',
    navigationStyle: 'custom',
  },
})

const userStore = useUserStore()
const tokenStore = useTokenStore()
// 使用storeToRefs解构userInfo
const { userInfo } = storeToRefs(userStore)

// 微信小程序下登录
async function handleLogin() {
  // #ifdef MP-WEIXIN
  // 微信登录
  await tokenStore.wxLogin()

  // #endif
  // #ifndef MP-WEIXIN
  uni.navigateTo({
    url: `${LOGIN_PAGE}`,
  })
  // #endif
}

function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清空用户信息
        useTokenStore().logout()
        // 执行退出登录逻辑
        uni.showToast({
          title: '退出登录成功',
          icon: 'success',
        })
        // #ifdef MP-WEIXIN
        // 微信小程序，去首页
        // uni.reLaunch({ url: '/pages/index/index' })
        // #endif
        // #ifndef MP-WEIXIN
        // 非微信小程序，去登录页
        // uni.navigateTo({ url: LOGIN_PAGE })
        // #endif
      }
    },
  })
}

// 顶部导航栏高度,设置banner位置
const navigationBarHeight = ref(0)
// #ifdef MP-WEIXIN
function getNavigationBarHeight() {
  uni.getSystemInfo({
    success: (res) => {
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      console.log('顶部导航栏高度:', res.statusBarHeight, menuButtonInfo)
      // 顶部导航栏高度 = 状态栏高度 + 胶囊的高度
      navigationBarHeight.value = res.statusBarHeight + menuButtonInfo.height + 12
    },
  })
}
getNavigationBarHeight()
// #endif

const show = ref(true)
function close() {
  show.value = false
}
function open() {
  show.value = true
}
function menuClick(page) {
  uni.navigateTo({
    url: `/pages-A/${page}/index`,
  })
}
</script>

<template>
  <view class="profile-container">
    <!-- 顶部区域 -->
    <view class="me-header" style="background: url('../../static/images/me/me-bg.png') no-repeat center center; background-size: cover;">
      <view class="me-header-avatar-info" :style="{ paddingTop: `${navigationBarHeight}px` }">
        <view class="me-header-avatar">
          <image src="https://picsum.photos/200/200" mode="" />
        </view>
        <view class="me-header-info">
          <view class="me-header-name">
            {{ userInfo.value?.nickName || '用户' }}
          </view>
        </view>
      </view>
      <view class="me-header-tips">
        <view class="me-header-tips-item">
          <view class="me-header-tips-item-num">
            1,125
          </view>
          <view class="me-header-tips-item-des">
            已领取
          </view>
        </view>
        <view class="me-header-tips-item">
          <view class="me-header-tips-item-num">
            1,125
          </view>
          <view class="me-header-tips-item-des">
            已使用
          </view>
        </view>
        <view class="me-header-tips-item">
          <view class="me-header-tips-item-num">
            1,125
          </view>
          <view class="me-header-tips-item-des">
            已过期
          </view>
        </view>
      </view>
    </view>
    <!-- 菜单 -->
    <view class="me-header-menu">
      <view class="me-header-menu-item" @click="menuClick('applyForm')">
        <view class="me-header-menu-icon">
          <image src="@/static/images/me/coupon-need.png" mode="" />
          <view class="me-header-menu-text">
            发券人申请
          </view>
        </view>
        <view class="me-header-menu-left">
          <up-icon name="arrow-right" color="#979797" size="12" />
        </view>
      </view>
      <view class="me-header-menu-item" @click="handleLogout">
        <view class="me-header-menu-icon">
          <image src="@/static/images/me/loginOut.png" mode="" />
          <view class="me-header-menu-text">
            退出登录
          </view>
        </view>
        <view class="me-header-menu-left">
          <up-icon name="arrow-right" color="#979797" size="12" />
        </view>
      </view>
    </view>
    <!-- 申请中的提示框 -->
    <up-modal
      content="您已提交申请，请耐心等待！"
      title="提示"
      :show="show"
    >
      <template #confirmButton>
        <view class="rounded" style="margin-top: 20rpx;" @click="show = false">
          我知道了
        </view>
      </template>
    </up-modal>
  </view>
</template>

<style lang="scss" scoped>
// 提示框
::v-deep .u-modal {
  width: 580rpx !important;
  //   height: 376rpx !important;
  border-radius: 20rpx !important;
}
::v-deep .u-modal__title {
  font-weight: 500 !important;
  font-size: 34rpx !important;
  color: #333333 !important;
  padding-top: 29rpx !important;
  padding-bottom: 28rpx !important;
}
::v-deep .u-modal__content {
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  padding-top: 82rpx !important;
  padding-bottom: 64rpx !important;
}
::v-deep .u-modal__content__text {
  font-weight: 500 !important;
  font-size: 32rpx !important;
  color: #333333 !important;
  text-align: center !important;
}
.rounded {
  width: 300rpx;
  line-height: 69rpx;
  background: linear-gradient(90deg, #ee6b67 0%, #ff7d78 100%);
  border-radius: 35rpx;
  font-weight: 400;
  font-size: 30rpx;
  color: #ffffff;
  text-align: center;
  margin: 0 auto;
}
.profile-container {
  font-family: Alibaba PuHuiTi;
  .me-header {
    height: 575rpx;
    .me-header-avatar-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 24rpx;
      .me-header-avatar {
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .me-header-info {
        .me-header-name {
          font-weight: 500;
          font-size: 30rpx;
          color: #ffffff;
        }
      }
    }
    .me-header-tips {
      display: flex;
      margin-top: 49rpx;
      .me-header-tips-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15rpx;
        font-weight: 500;
        font-size: 34rpx;
        color: #ffffff;
        line-height: 1;
        .me-header-tips-item-num {
          font-weight: bold;
        }
        .me-header-tips-item-des {
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
        }
      }
    }
  }
  .me-header-menu {
    background: #ffffff;
    border-radius: 10rpx 10rpx 0rpx 0rpx;
    margin: -50rpx 24rpx 0;
    padding: 0 20rpx;
    .me-header-menu-item {
      height: 88rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eeeeee;
      &:last-child {
        border-bottom: none;
      }
      .me-header-menu-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 13rpx;
        image {
          width: 40rpx;
          height: 40rpx;
        }
        .me-header-menu-text {
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
        }
      }
      .me-header-menu-left {
      }
    }
  }
}
</style>