cfc/cfc-frontend/pages/wealth-cf/index.vue

<template>
  <view class="container">
    <!-- 登录浮层（全局组件，页面内弹出底部登录） -->
    <login-sheet ref="loginSheet" @success="onSheetLoginSuccess" />
    <!-- 未登录 -->
    <template v-if="!isLoggedIn">
      <view class="empty-state">
        <text class="empty-icon">💎</text>
        <text class="empty-title">登录以查看家庭CF值</text>
        <text class="empty-desc">CF值是家庭共享的平台积分，购买商品、参与活动即可获得</text>
        <button class="login-btn" @click="goLogin">去登录</button>
      </view>
    </template>

    <!-- 已登录 -->
    <template v-else>
      <!-- 余额卡片 -->
      <view class="balance-card">
        <view class="balance-label">家庭CF值余额</view>
        <view class="balance-value">{{ balance.available }}</view>
        <view class="balance-unit">CF值（1元=1积分）</view>
        <view class="balance-row">
          <view class="balance-item">
            <text class="balance-item-label">累计获得</text>
            <text class="balance-item-value">{{ balance.totalEarned }}</text>
          </view>
          <view class="balance-item">
            <text class="balance-item-label">已消费</text>
            <text class="balance-item-value">{{ balance.exchanged }}</text>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-row">
        <view class="action-btn" @click="refreshData">
          <text class="action-icon">🔄</text>
          <text class="action-text">刷新</text>
        </view>
        <view class="action-btn" @click="openExchangeModal" v-if="balance.available > 0">
          <text class="action-icon">🎫</text>
          <text class="action-text">兑换优惠券</text>
        </view>
      </view>

      <!-- 流水列表 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">流水记录</text>
          <text class="section-more" @click="loadMoreLogs" v-if="hasMore">加载更多</text>
        </view>
        <view class="log-list" v-if="logs.length > 0">
          <view class="log-item" v-for="log in logs" :key="log.id">
            <view class="log-left">
              <text class="log-type">{{ logTypeLabel(log.type) }}</text>
              <text class="log-remark">{{ log.remark || log.refType }}</text>
            </view>
            <view class="log-right">
              <text class="log-amount" :class="log.amount > 0 ? 'log-plus' : 'log-minus'">
                {{ log.amount > 0 ? '+' : '' }}{{ log.amount }}
              </text>
              <text class="log-time">{{ formatTime(log.createdAt) }}</text>
            </view>
          </view>
        </view>
        <view class="empty-logs" v-else>
          <text>暂无流水记录</text>
        </view>
      </view>
    </template>

    <!-- 兑换优惠券弹窗 -->
    <view class="modal-mask" v-if="showExchangeModal" @click="showExchangeModal = false">
      <view class="exchange-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">兑换优惠券</text>
          <text class="modal-close" @click="showExchangeModal = false">×</text>
        </view>
        <view class="modal-body">
          <view class="coupon-list" v-if="exchangeableCoupons.length > 0">
            <view class="coupon-item" v-for="coupon in exchangeableCoupons" :key="coupon.id" @click="doExchange(coupon)">
              <view class="coupon-info">
                <text class="coupon-name">{{ coupon.name }}</text>
                <text class="coupon-desc">{{ couponDesc(coupon) }}</text>
              </view>
              <view class="coupon-price">{{ coupon.pointsPrice }} CF值</view>
            </view>
          </view>
          <view class="empty-coupons" v-else>
            <text>暂无可兑换优惠券</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getFamilyPlatformBalance, getFamilyPlatformLogs, getExchangeableCoupons, exchangeCouponByCf } from '@/utils/api.js'

export default {
  data() {
    return {
      isLoggedIn: false,
      balance: { available: 0, totalEarned: 0, exchanged: 0, frozen: 0 },
      logs: [],
      page: 1,
      size: 20,
      hasMore: false,
      exchangeRecords: [],
      showExchangeModal: false,
      exchangeableCoupons: []
    }
  },
  onLoad() {
    this.checkLogin()
    this.loadBalance()
    this.loadLogs()
    this._onLoadFired = true
  },
  onShow() {
    if (this._onLoadFired) {
      this._onLoadFired = false
    } else {
      if (this.isLoggedIn) this.loadBalance()
    }
  },
  methods: {
    checkLogin() {
      const token = uni.getStorageSync('token')
      this.isLoggedIn = !!token
    },
    goLogin() {
      this.openLoginSheet()
    },
    // 登录浮层成功回调：刷新登录态、余额与流水
    onLoginSuccess() {
      this.checkLogin()
      if (this.isLoggedIn) {
        this.loadBalance()
        this.loadLogs()
      }
    },
    async loadBalance() {
      try {
        const res = await getFamilyPlatformBalance()
        if (res.code === 200 && res.data) {
          this.balance = res.data
        }
      } catch (e) {
        console.error('加载余额失败', e)
      }
    },
    async loadLogs() {
      try {
        const res = await getFamilyPlatformLogs({ page: this.page, size: this.size })
        if (res.code === 200 && res.data) {
          if (this.page === 1) {
            this.logs = res.data.records || []
          } else {
            this.logs = this.logs.concat(res.data.records || [])
          }
          this.hasMore = this.logs.length < (res.data.total || 0)
        }
      } catch (e) {
        console.error('加载流水失败', e)
      }
    },
    loadMoreLogs() {
      if (this.hasMore) {
        this.page++
        this.loadLogs()
      }
    },
    async loadExchangeRecords() {
      try {
        const res = await getFamilyPlatformLogs({ page: 1, size: 50, type: 'coupon_exchange' })
        if (res.code === 200) {
          this.exchangeRecords = (res.data && res.data.records) || []
        }
      } catch (e) { console.error(e) }
    },
    refreshData() {
      this.page = 1
      this.loadBalance()
      this.loadLogs()
    },
    async openExchangeModal() {
      this.showExchangeModal = true
      try {
        const res = await getExchangeableCoupons()
        if (res.code === 200) {
          this.exchangeableCoupons = res.data || []
        }
      } catch (e) {
        console.error('加载可兑换优惠券失败', e)
      }
    },
    async doExchange(coupon) {
      if (coupon.pointsPrice > this.balance.available) {
        uni.showToast({ title: 'CF值不足', icon: 'none' })
        return
      }
      uni.showLoading({ title: '兑换中...' })
      try {
        const res = await exchangeCouponByCf({ couponId: coupon.id })
        uni.hideLoading()
        if (res.code === 200) {
          uni.showToast({ title: '兑换成功', icon: 'success' })
          this.showExchangeModal = false
          this.loadBalance()
        } else {
          uni.showToast({ title: res.message || '兑换失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '兑换失败', icon: 'none' })
      }
    },
    logTypeLabel(type) {
      const map = {
        earn: '获得', spend: '消费', freeze: '冻结',
        unfreeze: '解冻', withdraw: '提现', adjust: '调整', migration: '迁移'
      }
      return map[type] || type
    },
    couponDesc(coupon) {
      if (coupon.type === 'DISCOUNT') {
        return (coupon.discountRate / 100).toFixed(1) + '折'
      }
      return '立减' + (coupon.value / 100).toFixed(2) + '元'
    },
    formatTime(dateStr) {
      if (!dateStr) return ''
      const d = new Date(dateStr)
      const m = d.getMonth() + 1
      const day = d.getDate()
      const h = d.getHours()
      const min = String(d.getMinutes()).padStart(2, '0')
      return m + '/' + day + ' ' + h + ':' + min
    }
  }
}
</script>

<style scoped lang="scss">
$c-tint-indigo-border: #e8eaff; // indigo 极浅边框（单页专有）
.container {
  min-height: 100vh;
  background: $app-bg-2;
  padding-bottom: 40rpx;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 40rpx;
}
.empty-icon {
  font-size: 100rpx;
  margin-bottom: 20rpx;
}
.empty-title {
  font-size: 32rpx;
  color: $facade-text-strong;
  font-weight: 600;
  margin-bottom: 12rpx;
}
.empty-desc {
  font-size: 26rpx;
  color: $facade-text-muted;
  margin-bottom: 40rpx;
  text-align: center;
}
.login-btn {
  width: 280rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
  color: $app-surface;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}
.balance-card {
  margin: 30rpx;
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
  border-radius: 24rpx;
  color: $app-surface;
}
.balance-label {
  font-size: 26rpx;
  opacity: 0.8;
  margin-bottom: 10rpx;
}
.balance-value {
  font-size: 72rpx;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8rpx;
}
.balance-unit {
  font-size: 22rpx;
  opacity: 0.7;
  margin-bottom: 30rpx;
}
.balance-row {
  display: flex;
  justify-content: space-around;
  border-top: 1rpx solid rgba(255,255,255,0.2);
  padding-top: 20rpx;
}
.balance-item {
  text-align: center;
}
.balance-item-label {
  font-size: 22rpx;
  opacity: 0.7;
  display: block;
  margin-bottom: 6rpx;
}
.balance-item-value {
  font-size: 28rpx;
  font-weight: 600;
}
.action-row {
  display: flex;
  margin: 0 30rpx 20rpx;
  gap: 20rpx;
}
.action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
  background: $app-surface;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.action-icon {
  font-size: 36rpx;
  margin-bottom: 8rpx;
}
.action-text {
  font-size: 26rpx;
  color: $facade-text-strong;
}
.section {
  margin: 20rpx 30rpx;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: $facade-text-strong;
}
.section-more {
  font-size: 24rpx;
  color: $brand-primary;
}
.log-list {
  background: $app-surface;
  border-radius: 16rpx;
  overflow: hidden;
}
.log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid $facade-fill;
}
.log-item:last-child {
  border-bottom: none;
}
.log-left {
  flex: 1;
  margin-right: 20rpx;
}
.log-type {
  font-size: 26rpx;
  font-weight: 600;
  color: $facade-text-strong;
  display: block;
  margin-bottom: 4rpx;
}
.log-remark {
  font-size: 22rpx;
  color: $facade-text-muted;
}
.log-right {
  text-align: right;
}
.log-amount {
  font-size: 28rpx;
  font-weight: 600;
  display: block;
}
.log-plus { color: $status-success-3; }
.log-minus { color: $status-danger-2; }
.log-time {
  font-size: 20rpx;
  color: $facade-text-ghost-light;
  margin-top: 4rpx;
  display: block;
}
.empty-logs {
  text-align: center;
  padding: 60rpx;
  color: $facade-text-muted;
  font-size: 26rpx;
  background: $app-surface;
  border-radius: 16rpx;
}
.exchange-modal {
  background: $app-surface;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid $facade-fill;
}
.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: $facade-text-strong;
}
.modal-close {
  font-size: 40rpx;
  color: $facade-text-muted;
  line-height: 1;
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 30rpx;
}
.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.coupon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background: $dim-wisdom-tint-4;
  border-radius: 16rpx;
  border: 1rpx solid $c-tint-indigo-border;
}
.coupon-info {
  flex: 1;
  margin-right: 20rpx;
}
.coupon-name {
  font-size: 28rpx;
  font-weight: 600;
  color: $facade-text-strong;
  display: block;
}
.coupon-desc {
  font-size: 22rpx;
  color: $facade-text-muted;
  margin-top: 4rpx;
  display: block;
}
.coupon-price {
  font-size: 26rpx;
  color: $brand-primary;
  font-weight: 600;
  white-space: nowrap;
}
.empty-coupons {
  text-align: center;
  padding: 60rpx;
  color: $facade-text-muted;
  font-size: 26rpx;
}
</style>