gupiao-web/src/pages/transaction/transaction.vue

<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-back" @click="handleBack">
        <text class="back-icon">←</text>
      </view>
      <view class="navbar-title">
        <text class="title-text">订阅记录</text>
      </view>
      <view class="navbar-placeholder"></view>
    </view>

    <!-- 订阅记录列表 -->
    <scroll-view class="scroll-view" scroll-y>
      <view class="subscription-list">
        <!-- 订阅记录项 -->
        <view 
          v-for="(item, index) in subscriptions" 
          :key="index"
          class="subscription-item"
        >
          <view class="item-header">
            <view class="pool-info">
              <text class="pool-icon">{{ item.poolType === 'pool' ? '⚡' : '📈' }}</text>
              <text class="pool-name">{{ item.poolName }}</text>
            </view>
            <view :class="['status-badge', item.isActive ? 'status-active' : 'status-expired']">
              <text class="status-text">{{ item.isActive ? '生效中' : '已过期' }}</text>
            </view>
          </view>
          
          <view class="item-body">
            <view class="info-row">
              <text class="info-label">订阅方案：</text>
              <text class="info-value">{{ item.planName }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">订阅金额：</text>
              <text class="info-value price">¥{{ item.amount }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">购买时间：</text>
              <text class="info-value">{{ formatDateTime(item.purchaseTime) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">到期时间：</text>
              <text class="info-value">{{ formatDateTime(item.expireTime) }}</text>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="subscriptions.length === 0" class="empty-state">
          <text class="empty-icon">📋</text>
          <text class="empty-text">暂无订阅记录</text>
          <text class="empty-desc">前往超短池或强势池订阅服务</text>
        </view>

        <!-- 底部安全区域 -->
        <view class="bottom-safe-area"></view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { isLoggedIn as checkLoginStatus } from '../../utils/auth.js'

const subscriptions = ref([])
const isLoggedIn = ref(false)

// 检查登录状态
const checkLogin = () => {
  isLoggedIn.value = checkLoginStatus()
  console.log('[订阅记录] 登录状态:', isLoggedIn.value)
}

// 返回上一页
const handleBack = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    // 有上一页，返回
    uni.navigateBack()
  } else {
    // 没有上一页，跳转到个人中心
    uni.switchTab({
      url: '/pages/mine/mine'
    })
  }
}

// 格式化日期时间
const formatDateTime = (timestamp) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 加载订阅记录
const loadSubscriptions = () => {
  try {
    const now = Date.now()
    const allSubscriptions = []
    
    // 加载超短池订阅记录
    const poolPurchase = uni.getStorageSync('pool_purchase')
    if (poolPurchase) {
      allSubscriptions.push({
        poolType: 'pool',
        poolName: '超短精选池',
        planName: poolPurchase.plan === 'daily' ? '日订阅' : '周套餐',
        amount: poolPurchase.plan === 'daily' ? '18' : '98',
        purchaseTime: poolPurchase.purchaseTime,
        expireTime: poolPurchase.expireTime,
        isActive: now < poolPurchase.expireTime
      })
    }
    
    // 加载强势池订阅记录
    const strongPurchase = uni.getStorageSync('strong_pool_purchase')
    if (strongPurchase) {
      allSubscriptions.push({
        poolType: 'strong',
        poolName: '强势趋势池',
        planName: '年订阅',
        amount: '98',
        purchaseTime: strongPurchase.purchaseTime,
        expireTime: strongPurchase.expireTime,
        isActive: now < strongPurchase.expireTime
      })
    }
    
    // 按购买时间倒序排列
    subscriptions.value = allSubscriptions.sort((a, b) => b.purchaseTime - a.purchaseTime)
  } catch (e) {
    console.error('加载订阅记录失败:', e)
    subscriptions.value = []
  }
}

onLoad(() => {
  checkLogin()
})

onMounted(() => {
  loadSubscriptions()
})

onShow(() => {
  checkLogin()
  loadSubscriptions()
})
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background: #f5f6fb;
  display: flex;
  flex-direction: column;
}

/* 自定义导航栏 */
.custom-navbar {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80rpx 32rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  position: relative;
}

.navbar-back {
  width: 80rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.back-icon {
  font-size: 40rpx;
  color: #222222;
  font-weight: bold;
}

.navbar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.title-text {
  font-size: 36rpx;
  font-weight: 600;
  color: #222222;
}

.navbar-placeholder {
  width: 80rpx;
}

/* 订阅记录列表 */
.scroll-view {
  flex: 1;
  height: 0;
}

.subscription-list {
  padding: 32rpx;
}

.subscription-item {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(37, 52, 94, 0.08);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #f1f2f6;
}

.pool-info {
  display: flex;
  align-items: center;
}

.pool-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.pool-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #222222;
}

.status-badge {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.status-active {
  background: #e7f7ef;
  color: #3abf81;
}

.status-expired {
  background: #f5f5f5;
  color: #999999;
}

.status-text {
  font-weight: 500;
}

.item-body {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-row {
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

.info-label {
  color: #666a7f;
  min-width: 160rpx;
}

.info-value {
  color: #222222;
  font-weight: 500;
}

.info-value.price {
  color: #f16565;
  font-weight: 700;
  font-size: 28rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 60rpx;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999999;
  text-align: center;
  line-height: 1.6;
}

.bottom-safe-area {
  height: 80rpx;
}
</style>