我的卡劵

src/pages/couponDetail/couponDetail.wxml

 <!--pages/userCenter.wxml-->
-<text>pages/userCenter.wxml</text>
+<view class='page-couponDetail'>
+  
+</view>

src/pages/couponDetail/coupons.wxss

-/* pages/userCenter.wxss */
\ No newline at end of file

src/pages/coupons/coupons.js

@@ -9,7 +9,17 @@ wxService.page({
    * 页面的初始数据
    */
   data: {
-
+    nav:[
+      {
+        type:'1',
+        name:'可使用'
+      },{
+        type:'2',
+        name:'已失效'
+      }
+    ],
+    navIndex:'1'
+    
   },
 
   /**
@@ -19,13 +29,7 @@ wxService.page({
 
   },
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
+ 
   /**
    * 生命周期函数--监听页面显示
    */
@@ -33,38 +37,10 @@ wxService.page({
 
   },
 
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+  //切换tab
+  switchTab(e){
+    this.setData({
+      navIndex: e.currentTarget.dataset.index 
+    })
   }
 })
\ No newline at end of file

src/pages/coupons/coupons.wxml

 <!--pages/userCenter.wxml-->
-<text>pages/userCenter.wxml</text>
+<view class='page-coupons'>
+   <view class='tabs-wrap'>
+     <view wx:for='{{nav}}' wx:key='{{index}}' class="tab-nav fs-25 {{navIndex == item.type ? 'nav-active' : ''}}" data-index='{{item.type}}' bindtap='switchTab'>{{item.name}}(0)</view>
+   </view>
+   <view class='coupon-wrap'>
+      <view class='coupon-list'>
+        <navigator hover-class='none' url='/pages/couponDetail/couponDetail'>
+          <image class='coupon-bg' src='/assets/imgs/coupon-bg.png'></image>
+          <view class='coupon-img'>
+            <image src='/assets/imgs/qr-code.png'></image>
+          </view>
+          <view class='coupon-info'>
+            <view class='coupon-name fs-28'>卡劵名称</view>
+            <view class='coupon-time fs-24'>时间</view>
+            <view class='coupon-desc fs-24'>是个梵蒂冈设计费郭德纲发电机房</view>
+          </view>
+          <view class='coupon-code fs-24'>出示劵码</view>
+        </navigator>
+      </view>
+      <view class='coupon-list'>
+        <!-- 失效 -->
+        <view class='invalid-coupon'></view>
+        <image src='/assets/imgs/invalid.png' class='invalid-img'></image>
+        <!-- 未失效 -->
+        <image class='coupon-bg' src='/assets/imgs/coupon-bg.png'></image>
+        <view class='coupon-img'>
+          <image src='/assets/imgs/qr-code.png'></image>
+        </view>
+        <view class='coupon-info'>
+          <view class='coupon-name fs-28'>卡劵名称</view>
+          <view class='coupon-time fs-24'>时间</view>
+          <view class='coupon-desc fs-24'>是个梵蒂冈设计费郭德纲发电机房</view>
+        </view>
+        <view class='coupon-code fs-24'>出示劵码</view>
+      </view>
+   </view>
+   <view class='empty-wrap'>
+      <view class='empty-info'>
+        <image class='empty-img' src='/assets/imgs/empty-coupon.png'></image>
+        <view class='empty-text'>没有任何卡劵</view>
+      </view>
+   </view>
+</view>

src/pages/coupons/coupons.wxss

-/* pages/userCenter.wxss */
+/* pages/userCenter.wxss */
\ No newline at end of file
+@import './../../base/base.wxss';
+.tabs-wrap{
+  height: 86rpx;
+}
+.tab-nav{
+  width:375rpx;
+  float: left;
+  text-align: center;
+  height: 86rpx;
+  line-height: 86rpx;
+  background-color: #ffffff;
+  color: #666666;
+}
+.nav-active{
+  color: #05c35b;
+  border-bottom: 3rpx solid #05c35b;
+}
+.empty-wrap{
+  width: 300rpx;
+  margin: 190rpx auto 0;
+  text-align: center;
+}
+.empty-img{
+  width: 197rpx;
+  height: 176rpx;
+  margin-bottom: 48rpx;
+}
+.empty-text{
+  color: #cccccc;
+  font-size: 28rpx;
+}
+
+/* 卡劵列表 */
+.coupon-wrap{
+  padding: 20rpx;
+}
+.coupon-list{
+  width: 712rpx;
+  height: 209rpx;
+  position: relative;
+  margin-bottom: 20rpx;
+}
+.coupon-bg{
+  width: 712rpx;
+  height: 209rpx;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.coupon-img image{
+  width: 172rpx;
+  height: 172rpx;
+  position: absolute;
+  top: 18rpx;
+  left: 16rpx;
+}
+.coupon-info{
+  position: absolute;
+  top: 30rpx;
+  left: 236rpx;
+}
+.coupon-name{
+  color:#05c35b;
+}
+.coupon-time{
+  color:#999999;
+  margin-top: 10rpx;
+}
+.coupon-desc{
+  color:#666666;
+  margin-top: 6rpx;
+  width: 360rpx;
+}
+.coupon-code{
+  color: #ffffff;
+  position: absolute;
+  right: 20rpx;
+  top: 30rpx;
+  width: 24rpx;
+  word-wrap: break-word; 
+  font-weight: bold;
+}
+.invalid-coupon{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgba(0,0,0,0.5);
+  z-index:3;
+  border-radius: 7rpx;
+}
+.invalid-img{
+  position: absolute;
+  width: 147rpx;
+  height: 147rpx;
+  right: 81rpx;
+  top: 31rpx;
+  z-index: 4;
+}
\ No newline at end of file

src/project.config.json

@@ -37,7 +37,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 2,
+			"current": 4,
 			"list": [
 				{
 					"id": -1,
@@ -56,6 +56,18 @@
 					"name": "会员规则",
 					"pathName": "pages/memberRules/memberRules",
 					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的卡劵",
+					"pathName": "pages/coupons/coupons",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "积分流水",
+					"pathName": "pages/couponDetail/couponDetail",
+					"query": ""
 				}
 			]
 		}