mingsu page

nova-tourism/pages/my/my-card/index.js

@@ -10,6 +10,8 @@ Page({
         customHeight: 0,
         bottomNavHeight: 0,
         contentHeight: 0,
+
+        active: 0,
     },
 
     /**
@@ -80,5 +82,8 @@ Page({
      */
     onShareAppMessage: function () {
 
-    }
+    },
+    onChange(event) {
+
+      },
 })

nova-tourism/pages/my/my-card/index.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "van-tab": "@vant/weapp/tab/index",
+    "van-tabs": "@vant/weapp/tabs/index"
+  }
 }

nova-tourism/pages/my/my-card/index.less

@@ -1 +1,83 @@
-/* nova-tourism/pages/my/my-card/index.wxss */
+/* nova-tourism/pages/my/my-card/index.wxss */
+.all {
+    width: 100vw;
+    padding-left: 30rpx;
+    padding-right: 30rpx;
+    overflow-y: scroll;
+    .cardbox{
+        width: 100%;
+        margin-top: 30rpx;
+        .picbox{
+            width: 100%;
+            height: 80rpx;
+            display: flex;
+            align-items: center;
+            .image{
+                width: 56rpx;
+                height: 56rpx;
+            }
+            .tex{
+                font-size: 32rpx;
+                margin-left: 20rpx;
+            }
+        }
+        .card{
+            height: 160rpx;
+            margin-left: 74rpx;
+            background-image: url(https://file-cloud.fmode.cn/EbxZUK5lBI/20241122/d6k1uh050505973.png);
+            background-position: center; /* 背景图片居中 */
+            background-size: cover; /* 背景图片覆盖整个元素 */
+            background-repeat: no-repeat; /* 不重复背景图片 */
+            display: flex;
+            align-items: center;
+            margin-bottom: 20rpx;
+            .car{
+                height: 160rpx;
+                display: flex;
+                align-items: center;
+                .numbox{
+                    width: 150rpx;
+                    display: flex;
+                    justify-content: center;
+                    align-items: flex-end;
+                    .num{
+                        font-size: 50rpx;
+                        color: #F73C2C ;
+    
+                    }
+                    .num-tex{
+                        font-size: 28rpx;
+                        color: #F73C2C;
+                        margin-bottom: 6rpx;
+                        margin-left: 4rpx;
+                    }
+                }  
+                .textbox{
+                    height: 80rpx;
+                    margin-left: 40rpx;
+                    .text1{
+                        font-size: 26rpx;
+                    }
+                    .text2{
+                        font-size: 24rpx;
+                        margin-top: 6rpx;
+                        color: #A9A398;
+                    }
+                } 
+                .bottom{
+                    width: 120rpx;
+                    height: 50rpx;
+                    border-radius: 32rpx;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-left: 20rpx;
+                    color: white;
+                    background-color: #F1A561;
+                    font-size: 26rpx;
+                }
+
+            }
+        }
+    }
+}

nova-tourism/pages/my/my-card/index.wxml

@@ -1,4 +1,56 @@
 <!--nova-tourism/pages/my/my-card/index.wxml-->
 <nav type="back" background-color="#ffffff" frontColor="#000000" title="卡卷包" />
 <view class="all" style="height: {{contentHeight}}rpx;">
-</view>
+    <van-tabs active="{{ active }}" color='#B2CEB9' title-inactive-color='#969696' title-active-color='#B2CEB9'>
+        <van-tab title="优惠卷">
+            <!-- 名宿 -->
+            <view class="cardbox">
+                <!-- 标题 -->
+                <view class="picbox">
+                    <image class="image" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/gdufd1104330219.png"></image>
+                    <view class="tex">望仙民宿</view>
+                </view>
+                <!-- 卡片 -->
+                <view class="card">
+                    <view class="car">
+                        <view class="numbox">
+                            <view class="num">100</view>
+                            <view class="num-tex">元</view>
+                        </view>
+                        <view class="textbox">
+                            <view class="text1">民宿住店带金卷</view>
+                            <view class="text2">2024.11.11-2025.11.11</view>
+                        </view>
+                        <view class="bottom">使用</view>
+                    </view>
+                </view>
+            </view>
+            <!-- 风物 -->
+            <view class="cardbox">
+                <!-- 标题 -->
+                <view class="picbox">
+                    <image class="image" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/m1rt69104425214.png"></image>
+                    <view class="tex">云上风物</view>
+                </view>
+                <!-- 卡片 -->
+                <block wx:for="{{6}}">
+                    <view class="card">
+                        <view class="car">
+                            <view class="numbox">
+                                <view class="num">100</view>
+                                <view class="num-tex">元</view>
+                            </view>
+                            <view class="textbox">
+                                <view class="text1">民宿住店带金卷</view>
+                                <view class="text2">2024.11.11-2025.11.11</view>
+                            </view>
+                            <view class="bottom">使用</view>
+                        </view>
+                    </view>
+                </block>
+
+            </view>
+        </van-tab>
+        <van-tab title="会员卡">内容 2</van-tab>
+    </van-tabs>
+</view>

nova-tourism/pages/my/my-card/index.wxss

@@ -0,0 +1 @@
+.all{width:100vw;padding-left:30rpx;padding-right:30rpx;overflow-y:scroll}.all .cardbox{width:100%;margin-top:30rpx}.all .cardbox .picbox{width:100%;height:80rpx;display:flex;align-items:center}.all .cardbox .picbox .image{width:56rpx;height:56rpx}.all .cardbox .picbox .tex{font-size:32rpx;margin-left:20rpx}.all .cardbox .card{height:160rpx;margin-left:74rpx;background-image:url(https://file-cloud.fmode.cn/EbxZUK5lBI/20241122/d6k1uh050505973.png);background-position:center;background-size:cover;background-repeat:no-repeat;display:flex;align-items:center;margin-bottom:20rpx}.all .cardbox .card .car{height:160rpx;display:flex;align-items:center}.all .cardbox .card .car .numbox{width:150rpx;display:flex;justify-content:center;align-items:flex-end}.all .cardbox .card .car .numbox .num{font-size:50rpx;color:#F73C2C}.all .cardbox .card .car .numbox .num-tex{font-size:28rpx;color:#F73C2C;margin-bottom:6rpx;margin-left:4rpx}.all .cardbox .card .car .textbox{height:80rpx;margin-left:40rpx}.all .cardbox .card .car .textbox .text1{font-size:26rpx}.all .cardbox .card .car .textbox .text2{font-size:24rpx;margin-top:6rpx;color:#A9A398}.all .cardbox .card .car .bottom{width:120rpx;height:50rpx;border-radius:32rpx;display:flex;justify-content:center;align-items:center;margin-left:20rpx;color:white;background-color:#F1A561;font-size:26rpx}

nova-tourism/pages/my/my-wallet/index.less

@@ -3,4 +3,5 @@
     width: 100vw;
     padding-left: 20rpx;
     padding-right: 20rpx;
+
 }

project.private.config.json

@@ -33,6 +33,12 @@
                     "pathName": "nova-tourism/pages/homestay/homestay-detail/index",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "卡卷包",
+                    "pathName": "nova-tourism/pages/my/my-card/index",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }