css

assets/css/mine/coupdz.scss

@@ -26,7 +26,7 @@
             .p2 {
                 padding-left: 8rpx;
                 height: 66rpx;
-                background: #f0f6ff;
+                background: #f5f5f7;
                 border-radius: 10rpx;
                 margin-bottom: 16rpx;
                 .t1 {
@@ -35,7 +35,7 @@
                 }
                 .t2 {
                     font-size: 24rpx;
-                    color: #1969f9;
+                    color: #484b59;
                     margin-right: 12rpx;
                 }
                 .iconfont {
@@ -52,6 +52,44 @@
                 font-size: 24rpx;
                 color: #919399;
             }
+            &.curr {
+                .p2 {
+                    background: #f0f6ff;
+                    .t1 {
+                        color: #484b59;
+                    }
+                    .t2 {
+                        color: #1969f9;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.layer-box {
+    padding: 0 24rpx 30rpx 24rpx;
+    background: linear-gradient(180deg, #f0f6ff 0%, #ffffff 88rpx);
+    border-radius: 10rpx 10rpx 0px 0px;
+    .title {
+        height: 88rpx;
+        margin-bottom: 30rpx;
+        .left {
+            width: 33.3%;
+        }
+        .right {
+            justify-content: flex-end;
+            width: 33.3%;
+            .iconfont {
+                font-size: 40rpx;
+                color: #c2c4cc;
+            }
+        }
+        .center {
+            width: 33.3%;
+            font-size: 24rpx;
+            color: #292b33;
+            font-weight: bold;
         }
     }
 }

pages/mine/coupdz.vue

@@ -2,12 +2,12 @@
     <view class="page-userCoupdz">
         <navElement title="京东卡"></navElement>
         <view class="list">
-            <view class="box" v-for="(item, index) in 100" :key="index">
+            <view class="box" v-for="(item, index) in 5" :key="index" :class="{ curr: index == 0 }">
                 <view class="p1 row bothSide verCenter">
                     <text class="t1">常规新客12月奖励</text>
                     <view class="row verCenter">
                         <text class="iconfont icon-juxing"></text>
-                        <text class="t2">查看</text>
+                        <text class="t2" @click="open()">查看</text>
                     </view>
                 </view>
                 <view class="p2 row verCenter">
@@ -26,6 +26,44 @@
             <image src="../../static/nodate.png"></image>
             <text class="tt">暂无京东卡信息</text>
         </view>
+        <!-- 获取电子券信息 -->
+        <uni-popup ref="popup" type="center">
+            <view class="layer-box">
+                <view class="title row verCenter">
+                    <view class="left"></view>
+                    <view class="center row rowCenter verCenter">筛选</view>
+                    <view class="right row"><text class="iconfont icon-xxx" @click="close()"></text></view>
+                </view>
+                <view class="filter-item">
+                    <view class="h2">下单时间</view>
+                    <view class="time-filter row bothSide verCenter">
+                        <view class="time row bothSide verCenter">
+                            <picker mode="date" :value="date" @change="bindDateChange">
+                                <view class="uni-input">{{ date }}</view>
+                            </picker>
+                            <text class="iconfont icon-juxing2"></text>
+                        </view>
+                        <text class="line">-</text>
+                        <view class="time row bothSide verCenter">
+                            <picker mode="date" :value="date" @change="bindDateChange">
+                                <view class="uni-input">{{ date }}</view>
+                            </picker>
+                            <text class="iconfont icon-juxing2"></text>
+                        </view>
+                    </view>
+                    <view class="h2">币种</view>
+                    <view class="tab row">
+                        <view class="box curr row rowCenter verCenter">全部</view>
+                        <view class="box row rowCenter verCenter">人民币</view>
+                        <view class="box row rowCenter verCenter">美元</view>
+                    </view>
+                </view>
+                <view class="btn row bothSide verCenter">
+                    <view class="btn0 row rowCenter verCenter">重置</view>
+                    <view class="btn1 row rowCenter verCenter">筛选</view>
+                </view>
+            </view>
+        </uni-popup>
     </view>
 </template>
 
@@ -41,7 +79,14 @@ export default {
         return {};
     },
     onLoad() {},
-    methods: {}
+    methods: {
+        open() {
+            this.$refs.popup.open('center');
+        },
+        close() {
+            this.$refs.popup.close();
+        }
+    }
 };
 </script>