JCSS / jcss-miniprogram

<template>
  <view class="page-container">
    <!-- 顶部用户信息栏：品牌渐变（设计稿 --grad-head） -->
    <view class="header-bg">
      <up-avatar
          :src="'https://img.jichengshanshui.com.cn:28207/appimg/default-avatar.png'"
          size="100rpx"
          shape="circle"
          class="user-avatar"
      ></up-avatar>

      <!-- 用户名+最近登录时间 -->
      <view class="user-info-content">
        <view class="user-name">{{ userStore.isLogin ? userInfo.nickname : '未登录' }}</view>
        <view class="user-phone">上次登录时间   {{ timeFormat(userInfo.loginDate)}}</view>
      </view>
    </view>


    <!-- 个人信息卡 + 操作按钮：整体在剩余区域内垂直居中 -->
    <view class="mine-body">
      <view class="mine-content">
        <view class="card-title">个人信息</view>
        <up-cell-group>
          <up-cell  title="姓名："  :value="userInfo.nickname"></up-cell>
          <up-cell  title="账号：" :value="userInfo.username"></up-cell>
          <up-cell  title="电话：" :value="userInfo.mobile"></up-cell>
          <up-cell  title="角色：" :value="translateRoles(userStore.userInfo.roles)"></up-cell>
             <up-cell  title="考勤" :isLink="true"  url="/pages-sub/daily/attendanceRecord"></up-cell>
        </up-cell-group>
      </view>


      <up-button
          v-if="!userStore.isLogin"
          type="primary"
          size="mini"
          shape="circle"
          @click="handleLogin"
          class="login-btn"
      >
        立即登录
      </up-button>

      <!-- 退出登录按钮 (仅登录状态显示) -->
      <view v-if="userStore.isLogin" class="logout-btn-wrap">
        <up-button
            type="primary"
            size="large"
            shape="circle"
            @click="confirmLogout"
            class="login-btn"
        >
          退出登录
        </up-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/pinia/user'
import {  showModal, onShow } from '@dcloudio/uni-app'
import {translateRoles} from '@/common/utils/common'
// 初始化Pinia仓库
const userStore = useUserStore()
import { timeFormat } from '@/uni_modules/uview-plus';
// 计算属性获取用户信息（响应式）
const userInfo = computed(() => userStore.userInfo.user || {})

/**
 * 处理登录跳转
 */
const handleLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}

/**
 * 确认退出登录（带二次确认）
 */
const confirmLogout = async () => {
  try {
    const res = await uni.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      confirmText: '退出',
      cancelText: '取消'
    })

    if (res.confirm) {
      await userStore.logout()
      // uni.showToast({ title: '退出登录成功', type: 'success' })
    }
  } catch (error) {
    console.error('退出登录失败：', error)
    uni.showToast({ title: '退出登录失败，请重试', type: 'error' })
  }
}

// 页面显示时检查登录状态
onShow(() => {
  userStore.checkLogin()
})
</script>

<script lang="ts">
export default {
  name: 'UserCenter',
  options: {
    navigationBarTitleText: '个人中心'
  }
}
</script>

<style lang="scss" scoped>
/* 页面底：设计稿 --page-bg */
.page-container {
  min-height: 100vh;
  padding-bottom: 48rpx;
  box-sizing: border-box;
  background-color: #F4F6FA;
  /* 竖向 flex：头部固定高度，卡片+按钮组在剩余区域居中 */
  display: flex;
  flex-direction: column;
}

/* 卡片 + 退出登录按钮：作为一组在头部以下的剩余空间里垂直居中 */
.mine-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 顶部信息栏：品牌渐变（设计稿 --grad-head） */
.header-bg {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  /* 卡片不再上压，底部留白按原视觉高度（120 - 80 重叠）收成 40rpx */
  padding: 48rpx 32rpx 40rpx;
  box-sizing: border-box;
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 60%, #3B82F6 100%);
}

.user-avatar {
  flex-shrink: 0;
  border: 4rpx solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  overflow: hidden;
}

/* 个人信息卡片：白底 16rpx 圆角 + 浅投影（不再上压头图，随卡片组一起居中） */
.mine-content {
  position: relative;
  z-index: 1;
  margin: 0 24rpx;
  padding: 8rpx 24rpx 16rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
}

/* 卡片标题：设计稿 .fgrp-title */
.card-title {
  padding: 16rpx 0 8rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #1F2937;
}

/* 单元格：标签深色 28rpx，内容值 26rpx（设计稿 .frow / .kv） */
.mine-content :deep(.u-cell-group) {
  margin: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}
.mine-content :deep(.u-cell__body) {
  padding: 24rpx 0 !important;
}
.mine-content :deep(.u-cell__title-text) {
  font-size: 28rpx !important;
  font-weight: 400 !important;
  color: #1F2937 !important;
}
.mine-content :deep(.u-cell__value) {
  font-size: 26rpx !important;
  color: #1F2937 !important;
}
.mine-content :deep(.u-line) {
  background-color: #EEF1F6 !important;
}
/* 卡片标题已分隔，分组顶线不需要 */
.mine-content :deep(.u-cell-group__wrapper > .u-line) {
  display: none !important;
}
/* 卡片内最后一行不画分隔线 */
.mine-content :deep(.u-cell:last-child .u-line) {
  display: none !important;
}

.user-info-content {
  margin-left: 24rpx;
  flex: 1;
  min-width: 0;

  .user-name {
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 8rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  }

  .user-phone {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.85);
  }
}
// 退出登录按钮
.logout-btn-wrap {
  margin: 48rpx 24rpx 0;
}
// 登录 / 退出按钮：品牌蓝 + 16rpx 圆角（设计稿 .btn.pri.flat）
.login-btn {
  width: 100%;
  height: 88rpx !important;
  line-height: 88rpx !important;
  border-radius: 16rpx !important;
  font-size: 30rpx;
  background-color: #2563EB !important;
  box-shadow: none;
}
</style>