yoe-shop-web/src/views/enterprise/purchaseHistory/index.vue

<template>
  <div class="page-container">
    <PageTitle title="历史购买" />
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input v-model="queryParams.keyword" placeholder="搜索" style="width: 180px" clearable>
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
      <div class="price-range">
        <el-input v-model="queryParams.minPrice" placeholder="¥ 最高价" style="width: 100px" />
        <span class="range-separator">—</span>
        <el-input v-model="queryParams.maxPrice" placeholder="¥ 最低价" style="width: 100px" />
      </div>
      <el-date-picker v-model="queryParams.dateRange" type="daterange" range-separator="—" start-placeholder="请选择购买时间" end-placeholder="" style="width: 240px" />
    </div>
    <!-- 筛选栏 -->
    <div class="filter-bar">
      <span class="filter-label">商品类别</span>
      <el-select v-model="queryParams.category1" placeholder="请选择" style="width: 100px" clearable @change="handleCategory1Change">
        <el-option label="电脑" value="电脑" />
        <el-option label="办公设备" value="办公设备" />
        <el-option label="家用电器" value="家用电器" />
      </el-select>
      <el-select v-model="queryParams.category2" placeholder="请选择" style="width: 100px" clearable @change="handleCategory2Change">
        <el-option v-for="item in category2Options" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="queryParams.category3" placeholder="请选择" style="width: 100px" clearable>
        <el-option v-for="item in category3Options" :key="item" :label="item" :value="item" />
      </el-select>
      <span class="filter-label">商品品牌</span>
      <el-select v-model="queryParams.brand" placeholder="请选择" style="width: 100px" clearable>
        <el-option label="清华同方" value="清华同方" />
        <el-option label="联想" value="联想" />
        <el-option label="戴尔" value="戴尔" />
      </el-select>
    </div>
    <!-- 排序栏 -->
    <div class="sort-bar">
      <el-select v-model="queryParams.sortType" placeholder="默认排序" style="width: 110px"><el-option label="默认排序" value="default" /><el-option label="购买时间" value="time" /></el-select>
      <el-select v-model="queryParams.priceSort" placeholder="价格排序" style="width: 110px"><el-option label="价格排序" value="" /><el-option label="价格从低到高" value="asc" /><el-option label="价格从高到低" value="desc" /></el-select>
    </div>
    <!-- 订单列表 -->
    <div class="order-list">
      <div v-for="(order, orderIndex) in orderList" :key="orderIndex" class="order-card">
        <div class="order-header">
          <div class="order-info">
            <span class="order-date">{{ order.date }}</span>
            <span class="order-no">订单号：{{ order.orderNo }}</span>
          </div>
          <el-button type="danger" link @click="handleReorder(order)">一键复购</el-button>
        </div>
        <div class="product-list">
          <div v-for="(item, itemIndex) in order.products" :key="itemIndex" class="product-item">
            <div class="product-image">
              <el-image :src="item.image" fit="contain">
                <template #error><div class="image-placeholder"><el-icon :size="30" color="#ccc"><Picture /></el-icon></div></template>
              </el-image>
            </div>
            <div class="product-info">
              <div class="product-name">{{ item.name }}</div>
              <div class="product-spec">{{ item.spec1 }}</div>
              <div class="product-spec">{{ item.spec2 }}</div>
            </div>
            <div class="product-price">
              <span class="price">¥{{ item.price }}</span>
              <span class="quantity">x{{ item.quantity }}</span>
            </div>
            <div class="product-total" v-if="itemIndex === 0">
              <span class="total-label">支付款</span>
              <span class="total-price">¥{{ order.totalAmount }}</span>
            </div>
            <div class="product-action"><el-button type="danger" link @click="handleBuyAgain(item)">再次购买</el-button></div>
          </div>
        </div>
      </div>
    </div>
    <el-empty v-if="orderList.length === 0" description="暂无购买记录" />
    <TablePagination v-if="orderList.length > 0" v-model:page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" @change="handleQuery" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { Search, Picture } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { PageTitle, TablePagination } from '@/components'

const queryParams = reactive({ pageNum: 1, pageSize: 10, keyword: '', minPrice: '', maxPrice: '', dateRange: null, category1: '', category2: '', category3: '', brand: '', sortType: 'default', priceSort: '' })
const total = ref(100)

// 三级分类数据
const categoryData: Record<string, Record<string, string[]>> = {
  '电脑': {
    '台式机': ['商用台式机', '家用台式机', '一体机'],
    '笔记本': ['商务本', '游戏本', '轻薄本'],
    '平板电脑': ['安卓平板', 'iPad', 'Windows平板']
  },
  '办公设备': {
    '打印机': ['激光打印机', '喷墨打印机', '针式打印机'],
    '复印机': ['黑白复印机', '彩色复印机'],
    '投影仪': ['商务投影', '家用投影']
  },
  '家用电器': {
    '空调': ['挂机', '柜机', '中央空调'],
    '冰箱': ['双门冰箱', '多门冰箱', '对开门冰箱'],
    '洗衣机': ['滚筒洗衣机', '波轮洗衣机']
  }
}

const category2Options = computed(() => {
  if (!queryParams.category1) return []
  return Object.keys(categoryData[queryParams.category1] || {})
})

const category3Options = computed(() => {
  if (!queryParams.category1 || !queryParams.category2) return []
  return categoryData[queryParams.category1]?.[queryParams.category2] || []
})

const handleCategory1Change = () => {
  queryParams.category2 = ''
  queryParams.category3 = ''
}

const handleCategory2Change = () => {
  queryParams.category3 = ''
}

const orderList = ref([
  { date: '2025/12/05', orderNo: '489283929283298392', totalAmount: '181', products: [
    { id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' },
    { id: 2, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }
  ]},
  { date: '2025/12/05', orderNo: '489283929283298393', totalAmount: '181', products: [
    { id: 3, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }
  ]}
])

const handleQuery = () => {}
const handleReorder = (_order: any) => { ElMessage.success('已将订单商品加入购物车') }
const handleBuyAgain = (_item: any) => { ElMessage.success('已加入购物车') }
</script>

<style scoped lang="scss">
.search-bar { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; .price-range { display: flex; align-items: center; gap: 5px; .range-separator { color: #999; } } }
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; .filter-label { font-size: 14px; color: #666; } }
.sort-bar { display: flex; gap: 10px; margin-bottom: 20px; }
.order-list { .order-card { border: 1px solid #eee; border-radius: 4px; margin-bottom: 15px; overflow: hidden; .order-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: #f9f9f9; border-bottom: 1px solid #eee; .order-info { display: flex; align-items: center; gap: 20px; .order-date { font-size: 14px; color: #333; font-weight: 500; } .order-no { font-size: 13px; color: #666; } } } .product-list { .product-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f5f5f5; &:last-child { border-bottom: none; } .product-image { width: 80px; height: 80px; background: #f5f5f5; border-radius: 4px; overflow: hidden; flex-shrink: 0; .el-image { width: 100%; height: 100%; } .image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } } .product-info { flex: 1; padding: 0 20px; .product-name { font-size: 14px; color: #333; margin-bottom: 8px; line-height: 1.4; } .product-spec { font-size: 12px; color: #999; margin-bottom: 3px; } } .product-price { width: 100px; text-align: center; .price { display: block; font-size: 16px; font-weight: bold; color: #e60012; } .quantity { display: block; font-size: 12px; color: #999; margin-top: 5px; } } .product-total { width: 120px; text-align: center; .total-label { display: block; font-size: 12px; color: #999; } .total-price { display: block; font-size: 16px; font-weight: bold; color: #e60012; margin-top: 5px; } } .product-action { width: 80px; text-align: right; } } } } }
</style>