dujiabo
/
billiard-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

我的卡券

master
DU 6 months ago
parent
c6b30a6b6b
commit
e250be2615
5 changed files with 476 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/app.config.ts
  2. 9
      src/pageScan/couponStart/index.tsx
  3. 5
      src/pageScan/myCoupons/index.config.ts
  4. 246
      src/pageScan/myCoupons/index.scss
  5. 216
      src/pageScan/myCoupons/index.tsx

1
src/app.config.ts
Unescape View File

@ -42,6 +42,7 @@ export default defineAppConfig({ @@ -42,6 +42,7 @@ export default defineAppConfig({
'selfStart/index', // 自助开台页面
'timedStart/index', // 定时开台页面
'couponStart/index', // 团购券开台页面
'myCoupons/index', // 我的卡券（持有卡券）
'closeTable/index', // 关台页面
'renewFee/index', // 续费页面
'turnOffRestart/index', // 关灯重开页面

9
src/pageScan/couponStart/index.tsx
Unescape View File

@ -101,6 +101,13 @@ const CouponStart = () => { @@ -101,6 +101,13 @@ const CouponStart = () => {
))
}
// 跳转到我的卡券页面
const handleGoMyCoupons = () => {
Taro.navigateTo({
url: '/pageScan/myCoupons/index'
})
}
// 兑换开台
const handleExchange = () => {
if (!selectedCouponId) {
@ -219,7 +226,7 @@ const CouponStart = () => { @@ -219,7 +226,7 @@ const CouponStart = () => {
{selectedCouponType === CouponType.ACTIVITY && <View className="tab-indicator" />}
</View>
</View>
<View className="tabs-right">
<View className="tabs-right" onClick={handleGoMyCoupons}>
<Text className="total-text">共{coupons.length}张</Text>
<Text className="arrow-text">›</Text>
</View>

5
src/pageScan/myCoupons/index.config.ts
Unescape View File

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
export default {
navigationBarTitleText: '我的卡券',
navigationBarBackgroundColor: '#121212',
navigationBarTextStyle: 'white',
}

246
src/pageScan/myCoupons/index.scss
Unescape View File

@ -0,0 +1,246 @@ @@ -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;
}
}
}

216
src/pageScan/myCoupons/index.tsx
Unescape View File

@ -0,0 +1,216 @@ @@ -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>(CouponType.THIRD_PARTY)
// 券列表数据（模拟）
const [thirdPartyCoupons, setThirdPartyCoupons] = useState<Coupon[]>([
{
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<Coupon[]>([])
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 (
<View className="my_coupons_page">
{/* 券类型选项卡 */}
<View className="coupon_tabs">
<Tabs
className="tabs_component"
value={selectedCouponType}
onChange={(value) => handleSwitchType(value as CouponType)}
>
<Tabs.TabPane value={CouponType.THIRD_PARTY} title="第三方卡券" />
<Tabs.TabPane value={CouponType.ACTIVITY} title="活动卡券" />
</Tabs>
</View>
{/* 券列表 */}
{currentCoupons.length === 0 ? (
<EmptyData />
) : (
<View className="coupon_list">
{currentCoupons.map((coupon) => (
<View key={coupon.id} className="coupon_item">
{/* 左上角标签 */}
<View className="coupon_tag">{coupon.type}</View>
<View className="coupon_main">
{/* 左侧：时长和券类型 */}
<View className="coupon_left">
<View className="coupon_duration_wrapper">
<Text className="coupon_duration">{coupon.duration}</Text>
<Text className="coupon_unit">分钟</Text>
</View>
<Text className="coupon_type">{coupon.couponType}</Text>
</View>
{/* 右侧：信息区域 */}
<View className="coupon_right">
{/* 标题行：标题 + 价格或使用按钮 */}
<View className="title_row">
<Text className="coupon_title">{coupon.title}</Text>
{coupon.price && (
<Text className="coupon_price">{coupon.price}</Text>
)}
</View>
{/* 有效期 */}
<Text className="coupon_expire">有效日期至：{coupon.expireDate}</Text>
{/* 描述 */}
{coupon.description && <Text className="coupon_desc">{coupon.description}</Text>}
</View>
</View>
{/* 详情区域 */}
<View className="coupon_details_section">
{/* 第一条详情 + 展开/收起按钮 */}
{coupon.details.length > 0 && (
<View className="detail_row">
<Text className="detail_text">{coupon.details[0]}</Text>
<Text
className="toggle_text"
onClick={() => handleToggleExpand(coupon.id)}
>
{coupon.expanded ? '∧' : '∨'}
</Text>
</View>
)}
{/* 展开时显示其余详情 */}
{coupon.expanded && coupon.details.slice(1).map((detail, index) => (
<Text key={index} className="detail_text">{detail}</Text>
))}
</View>
</View>
))}
</View>
)}
{/* 底部提示 */}
{currentCoupons.length > 0 && <Text className="end_tip">到底了~</Text>}
{/* 页脚按钮 */}
<View className="footer">
<View className="footer_btn" onClick={handleGoCouponExchange}>
<Text className="btn_text">团购券兑换</Text>
</View>
<View className='footer_btn_sl'></View>
<View className="footer_btn" onClick={handleGoHistoryCoupons}>
<Text className="btn_text">历史优惠券</Text>
</View>
</View>
</View>
)
}
export default MyCoupons
Write Preview
Loading…
Cancel
Save