From d04a96fbd6b1425e164bbcdce7f28b293b245e2d Mon Sep 17 00:00:00 2001 From: DU Date: Sun, 18 Jan 2026 13:29:46 +0800 Subject: [PATCH] =?UTF-8?q?vip=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 1 + src/pagesUser/benefitDetail/index.config.ts | 5 + src/pagesUser/benefitDetail/index.scss | 72 +++++++++++++ src/pagesUser/benefitDetail/index.tsx | 107 ++++++++++++++++++++ src/pagesUser/vipBenefits/index.tsx | 32 +++--- 5 files changed, 197 insertions(+), 20 deletions(-) create mode 100644 src/pagesUser/benefitDetail/index.config.ts create mode 100644 src/pagesUser/benefitDetail/index.scss create mode 100644 src/pagesUser/benefitDetail/index.tsx diff --git a/src/app.config.ts b/src/app.config.ts index c35615a..33731aa 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -29,6 +29,7 @@ export default defineAppConfig({ 'editProfile/index', // 编辑资料 'accountBalance/index', // 账户余额 'vipBenefits/index', // VIP权益 + 'benefitDetail/index', // 权益详情 ] }, { diff --git a/src/pagesUser/benefitDetail/index.config.ts b/src/pagesUser/benefitDetail/index.config.ts new file mode 100644 index 0000000..b6bf8a9 --- /dev/null +++ b/src/pagesUser/benefitDetail/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '权益详情', + navigationBarBackgroundColor: '#FFFFFF', + navigationBarTextStyle: 'black', +} diff --git a/src/pagesUser/benefitDetail/index.scss b/src/pagesUser/benefitDetail/index.scss new file mode 100644 index 0000000..9a8a72d --- /dev/null +++ b/src/pagesUser/benefitDetail/index.scss @@ -0,0 +1,72 @@ +.benefit-detail-page { + min-height: 100vh; + background-color: #FFFFFF; + + // 权益列表 + .benefit-list { + padding: 30px; + + .benefit-item { + background-color: #FFFFFF; + margin-bottom: 25px; + + &:last-child { + margin-bottom: 0; + } + + // 标题行 + .benefit-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 30px 0; + border-bottom: 1px solid #F2F3F5; + + .benefit-title { + // font-weight: bold; + font-size: 30px; + color: #333333; + } + + .arrow-icon { + transition: transform 0.3s ease; + flex-shrink: 0; + + &.expanded { + transform: rotate(180deg); + } + } + } + + // 详情内容 + .benefit-details { + padding: 30px 0; + + .detail-item { + display: flex; + align-items: flex-start; + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + + .detail-dot { + font-size: 25px; + color: #000000; + margin-right: 10px; + flex-shrink: 0; + line-height: 1.8; + } + + .detail-text { + flex: 1; + font-size: 25px; + color: #000000; + line-height: 1.8; + } + } + } + } + } +} diff --git a/src/pagesUser/benefitDetail/index.tsx b/src/pagesUser/benefitDetail/index.tsx new file mode 100644 index 0000000..31451e1 --- /dev/null +++ b/src/pagesUser/benefitDetail/index.tsx @@ -0,0 +1,107 @@ +/** + * 权益详情页面 + */ +import { View, Text } from '@tarojs/components' +import Taro, { useLoad, useRouter } from '@tarojs/taro' +import { useState } from 'react' +import { ArrowDown } from '@taroify/icons' +import './index.scss' + +interface BenefitItem { + id: string + title: string + details: string[] +} + +const BenefitDetail = () => { + const router = useRouter() + const { expand = '' } = router.params as { expand?: string } // 接收需要展开的项 + + // 权益数据 + const benefits: BenefitItem[] = [ + { + id: 'first', + title: '首单立减', + details: [ + '开通VIP后，首笔台球订单（需原价开台，团购券等方式开台不可适用），订单结束时自动抵扣（不与VIP折扣及其他优惠同享），抵扣后不再支持。', + 'VIP门店可用，非VIP门店不可使用，具体以前端展示的可用门店为准。', + '仅限台球服务可用，棋牌等其他类型服务不适用。' + ] + }, + { + id: 'vip', + title: 'VIP专属优惠', + details: [ + '享受全年VIP专属优惠，本优惠不与其他任何优惠同享（比如：门店充值、优惠券等），具体优惠折扣根据VIP门店开台页显示为准，在VIP有效期内优惠不限次数。', + 'VIP门店可用，非VIP门店不可使用，具体以前端展示的可用门店为准。', + '仅限台球服务可用，棋牌等其他类型服务不适用。' + ] + }, + { + id: 'birthday', + title: '生日福利', + details: [ + '生日当天（以VIP填写的生日信息为准，无生日信息则不能享受生日赠时长福利），享受1次赠1小时时长优惠。', + 'VIP门店可用，非VIP门店不可使用，具体以前端展示的可用门店为准。', + '仅限台球服务可用，棋牌等其他类型服务不适用。' + ] + } + ] + + // 展开状态管理 + const [expandedItems, setExpandedItems] = useState(() => { + // 初始化时如果有 expand 参数，则展开对应项 + return expand ? [expand] : [] + }) + + useLoad(() => { + console.log('权益详情页面加载，展开项:', expand) + }) + + // 切换展开/收起 + const handleToggle = (id: string) => { + setExpandedItems(prev => { + if (prev.includes(id)) { + // 如果已展开，则收起 + return prev.filter(item => item !== id) + } else { + // 如果未展开，则展开 + return [...prev, id] + } + }) + } + + return ( + + + {benefits.map((benefit) => ( + + {/* 标题行 */} + handleToggle(benefit.id)}> + {benefit.title} + + + + {/* 详情内容（展开时显示） */} + {expandedItems.includes(benefit.id) && ( + + {benefit.details.map((detail, index) => ( + + • + {detail} + + ))} + + )} + + ))} + + + ) +} + +export default BenefitDetail diff --git a/src/pagesUser/vipBenefits/index.tsx b/src/pagesUser/vipBenefits/index.tsx index 134442e..32b2f0e 100644 --- a/src/pagesUser/vipBenefits/index.tsx +++ b/src/pagesUser/vipBenefits/index.tsx @@ -17,39 +17,31 @@ const VipBenefits = () => { console.log('VIP权益页面加载') }) - // 权益详情 + // 权益详情（不展开任何项） const handleBenefitDetail = () => { - Taro.showToast({ - title: '功能开发中', - icon: 'none', - duration: 2000 + Taro.navigateTo({ + url: '/pagesUser/benefitDetail/index' }) } - // 首单立减 + // 首单立减（展开首单立减项） const handleFirstDiscount = () => { - Taro.showToast({ - title: '功能开发中', - icon: 'none', - duration: 2000 + Taro.navigateTo({ + url: '/pagesUser/benefitDetail/index?expand=first' }) } - // VIP专属优惠 + // VIP专属优惠（展开VIP专属优惠项） const handleVipDiscount = () => { - Taro.showToast({ - title: '功能开发中', - icon: 'none', - duration: 2000 + Taro.navigateTo({ + url: '/pagesUser/benefitDetail/index?expand=vip' }) } - // 生日福利 + // 生日福利（展开生日福利项） const handleBirthdayBenefit = () => { - Taro.showToast({ - title: '功能开发中', - icon: 'none', - duration: 2000 + Taro.navigateTo({ + url: '/pagesUser/benefitDetail/index?expand=birthday' }) }