我的券包页面

pages/welfareMall/coupon/coupon.js

@@ -1,6 +1,5 @@
 // pages/welfareMall/coupon/coupon.js
 import WelfareMall from '../../../api/welfareMall'
-import { parseTime } from '../../../utils/util'
 import {getMobileCache, getPhoneNumber as getPhoneNumberSync} from '../../../utils/user'
 Page({
 
@@ -115,8 +114,10 @@ Page({
     data.forEach(v => {
       let beginTime = v.couponBeginTimestamp
       let endTime = v.couponEndTimestamp
-      v.couponBeginTimestamp = parseTime(beginTime, "{y}.{m}.{d}")
-      v.couponEndTimestamp = parseTime(endTime, "{y}.{m}.{d}")
+      v.couponStartTime = beginTime * 1000
+      v.couponEndTime = endTime * 1000
+      v.title = v.couponTitle
+      v.isSn = true
     })
 
     this.data.couponList = this.data.couponList.concat(...data)

pages/welfareMall/coupon/coupon.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "jumpmallapp": "../../../components/jumpmallapp"
+    "jumpmallapp": "../../../components/jumpmallapp",
+    "coupon-wrap": "../../../components/couponWrap/index"
   },
   "navigationBarTitleText": "我的券包"
 }

pages/welfareMall/coupon/coupon.wxml

@@ -1,28 +1,14 @@
 <!--pages/welfareMall/coupon/coupon.wxml-->
     <!-- 内容 -->
-    <navigator  class="{{item.couponType == 'C'?'coupon-list2 flex-row':'coupon-list flex-row'}}" wx:for="{{couponList}}" wx:key="index" data-couponSn="{{item.couponSn}}" target="miniProgram" app-id="wxd92a2d29f8022f40" path="pages/index/index" open-type='navigate'>
-        <view class="coupon-info flex-column">
-          <viwe class="coupon-info-tittle">{{item.couponTitle}}</viwe>
-          <view class="coupon-center-bm flex-row">
-                <view class="coupon-center-block1"></view>
-                <view class="coupon-center-middle" wx:if="{{item.formatLeastCost == '0'}}">无门槛</view>
-                <view class="coupon-center-middle" wx:if="{{item.formatLeastCost != '0'}}">满{{item.formatLeastCost}}元使用</view>
-                <view class="coupon-center-block2"></view>
-          </view>
-          <viwe class="coupon-info-date">{{item.couponBeginTimestamp}}-{{item.couponEndTimestamp}}</viwe>
-        </view>
-        <view class="coupon-numText flex-column">
-          <view class="coupon-num flex-row">
-            <!-- 折扣券 -->
-            <view class="{{item.formatDiscount.length > 3 ?'coupon-num-numSmall':'coupon-num-num'}}" wx:if="{{item.couponType == 'D'}}">{{item.formatDiscount ?item.formatDiscount:0}}</view>
-            <view class="{{item.formatDiscount.length > 3 ?'coupon-num-hanSmall':'coupon-num-han'}}" wx:if="{{item.couponType == 'D'}}">折</view>
-            <!-- 代金券 -->
-            <view class="{{item.formatReduceCost.length > 3 ?'coupon-num-hanSmall':'coupon-num-han'}}" wx:if="{{item.couponType == 'C'}}">￥</view>
-            <view class="{{item.formatReduceCost.length > 3 ?'coupon-num-numSmall':'coupon-num-num'}}" wx:if="{{item.couponType == 'C'}}">{{item.formatReduceCost ?item.formatReduceCost:0}}</view>
-          </view>
-          <!-- <jumpmallapp>去使用</jumpmallapp> -->
-          <view class="coupon-num-text">立即使用</view>
-        </view>
-    </navigator>
-    <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂可用优惠券 ————</view>
-    <view class="no_result" wx:if="{{noMore}}">—— 人家也是有底线的 ——</view>
+    <page-wrap id="Page">
+      <view class="coupon-wrap-list">
+        <coupon-wrap wx:if="{{couponList.length>0}}" 
+        coupon-list="{{couponList}}" 
+        class="coupon_wrap"
+        coupon-item-ex-class="coupon-item-style"
+        coupon-circule-ex-class="coupon-circule-style"
+        />
+      </view>
+      <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂可用优惠券 ————</view>
+      <view class="no_result" wx:if="{{noMore}}">—— 人家也是有底线的 ——</view>
+    </page-wrap>

pages/welfareMall/coupon/coupon.wxss

@@ -1,6 +1,6 @@
 /* pages/welfareMall/coupon/coupon.wxss */
 page{
-  background: #F7F7F7;
+  background: #FFF6F5;
   display:flex;
   flex-flow: column nowrap;
   justify-content: left;
@@ -9,137 +9,20 @@ page{
   padding-top: 13px;
 }
 
-/* 垂直方向布局，水平居中 **/
-.flex-column{
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: left;
-}
-
-/* 水平方向布局，垂直居中 **/
-.flex-row{
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-}
-.coupon-list{
-  width: 704rpx;
-  height: 202rpx;
-  background-image: url(https://dy.shpr.top/welfareGo/discount.png);
-  background-size: 100% 100%;
-  margin-bottom: 17px;
-  justify-content: space-between;
-}
-
-.coupon-list2{
-  width: 704rpx;
-  height: 202rpx;
-  background-image: url(https://dy.shpr.top/welfareGo/cash.png);
-  background-size: 100% 100%;
-  margin-bottom: 17px;
-  justify-content: space-between;
-}
-
-.coupon-info{
-  margin-left: 76rpx;
-  align-items: flex-start;
-}
-
-.coupon-info-tittle{
-  width: 400rpx;
-  height: 38rpx;
-  font-size: 17px;
-  font-weight: bold;
-  color: #000000;
-  line-height: 15px;
-  margin-top: 10px;
-  overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.coupon-center-bm{
-  height: 15px;
-  margin-top: 10px;
-  justify-content: flex-start;
-}
-
-.coupon-center-block1,.coupon-center-block2{
-  width: 5px;
-  height: 5px;
-  background: #443E5B;
-  transform:rotate(45deg);
-  margin: 0 10rpx;
-}
-
-.coupon-center-middle{
-  font-size: 10px;
-  font-weight: 400;
-  color: #444444;
-  line-height: 16px;
-}
-
-.coupon-info-num{
-  width: 90px;
-  height: 13px;
-  font-size: 10px;
-  font-weight: 400;
-  color: #444444;
-  line-height: 15px;
-  margin-top: 15px;
-}
-
-.coupon-info-date{
-  width: 400rpx;
-  height: 30rpx;
-  font-size: 13px;
-  font-weight: 400;
-  color: #444444;
-  line-height: 15px;
-  margin-top: 10px;
-}
-
-.coupon-numText{
-  width: 200rpx;
-}
-
-.coupon-num-num{
-  font-size: 46px;
-  font-weight: bold;
-  color: #FFFFFF;
-  line-height: 57px;
+.coupon-wrap-list {
+  width: 100vw;
+  padding: 20rpx 30rpx;
+  box-sizing: border-box;
 }
 
-.coupon-num-numSmall{
-  font-size: 32px;
-  font-weight: bold;
-  color: #FFFFFF;
-  line-height: 33px;
-  margin-bottom: 10px;
-}
-.coupon-num-han{
-  font-size: 16px;
-  font-weight: bold;
-  color: #FFFFFF;
-  line-height: 17px;
-  margin-top: 19px;
+.coupon_wrap {
+  width: 690rpx;
 }
-
-.coupon-num-hanSmall{
-  font-size: 16px;
-  font-weight: bold;
-  color: #FFFFFF;
-  line-height: 17px;
-  margin-top: 19px;
-  margin-bottom: 19px;
+.coupon-item-style {
+  background: #fff !important;
 }
-.coupon-num-text{
-  font-size: 15px;
-  font-weight: 400;
-  color: #FFF8F8;
-  line-height: 15px;
+.coupon-circule-style {
+  background: #FFF6F5 !important;
 }
 
 .no_result {
@@ -147,4 +30,5 @@ page{
   color: #B1B1B1;
   line-height: 100rpx;
   font-weight: 1000;
+  text-align: center;
 }

project.private.config.json

@@ -137,6 +137,12 @@
                     "pathName": "pages/welfareMall/order/orderCompletion",
                     "query": "ordersn=640230958639293",
                     "scene": null
+                },
+                {
+                    "name": "",
+                    "pathName": "pages/welfareMall/coupon/coupon",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }