优惠券样式完成

pages/cart/coupon.js

@@ -1,21 +1,31 @@
+var app = getApp()
+
 Page({
   data: {
-    
+    coupons: []
   },
 
   onShow: function() {
   },
 
   onLoad: function() {
-    this.getCoupon()
+    this.getCoupons()
   },
 
-  getCoupon: function() {
+  getCoupons: function() {
+    // for test
+    // var data = wx.getStorageSync('coupons')
+    // this.setData({coupons: data})
+    var that = this
+    var data = {}
+    data['token'] = app.globalData.token
     wx.request({
-      url: `${getApp().globalData.API_URL}/coupons`,
-      data: {},
+      url: `${app.globalData.API_URL}/coupons`,
+      data: data,
       method: 'GET',
       success: function(res){
+        var data = app.store.sync(res.data)
+        that.setData({coupons: data})
       },
       fail: function() {
       },

pages/cart/coupon.wxml

@@ -0,0 +1,24 @@
+<view>
+  <block wx:for="{{coupons}}" wx:for-item="coupon" wx:key="id">
+    <view class="coupon-container">
+      <view class="left-image" wx:if="{{coupon.overdue}}" bindtap="">
+        <image src="../../images/coupon-gray.png" mode="aspectFit"></image>
+      </view>
+      <view class="left-image" wx:else>
+        <image src="{{coupon['left-image']}}" mode="aspectFit"></image>
+      </view>
+      <view class="mall_coupon_ab">
+        <view class="value"><text>¥{{coupon['coupon-value']}}</text></view>
+        <view class="mall_coupon_more">
+          <view><text>{{coupon['sub-title']}}</text></view>
+          <view class="grey"><text>{{coupon.title}}</text></view>
+          <view class="grey"><text>{{coupon['product-category-title']}}</text></view>
+          <view class="grey"><text>• 有效期至: {{coupon['end-time']}}</text></view>
+        </view>
+        <view class="" wx:if="{{coupon.overdue}}" bindtap="">
+          <image src="../../images/out.png"  mode="aspectFit"></image>
+        </view>
+      </view>
+    </view>
+  </block>
+</view>

pages/cart/coupon.wxss

@@ -0,0 +1,46 @@
+.coupon-container {
+  display: flex;
+  flex-direction: column;
+  height: 225rpx;
+  margin-left: 20rpx;
+  margin-right: 20rpx;
+}
+
+.left-image image {
+  width: 100%;
+  height: 225rpx;
+}
+
+.mall_coupon_ab {
+  height: 225rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  position: relative;
+  top: -118rpx;
+}
+
+.mall_coupon_ab .value {
+  width: 35%;
+  font-size: 56rpx;
+  color: #fff;
+}
+
+.mall_coupon_more {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-right: 30rpx;
+  font-size: 35rpx;
+  line-height: 47rpx;
+}
+
+.mall_coupon_more .grey {
+  color: #999;
+}
+
+page {
+  background-color: #f4f4f4;
+}