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-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>
</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;
}

/* 顶部信息栏：品牌渐变（设计稿 --grad-head） */
.header-bg {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 48rpx 32rpx 120rpx;
  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: -80rpx 24rpx 0;
  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: #4B5563 !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>