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