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

<template>
  <div class="page-container">
    <div class="page-header">
      <PageTitle title="我的收藏" />
      <el-button type="danger" link @click="handleAddCategory"><el-icon><Plus /></el-icon>添加分类</el-button>
    </div>
    <!-- 分类Tab -->
    <StatusTabs v-model="activeCategory" :tabs="categoryTabs" type="pill" />
    <!-- 操作栏 -->
    <div class="action-bar">
      <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
      <el-button type="danger" link @click="handleBatchAddCart">加入购物车</el-button>
      <el-button type="danger" link @click="handleBatchCancel">取消收藏</el-button>
    </div>
    <!-- 商品列表 -->
    <div class="product-grid">
      <ProductCard
        v-for="(item, index) in productList"
        :key="index"
        :product="item"
        v-model="item.checked"
        show-checkbox
        show-action
        show-add-cart
        action-text="取消收藏"
        @action="handleCancelCollection(item)"
        @add-cart="handleAddCart(item)"
      />
    </div>
    <el-empty v-if="productList.length === 0" description="暂无收藏商品" />
    <TablePagination v-if="productList.length > 0" v-model:page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" @change="handleQuery" />
    <!-- 添加分类弹窗 -->
    <el-dialog v-model="categoryDialogVisible" title="添加分类" width="400px">
      <el-form ref="categoryFormRef" :model="categoryForm" :rules="categoryRules">
        <el-form-item prop="name"><el-input v-model="categoryForm.name" placeholder="请输入分类名称" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="categoryDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSaveCategory">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type CheckboxValueType } from 'element-plus'
import { PageTitle, StatusTabs, ProductCard, TablePagination } from '@/components'

const activeCategory = ref('all')
const selectAll = ref(false)
const categoryDialogVisible = ref(false)
const categoryFormRef = ref()

const categoryTabs = ref([
  { key: 'all', label: '全部' }, { key: 'computer', label: '电脑办公(2)' }, { key: 'industrial', label: '工业品(2)' },
  { key: 'decoration', label: '家装建材(2)' }, { key: 'appliance', label: '家用电器(2)' }, { key: 'digital', label: '数码(2)' }
])
const categoryForm = reactive({ name: '' })
const categoryRules = { name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }] }
const queryParams = reactive({ pageNum: 1, pageSize: 15 })
const total = ref(100)

const productList = ref([
  { id: 1, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '协议价', image: '', checked: false },
  { id: 2, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false },
  { id: 3, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false },
  { id: 4, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false },
  { id: 5, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false },
  { id: 6, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false },
  { id: 7, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false },
  { id: 8, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false }
])

watch(activeCategory, () => { queryParams.pageNum = 1; handleQuery() })
const handleQuery = () => {}
const handleSelectAll = (val: CheckboxValueType) => { productList.value.forEach(item => { item.checked = !!val }) }
const handleAddCategory = () => { categoryForm.name = ''; categoryDialogVisible.value = true }
const handleSaveCategory = async () => { const valid = await categoryFormRef.value?.validate(); if (!valid) return; categoryTabs.value.push({ key: categoryForm.name, label: `${categoryForm.name}(0)` }); ElMessage.success('添加成功'); categoryDialogVisible.value = false }
const handleAddCart = (_item: any) => { ElMessage.success('已加入购物车') }
const handleBatchAddCart = () => { const selected = productList.value.filter(item => item.checked); if (selected.length === 0) { ElMessage.warning('请先选择商品'); return }; ElMessage.success(`已将${selected.length}件商品加入购物车`) }
const handleCancelCollection = (item: any) => { ElMessageBox.confirm('确定要取消收藏该商品吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { const index = productList.value.findIndex(i => i.id === item.id); if (index > -1) productList.value.splice(index, 1); ElMessage.success('已取消收藏') }) }
const handleBatchCancel = () => { const selected = productList.value.filter(item => item.checked); if (selected.length === 0) { ElMessage.warning('请先选择商品'); return }; ElMessageBox.confirm(`确定要取消收藏选中的${selected.length}件商品吗？`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { productList.value = productList.value.filter(item => !item.checked); selectAll.value = false; ElMessage.success('已取消收藏') }) }
</script>

<style scoped lang="scss">
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; :deep(.page-title) { margin-bottom: 0; } }
.action-bar { display: flex; align-items: center; gap: 20px; padding: 10px 0; border-bottom: 1px solid #eee; margin-bottom: 15px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
</style>