jude-user-recharge/web/src/views/frontend/components/Me/purchaseProduct.vue

<template>
  <div class="me-purchase-product">
    <div class="product-header">
      <h2 class="product-title">我的产品({{ productsNum }})</h2>
      <div class="product-filters">
        <el-input
          v-model="queryParams.product_name"
          placeholder="请输入产品名称"
          clearable
          class="filter-item"
          @clear="handleSearch"
          @keyup.enter.native="handleSearch"
        ></el-input>
        <el-select
          v-model="queryParams.status"
          placeholder="状态"
          clearable
          class="filter-item"
          @change="handleSearch"
        >
          <el-option label="有效" :value="1" />
          <el-option label="已过期" :value="2" />
          <el-option label="已用完" :value="3" />
        </el-select>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
    </div>

    <div class="product-content">
      <el-empty v-if="products.length === 0" description="暂无产品">
        <el-button type="primary" @click="gotoBuy">去购买</el-button>
      </el-empty>

      <div v-else>
        <div class="product-grid">
          <div
            v-for="item in products"
            :key="item.usage_id"
            class="product-card"
            :class="{ expired: item.status !== 1 }"
            @click="handleProductClick(item)"
          >
            <!-- 状态标签 -->
            <div class="status-badge" :class="getStatusClass(item.status)">
              {{ getStatusText(item.status) }}
            </div>

            <!-- 产品图片 -->
            <div class="product-image-wrapper">
              <img :src="item.image" :alt="item.product_name" />
              <div class="product-type-badge" :class="item.product_type === 1 ? 'web' : 'software'">
                <el-icon v-if="item.product_type == 1">
                  <Link />
                </el-icon>
                <el-icon v-else>
                  <Monitor />
                </el-icon>
                <span>{{ item.product_type == 1 ? '网页' : '软件' }}</span>
              </div>
            </div>

            <!-- 产品信息 -->
            <div class="product-info">
              <div class="product-main">
                <!-- 左侧：产品基本信息 -->
                <div class="product-main-left">
                  <div class="product-name" :title="item.product_name">
                    {{ item.product_name }}
                  </div>

                  <!-- 套餐信息 -->
                  <div class="package-info">
                    <el-tag size="small" type="primary" effect="plain">
                      {{ item.package_type_text }}
                    </el-tag>
                    <el-tag size="small" type="warning" effect="plain">
                      {{ item.card_type_text }}
                    </el-tag>
                  </div>

                  <!-- 使用情况 -->
                  <div class="usage-info">
                    <!-- 次卡显示剩余次数 -->
                    <div v-if="item.card_type == 1" class="usage-item">
                      <el-icon>
                        <Tickets />
                      </el-icon>
                      <span>剩余次数: <strong>{{ item.remaining_times }}</strong></span>
                    </div>

                    <!-- 积分卡显示剩余积分 -->
                    <div v-if="item.card_type == 2" class="usage-item">
                      <el-icon>
                        <Coin />
                      </el-icon>
                      <span>剩余积分: <strong>{{ item.remaining_points }}</strong></span>
                    </div>

                    <!-- 日期卡显示到期时间 -->
                    <div v-if="[3, 4, 5, 6, 7].includes(item.card_type)" class="usage-item">
                      <el-icon>
                        <Calendar />
                      </el-icon>
                      <span>{{ item.display_info }}</span>
                    </div>
                  </div>
                </div>

                <!-- 右侧：席位信息（企业套餐）- 仅日期卡显示 -->
                <div
                  v-if="item.package_type == 2 && item.total_seats && [3, 4, 5, 6, 7].includes(item.card_type)"
                  class="product-main-right"
                >
                  <div class="seats-info">
                    <div class="seats-row">
                      <div class="seats-label">席位</div>
                      <div class="seats-value">
                        <span class="seats-number strong">{{ item.assigned_seats || 0 }}</span>
                        <span class="seats-split">/</span>
                        <span class="seats-number">{{ item.total_seats }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 底部信息 -->
              <div class="product-footer">
                <div class="buy-info">
                  <el-icon>
                    <ShoppingCart />
                  </el-icon>
                  <span>{{ formatDate(item.buy_time) }}</span>
                </div>
                <div v-if="item.is_allocated == 1" class="allocated-badge">
                  <el-icon>
                    <Share />
                  </el-icon>
                  <span>已分配</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="product-pagination">
          <el-pagination
            v-model:current-page="queryParams.page"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[6, 12, 24, 48]"
            :total="productsNum || 0"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { purchasedList } from '/@/api/frontend/me'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Link,
  Monitor,
  Tickets,
  Coin,
  Calendar,
  ShoppingCart,
  Share
} from '@element-plus/icons-vue'

defineOptions({ name: 'MePurchaseProduct' })

const router = useRouter()

type ProductItem = {
  product_id: number
  product_name: string
  product_type: 1 | 2 // 1=网页，2=软件
  product_link: string
  image: string
  package_spec: string
  package_type: 1 | 2 // 1=个人套餐，2=企业套餐
  package_type_text: string
  card_type: 1 | 2 | 3 | 4 | 5 | 6 | 7 // 1=次卡，2=积分卡，3=日卡，4=周卡，5=季卡，6=月卡，7=年卡
  card_type_text: string
  total_quantity: number
  effective_end_time: string | null
  remaining_times: number
  remaining_points: number
  display_info: string
  usage_id: number
  start_time: string
  last_use_time: string | null
  status: 1 | 2 | 3 // 1=有效，2=已过期，3=已用完
  buy_time: string
  is_allocated: 0 | 1 // 0=未分配，1=已分配
  company_id: number | null
  allocation_id: number | null
  total_seats: number | null
  assigned_seats: number | null
  available_seats: number | null
}

type CompanyInfo = {
  company_id: number
  company_name: string
  is_creator: boolean
}

// 产品列表
const products = ref<ProductItem[]>([])
// 企业信息
const companyInfo = ref<CompanyInfo | null>(null)
// 产品数量
const productsNum = ref<number>(0)

// 查询与分页参数
const queryParams = ref<{
  page: number
  pageSize: number
  product_name: string
  status: number | undefined
}>({
  page: 1,
  pageSize: 6,
  product_name: '',
  status: undefined
})

// 获取列表
const getList = async () => {
  try {
    const params: any = {
      page: queryParams.value.page,
      pageSize: queryParams.value.pageSize
    }

    if (queryParams.value.product_name) {
      params.product_name = queryParams.value.product_name
    }
    if (queryParams.value.status) {
      params.status = queryParams.value.status
    }

    const res = await purchasedList(params)
    products.value = res.data.products || []
    companyInfo.value = res.data.company_info || null
    productsNum.value = res.data.total || 0
  } catch (error) {
    ElMessage.error('获取产品列表失败')
  }
}

// 搜索
const handleSearch = () => {
  queryParams.value.page = 1
  getList()
}

// 分页大小变更
const handleSizeChange = (size: number) => {
  queryParams.value.pageSize = size
  queryParams.value.page = 1
  getList()
}

// 当前页变更
const handleCurrentChange = (page: number) => {
  queryParams.value.page = page
  getList()
}

// 跳转购买
const gotoBuy = () => {
  router.push('/')
}

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    1: '有效',
    2: '已过期',
    3: '已用完'
  }
  return statusMap[status] || '未知'
}

// 获取状态样式类
const getStatusClass = (status: number) => {
  const classMap: Record<number, string> = {
    1: 'status-active',
    2: 'status-expired',
    3: 'status-used-up'
  }
  return classMap[status] || ''
}

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days == 0) return '今天'
  if (days == 1) return '昨天'
  if (days < 7) return `${days}天前`
  if (days < 30) return `${Math.floor(days / 7)}周前`
  if (days < 365) return `${Math.floor(days / 30)}个月前`

  return dateStr.split(' ')[0]
}

// 点击产品卡片
const handleProductClick = (item: ProductItem) => {
  // 如果已过期或已用完，提示用户
  if (item.status == 2) {
    ElMessage.warning('该产品已过期')
    return
  }
  if (item.status == 3) {
    ElMessage.warning('该产品已用完')
    return
  }

  if (!item.product_link) {
    ElMessage.warning('产品链接不存在')
    return
  }

  // 软件类型，触发下载
  if (item.product_type == 2) {
    const a = document.createElement('a')
    a.href = item.product_link
    a.target = '_blank'
    a.rel = 'noopener noreferrer'
    a.download = ''
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    return
  }

  // 网页类型，打开新窗口
  window.open(item.product_link, '_blank', 'noopener,noreferrer')
}

onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.me-purchase-product {
  width: 100%;

  .product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e4e7ed;

    .product-title {
      margin: 0;
      font-size: 24px;
      font-weight: bold;
      color: #303133;
    }

    .product-filters {
      display: flex;
      align-items: center;
      gap: 12px;

      .filter-item {
        width: 200px;
      }
    }

    .company-info {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 20px;
      color: #fff;
      font-size: 14px;

      .el-icon {
        font-size: 16px;
      }
    }
  }

  .product-content {
    padding: 20px 0;

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 24px;
    }

    .product-pagination {
      margin-top: 24px;
      display: flex;
      justify-content: flex-end;
    }

    .product-card {
      position: relative;
      cursor: pointer;
      background: #fff;
      border-radius: 12px;
      border: 1px solid #e4e7ed;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;

      &:hover {
        border-color: #409eff;
        box-shadow: 0 8px 24px rgba(64, 158, 255, 0.2);
        transform: translateY(-4px);
      }

      &.expired {
        opacity: 0.7;

        &:hover {
          border-color: #909399;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
      }
    }

    .status-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
      z-index: 2;
      backdrop-filter: blur(8px);

      &.status-active {
        background: rgba(103, 194, 58, 0.9);
        color: #fff;
      }

      &.status-expired {
        background: rgba(245, 108, 108, 0.9);
        color: #fff;
      }

      &.status-used-up {
        background: rgba(144, 147, 153, 0.9);
        color: #fff;
      }
    }

    .product-image-wrapper {
      position: relative;
      padding: 16px 16px 0;

      img {
        display: block;
        width: 100%;
        height: 180px;
        border-radius: 8px;
        object-fit: cover;
      }

      .product-type-badge {
        position: absolute;
        bottom: 8px;
        left: 24px;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 600;
        backdrop-filter: blur(8px);

        &.web {
          background: rgba(64, 158, 255, 0.9);
          color: #fff;
        }

        &.software {
          background: rgba(103, 194, 58, 0.9);
          color: #fff;
        }

        .el-icon {
          font-size: 14px;
        }
      }
    }

    .product-info {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .product-main {
      display: flex;
      gap: 12px;
      align-items: flex-end;
    }

    .product-main-left {
      flex: 1.3;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .product-main-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 150px;
    }

    .product-name {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .package-info {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .package-spec {
      font-size: 13px;
      color: #606266;
      line-height: 1.5;
      padding: 8px 12px;
      background: #f5f7fa;
      border-radius: 6px;
      border-left: 3px solid #409eff;
    }

    .usage-info {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .usage-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #606266;
        padding: 6px 10px;
        background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
        border-radius: 6px;

        .el-icon {
          font-size: 16px;
          color: #409eff;
        }

        strong {
          color: #409eff;
          font-weight: 600;
        }
      }
    }

    .seats-info {
      width: 100%;
      padding: 8px 12px;
      background: #f5f7fa;
      border-radius: 8px;
      border: 1px solid #e0e6f1;
      display: flex;
      flex-direction: column;

      .seats-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #606266;
      }

      .seats-label {
        color: #909399;
      }

      .seats-value {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #606266;
      }

      .seats-number {
        font-weight: 500;
        color: #303133;

        &.strong {
          color: #409eff;
          font-weight: 600;
        }
      }

      .seats-split {
        margin: 0 4px;
        color: #c0c4cc;
      }

      .seats-text {
        margin-left: 6px;
        font-size: 12px;
        color: #909399;
      }
    }

    .product-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid #e4e7ed;

      .buy-info {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #909399;

        .el-icon {
          font-size: 14px;
        }
      }

      .allocated-badge {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        background: #e6f7ff;
        border-radius: 12px;
        font-size: 12px;
        color: #1890ff;

        .el-icon {
          font-size: 14px;
        }
      }
    }
  }
}
</style>