vpUni/.svn/pristine/4f/4f0f9c2992d2db27c01001f1d792eecd16c02c7b.svn-base

<template>
  <view class="promotion-page">
    <!-- 沉浸式状态栏 -->
    <view class="status-bar"></view>

    <!-- 顶部导航 -->
    <view class="nav-bar">
      <image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
      <text class="nav-title">我的推广</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-section">
      <view class="stats-card">
        <view class="stat-item">
          <text class="stat-value">{{ totalMembers }}</text>
          <text class="stat-label">推广会员</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ premiumMembers }}</text>
          <text class="stat-label">尊享会员</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ totalPoints }}</text>
          <text class="stat-label">获得积分</text>
        </view>
      </view>
    </view>

    <!-- 会员列表 -->
    <view class="content">
      <view class="list-header">
        <text class="header-title">推广会员列表</text>
        <text class="header-count">共{{ membersList.length }}人</text>
      </view>

      <view v-if="membersList.length > 0" class="members-list">
        <view
          v-for="member in membersList"
          :key="member.id"
          class="member-card"
        >
          <!-- 会员信息 -->
          <view class="member-info">
            <image class="member-avatar" :src="member.avatar" mode="aspectFill" />
            <view class="member-details">
              <view class="name-tag-row">
                <text class="member-name">{{ member.nickname }}</text>
                <view class="user-member-tag">
                  <text class="ri-vip-crown-fill member-icon"></text>
                  <text class="member-text">{{ member.levelText }}</text>
                </view>
              </view>
              <view class="user-id-tag">
                <text class="ri-vip-crown-2-fill id-icon"></text>
                <text class="id-text">ID: {{ member.memberId }}</text>
              </view>
              <text class="register-time">注册时间：{{ member.registerTime }}</text>
            </view>
          </view>

          <!-- 积分奖励 -->
          <view class="points-info">
            <text class="points-label">奖励</text>
            <text class="points-value">+{{ member.rewardPoints }}</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-state">
        <text class="ri-team-line empty-icon"></text>
        <text class="empty-text">暂无推广会员</text>
        <text class="empty-desc">邀请好友加入，获得积分奖励</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Service } from "@/Service/Service"

// 推广会员列表数据
const membersList = ref([
  {
    id: 1,
    nickname: '小明同学',
    avatar: 'https://picsum.photos/seed/user1/100/100.jpg',
    memberId: '1000001',
    levelType: 'gold',
    levelText: '尊享会员',
    registerTime: '2025-01-20 14:30',
    rewardPoints: 100
  },
  {
    id: 2,
    nickname: '美食探索者',
    avatar: 'https://picsum.photos/seed/user2/100/100.jpg',
    memberId: '1000002',
    levelType: 'platinum',
    levelText: '铂金会员',
    registerTime: '2025-01-18 10:15',
    rewardPoints: 100
  },
  {
    id: 3,
    nickname: '咖啡爱好者',
    avatar: 'https://picsum.photos/seed/user3/100/100.jpg',
    memberId: '1000003',
    levelType: 'normal',
    levelText: '普通会员',
    registerTime: '2025-01-15 16:45',
    rewardPoints: 100
  },
  {
    id: 4,
    nickname: '生活家',
    avatar: 'https://picsum.photos/seed/user4/100/100.jpg',
    memberId: '1000004',
    levelType: 'diamond',
    levelText: '钻石会员',
    registerTime: '2025-01-12 09:20',
    rewardPoints: 100
  },
  {
    id: 5,
    nickname: '甜食控',
    avatar: 'https://picsum.photos/seed/user5/100/100.jpg',
    memberId: '1000005',
    levelType: 'gold',
    levelText: '尊享会员',
    registerTime: '2025-01-10 11:30',
    rewardPoints: 100
  },
  {
    id: 6,
    nickname: '夜宵达人',
    avatar: 'https://picsum.photos/seed/user6/100/100.jpg',
    memberId: '1000006',
    levelType: 'normal',
    levelText: '普通会员',
    registerTime: '2025-01-08 15:20',
    rewardPoints: 100
  }
])

// 统计数据
const totalMembers = computed(() => membersList.value.length)
const premiumMembers = computed(() => membersList.value.filter(m => m.levelType !== 'normal').length)
const totalPoints = computed(() => membersList.value.reduce((sum, m) => sum + m.rewardPoints, 0))

// 返回
const goBack = () => {
	Service.GoPageBack()
}
</script>

<style lang="scss" scoped>
/* 引入全局标签样式 */
@import '@/styles/member-tags.scss';

.promotion-page {
  min-height: 100vh;
  background: #F5F5F5;
}

/* 状态栏 */
.status-bar {
  background: linear-gradient(135deg, #FF6B00, #FF9500);
  height: var(--status-bar-height);
  width: 100%;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60rpx 24rpx 20rpx 24rpx;
  background: linear-gradient(135deg, #FF6B00, #FF9500);
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
  padding: 8rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #FFFFFF;
}

.nav-placeholder {
  width: 48rpx;
}

/* 统计卡片 */
.stats-section {
  padding: 20rpx;
}

.stats-card {
  background: linear-gradient(135deg, #FF6B00, #FF9500);
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 4rpx 16rpx rgba(255, 107, 0, 0.3);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.stat-value {
  font-size: 40rpx;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}

.stat-label {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.9);
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.3);
}

/* 内容区域 */
.content {
  padding: 0 20rpx 20rpx;
}

/* 列表头部 */
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
}

.header-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #222222;
}

.header-count {
  font-size: 22rpx;
  color: #999999;
}

/* 会员列表 */
.members-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.member-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.member-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.member-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 44rpx;
  flex-shrink: 0;
}

.member-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.member-name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.name-tag-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 8rpx;
}

.member-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #222222;
}

.user-member-tag {
  transform: scale(0.92);
  transform-origin: left center;
}

.user-id-tag {
  margin-bottom: 8rpx;
  width: fit-content;
  display: inline-flex;
}

.register-time {
  font-size: 22rpx;
  color: #CCCCCC;
}

/* 积分信息 */
.points-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
  padding: 16rpx;
  background: #FFF4E6;
  border-radius: 12rpx;
  margin-left: 16rpx;
}

.points-label {
  font-size: 20rpx;
  color: #FF9800;
}

.points-value {
  font-size: 28rpx;
  font-weight: 700;
  color: #FF6B00;
}

/* 空状态 */
.empty-state {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 120rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
}

.empty-icon {
  font-size: 120rpx;
  color: #CCCCCC;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
  font-weight: 500;
}

.empty-desc {
  font-size: 24rpx;
  color: #CCCCCC;
}
</style>