我的券包

api/welfareMall.js

@@ -153,6 +153,13 @@ class WelfareMall extends request {
     return this.postRequest(`${this.BASE_URL}open/welfare-mall/personal-data`, params);
   }
 
+  /**
+   * 用户卡券列表
+   */
+  static getUserCouponSnList(params) {
+    return this.postRequest(`${this.BASE_URL}open/coupon/user-coupon-sn-list`, params);
+  }
+
 
 
 

app.json

@@ -19,13 +19,14 @@
     "pages/luckDraw/detail",
     "pages/luckDraw/index",
     "pages/luckDraw/profile",
-    "pages/luckDraw/recordPrize"
+    "pages/luckDraw/recordPrize",
+    "pages/welfareMall/coupon/coupon"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "Weixin",
-    "navigationBarTextStyle":"black"
+    "navigationBarTextStyle": "black"
   },
   "style": "v2",
   "sitemapLocation": "sitemap.json",
@@ -33,18 +34,19 @@
     "color": "#1b1b1b",
     "selectedColor": "#1b1b1b",
     "backgroundColor": "#ffffff",
-    "list": [  {
-      "text": "首页",
-      "pagePath": "pages/welfareMall/index/index",
-      "selectedIconPath": "images/welfareMall/home.png",
-      "iconPath": "images/welfareMall/home.png"
-  },
-  {
-      "text": "我的",
-      "pagePath": "pages/welfareMall/personal/personal",
-      "selectedIconPath": "images/welfareMall/user.png",
-      "iconPath": "images/welfareMall/user.png"
-  }
-  ]
+    "list": [
+      {
+        "text": "首页",
+        "pagePath": "pages/welfareMall/index/index",
+        "selectedIconPath": "images/welfareMall/home.png",
+        "iconPath": "images/welfareMall/home.png"
+      },
+      {
+        "text": "我的",
+        "pagePath": "pages/welfareMall/personal/personal",
+        "selectedIconPath": "images/welfareMall/user.png",
+        "iconPath": "images/welfareMall/user.png"
+      }
+    ]
   }
-}
+}

pages/welfareMall/coupon/coupon.js

@@ -0,0 +1,128 @@
+// pages/welfareMall/coupon/coupon.js
+import WelfareMall from '../../../api/welfareMall'
+import { parseTime } from '../../../utils/util'
+import {getMobileCache, getPhoneNumber as getPhoneNumberSync} from '../../../utils/user'
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    page: 1,
+    pageSize: 10,
+    lock: false,
+    noResult: false,
+    noMore: false,
+    mobileTop: 'TONY WU',
+    couponList: []
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.getCouponList();
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    if (this.data.lock || this.data.noMore) {
+      return
+    }
+    this.data.lock = true
+    this.data.page++
+    this.getCouponList();
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  // 券包数据
+  getCouponList: async function() {
+    let res = await WelfareMall.getUserCouponSnList({
+      page: this.data.page,
+      pageSize: this.data.pageSize,
+      mobile: getMobileCache(),
+    }).then(res => {
+      if (res.code == 200) {
+        this.userCouponListView(res.data)
+      }
+      this.data.lock = false
+     }).catch(_ => {
+      console.log(_)
+      this.data.lock = false
+     })
+    
+},
+
+  userCouponListView: function(data) {
+    if (!Array.isArray(data) || data.length == 0) {
+        console.log("订单列表数据为空");
+        if (this.data.page == 1) {
+            this.setData({
+                mobileTop:getMobileCache(),
+                noResult: true
+            })
+        } else {
+            this.setData({
+                mobileTop:getMobileCache(),
+                noMore: true
+            })
+        }
+        return
+    }
+    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}")
+    })
+
+    this.data.couponList = this.data.couponList.concat(...data)
+    this.setData({
+        mobileTop:getMobileCache(),
+        couponList: this.data.couponList
+    })
+  }
+})

pages/welfareMall/coupon/coupon.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "jumpmallapp": "../../../components/jumpmallapp"
+  },
+  "navigationBarTitleText": "我的券包"
+}

pages/welfareMall/coupon/coupon.wxml

@@ -0,0 +1,34 @@
+<!--pages/welfareMall/coupon/coupon.wxml-->
+<view class="coupon flex-column">
+  <view class="coupon-style flex-column">
+    <!-- 内容 -->
+    <view class="coupon-content flex-column" wx:for="{{couponList}}" wx:key="index" data-couponSn="{{item.couponSn}}">
+      <view class="{{item.couponType == 'C'?'coupon-list2 flex-row':'coupon-list flex-row'}}">
+        <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> -->
+          <jumpmallapp class="coupon-num-text">立即使用</jumpmallapp>
+        </view>
+      </view>
+    </view>
+    <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无历史订单 ————</view>
+    <view class="no_result" wx:if="{{noMore}}">—— 人家也是有底线的 ——</view>
+  </view>
+</view>

pages/welfareMall/coupon/coupon.wxss

@@ -0,0 +1,155 @@
+/* pages/welfareMall/coupon/coupon.wxss */
+page{
+  background: #F7F7F7;
+}
+.coupon{
+  width: 375px;
+  height: auto;
+  padding-bottom: 120px; 
+}
+
+/* 垂直方向布局，水平居中 **/
+.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-style{
+  margin-top: 13px;
+  width: 352px;
+  height: auto;
+}
+
+.coupon-list{
+  width: 352px;
+  height: 101px;
+  background-image: url(https://dy.shpr.top/welfareGo/discount.png);
+  background-size: 100% 100%;
+  margin-bottom: 17px;
+  justify-content: space-between;
+}
+
+.coupon-list2{
+  width: 352px;
+  height: 101px;
+  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: 38px;
+  align-items: flex-start;
+}
+
+.coupon-info-tittle{
+  width: 200px;
+  height: 19px;
+  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: 200px;
+  height: 15px;
+  font-size: 13px;
+  font-weight: 400;
+  color: #444444;
+  line-height: 15px;
+  margin-top: 10px;
+}
+
+.coupon-numText{
+  width: 100px;
+}
+
+.coupon-num-num{
+  font-size: 46px;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: 57px;
+}
+
+.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-num-hanSmall{
+  font-size: 16px;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: 17px;
+  margin-top: 19px;
+  margin-bottom: 19px;
+}
+.coupon-num-text{
+  font-size: 15px;
+  font-weight: 400;
+  color: #FFF8F8;
+  line-height: 15px;
+}
+
+.no_result {
+  font-size: 24rpx;
+  color: #B1B1B1;
+  line-height: 100rpx;
+  font-weight: 1000;
+}

pages/welfareMall/historical/historical.wxss

@@ -1,9 +1,11 @@
 /* pages/welfareMall/historical/historical.wxss */
+page{
+  background: #F7F7F7;
+}
 .historical{
   width: 750rpx;
   height: auto;
   padding-bottom: 119rpx; 
-  background: #F7F7F7;
 }
 
 /* 垂直方向布局，水平居中 **/