diff --git a/src/app.config.ts b/src/app.config.ts
index d74ae74..bf025e5 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -42,6 +42,7 @@ export default defineAppConfig({
'selfStart/index', // 自助开台页面
'timedStart/index', // 定时开台页面
'couponStart/index', // 团购券开台页面
+ 'myCoupons/index', // 我的卡券（持有卡券）
'closeTable/index', // 关台页面
'renewFee/index', // 续费页面
'turnOffRestart/index', // 关灯重开页面
diff --git a/src/pageScan/couponStart/index.tsx b/src/pageScan/couponStart/index.tsx
index 7cd9d4d..55cea06 100644
--- a/src/pageScan/couponStart/index.tsx
+++ b/src/pageScan/couponStart/index.tsx
@@ -101,6 +101,13 @@ const CouponStart = () => {
))
}
+ // 跳转到我的卡券页面
+ const handleGoMyCoupons = () => {
+ Taro.navigateTo({
+ url: '/pageScan/myCoupons/index'
+ })
+ }
+
// 兑换开台
const handleExchange = () => {
if (!selectedCouponId) {
@@ -219,7 +226,7 @@ const CouponStart = () => {
{selectedCouponType === CouponType.ACTIVITY && }
-
+
共{coupons.length}张
›
diff --git a/src/pageScan/myCoupons/index.config.ts b/src/pageScan/myCoupons/index.config.ts
new file mode 100644
index 0000000..19c45f6
--- /dev/null
+++ b/src/pageScan/myCoupons/index.config.ts
@@ -0,0 +1,5 @@
+export default {
+ navigationBarTitleText: '我的卡券',
+ navigationBarBackgroundColor: '#121212',
+ navigationBarTextStyle: 'white',
+}
diff --git a/src/pageScan/myCoupons/index.scss b/src/pageScan/myCoupons/index.scss
new file mode 100644
index 0000000..1ef2b80
--- /dev/null
+++ b/src/pageScan/myCoupons/index.scss
@@ -0,0 +1,246 @@
+/**
+ * 我的卡券页面样式
+ */
+.my_coupons_page {
+ min-height: 100vh;
+ background-color: #121212;
+ padding-bottom: 130px; // 为底部固定区域留空间
+
+ // 券类型选项卡
+ .coupon_tabs {
+ background-color: #0E0D0D;
+ margin-bottom: 30px;
+
+ .tabs_component {
+ .taroify-tabs__nav {
+ background-color: #0E0D0D !important;
+ }
+
+ // 未选中 Tab
+ .taroify-tabs__tab {
+ font-size: 33px !important;
+ color: #999999 !important;
+ }
+
+ // 选中 Tab
+ .taroify-tabs__tab--active {
+ .taroify-badge-wrapper {
+ color: #FFFFFF !important;
+ }
+ }
+ }
+
+ :global {
+ // Tab 导航容器
+ .taroify-tabs__nav {
+ background-color: #0E0D0D !important;
+ }
+
+ // 选中指示线
+ .taroify-tabs__line {
+ // background-color: #FFFFFF !important;
+ }
+
+ // 未选中 Tab
+ .taroify-tabs__tab {
+ font-size: 33px !important;
+ color: #999999 !important;
+ }
+
+ // 选中 Tab
+ .taroify-tabs__tab--active {
+ color: #FFFFFF !important;
+ }
+ }
+ }
+
+ // 券列表
+ .coupon_list {
+ padding: 30px;
+
+ .coupon_item {
+ position: relative;
+ background-color: #2A2A2A;
+ border-radius: 12px;
+ margin-bottom: 20px;
+ overflow: hidden;
+
+ // 左上角标签
+ .coupon_tag {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: transparent;
+ border: 2px solid #FF6B00;
+ border-top: none;
+ border-left: none;
+ color: #FF6B00;
+ font-size: 22px;
+ padding: 4px 12px;
+ border-bottom-right-radius: 12px;
+ z-index: 1;
+ }
+
+ // 券主体
+ .coupon_main {
+ display: flex;
+ padding: 30px;
+ gap: 20px;
+
+ // 左侧：时长和券类型
+ .coupon_left {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 150px;
+ flex-shrink: 0;
+ padding-top: 40px; // 为左上角标签留空间
+
+ .coupon_duration_wrapper {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+ margin-bottom: 12px;
+
+ .coupon_duration {
+ font-size: 50px;
+ color: #FF6B00;
+ font-weight: bold;
+ line-height: 1;
+ }
+
+ .coupon_unit {
+ font-size: 25px;
+ color: #FF6B00;
+ line-height: 1;
+ }
+ }
+
+ .coupon_type {
+ font-size: 29px;
+ color: #999999;
+ line-height: 1.2;
+ }
+ }
+
+ // 右侧：信息区域
+ .coupon_right {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ min-width: 0;
+
+ // 标题行
+ .title_row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+
+ .coupon_title {
+ flex: 1;
+ font-size: 29px;
+ color: #FFFFFF;
+ font-weight: 500;
+ line-height: 1.4;
+ min-width: 0;
+ }
+
+ .coupon_price {
+ font-size: 25px;
+ color: #FFFFFF;
+ flex-shrink: 0;
+ }
+ }
+
+ .coupon_expire {
+ font-size: 23px;
+ color: #999999;
+ }
+
+ .coupon_desc {
+ font-size: 23px;
+ color: #FF6B00;
+ line-height: 1.5;
+ white-space: pre-line;
+ }
+ }
+ }
+
+ // 详情区域
+ .coupon_details_section {
+ padding: 0 30px 30px;
+ border-top: 1px dashed #3A3A3A;
+ padding-top: 20px;
+
+ .detail_row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 8px;
+
+ .detail_text {
+ flex: 1;
+ font-size: 23px;
+ color: #999999;
+ line-height: 1.8;
+ }
+
+ .toggle_text {
+ font-size: 20px;
+ color: #999999;
+ flex-shrink: 0;
+ white-space: nowrap;
+ }
+ }
+ }
+ }
+ }
+
+ // 底部提示
+ .end_tip {
+ display: block;
+ text-align: center;
+ font-size: 25px;
+ color: #999999;
+ margin: 40px 0;
+ }
+
+ // 页脚按钮
+ .footer {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: #121212;
+ padding: 20px 30px;
+ padding-bottom: calc(20px + env(safe-area-inset-bottom));
+ display: flex;
+ gap: 20px;
+ border-top: 1PX solid #2A2A2A;
+
+ .footer_btn {
+ flex: 1;
+ height: 88px;
+ // background-color: #2A2A2A;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .btn_text {
+ font-size: 30px;
+ color: #FFFFFF;
+ font-weight: 500;
+ }
+ }
+
+ .footer_btn_sl{
+ width: 1px;
+ height: 90px;
+ background-color: #2A2A2A;
+ }
+ }
+}
diff --git a/src/pageScan/myCoupons/index.tsx b/src/pageScan/myCoupons/index.tsx
new file mode 100644
index 0000000..382c3d9
--- /dev/null
+++ b/src/pageScan/myCoupons/index.tsx
@@ -0,0 +1,216 @@
+/**
+ * 我的卡券（持有卡券）页面
+ */
+import { View, Text } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import { Tabs } from '@taroify/core'
+import EmptyData from '@/components/EmptyData'
+import './index.scss'
+
+// 券类型枚举
+enum CouponType {
+ THIRD_PARTY = 'third_party',
+ ACTIVITY = 'activity',
+}
+
+// 券数据接口
+interface Coupon {
+ id: number
+ type: string // '团八' | '黑八' | '棋牌'
+ duration: string
+ couponType: string // '活动抵时券' | '抵时券'
+ title: string
+ expireDate: string
+ description: string
+ details: string[]
+ expanded: boolean
+ price?: string // 价格（活动券可能有）
+}
+
+const MyCoupons = () => {
+ const [selectedCouponType, setSelectedCouponType] = useState(CouponType.THIRD_PARTY)
+
+ // 券列表数据（模拟）
+ const [thirdPartyCoupons, setThirdPartyCoupons] = useState([
+ {
+ id: 1,
+ type: '团八',
+ duration: '180',
+ couponType: '抵时券',
+ title: '台球3小时59.9元体验券',
+ expireDate: '2025-11-01 09:00',
+ description: '',
+ details: ['不限时段，全天可用'],
+ expanded: false,
+ },
+ {
+ id: 2,
+ type: '中八',
+ duration: '60',
+ couponType: '抵时券',
+ title: '拼团价9.9元/小时',
+ expireDate: '2025-10-03 23:59',
+ description: '需要交押金，超时扣押金',
+ details: ['不限时段，全天可用', '适用类型：中八', '适用门店：北京球场风云店'],
+ expanded: false,
+ price: '¥9.9'
+ },
+ {
+ id: 3,
+ type: '棋牌',
+ duration: '240',
+ couponType: '抵时券',
+ title: '豪华棋牌室4小时59.9元体验券',
+ expireDate: '2025-10-10 23:59',
+ description: '',
+ details: ['不限时段，全天可用', '适用类型：棋牌室', '适用门店：北京黑八大师联盟球厅店'],
+ expanded: false,
+ price: '¥59.9'
+ },
+ ])
+
+ const [activityCoupons, setActivityCoupons] = useState([])
+
+ useLoad(() => {
+ console.log('我的卡券页面加载')
+ })
+
+ // 切换券类型
+ const handleSwitchType = (type: CouponType) => {
+ setSelectedCouponType(type)
+ }
+
+ // 展开/收起券详情
+ const handleToggleExpand = (id: number) => {
+ if (selectedCouponType === CouponType.THIRD_PARTY) {
+ setThirdPartyCoupons(prev => prev.map(coupon =>
+ coupon.id === id ? { ...coupon, expanded: !coupon.expanded } : coupon
+ ))
+ } else {
+ setActivityCoupons(prev => prev.map(coupon =>
+ coupon.id === id ? { ...coupon, expanded: !coupon.expanded } : coupon
+ ))
+ }
+ }
+
+ // 获取当前显示的券列表
+ const getCurrentCoupons = () => {
+ return selectedCouponType === CouponType.THIRD_PARTY ? thirdPartyCoupons : activityCoupons
+ }
+
+ const currentCoupons = getCurrentCoupons()
+
+ // 跳转到团购券兑换
+ const handleGoCouponExchange = () => {
+ console.log('团购券兑换')
+ Taro.showToast({
+ title: '跳转团购券兑换',
+ icon: 'none'
+ })
+ }
+
+ // 跳转到历史优惠券
+ const handleGoHistoryCoupons = () => {
+ console.log('历史优惠券')
+ Taro.showToast({
+ title: '跳转历史优惠券',
+ icon: 'none'
+ })
+ }
+
+ return (
+
+ {/* 券类型选项卡 */}
+
+ handleSwitchType(value as CouponType)}
+ >
+
+
+
+
+
+ {/* 券列表 */}
+ {currentCoupons.length === 0 ? (
+
+ ) : (
+
+ {currentCoupons.map((coupon) => (
+
+ {/* 左上角标签 */}
+ {coupon.type}
+
+
+ {/* 左侧：时长和券类型 */}
+
+
+ {coupon.duration}
+ 分钟
+
+ {coupon.couponType}
+
+
+ {/* 右侧：信息区域 */}
+
+ {/* 标题行：标题 + 价格或使用按钮 */}
+
+ {coupon.title}
+ {coupon.price && (
+ {coupon.price}
+ )}
+
+
+ {/* 有效期 */}
+ 有效日期至：{coupon.expireDate}
+
+ {/* 描述 */}
+ {coupon.description && {coupon.description}}
+
+
+
+ {/* 详情区域 */}
+
+ {/* 第一条详情 + 展开/收起按钮 */}
+ {coupon.details.length > 0 && (
+
+ {coupon.details[0]}
+ handleToggleExpand(coupon.id)}
+ >
+ {coupon.expanded ? '∧' : '∨'}
+
+
+ )}
+
+ {/* 展开时显示其余详情 */}
+ {coupon.expanded && coupon.details.slice(1).map((detail, index) => (
+ {detail}
+ ))}
+
+
+ ))}
+
+ )}
+
+ {/* 底部提示 */}
+ {currentCoupons.length > 0 && 到底了~}
+
+ {/* 页脚按钮 */}
+
+
+ 团购券兑换
+
+
+
+ 历史优惠券
+
+
+
+ )
+}
+
+export default MyCoupons