yogaApp/pages/user/cardDetail.vue

<template>
  <view class="page">
    <!-- 顶部卡片展示 -->
    <view class="card-header">
      <member-card
          v-if="card"
          :card="card"
          size="large"
          :selectable="false"
      />
      <!-- 默认卡标记 -->
      <view v-if="card && card.isDefault" class="default-badge">
        <uni-icons type="star-filled" size="16" color="#FFB800"></uni-icons>
        <text>默认卡</text>
      </view>
    </view>

    <!-- 额度概览 -->
    <view class="overview-card">
      <view class="overview-title">额度概览</view>
      <view class="overview-grid">
        <view class="overview-item">
          <text class="ov-label">总额度</text>
          <text class="ov-value">
            {{ card.type === 'COUNT'
              ? (card.totalCount || 0) + '次'
              : '¥' + formatAmount(card.totalAmount) }}
          </text>
        </view>
        <view class="overview-item">
          <text class="ov-label">已使用</text>
          <text class="ov-value">
            {{ card.type === 'COUNT'
              ? (card.usedCount || 0) + '次'
              : '¥' + formatAmount(card.usedAmount) }}
          </text>
        </view>
        <view class="overview-item">
          <text class="ov-label">冻结中</text>
          <text class="ov-value frozen">
            {{ card.type === 'COUNT'
              ? (card.frozenCount || 0) + '次'
              : '¥' + formatAmount(card.frozenAmount) }}
          </text>
        </view>
        <view class="overview-item">
          <text class="ov-label">可用</text>
          <text class="ov-value available">
            {{ card.type === 'COUNT'
              ? (card.remainCount || 0) + '次'
              : '¥' + formatAmount(card.remainAmount) }}
          </text>
        </view>
      </view>
    </view>

    <!-- 卡片基本信息 -->
    <view class="info-card">
      <view class="info-row">
        <text class="info-label">卡类型</text>
        <text class="info-value">{{ card.cardTypeName || card.typeName || '--' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">卡名称</text>
        <text class="info-value">{{ card.name || '--' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">卡号</text>
        <text class="info-value">{{ card.cardNo || '--' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">激活日期</text>
        <text class="info-value">{{ card.activationDate || '未激活' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">有效期至</text>
        <text class="info-value">{{ card.expireDate || '长期有效' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">状态</text>
        <text class="info-value" :class="statusClass">{{ statusText }}</text>
      </view>
    </view>

    <!-- 交易记录 / 冻结记录 Tab -->
    <view class="tab-section">
      <view class="tab-header">
        <view
            class="tab-item"
            :class="{ active: activeTab === 'transaction' }"
            @click="switchTab('transaction')"
        >
          消费记录
        </view>
        <view
            class="tab-item"
            :class="{ active: activeTab === 'freeze' }"
            @click="switchTab('freeze')"
        >
          冻结记录
        </view>
      </view>

      <!-- 消费记录 -->
      <scroll-view
          v-if="activeTab === 'transaction'"
          class="record-list"
          scroll-y="true"
          style="max-height: 800rpx;"
          @scrolltolower="loadMoreTransactions"
      >
        <view v-if="transactions.length === 0" class="empty-tip">
          <text>暂无消费记录</text>
        </view>
        <view
            v-for="(item, index) in transactions"
            :key="index"
            class="record-item"
        >
          <view class="record-left">
            <view class="record-icon" :class="getTransactionIconClass(item.type)">
              <uni-icons :type="getTransactionIcon(item.type)" size="20" :color="getTransactionColor(item.type)"></uni-icons>
            </view>
            <view class="record-info">
              <text class="record-name">{{ getTransactionName(item.type) }}</text>
              <text class="record-time">{{ formatDateTime(item.createTime) }}</text>
              <text v-if="item.remark" class="record-remark">{{ item.remark }}</text>
            </view>
          </view>
          <view class="record-right">
            <text
                class="record-amount"
                :class="item.direction > 0 ? 'income' : 'expense'"
            >
              {{ item.direction > 0 ? '+' : '-' }}{{ formatAmount(item.amount) }}
            </text>
            <text class="record-balance">
              余额：{{ item.cardType === 'COUNT'
                ? (item.balanceAfter || 0) + '次'
                : '¥' + formatAmount(item.balanceAfter) }}
            </text>
          </view>
        </view>
        <uni-load-more v-if="transactions.length > 0" :status="transactionLoadStatus" />
      </scroll-view>

      <!-- 冻结记录 -->
      <scroll-view
          v-if="activeTab === 'freeze'"
          class="record-list"
          scroll-y="true"
          style="max-height: 800rpx;"
      >
        <view v-if="freezes.length === 0" class="empty-tip">
          <text>暂无冻结记录</text>
        </view>
        <view
            v-for="(item, index) in freezes"
            :key="index"
            class="record-item"
        >
          <view class="record-left">
            <view class="record-icon freeze">
              <uni-icons type="locked" size="20" color="#FF6B6B"></uni-icons>
            </view>
            <view class="record-info">
              <text class="record-name">
                {{ item.freezeType === 'COUNT'
                  ? '预约冻结 ' + item.freezeCount + '次'
                  : '预约冻结 ¥' + formatAmount(item.freezeAmount) }}
              </text>
              <text class="record-time">{{ formatDateTime(item.createTime) }}</text>
              <text class="record-remark">
                关联预约：{{ item.appointmentTitle || ('#' + item.appointmentId) }}
              </text>
            </view>
          </view>
          <view class="record-right">
            <text class="freeze-status" :class="'status-' + item.status">
              {{ getFreezeStatusText(item.status) }}
            </text>
            <text v-if="item.releaseTime" class="record-time">
              {{ formatDateTime(item.releaseTime) }}
            </text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部操作 -->
    <view class="footer-actions">
      <button class="action-btn secondary" @click="gotoBook">去预约</button>
      <button
          v-if="!card.isDefault && card.status === 'ACTIVE'"
          class="action-btn primary"
          @click="setAsDefault"
      >
        设为默认卡
      </button>
    </view>

    <!-- Toast -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import MemberCard from '../components/member-card.vue';
import { myCache } from '../../utils/utils.js';

export default {
  components: { MemberCard },
  data() {
    return {
      cardId: null,
      card: null,
      activeTab: 'transaction',
      transactions: [],
      freezes: [],
      transactionPage: 1,
      transactionPageSize: 20,
      transactionLoadStatus: 'more', // more / loading / noMore
      userId: ''
    };
  },
  computed: {
    statusText() {
      if (!this.card) return '';
      const map = {
        ACTIVE: '已激活',
        INACTIVE: '未激活',
        SUSPENDED: '已暂停',
        DEPLETED: '已用完',
        EXPIRED: '已过期'
      };
      return map[this.card.status] || this.card.status;
    },
    statusClass() {
      if (!this.card) return '';
      const map = {
        ACTIVE: 'status-active',
        INACTIVE: 'status-inactive',
        SUSPENDED: 'status-suspended',
        DEPLETED: 'status-depleted',
        EXPIRED: 'status-expired'
      };
      return map[this.card.status] || '';
    }
  },
  onLoad(options) {
    this.cardId = options.cardId;
    this.userId = myCache('user')?.userid || '';
    if (!this.cardId) {
      uni.showToast({ title: '参数错误', icon: 'none' });
      setTimeout(() => uni.navigateBack(), 1500);
      return;
    }
    this.loadCardDetail();
    this.loadTransactions(true);
  },
  methods: {
    // ========== 加载卡片详情 ==========
    async loadCardDetail() {
      uni.showLoading({ title: '加载中...' });
      try {
        const { data: res } = await uni.$http.get('/api/memberCard/detail', {
          cardId: this.cardId
        });
        uni.hideLoading();
        if (res && res.code === 200 && res.data) {
          this.card = res.data;
        } else {
          uni.showToast({ title: res.msg || '加载失败', icon: 'none' });
        }
      } catch (e) {
        uni.hideLoading();
        uni.showToast({ title: '网络异常', icon: 'none' });
      }
    },

    // ========== 加载交易记录 ==========
    async loadTransactions(reset = false) {
      if (this.transactionLoadStatus === 'loading') return;
      if (!reset && this.transactionLoadStatus === 'noMore') return;

      if (reset) {
        this.transactionPage = 1;
        this.transactions = [];
        this.transactionLoadStatus = 'more';
      }

      this.transactionLoadStatus = 'loading';
      try {
        const { data: res } = await uni.$http.get('/api/member/card/transactions', {
          cardId: this.cardId,
          pageNum: this.transactionPage,
          pageSize: this.transactionPageSize
        });
        if (res && res.code === 200) {
          const list = res.data?.list || res.data || [];
          if (list.length < this.transactionPageSize) {
            this.transactionLoadStatus = 'noMore';
          } else {
            this.transactionLoadStatus = 'more';
          }
          this.transactions = this.transactions.concat(list);
          this.transactionPage++;
        } else {
          this.transactionLoadStatus = 'noMore';
        }
      } catch (e) {
        this.transactionLoadStatus = 'noMore';
        console.error('加载交易记录失败', e);
      }
    },

    loadMoreTransactions() {
      this.loadTransactions();
    },

    // ========== 加载冻结记录 ==========
    async loadFreezes() {
      try {
        const { data: res } = await uni.$http.get('/api/member/card/freezes', {
          cardId: this.cardId
        });
        if (res && res.code === 200) {
          this.freezes = res.data || [];
        }
      } catch (e) {
        console.error('加载冻结记录失败', e);
      }
    },

    // ========== Tab 切换 ==========
    switchTab(tab) {
      this.activeTab = tab;
      if (tab === 'freeze' && this.freezes.length === 0) {
        this.loadFreezes();
      }
    },

    // ========== 设为默认卡 ==========
    async setAsDefault() {
      uni.showModal({
        title: '提示',
        content: '确定将这张卡设为默认卡吗？',
        success: async (res) => {
          if (!res.confirm) return;
          try {
            const { data: r } = await uni.$http.post('/api/member/card/setDefault', {
              cardId: this.cardId
            });
            if (r && r.code === 200) {
              this.card.isDefault = true;
              uni.showToast({ title: '设置成功', icon: 'success' });
            } else {
              uni.showToast({ title: r.msg || '设置失败', icon: 'none' });
            }
          } catch (e) {
            uni.showToast({ title: '网络异常', icon: 'none' });
          }
        }
      });
    },

    // ========== 跳转预约 ==========
    gotoBook() {
      uni.switchTab({ url: '/pages/book/booklist' });
    },

    // ========== 交易记录辅助方法 ==========
    getTransactionName(type) {
      const map = {
        RECHARGE: '会员充值',
        COURSE_DEDUCT: '课程核销',
        SHOP_PURCHASE: '商城消费',
        CASH_OUT: '销卡取现',
        TRANSFER_IN: '转卡转入',
        TRANSFER_OUT: '转卡转出',
        ADMIN_ADD: '后台调增',
        ADMIN_SUB: '后台调减',
        FREEZE: '预约冻结',
        UNFREEZE: '取消解冻',
        REFUND: '退款',
        REVERSE: '冲正'
      };
      return map[type] || type;
    },

    getTransactionIcon(type) {
      const map = {
        RECHARGE: 'plus-circle',
        COURSE_DEDUCT: 'checkbox',
        SHOP_PURCHASE: 'cart',
        CASH_OUT: 'wallet',
        TRANSFER_IN: 'arrow-down',
        TRANSFER_OUT: 'arrow-up',
        ADMIN_ADD: 'plus-circle',
        ADMIN_SUB: 'minus-circle',
        FREEZE: 'locked',
        UNFREEZE: 'unlock',
        REFUND: 'undo',
        REVERSE: 'refresh'
      };
      return map[type] || 'info';
    },

    getTransactionColor(type) {
      const income = ['RECHARGE', 'TRANSFER_IN', 'ADMIN_ADD', 'REFUND'];
      const expense = ['COURSE_DEDUCT', 'SHOP_PURCHASE', 'CASH_OUT', 'TRANSFER_OUT', 'ADMIN_SUB'];
      if (income.includes(type)) return '#00A89B';
      if (expense.includes(type)) return '#FF6B6B';
      return '#999';
    },

    getTransactionIconClass(type) {
      const income = ['RECHARGE', 'TRANSFER_IN', 'ADMIN_ADD', 'REFUND'];
      const expense = ['COURSE_DEDUCT', 'SHOP_PURCHASE', 'CASH_OUT', 'TRANSFER_OUT', 'ADMIN_SUB'];
      if (income.includes(type)) return 'income';
      if (expense.includes(type)) return 'expense';
      return '';
    },

    getFreezeStatusText(status) {
      const map = {
        1: '冻结中',
        2: '已核销',
        3: '已释放'
      };
      return map[status] || '--';
    },

    // ========== 通用工具 ==========
    formatAmount(val) {
      if (val === null || val === undefined) return '0.00';
      return Number(val).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },

    formatDateTime(time) {
      if (!time) return '--';
      const d = new Date(time.replace(/-/g, '/'));
      if (isNaN(d.getTime())) return time;
      const m = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      const h = String(d.getHours()).padStart(2, '0');
      const min = String(d.getMinutes()).padStart(2, '0');
      return `${d.getFullYear()}-${m}-${day} ${h}:${min}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* ========== 顶部卡片 ========== */
.card-header {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}
.default-badge {
  position: absolute;
  top: -10rpx;
  right: 30rpx;
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 6rpx 16rpx;
  background: #FFF8E1;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #FFB800;
  box-shadow: 0 2rpx 8rpx rgba(255, 184, 0, 0.2);
}

/* ========== 额度概览 ========== */
.overview-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.overview-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #000;
  margin-bottom: 24rpx;
  padding-left: 10rpx;
  border-left: 6rpx solid #00A89B;
}
.overview-grid {
  display: flex;
  justify-content: space-between;
}
.overview-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
}
.ov-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 10rpx;
}
.ov-value {
  font-size: 30rpx;
  font-weight: 600;
  color: #000;
  &.frozen {
    color: #FF6B6B;
  }
  &.available {
    color: #00A89B;
  }
}

/* ========== 卡片信息 ========== */
.info-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 10rpx 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  &:last-child {
    border-bottom: none;
  }
}
.info-label {
  font-size: 26rpx;
  color: #999;
}
.info-value {
  font-size: 26rpx;
  color: #000;
  font-weight: 500;
  &.status-active { color: #00A89B; }
  &.status-inactive { color: #FFB800; }
  &.status-suspended { color: #FF6B6B; }
  &.status-depleted { color: #999; }
  &.status-expired { color: #ccc; }
}

/* ========== Tab 区域 ========== */
.tab-section {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 140rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.tab-header {
  display: flex;
  border-bottom: 1rpx solid #f0f0f0;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 28rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
  &.active {
    color: #00A89B;
    font-weight: 600;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background: #00A89B;
      border-radius: 2rpx;
    }
  }
}
.record-list {
  padding: 10rpx 0;
  min-height: 300rpx;
}
.empty-tip {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 26rpx;
}
.record-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f8f8f8;
  &:last-child {
    border-bottom: none;
  }
}
.record-left {
  display: flex;
  flex: 1;
  align-items: flex-start;
  overflow: hidden;
}
.record-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f5f5f5;
  &.income {
    background: rgba(0, 168, 155, 0.1);
  }
  &.expense {
    background: rgba(255, 107, 107, 0.1);
  }
  &.freeze {
    background: rgba(255, 107, 107, 0.1);
  }
}
.record-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 18rpx;
  overflow: hidden;
}
.record-name {
  font-size: 28rpx;
  color: #000;
  font-weight: 500;
  margin-bottom: 6rpx;
}
.record-time {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 4rpx;
}
.record-remark {
  font-size: 22rpx;
  color: #bbb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 10rpx;
  flex-shrink: 0;
}
.record-amount {
  font-size: 30rpx;
  font-weight: 600;
  margin-bottom: 6rpx;
  &.income { color: #00A89B; }
  &.expense { color: #FF6B6B; }
}
.record-balance {
  font-size: 22rpx;
  color: #999;
}
.freeze-status {
  font-size: 26rpx;
  font-weight: 600;
  &.status-1 { color: #FF6B6B; }
  &.status-2 { color: #00A89B; }
  &.status-3 { color: #999; }
}

/* ========== 底部操作 ========== */
.footer-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}
.action-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 30rpx;
  border-radius: 44rpx;
  border: none;
  margin: 0 10rpx;
  &::after { border: none; }
  &.primary {
    background: #00A89B;
    color: #fff;
  }
  &.secondary {
    background: #f5f5f5;
    color: #333;
  }
}
</style>