移动端优惠券列表组件设计：票券式卡片与状态渐变色彩展示

By admin, 21 April, 2026

推理

用户需要我根据提供的API数据生成一个移动端优惠券列表组件。让我分析一下数据结构和需求：

数据结构：
- rows: 优惠券列表数组
- id: 优惠券ID
- title: 优惠券标题
- created: 创建时间
- reward_mode: 奖励模式
- used_time: 使用时间
- used_state: 使用状态 (0表示未使用)
- start_date: 开始时间
- end_date: 结束时间
- image: 优惠券图片
- group_purchase: 团购ID
- group_purchase_title: 团购标题
- shop_logo: 店铺logo
- shop: 店铺名称
- pager: 分页信息

这是一个移动端组件，所以breakpoint应该是"xs"。

我需要：
1. 先调用get_design_system获取设计系统建议
2. 设计一个美观的优惠券列表组件
3. 使用TailwindCSS构建响应式移动端界面

让我先获取设计系统建议。现在我有了设计系统建议。让我设计一个移动端优惠券列表组件。

设计思路：
1. 移动端优先，使用xs breakpoint
2. 优惠券卡片设计 - 采用票券样式，有锯齿边缘效果
3. 配色 - 使用鲜艳的渐变色彩，突出优惠券的吸引力
4. 展示信息：
- 优惠券标题
- 店铺logo和名称
- 有效期
- 使用状态
- 团购活动信息
5. 交互 - 点击领取/使用，状态切换动画

让我构建这个组件。

角色

assistant

content

```json
{
"summary": "设计了一个移动端优惠券列表组件，采用票券式卡片设计，带有锯齿边缘效果。使用渐变色彩区分不同状态（未使用/已使用/已过期），展示店铺信息、有效期和活动标签，支持点击查看详情。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n <title>优惠券列表</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;…\" rel=\"stylesheet\">\n <style>\n * {\n font-family: 'Noto Sans SC', sans-serif;\n -webkit-tap-highlight-color: transparent;\n }\n \n body {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n }\n \n .coupon-card {\n position: relative;\n background: white;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 10px 40px rgba(0,0,0,0.15);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n .coupon-card:active {\n transform: scale(0.98);\n }\n \n .coupon-card::before,\n .coupon-card::after {\n content: '';\n position: absolute;\n width: 20px;\n height: 20px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-radius: 50%;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n }\n \n .coupon-card::before {\n left: -10px;\n }\n \n .coupon-card::after {\n right: -10px;\n }\n \n .dashed-line {\n position: absolute;\n left: 72%;\n top: 10%;\n bottom: 10%;\n width: 1px;\n border-left: 2px dashed #e5e7eb;\n z-index: 5;\n }\n \n .status-badge {\n position: absolute;\n top: 12px;\n right: 12px;\n padding: 4px 12px;\n border-radius: 20px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n \n .status-unused {\n background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n }\n \n .status-used {\n background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);\n color: white;\n }\n \n .status-expired {\n background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n color: white;\n }\n \n .shop-logo {\n width: 44px;\n height: 44px;\n border-radius: 12px;\n object-fit: cover;\n border: 2px solid #f3f4f6;\n box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n }\n \n .activity-tag {\n background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n color: white;\n padding: 3px 10px;\n border-radius: 6px;\n font-size: 10px;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n }\n \n .date-info {\n color: #6b7280;\n font-size: 12px;\n }\n \n .date-info i {\n color: #f59e0b;\n margin-right: 4px;\n }\n \n .use-btn {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 24px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\n }\n \n .use-btn:active {\n transform: scale(0.95);\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);\n }\n \n .use-btn:disabled {\n background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);\n box-shadow: none;\n cursor: not-allowed;\n }\n \n .header {\n background: rgba(255,255,255,0.15);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid rgba(255,255,255,0.2);\n }\n \n .filter-tab {\n padding: 8px 20px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 500;\n transition: all 0.3s ease;\n cursor: pointer;\n }\n \n .filter-tab.active {\n background: white;\n color: #667eea;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n }\n \n .filter-tab:not(.active) {\n color: rgba(255,255,255,0.8);\n }\n \n .empty-state {\n text-align: center;\n padding: 60px 20px;\n color: rgba(255,255,255,0.8);\n }\n \n .empty-state i {\n font-size: 64px;\n margin-bottom: 16px;\n opacity: 0.6;\n }\n \n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n .animate-slide-in {\n animation: slideIn 0.5s ease forwards;\n }\n \n .coupon-image {\n width: 100%;\n height: 80px;\n object-fit: cover;\n border-radius: 8px;\n margin-bottom: 12px;\n }\n </style>\n</head>\n<body>\n \n <header class=\"header fixed top-0 left-0 right-0 z-50 px-4 py-3\">\n <div class=\"flex items-center justify-between\">\n <button class=\"text-white p-2 -ml-2\">\n <i class=\"fas fa-chevron-left text-lg\"></i>\n </button>\n <h1 class=\"text-white text-lg font-bold\">我的优惠券</h1>\n <button class=\"text-white p-2 -mr-2\">\n <i class=\"fas fa-ellipsis-h text-lg\"></i>\n </button>\n </div>\n </header>\n \n \n <div class=\"pt-16 px-4 pb-4\">\n <div class=\"flex gap-3 overflow-x-auto scrollbar-hide\">\n <div class=\"filter-tab active whitespace-nowrap\">全部</div>\n <div class=\"filter-tab whitespace-nowrap\">未使用</div>\n <div class=\"filter-tab whitespace-nowrap\">已使用</div>\n <div class=\"filter-tab whitespace-nowrap\">已过期</div>\n </div>\n </div>\n \n \n <div class=\"px-4 pb-24 space-y-4\" id=\"couponList\">\n \n <div class=\"coupon-card animate-slide-in\" style=\"animation-delay: 0.1s;\">\n <span class=\"status-badge status-unused\">未使用</span>\n \n \n <img src=\"/sites/xhb.zhaobg.com/files/2023-03/v2-e2cee9cbe1bdc2707b44ce6ce0ee7cb0_1440w.jpg\" \n alt=\"优惠券\" \n class=\"coupon-image\">\n \n <div class=\"dashed-line\"></div>\n \n <div class=\"flex\">\n \n <div class=\"flex-1 p-4 pr-6\">\n \n <div class=\"activity-tag mb-3\">\n <i class=\"fas fa-fire\"></i>\n 春节购物节\n </div>\n \n \n <div class=\"flex items-center gap-3 mb-3\">\n <img src=\"/sites/xhb.zhaobg.com/files/2023-03/airuosibiaozhichuntuxing.jpg\" \n alt=\"店铺logo\" \n class=\"shop-logo\">\n <div>\n <h3 class=\"font-bold text-gray-800 text-sm leading-tight\">优惠券2</h3>\n <p class=\"text-xs text-gray-500 mt-0.5\">艾若思文化传播</p>\n </div>\n </div>\n \n \n <div class=\"date-info flex items-center\">\n <i class=\"far fa-clock\"></i>\n <span>2025.02.06 - 2026.01.08</span>\n </div>\n </div>\n \n \n <div class=\"w-[28%] flex flex-col items-center justify-center p-4 bg-gradient-to-b from-gray-50 to-white\">\n <button class=\"use-btn\" onclick=\"useCoupon(this)\">\n 立即使用\n </button>\n <p class=\"text-xs text-gray-400 mt-2\">剩余30天</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"coupon-card animate-slide-in\" style=\"animation-delay: 0.2s; opacity: 0.7;\">\n <span class=\"status-badge status-used\">已使用</span>\n \n <div class=\"dashed-line\"></div>\n \n <div class=\"flex\">\n <div class=\"flex-1 p-4 pr-6\">\n <div class=\"activity-tag mb-3\" style=\"background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);\">\n <i class=\"fas fa-check\"></i>\n 新年特惠\n </div>\n \n <div class=\"flex items-center gap-3 mb-3\">\n <div class=\"shop-logo bg-gray-200 flex items-center justify-center\">\n <i class=\"fas fa-store text-gray-400 text-lg\"></i>\n </div>\n <div>\n <h3 class=\"font-bold text-gray-500 text-sm leading-tight line-through\">满100减20</h3>\n <p class=\"text-xs text-gray-400 mt-0.5\">精品生活馆</p>\n </div>\n </div>\n \n <div class=\"date-info flex items-center\">\n <i class=\"far fa-clock\"></i>\n <span>2025.01.01 - 2025.01.31</span>\n </div>\n </div>\n \n <div class=\"w-[28%] flex flex-col items-center justify-center p-4 bg-gradient-to-b from-gray-50 to-white\">\n <button class=\"use-btn\" disabled>\n 已使用\n </button>\n <p class=\"text-xs text-gray-400 mt-2\">使用于01-15</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"coupon-card animate-slide-in\" style=\"animation-delay: 0.3s; opacity: 0.6;\">\n <span class=\"status-badge status-expired\">已过期</span>\n \n <div class=\"dashed-line\"></div>\n \n <div class=\"flex\">\n <div class=\"flex-1 p-4 pr-6\">\n <div class=\"activity-tag mb-3\" style=\"background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\">\n <i class=\"fas fa-hourglass-end\"></i>\n 限时抢购\n </div>\n \n <div class=\"flex items-center gap-3 mb-3\">\n <div class=\"shop-logo bg-gray-200 flex items-center justify-center\">\n <i class=\"fas fa-store text-gray-400 text-lg\"></i>\n </div>\n <div>\n <h3 class=\"font-bold text-gray-500 text-sm leading-tight line-through\">8折优惠券</h3>\n <p class=\"text-xs text-gray-400 mt-0.5\">时尚潮流店</p>\n </div>\n </div>\n \n <div class=\"date-info flex items-center\">\n <i class=\"far fa-clock\"></i>\n <span>2024.12.01 - 2024.12.31</span>\n </div>\n </div>\n \n <div class=\"w-[28%] flex flex-col items-center justify-center p-4 bg-gradient-to-b from-gray-50 to-white\">\n <button class=\"use-btn\" disabled style=\"background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);\">\n 已过期\n </button>\n <p class=\"text-xs text-gray-400 mt-2\">已失效</p>\n </div>\n </div>\n </div>\n </div>\n \n \n <div class=\"fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-3 flex items-center justify-between shadow-lg\">\n <div class=\"flex items-center gap-2 text-gray-600\">\n <i class=\"fas fa-ticket-alt text-purple-500\"></i>\n <span class=\"text-sm\">共 <strong class=\"text-purple-600\">3</strong> 张优惠券</span>\n </div>\n <button class=\"use-btn\" onclick=\"showAddCoupon()\">\n <i class=\"fas fa-plus mr-1\"></i>\n 添加优惠券\n </button>\n </div>\n \n \n <div id=\"toast\" class=\"fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-xl opacity-0 pointer-events-none transition-opacity duration-300 z-50\">\n <i class=\"fas fa-check-circle text-green-400 mr-2\"></i>\n <span id=\"toastMessage\">操作成功</span>\n </div>\n \n <script>\n // Filter tabs interaction\n document.querySelectorAll('.filter-tab').forEach(tab => {\n tab.addEventListener('click', function() {\n document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));\n this.classList.add('active');\n showToast('已切换至' + this.textContent);\n });\n });\n \n // Use coupon function\n function useCoupon(btn) {\n btn.innerHTML = '<i class=\"fas fa-spinner fa-spin mr-1\"></i>处理中';\n btn.disabled = true;\n \n setTimeout(() => {\n btn.innerHTML = '已使用';\n btn.style.background = 'linear-gradient(135deg, #9ca3af 0%, #6b7280 100%)';\n btn.style.boxShadow = 'none';\n \n const card = btn.closest('.coupon-card');\n const badge = card.querySelector('.status-badge');\n badge.className = 'status-badge status-used';\n badge.textContent = '已使用';\n \n showToast('优惠券使用成功！');\n }, 1000);\n }\n \n // Show add coupon modal\n function showAddCoupon() {\n showToast('请输入优惠券兑换码');\n }\n \n // Toast notification\n function showToast(message) {\n const toast = document.getElementById('toast');\n const toastMessage = document.getElementById('toastMessage');\n toastMessage.textContent = message;\n toast.classList.remove('opacity-0', 'pointer-events-none');\n toast.classList.add('opacity-100');\n \n setTimeout(() => {\n toast.classList.remove('opacity-100');\n toast.classList.add('opacity-0', 'pointer-events-none');\n }, 2000);\n }\n \n // Pull to refresh simulation\n let startY = 0;\n let isPulling = false;\n \n document.addEventListener('touchstart', (e) => {\n if (window.scrollY === 0) {\n startY = e.touches[0].clientY;\n isPulling = true;\n }\n });\n \n document.addEventListener('touchmove', (e) => {\n if (!isPulling) return;\n const currentY = e.touches[0].clientY;\n const diff = currentY - startY;\n \n if (diff > 80 && window.scrollY === 0) {\n showToast('正在刷新...');\n isPulling = false;\n \n setTimeout(() => {\n showToast('刷新完成');\n }, 1000);\n }\n });\n \n document.addEventListener('touchend', () => {\n isPulling = false;\n });\n </script>\n</body>\n</html>"
},
"next": ["添加兑换码功能","增加优惠券详情页","支持批量操作","添加过期提醒","接入扫码领券"],
"breakpoint": "xs"
}
```

total_tokens

9152

summary

设计了一个移动端优惠券列表组件，采用票券式卡片设计，带有锯齿边缘效果。使用渐变色彩区分不同状态（未使用/已使用/已过期），展示店铺信息、有效期和活动标签，支持点击查看详情。

uiParsing

关闭