开发红包组件

components/activityList/index.json

@@ -1,5 +1,7 @@
 {
-    "component": true,
-    "usingComponents": {},
-    "styleIsolation": "apply-shared"
+  "component": true,
+  "usingComponents": {
+    "Voucher": "/components/voucher/index"
+  },
+  "styleIsolation": "apply-shared"
 }

components/activityList/index.wxml

@@ -1,10 +1,12 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
 <view class="activityList">
-  <!-- <view class="activityBox" wx:for="{{activityList}}" wx:key="id">
+  <view class="activityBox">
     <image src="" class="cover" />
     <view class="footer">
       <view class="info">
-        <view class="title">{{item.name}}</view>
+        <view class="title">标题</view>
+        <!--  <view class="time">{{filters.formatDate(item.startTime,2)}}—{{filters.formatDate(item.endTime,2)}}
+        </view> -->
         <view class="timeOut {{item.second=='00'?'closing':''}}" wx:if="{{item.second}}">距活动结束：
           <view class="outNum">{{item.hour}}</view>
           <view class="outSplit">:</view>
@@ -15,7 +17,7 @@
       </view>
       <view class="btn {{item.second=='00'?'closingBtn':''}}">立即参与</view>
     </view>
-  </view> -->
+  </view>
   <block wx:for="{{activityList}}" wx:key="id">
     <view class="activityBox" wx:if="{{item.bannerType==1}}" bindtap="activityEvent" data-info="{{item}}">
       <image src="{{item.icon}}" class="cover" />
@@ -93,31 +95,8 @@
             <view class="num">{{item.userList[index].count}}</view>
           </view>
         </view>
-        <!--  <view class="row">
-          <view class="left">
-            <image src="/static/2-1.png" class="stand" />
-            <image src="/static/play-big.png" class="avatar" bindtap="jumpUserInfo" data-uid='{{userList[1].uid}}' />
-            <view class="nickName textOver">樱桃小丸子</view>
-          </view>
-          <view class="right">
-            <image src="{{type=='2'?'/static/yx.png':type=='3'?'/static/play.png':'/static/win.png'}}"
-              class="playIcon" />
-            <view class="num">186</view>
-          </view>
-        </view>
-        <view class="row">
-          <view class="left">
-            <image src="/static/3-1.png" class="stand" />
-            <image src="/static/play-big.png" class="avatar" bindtap="jumpUserInfo" data-uid='{{userList[1].uid}}' />
-            <view class="nickName textOver">樱桃小丸子</view>
-          </view>
-          <view class="right">
-            <image src="{{type=='2'?'/static/yx.png':type=='3'?'/static/play.png':'/static/win.png'}}"
-              class="playIcon" />
-            <view class="num">186</view>
-          </view>
-        </view> -->
       </view>
     </view>
   </block>
-</view>
+</view>
+<Voucher />

components/voucher/index.js

@@ -0,0 +1,23 @@
+// components/voucher/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/voucher/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/voucher/index.less

@@ -0,0 +1,95 @@
+.voucherBox {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0px;
+  top: 0px;
+  background-color: rgba(0, 0, 0, 0.35);
+  z-index: 10;
+
+  .voucher {
+    margin: 340rpx auto 0px;
+    width: 630rpx;
+    height: 694rpx;
+    padding: 30rpx;
+    box-sizing: border-box;
+    background-color: #FEF2C7;
+    border-radius: 20rpx;
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      padding: 20rpx;
+      box-sizing: border-box;
+      border-radius: 20rpx;
+      background-color: white;
+      box-shadow: 0 2rpx 17rpx 0 #E2CA75;
+
+      .title {
+        font-size: 34rpx;
+        font-weight: bold;
+        text-align: center;
+      }
+
+      .hongbao {
+        width: 95rpx;
+        height: 114rpx;
+      }
+
+      .info {
+        margin: 30rpx 0px;
+        padding: 10rpx 28rpx;
+        box-sizing: border-box;
+        width: 100%;
+        border-radius: 20rpx;
+        background-color: #F2F6FC;
+
+        .row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 30rpx;
+          font-weight: bold;
+
+          .oldMoney {
+            color: #9E9E9E;
+            font-weight: normal;
+            text-decoration: line-through;
+          }
+
+          .newMoney {
+            color: #0DACFF;
+          }
+
+          .row-right {
+            display: flex;
+            align-items: center;
+
+            .hongbao-mini {
+              width: 38rpx;
+              height: 48rpx;
+              margin-right: 10rpx;
+            }
+          }
+        }
+      }
+
+      .btn {
+        padding: 10rpx 48rpx;
+        background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+        box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+        border-radius: 50rpx;
+        color: white;
+        font-size: 32rpx;
+      }
+
+      .tips {
+        margin-top: 20rpx;
+        font-size: 22rpx;
+      }
+    }
+  }
+}

components/voucher/index.wxml

@@ -0,0 +1,29 @@
+<view class="voucherBox" catchtouchmove='true'>
+  <view class="voucher">
+    <view class="body">
+      <view class="title" style="margin-top: 24rpx;">
+        恭喜您获得5元抵用卷
+      </view>
+      <view class="title" style="margin:26rpx 0rpx 50rpx;">
+        快去使用
+      </view>
+      <image src="/static/hongbao.png" class="hongbao" />
+      <view class="info">
+        <view class="row">
+          <view class="row-left">现价：10元</view>
+          <view class="row-right">
+            <image src="/static/hongbao.png" class="hongbao-mini" />-5元
+          </view>
+        </view>
+        <view class="row" style="margin-top: 14rpx;">
+          <view class="row-left oldMoney">原价：20元</view>
+          <view class="row-right newMoney">
+            实际支付15元
+          </view>
+        </view>
+      </view>
+      <view class="btn">领取使用</view>
+      <view class="tips">领取后在24小时内使用，过期作废</view>
+    </view>
+  </view>
+</view>

components/voucher/index.wxss

@@ -0,0 +1,83 @@
+.voucherBox {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0px;
+  top: 0px;
+  background-color: rgba(0, 0, 0, 0.35);
+  z-index: 10;
+}
+.voucherBox .voucher {
+  margin: 340rpx auto 0px;
+  width: 630rpx;
+  height: 694rpx;
+  padding: 30rpx;
+  box-sizing: border-box;
+  background-color: #FEF2C7;
+  border-radius: 20rpx;
+}
+.voucherBox .voucher .body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 20rpx;
+  box-sizing: border-box;
+  border-radius: 20rpx;
+  background-color: white;
+  box-shadow: 0 2rpx 17rpx 0 #E2CA75;
+}
+.voucherBox .voucher .body .title {
+  font-size: 34rpx;
+  font-weight: bold;
+  text-align: center;
+}
+.voucherBox .voucher .body .hongbao {
+  width: 95rpx;
+  height: 114rpx;
+}
+.voucherBox .voucher .body .info {
+  margin: 30rpx 0px;
+  padding: 10rpx 28rpx;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 20rpx;
+  background-color: #F2F6FC;
+}
+.voucherBox .voucher .body .info .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.voucherBox .voucher .body .info .row .oldMoney {
+  color: #9E9E9E;
+  font-weight: normal;
+  text-decoration: line-through;
+}
+.voucherBox .voucher .body .info .row .newMoney {
+  color: #0DACFF;
+}
+.voucherBox .voucher .body .info .row .row-right {
+  display: flex;
+  align-items: center;
+}
+.voucherBox .voucher .body .info .row .row-right .hongbao-mini {
+  width: 38rpx;
+  height: 48rpx;
+  margin-right: 10rpx;
+}
+.voucherBox .voucher .body .btn {
+  padding: 10rpx 48rpx;
+  background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+  box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+  border-radius: 50rpx;
+  color: white;
+  font-size: 32rpx;
+}
+.voucherBox .voucher .body .tips {
+  margin-top: 20rpx;
+  font-size: 22rpx;
+}

pages/index/index.js

@@ -17,7 +17,7 @@ Page({
   data: {
     navBarHeight: app.globalData.navBarHeight,
     background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
-    currentType: '2',
+    currentType: '3',
     // 控制一级分类是否固定
     isFixed: false,
     desktopTips: app.globalData.desktopTips,