diff --git a/src/app.config.ts b/src/app.config.ts index 8673078..c35615a 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -28,6 +28,7 @@ export default defineAppConfig({ 'agreement/index', // 协议 'editProfile/index', // 编辑资料 'accountBalance/index', // 账户余额 + 'vipBenefits/index', // VIP权益 ] }, { diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index 09da671..ee120f4 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -63,6 +63,13 @@ const UserIndex = observer(() => { }) } + // 点击VIP + const handleVipClick = () => { + Taro.navigateTo({ + url: '/pagesUser/vipBenefits/index' + }) + } + return ( {/* 上部分:背景图和用户信息 */} @@ -94,7 +101,7 @@ const UserIndex = observer(() => { onClick={handleEdit} /> - VIP + VIP {/* 成长值 */} diff --git a/src/pagesUser/images/lijian.png b/src/pagesUser/images/lijian.png new file mode 100644 index 0000000..e9c20c1 Binary files /dev/null and b/src/pagesUser/images/lijian.png differ diff --git a/src/pagesUser/images/shengri.png b/src/pagesUser/images/shengri.png new file mode 100644 index 0000000..0c03b58 Binary files /dev/null and b/src/pagesUser/images/shengri.png differ diff --git a/src/pagesUser/images/vipBg.png b/src/pagesUser/images/vipBg.png new file mode 100644 index 0000000..462c9eb Binary files /dev/null and b/src/pagesUser/images/vipBg.png differ diff --git a/src/pagesUser/images/youhui.png b/src/pagesUser/images/youhui.png new file mode 100644 index 0000000..47e2214 Binary files /dev/null and b/src/pagesUser/images/youhui.png differ diff --git a/src/pagesUser/vipBenefits/index.config.ts b/src/pagesUser/vipBenefits/index.config.ts new file mode 100644 index 0000000..7ca0c15 --- /dev/null +++ b/src/pagesUser/vipBenefits/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: 'VIP权益', + navigationBarBackgroundColor: '#000000', + navigationBarTextStyle: 'white', +} diff --git a/src/pagesUser/vipBenefits/index.scss b/src/pagesUser/vipBenefits/index.scss new file mode 100644 index 0000000..394a67d --- /dev/null +++ b/src/pagesUser/vipBenefits/index.scss @@ -0,0 +1,181 @@ +.vip-benefits-page { + min-height: 100vh; + background-color: #FFFFFF; + padding-bottom: calc(120px + env(safe-area-inset-bottom)); // 为底部按钮留空间 + + // 上部分:VIP卡片区域 + .vip-card-area { + height: 280px; + padding: 40px 30px 0; + background-color: #000000; + + .vip-card { + border-radius: 13px; + background-image: url('../images/vipBg.png'); + background-size: cover; + background-position: center; + padding: 30px; + display: flex; + flex-direction: column; + justify-content: space-between; + + // 年卡标签 + .card-type { + font-size: 29px; + color: #F5D0B5; + } + + // 店铺名称(渐变文字) + .store-name { + font-weight: 500; + font-size: 42px; + color: #FFFFFF; + background: linear-gradient(-90deg, #F5BB94 0%, #FFE0CA 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin: 16px 0 22px; + } + + // 地址 + .store-address { + font-size: 25px; + color: #999999; + line-height: 1.5; + } + } + } + + // 下部分:权益列表区域 + .benefits-area { + padding: 30px; + + // 标题行 + .benefits-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 30px; + + .benefits-title { + font-weight: bold; + font-size: 33px; + color: #333333; + } + + .detail-btn { + display: flex; + align-items: center; + gap: 6px; + + .detail-text { + font-size: 25px; + color: #999999; + } + + .detail-arrow { + flex-shrink: 0; + } + } + } + + // 权益列表项 + .benefit-item { + background-color: #F2F3F5; + border-radius: 13px; + padding: 30px; + display: flex; + align-items: center; + gap: 30px; + margin-bottom: 25px; + + &:last-child { + margin-bottom: 0; + } + + // 图标 + .benefit-icon { + width: 83px; + height: 83px; + flex-shrink: 0; + } + + // 内容区域 + .benefit-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 13px; + min-width: 0; + + .benefit-title { + font-weight: bold; + font-size: 33px; + color: #000000; + } + + .benefit-desc { + font-size: 25px; + color: #8B8B8B; + line-height: 1.5; + word-break: break-all; + } + } + + // 箭头 + .benefit-arrow { + width: 13px; + height: 20px; + flex-shrink: 0; + } + } + } + + // 底部固定区域 + .footer-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 30px; + padding-bottom: calc(20px + env(safe-area-inset-bottom)); + background-color: #FFFFFF; + box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1); + + .price-info { + display: flex; + align-items: baseline; + + .price-amount { + font-size: 45px; + color: #000000; + font-weight: 500; + } + + .price-unit { + font-size: 28px; + color: #000000; + margin-left: 4px; + } + } + + .open-vip-btn { + width: 200px; + height: 88px; + background: linear-gradient(-90deg, #F0BE86 0%, #FADEB9 100%); + border-radius: 44px; + display: flex; + align-items: center; + justify-content: center; + + .open-vip-text { + font-size: 33px; + color: #844614; + font-weight: 500; + } + } + } +} diff --git a/src/pagesUser/vipBenefits/index.tsx b/src/pagesUser/vipBenefits/index.tsx new file mode 100644 index 0000000..134442e --- /dev/null +++ b/src/pagesUser/vipBenefits/index.tsx @@ -0,0 +1,128 @@ +/** + * VIP权益页面 + */ +import { View, Text, Image } from '@tarojs/components' +import Taro, { useLoad } from '@tarojs/taro' +import { Arrow } from '@taroify/icons' +import './index.scss' + +// 使用本地图片资源 +const vipBgImg = require('../images/vipBg.png') +const lijianImg = require('../images/lijian.png') +const youhuiImg = require('../images/youhui.png') +const shengriImg = require('../images/shengri.png') + +const VipBenefits = () => { + useLoad(() => { + console.log('VIP权益页面加载') + }) + + // 权益详情 + const handleBenefitDetail = () => { + Taro.showToast({ + title: '功能开发中', + icon: 'none', + duration: 2000 + }) + } + + // 首单立减 + const handleFirstDiscount = () => { + Taro.showToast({ + title: '功能开发中', + icon: 'none', + duration: 2000 + }) + } + + // VIP专属优惠 + const handleVipDiscount = () => { + Taro.showToast({ + title: '功能开发中', + icon: 'none', + duration: 2000 + }) + } + + // 生日福利 + const handleBirthdayBenefit = () => { + Taro.showToast({ + title: '功能开发中', + icon: 'none', + duration: 2000 + }) + } + + return ( + + {/* 上部分:VIP卡片区域 */} + + + {/* 年卡标签 */} + 年卡 + + {/* 店铺名称 */} + 北京球场风云店 + + {/* 地址 */} + 距离0.05km | XX省XX市XX区XX县XXXXXXXXX街道XXX大厦106 + + + + {/* 下部分:权益列表区域 */} + + {/* 标题行 */} + + 开通即享VIP权益 + + 权益详情 + + + + + {/* 首单立减 */} + + + + 首单立减 + 首次台球订单立减,订单结束时自动抵扣。 + + + + + {/* VIP专属优惠 */} + + + + VIP专属优惠 + 全年享折扣,不限时长,不限次数。{'\n'}(不与其他优惠同享) + + + + + {/* 生日福利 */} + + + + 生日福利 + 生日当天到店打台球,享受赠球时长福利。 + + + + + + {/* 底部价格和按钮 */} + + + 19.90 + 元/年 + + + 开通VIP + + + + ) +} + +export default VipBenefits