feat[litemall-wx]: 小商场前端支持优惠券

litemall-wx/app.json

@@ -11,7 +11,8 @@
     "pages/ucenter/footprint/footprint",
     "pages/ucenter/order/order",
     "pages/ucenter/orderDetail/orderDetail",
-    "pages/ucenter/coupon/coupon",
+    "pages/ucenter/couponList/couponList",
+    "pages/ucenter/couponSelect/couponSelect",
     "pages/ucenter/collect/collect",
     "pages/auth/login/login",
     "pages/auth/accountLogin/accountLogin",
@@ -34,7 +35,8 @@
     "pages/about/about",
     "pages/groupon/myGroupon/myGroupon",
     "pages/groupon/grouponDetail/grouponDetail",
-    "pages/groupon/grouponList/grouponList"
+    "pages/groupon/grouponList/grouponList",
+    "pages/coupon/coupon"
   ],
   "window": {
     "navigationBarBackgroundColor": "#FFFFFF",

litemall-wx/config/api.js

@@ -88,6 +88,12 @@ module.exports = {
   GroupOnMy: WxApiRoot + 'groupon/my', //团购API-我的团购
   GroupOnDetail: WxApiRoot + 'groupon/detail', //团购API-详情
   GroupOnJoin: WxApiRoot + 'groupon/join', //团购API-详情
+
+  CouponList: WxApiRoot + 'coupon/list', //优惠券列表
+  CouponMyList: WxApiRoot + 'coupon/mylist', //我的优惠券列表
+  CouponSelectList: WxApiRoot + 'coupon/selectlist', //当前订单可用优惠券列表
+  CouponReceive: WxApiRoot + 'coupon/receive', //优惠券领取
+
   StorageUpload: WxApiRoot + 'storage/upload', //图片上传,
 
   UserIndex: WxApiRoot + 'user/index', //个人页面用户相关信息

litemall-wx/pages/checkout/checkout.js

@@ -7,8 +7,7 @@ Page({
   data: {
     checkedGoodsList: [],
     checkedAddress: {},
-    checkedCoupon: [],
-    couponList: [],
+    availableCouponLength: 0, // 可用的优惠券数量
     goodsTotalPrice: 0.00, //商品总价
     freightPrice: 0.00, //快递费
     couponPrice: 0.00, //优惠券的价格
@@ -39,8 +38,8 @@ Page({
         that.setData({
           checkedGoodsList: res.data.checkedGoodsList,
           checkedAddress: res.data.checkedAddress,
+          availableCouponLength: res.data.availableCouponLength,
           actualPrice: res.data.actualPrice,
-          checkedCoupon: res.data.checkedCoupon,
           couponPrice: res.data.couponPrice,
           grouponPrice: res.data.grouponPrice,
           freightPrice: res.data.freightPrice,
@@ -59,6 +58,11 @@ Page({
       url: '/pages/ucenter/address/address',
     })
   },
+  selectCoupon() {
+    wx.navigateTo({
+      url: '/pages/ucenter/couponSelect/couponSelect',
+    })
+  },
   bindMessageInput: function(e) {
     this.setData({
       message: e.detail.value

litemall-wx/pages/checkout/checkout.wxml

@@ -24,11 +24,19 @@
   </view>
 
   <view class="coupon-box">
-    <view class="coupon-item">
-      <view class="l">
-        <text class="name">请选择优惠券</text>
-        <text class="txt">{{couponList.length}}张</text>
+    <view class="coupon-item" bindtap="selectCoupon">
+      <view class="l" wx:if="{{couponId == 0}}">
+        <text class="name">没有可用的优惠券</text>
+        <text class="txt">0张</text>
+      </view>
+      <view class="l" wx:elif="{{couponId == -1}}">
+        <text class="name">优惠券</text>
+        <text class="txt">{{availableCouponLength}}张</text>
       </view>
+      <view class="l" wx:else>
+        <text class="name">优惠券</text>
+        <text class="txt">-￥{{couponPrice}}元</text>
+      </view>      
       <view class="r">
         <image src="/static/images/address_right.png"></image>
       </view>

litemall-wx/pages/coupon/coupon.js

@@ -0,0 +1,149 @@
+var util = require('../../utils/util.js');
+var api = require('../../config/api.js');
+
+var app = getApp();
+
+Page({
+  data: {
+    couponList: [],
+    page: 1,
+    size: 10,
+    count: 0,
+    scrollTop: 0,
+    showPage: false
+  },
+
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.getCouponList();
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  getCouponList: function () {
+
+    let that = this;
+    that.setData({
+      scrollTop: 0,
+      showPage: false,
+      couponList: []
+    });
+    // 页面渲染完成
+    wx.showToast({
+      title: '加载中...',
+      icon: 'loading',
+      duration: 2000
+    });
+
+    util.request(api.CouponList, {
+      page: that.data.page,
+      size: that.data.size
+    }).then(function (res) {
+      if (res.errno === 0) {
+
+        that.setData({
+          scrollTop: 0,
+          couponList: res.data.data,
+          showPage: true,
+          count: res.data.count
+        });
+      }
+      wx.hideToast();
+    });
+
+  },
+  getCoupon(e) {
+    if (!app.globalData.hasLogin) {
+      wx.navigateTo({
+        url: "/pages/auth/login/login"
+      });
+    }
+
+    let couponId = e.currentTarget.dataset.index
+    util.request(api.CouponReceive, {
+      couponId: couponId
+    }, 'POST').then(res => {
+      if (res.errno === 0) {
+        wx.showToast({
+          title: "领取成功"
+        })
+      }
+      else {
+        util.showErrorToast(res.errmsg);
+      }
+    })
+  },
+  nextPage: function (event) {
+    var that = this;
+    if (this.data.page > that.data.count / that.data.size) {
+      return true;
+    }
+
+    that.setData({
+      page: that.data.page + 1
+    });
+
+    this.getCouponList();
+
+  },
+  prevPage: function (event) {
+    if (this.data.page <= 1) {
+      return false;
+    }
+
+    var that = this;
+    that.setData({
+      page: that.data.page - 1
+    });
+    this.getCouponList();
+  }
+})

litemall-wx/pages/coupon/coupon.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "优惠券专区"
+}

litemall-wx/pages/coupon/coupon.wxml

@@ -0,0 +1,28 @@
+<view class="container">
+  <scroll-view class="coupon-list" scroll-y="true" scroll-top="{{scrollTop}}">
+
+    <view class="item" wx:for="{{couponList}}" wx:for-index="index" wx:for-item="item" wx:key="id" bindtap="getCoupon" data-index="{{item.id}}">
+      <view class="tag">{{item.tag}}</view>
+      <view class="content">
+        <view class="left">
+          <view class="discount">{{item.discount}}元</view>
+          <view class="min"> 满{{item.min}}元使用</view>
+        </view>
+        <view class="right">
+          <view class="name">{{item.name}}</view>
+          <view class="time" wx:if="{{item.days != 0}}">有效期：{{item.days}}天</view>
+          <view class="time" wx:else> 有效期：{{item.startTime}} - {{item.endTime}}</view>
+        </view>
+      </view>
+      <view class="condition">
+        <text class="txt">{{item.desc}}</text>
+        <image src="{{item.pic}}" class="icon"></image>
+      </view>
+    </view>
+
+    <view class="page" wx:if="{{showPage}}">
+      <view class="prev {{ page <= 1 ? 'disabled' : ''}}" bindtap="prevPage">上一页</view>
+      <view class="next {{ (count / size) < page ? 'disabled' : ''}}" bindtap="nextPage">下一页</view>
+    </view>
+  </scroll-view>
+</view>

litemall-wx/pages/coupon/coupon.wxss

@@ -0,0 +1,132 @@
+page {
+  background: #f4f4f4;
+  min-height: 100%;
+}
+
+.container {
+  background: #f4f4f4;
+  min-height: 100%;
+  padding-top: 30rpx;
+}
+
+.coupon-list {
+  width: 750rpx;
+  height: 100%;
+  overflow: hidden;
+}
+
+.item {
+  position: relative;
+  height: 290rpx;
+  width: 700rpx;
+  background: linear-gradient(to right, #cfa568, #e3bf79);
+  margin-bottom: 30rpx;
+  margin-left: 30rpx;
+  margin-right: 30rpx;
+  padding-top: 52rpx;
+}
+
+.tag {
+  height: 32rpx;
+  background: #a48143;
+  padding-left: 16rpx;
+  padding-right: 16rpx;
+  position: absolute;
+  left: 20rpx;
+  color: #fff;
+  top: 20rpx;
+  font-size: 20rpx;
+  text-align: center;
+  line-height: 32rpx;
+}
+
+.content {
+  margin-top: 24rpx;
+  margin-left: 40rpx;
+  display: flex;
+  margin-right: 40rpx;
+  flex-direction: row;
+}
+
+.content .left {
+  flex: 1;
+}
+
+.discount {
+  font-size: 50rpx;
+  color: #b4282d;
+}
+
+.min {
+  color: #fff;
+}
+
+.content .right {
+  width: 400rpx;
+}
+
+.name {
+  font-size: 44rpx;
+  color: #fff;
+  margin-bottom: 14rpx;
+}
+
+.time {
+  font-size: 24rpx;
+  color: #fff;
+  line-height: 30rpx;
+}
+
+.condition {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  height: 78rpx;
+  background: rgba(0, 0, 0, 0.08);
+  padding: 24rpx 40rpx;
+  display: flex;
+  flex-direction: row;
+}
+
+.condition .txt {
+  display: block;
+  height: 30rpx;
+  flex: 1;
+  overflow: hidden;
+  font-size: 24rpx;
+  line-height: 30rpx;
+  color: #fff;
+}
+
+.condition .icon {
+  margin-left: 30rpx;
+  width: 24rpx;
+  height: 24rpx;
+}
+
+
+.page {
+  width: 750rpx;
+  height: 108rpx;
+  background: #fff;
+  margin-bottom: 20rpx;
+}
+
+.page view {
+  height: 108rpx;
+  width: 50%;
+  float: left;
+  font-size: 29rpx;
+  color: #333;
+  text-align: center;
+  line-height: 108rpx;
+}
+
+.page .prev {
+  border-right: 1px solid #d9d9d9;
+}
+
+.page .disabled {
+  color: #ccc;
+}

litemall-wx/pages/index/index.js

@@ -14,7 +14,8 @@ Page({
     groupons: [],
     floorGoods: [],
     banner: [],
-    channel: []
+    channel: [],
+    coupon: []
   },
 
   onShareAppMessage: function() {
@@ -44,7 +45,8 @@ Page({
           floorGoods: res.data.floorGoodsList,
           banner: res.data.banner,
           groupons: res.data.grouponList,
-          channel: res.data.channel
+          channel: res.data.channel,
+          coupon: res.data.couponList
         });
       }
     });
@@ -115,4 +117,25 @@ Page({
   onUnload: function() {
     // 页面关闭
   },
+  getCoupon(e) {
+    if (!app.globalData.hasLogin) {
+      wx.navigateTo({
+        url: "/pages/auth/login/login"
+      });
+    }
+
+    let couponId = e.currentTarget.dataset.index
+    util.request(api.CouponReceive, {
+      couponId: couponId
+    }, 'POST').then(res => {
+      if (res.errno === 0) {
+        wx.showToast({
+          title: "领取成功"
+        })
+      }
+      else{
+        util.showErrorToast(res.errmsg);
+      }
+    })
+  },
 })

litemall-wx/pages/index/index.wxml

@@ -14,6 +14,35 @@
     </navigator>
   </view>
 
+  <view class="a-section a-coupon" wx:if="{{coupon.length > 0}}">
+    <view class="h">
+      <view class="title">
+        <view>
+          <navigator url="/pages/coupon/coupon">
+            <text class="txt">优惠券</text>
+          </navigator>
+        </view>
+      </view>
+    </view>
+    <view class="b">
+      <view class="item" wx:for="{{coupon}}" wx:for-index="index" wx:for-item="item" wx:key="id" bindtap="getCoupon" data-index="{{item.id}}">
+        <view class="tag">{{item.tag}}</view>
+        <view class="content">
+          <view class="left">
+            <view class="discount">{{item.discount}}元</view>
+            <view class="min"> 满{{item.min}}元使用</view>
+          </view>
+          <view class="right">
+            <view class="name">{{item.name}}</view>
+            <view class="desc">{{item.desc}}</view>
+            <view class="time" wx:if="{{item.days != 0}}">有效期：{{item.days}}天</view>
+            <view class="time" wx:else> 有效期：{{item.startTime}} - {{item.endTime}}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+
   <view class="a-section a-groupon" wx:if="{{groupons.length > 0}}">
     <view class="h">
       <view class="title">

litemall-wx/pages/index/index.wxss

@@ -121,6 +121,79 @@
   height: 253rpx;
 }
 
+.a-coupon {
+  width: 750rpx;
+  height: auto;
+  overflow: hidden;
+}
+
+.a-coupon .b .item {
+  position: relative;
+  height: 200rpx;
+  width: 700rpx;
+  background: linear-gradient(to right, #cfa568, #e3bf79);
+  margin-bottom: 10rpx;
+  margin-left: 30rpx;
+  margin-right: 30rpx;
+  padding-top: 30rpx;
+}
+
+.a-coupon .b .tag {
+  height: 32rpx;
+  background: #a48143;
+  padding-left: 16rpx;
+  padding-right: 16rpx;
+  position: absolute;
+  left: 20rpx;
+  color: #fff;
+  top: 20rpx;
+  font-size: 20rpx;
+  text-align: center;
+  line-height: 32rpx;
+}
+
+.a-coupon .b .content {
+  margin-top: 24rpx;
+  margin-left: 40rpx;
+  display: flex;
+  margin-right: 40rpx;
+  flex-direction: row;
+}
+
+.a-coupon .b .content .left {
+  flex: 1;
+}
+
+.a-coupon .b .discount {
+  font-size: 50rpx;
+  color: #b4282d;
+}
+
+.a-coupon .b .min {
+  color: #fff;
+}
+
+.a-coupon .b .content .right {
+  width: 400rpx;
+}
+
+.a-coupon .b .name {
+  font-size: 44rpx;
+  color: #fff;
+  margin-bottom: 14rpx;
+}
+
+.a-coupon .b .desc {
+  font-size: 24rpx;
+  color: #fff;
+}
+
+.a-coupon .b .time {
+  font-size: 24rpx;
+  color: #fff;
+  line-height: 30rpx;
+}
+
 .a-groupon {
   width: 750rpx;
   height: auto;

litemall-wx/pages/ucenter/coupon/coupon.js

@@ -1,24 +0,0 @@
-var util = require('../../../utils/util.js');
-var api = require('../../../config/api.js');
-
-var app = getApp();
-
-Page({
-  data: {
-
-  },
-  onLoad: function(options) {},
-  onReady: function() {
-
-  },
-  onShow: function() {
-
-  },
-  onHide: function() {
-    // 页面隐藏
-
-  },
-  onUnload: function() {
-    // 页面关闭
-  }
-})

litemall-wx/pages/ucenter/coupon/coupon.json

@@ -1,3 +0,0 @@
-{
-  "navigationBarTitleText": "优惠券"
-}

litemall-wx/pages/ucenter/coupon/coupon.wxml

@@ -1,47 +0,0 @@
-<view class="container">
-  <view class="coupon-form">
-    <view class="input-box">
-      <input class="coupon-sn" placeholder="请输入优惠码" />
-      <image class="clear-icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/clear-fb-dd9d604f86.png"></image>
-    </view>
-    <button class="add-btn disabled">兑换</button>
-  </view>
-  <view class="help">使用说明</view>
-  <view class="coupon-list">
-    <view class="item">
-      <view class="tag">新人专享</view>
-      <view class="content">
-        <view class="left">
-          <view class="name">限时免单券</view>
-          <view class="time">2017.06.08-2017.06.11</view>
-        </view>
-        <view class="right">
-          <button class="go">去使用</button>
-        </view>
-      </view>
-      <view class="condition">
-        <text class="txt">简约陶瓷马克杯专享；小米用户福利；限时购、三石福利价、礼品卡及详情页标注不可用券特殊商品除外</text>
-        <image src="https://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/couponArrow-71315b4145.png" class="icon"></image>
-      </view>
-    </view>
-
-    <view class="item">
-      <view class="tag">新人专享</view>
-      <view class="content">
-        <view class="left">
-          <view class="name">限时免单券</view>
-          <view class="time">2017.06.08-2017.06.11</view>
-        </view>
-        <view class="right">
-          <button class="go">去使用</button>
-        </view>
-      </view>
-      <view class="condition">
-        <text class="txt">简约陶瓷马克杯专享；小米用户福利；限时购、三石福利价、礼品卡及详情页标注不可用券特殊商品除外</text>
-        <image src="https://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/couponArrow-71315b4145.png" class="icon"></image>
-      </view>
-    </view>
-  </view>
-
-
-</view>

litemall-wx/pages/ucenter/couponList/couponList.js

@@ -0,0 +1,156 @@
+var util = require('../../../utils/util.js');
+var api = require('../../../config/api.js');
+
+var app = getApp();
+
+Page({
+  data: {
+    couponList: [],
+    status: 0,
+    page: 1,
+    size: 10,
+    count: 0,
+    scrollTop: 0,
+    showPage: false
+  },
+
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function(options) {
+    this.getCouponList();
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function() {
+
+  },
+  getCouponList: function() {
+
+    let that = this;
+    that.setData({
+      scrollTop: 0,
+      showPage: false,
+      couponList: []
+    });
+    // 页面渲染完成
+    wx.showToast({
+      title: '加载中...',
+      icon: 'loading',
+      duration: 2000
+    });
+
+    util.request(api.CouponMyList, {
+      status: that.data.status,
+      page: that.data.page,
+      size: that.data.size
+    }).then(function(res) {
+      if (res.errno === 0) {
+
+        that.setData({
+          scrollTop: 0,
+          couponList: res.data.data,
+          showPage: true,
+          count: res.data.count
+        });
+      }
+      wx.hideToast();
+    });
+
+  },
+  goExchange: function() {
+    wx.showToast({
+      title: '目前不支持',
+      icon: 'none',
+      duration: 2000
+    });
+  },
+  goUse: function() {
+    wx.reLaunch({
+      url: '/pages/index/index'
+    });
+  },
+  nextPage: function(event) {
+    var that = this;
+    if (this.data.page > that.data.count / that.data.size) {
+      return true;
+    }
+
+    that.setData({
+      page: that.data.page + 1
+    });
+
+    this.getCouponList();
+
+  },
+  prevPage: function(event) {
+    if (this.data.page <= 1) {
+      return false;
+    }
+
+    var that = this;
+    that.setData({
+      page: that.data.page - 1
+    });
+    this.getCouponList();
+  },
+  switchTab: function(e) {
+
+    this.setData({
+      couponList: [],
+      status: e.currentTarget.dataset.index,
+      page: 1,
+      size: 10,
+      count: 0,
+      scrollTop: 0,
+      showPage: false
+    });
+
+    this.getCouponList();
+  },
+})

litemall-wx/pages/ucenter/couponList/couponList.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "我的优惠券"
+}

litemall-wx/pages/ucenter/couponList/couponList.wxml

@@ -0,0 +1,53 @@
+<view class="container">
+
+  <view class="h">
+    <view class="item {{ status == 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">
+      <view class="txt">未使用</view>
+    </view>
+    <view class="item {{ status == 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1">
+      <view class="txt">已使用</view>
+    </view>
+    <view class="item {{ status == 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2">
+      <view class="txt">已过期</view>
+    </view>
+  </view>
+
+  <view class="b">
+
+    <view class="coupon-form" wx:if="{{status == 0}}">
+      <view class="input-box">
+        <input class="coupon-sn" placeholder="请输入优惠码" />
+        <image class="clear-icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/clear-fb-dd9d604f86.png"></image>
+      </view>
+      <view class="add-btn" bindtap='goExchange'>兑换</view>
+    </view>
+
+    <view class="help" wx:if="{{status == 0}}">使用说明</view>
+
+    <scroll-view class="coupon-list" scroll-y="true" scroll-top="{{scrollTop}}">
+
+      <view class="item {{ status == 0 ? 'active' : ''}}" wx:for="{{couponList}}" wx:for-index="index" wx:for-item="item" wx:key="id">
+        <view class="tag">{{item.tag}}</view>
+        <view class="content">
+          <view class="left">
+            <view class="discount">{{item.discount}}元</view>
+            <view class="min"> 满{{item.min}}元使用</view>
+          </view>
+          <view class="right">
+            <view class="name">{{item.name}}</view>
+            <view class="time"> 有效期：{{item.startTime}} - {{item.endTime}}</view>
+          </view>
+        </view>
+        <view class="condition">
+          <text class="txt">{{item.desc}}</text>
+          <image src="{{item.pic}}" class="icon"></image>
+        </view>
+      </view>
+
+      <view class="page" wx:if="{{showPage}}">
+        <view class="prev {{ page <= 1 ? 'disabled' : ''}}" bindtap="prevPage">上一页</view>
+        <view class="next {{ (count / size) < page ? 'disabled' : ''}}" bindtap="nextPage">下一页</view>
+      </view>
+    </scroll-view>
+  </view>
+</view>

litemall-wx/pages/ucenter/coupon/coupon.wxss

@@ -9,7 +9,47 @@ page {
   padding-top: 30rpx;
 }
 
-.coupon-form {
+.container .h {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  width: 100%;
+  display: flex;
+  background: #fff;
+  height: 84rpx;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.container .h .item {
+  display: inline-block;
+  height: 82rpx;
+  width: 50%;
+  padding: 0 15rpx;
+  text-align: center;
+}
+
+.container .h .item .txt {
+  display: inline-block;
+  height: 82rpx;
+  padding: 0 20rpx;
+  line-height: 82rpx;
+  color: #333;
+  font-size: 30rpx;
+  width: 170rpx;
+}
+
+.container .h .item.active .txt {
+  color: #ab2b2b;
+  border-bottom: 4rpx solid #ab2b2b;
+}
+
+.container .b {
+  margin-top: 85rpx;
+  height: auto;
+}
+
+.container .b .coupon-form {
   height: 110rpx;
   width: 100%;
   background: #fff;
@@ -19,7 +59,7 @@ page {
   display: flex;
 }
 
-.input-box {
+.container .b .input-box {
   flex: 1;
   height: 70rpx;
   color: #333;
@@ -31,7 +71,7 @@ page {
   margin-right: 30rpx;
 }
 
-.input-box .coupon-sn {
+.container .b .input-box .coupon-sn {
   position: absolute;
   top: 10rpx;
   left: 30rpx;
@@ -42,7 +82,7 @@ page {
   font-size: 24rpx;
 }
 
-.clear-icon {
+.container .b .clear-icon {
   position: absolute;
   top: 21rpx;
   right: 30rpx;
@@ -50,7 +90,7 @@ page {
   height: 28rpx;
 }
 
-.add-btn {
+.container .b .add-btn {
   height: 70rpx;
   border: none;
   width: 168rpx;
@@ -59,13 +99,14 @@ page {
   line-height: 70rpx;
   color: #fff;
   font-size: 28rpx;
+  text-align: center;
 }
 
-.add-btn.disabled {
+.container .b .add-btn.disabled {
   background: #ccc;
 }
 
-.help {
+.container .b .help {
   height: 72rpx;
   line-height: 72rpx;
   text-align: right;
@@ -76,24 +117,27 @@ page {
   font-size: 24rpx;
 }
 
-.coupon-list {
-  width: 100%;
-  height: auto;
+.container .b .coupon-list {
+  width: 750rpx;
+  height: 100%;
   overflow: hidden;
-  padding-left: 30rpx;
-  padding-right: 30rpx;
 }
 
-.item {
+.container .b .item {
   position: relative;
   height: 290rpx;
-  width: 100%;
-  background: linear-gradient(to right, #cfa568, #e3bf79);
+  background: gray;
   margin-bottom: 30rpx;
+  margin-left: 30rpx;
+  margin-right: 30rpx;
   padding-top: 52rpx;
 }
 
-.tag {
+.container .b .item.active {
+  background: linear-gradient(to right, #cfa568, #e3bf79);
+}
+
+.container .b .tag {
   height: 32rpx;
   background: #a48143;
   padding-left: 16rpx;
@@ -107,47 +151,44 @@ page {
   line-height: 32rpx;
 }
 
-.content {
+.container .b .content {
   margin-top: 24rpx;
   margin-left: 40rpx;
   display: flex;
   margin-right: 40rpx;
   flex-direction: row;
-  align-items: center;
 }
 
-.content .left {
+.container .b .content .left {
   flex: 1;
 }
 
-.name {
-  font-size: 44rpx;
+.container .b .discount {
+  font-size: 50rpx;
+  color: #b4282d;
+}
+
+.container .b .min {
   color: #fff;
-  margin-bottom: 14rpx;
 }
 
-.time {
-  font-size: 24rpx;
-  color: rgba(255, 255, 255, 0.8);
-  line-height: 30rpx;
+.container .b .content .right {
+  width: 400rpx;
 }
 
-.content .right {
-  width: 162rpx;
+.container .b .name {
+  font-size: 44rpx;
+  color: #fff;
+  margin-bottom: 14rpx;
 }
 
-.go {
-  height: 48rpx;
-  border: none;
-  width: 162rpx;
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 4rpx;
-  line-height: 48rpx;
-  color: #b69150;
+.container .b .time {
   font-size: 24rpx;
+  color: #fff;
+  line-height: 30rpx;
 }
 
-.condition {
+.container .b .condition {
   position: absolute;
   width: 100%;
   bottom: 0;
@@ -159,7 +200,7 @@ page {
   flex-direction: row;
 }
 
-.condition .txt {
+.container .b .condition .txt {
   display: block;
   height: 30rpx;
   flex: 1;
@@ -169,8 +210,33 @@ page {
   color: #fff;
 }
 
-.condition .icon {
+.container .b .condition .icon {
   margin-left: 30rpx;
   width: 24rpx;
   height: 24rpx;
 }
+
+.container .b .page {
+  width: 750rpx;
+  height: 108rpx;
+  background: #fff;
+  margin-bottom: 20rpx;
+}
+
+.container .b .page view {
+  height: 108rpx;
+  width: 50%;
+  float: left;
+  font-size: 29rpx;
+  color: #333;
+  text-align: center;
+  line-height: 108rpx;
+}
+
+.container .b .page .prev {
+  border-right: 1px solid #d9d9d9;
+}
+
+.container .b .page .disabled {
+  color: #ccc;
+}

litemall-wx/pages/ucenter/couponSelect/couponSelect.js

@@ -0,0 +1,147 @@
+var util = require('../../../utils/util.js');
+var api = require('../../../config/api.js');
+
+var app = getApp();
+
+Page({
+  data: {
+    couponList: [],
+    cartId: 0,
+    couponId: 0,
+    grouponLinkId: 0,
+    scrollTop: 0
+  },
+
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    // 页面显示
+    wx.showLoading({
+      title: '加载中...',
+    });
+
+    try {
+      var cartId = wx.getStorageSync('cartId');
+      if (!cartId) {
+        cartId = 0;
+      }
+
+      var couponId = wx.getStorageSync('couponId');
+      if (!couponId) {
+        couponId = 0;
+      }
+
+      var grouponRulesId = wx.getStorageSync('grouponRulesId');
+      if (!grouponRulesId) {
+        grouponRulesId = 0;
+      }
+
+      this.setData({
+        cartId: cartId,
+        couponId: couponId,
+        grouponRulesId: grouponRulesId
+      });
+
+    } catch (e) {
+      // Do something when catch error
+      console.log(e);
+    }
+
+    this.getCouponList();
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  getCouponList: function () {
+
+    let that = this;
+    that.setData({
+      couponList: []
+    });
+    // 页面渲染完成
+    wx.showToast({
+      title: '加载中...',
+      icon: 'loading',
+      duration: 2000
+    });
+
+    util.request(api.CouponSelectList, {
+      cartId: that.data.cartId,
+      grouponRulesId: that.data.grouponRulesId,
+    }).then(function (res) {
+      if (res.errno === 0) {
+        that.setData({
+          couponList: res.data
+        });
+      }
+      wx.hideToast();
+    });
+
+  },
+  selectCoupon: function (e) {
+    try {
+      wx.setStorageSync('couponId', e.currentTarget.dataset.id);
+    } catch (error) {
+
+    }
+    
+    wx.navigateBack();
+  },
+  unselectCoupon: function() {
+    // 如果优惠券ID设置-1，则表示订单不使用优惠券
+    try {
+      wx.setStorageSync('couponId', -1);
+    } catch (error) {
+
+    }
+
+    wx.navigateBack();
+  }
+
+})

litemall-wx/pages/ucenter/couponSelect/couponSelect.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "选择优惠券"
+}

litemall-wx/pages/ucenter/couponSelect/couponSelect.wxml

@@ -0,0 +1,26 @@
+<view class="container">
+
+  <scroll-view class="coupon-list" scroll-y="true" scroll-top="{{scrollTop}}">
+
+    <view class="unselect" bindtap='unselectCoupon'>不选择优惠券</view>
+
+    <view class="item" wx:for="{{couponList}}" wx:for-index="index" wx:for-item="item" wx:key="id" bindtap="selectCoupon" data-id="{{item.id}}">
+      <view class="tag">{{item.tag}}</view>
+      <view class="content">
+        <view class="left">
+          <view class="discount">{{item.discount}}元</view>
+          <view class="min"> 满{{item.min}}元使用</view>
+        </view>
+        <view class="right">
+          <view class="name">{{item.name}}</view>
+          <view class="time"> 有效期：{{item.startTime}} - {{item.endTime}}</view>
+        </view>
+      </view>
+      <view class="condition">
+        <text class="txt">{{item.desc}}</text>
+        <image src="{{item.pic}}" class="icon"></image>
+      </view>
+    </view>
+
+  </scroll-view>
+</view>  

litemall-wx/pages/ucenter/couponSelect/couponSelect.wxss

@@ -0,0 +1,119 @@
+page {
+  background: #f4f4f4;
+  min-height: 100%;
+}
+
+.container {
+  background: #f4f4f4;
+  min-height: 100%;
+  padding-top: 30rpx;
+}
+
+.coupon-list {
+  width: 750rpx;
+  height: 100%;
+  overflow: hidden;
+}
+
+.unselect {
+  height: 80rpx;
+  border: none;
+  width: 700rpx;
+  background: #28b43b;
+  color: #fff;
+  font-size: 40rpx;
+  text-align: center;
+  margin-bottom: 30rpx;
+  margin-left: 30rpx;
+  margin-right: 30rpx;
+}
+
+.item {
+  position: relative;
+  height: 290rpx;
+  width: 700rpx;
+  background: linear-gradient(to right, #cfa568, #e3bf79);
+  margin-bottom: 30rpx;
+  margin-left: 30rpx;
+  margin-right: 30rpx;
+  padding-top: 52rpx;
+}
+
+.tag {
+  height: 32rpx;
+  background: #a48143;
+  padding-left: 16rpx;
+  padding-right: 16rpx;
+  position: absolute;
+  left: 20rpx;
+  color: #fff;
+  top: 20rpx;
+  font-size: 20rpx;
+  text-align: center;
+  line-height: 32rpx;
+}
+
+.content {
+  margin-top: 24rpx;
+  margin-left: 40rpx;
+  display: flex;
+  margin-right: 40rpx;
+  flex-direction: row;
+}
+
+.content .left {
+  flex: 1;
+}
+
+.discount {
+  font-size: 50rpx;
+  color: #b4282d;
+}
+
+.min {
+  color: #fff;
+}
+
+.content .right {
+  width: 400rpx;
+}
+
+.name {
+  font-size: 44rpx;
+  color: #fff;
+  margin-bottom: 14rpx;
+}
+
+.time {
+  font-size: 24rpx;
+  color: #fff;
+  line-height: 30rpx;
+}
+
+.condition {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  height: 78rpx;
+  background: rgba(0, 0, 0, 0.08);
+  padding: 24rpx 40rpx;
+  display: flex;
+  flex-direction: row;
+}
+
+.condition .txt {
+  display: block;
+  height: 30rpx;
+  flex: 1;
+  overflow: hidden;
+  font-size: 24rpx;
+  line-height: 30rpx;
+  color: #fff;
+}
+
+.condition .icon {
+  margin-left: 30rpx;
+  width: 24rpx;
+  height: 24rpx;
+}

litemall-wx/pages/ucenter/index/index.js

@@ -91,20 +91,15 @@ Page({
     };
   },
   goCoupon() {
-    wx.showToast({
-      title: '目前不支持',
-      icon: 'none',
-      duration: 2000
-    });
-    // if (this.data.hasLogin) {
-    //   wx.navigateTo({
-    //     url: "/pages/ucenter/coupon/coupon"
-    //   });
-    // } else {
-    //   wx.navigateTo({
-    //     url: "/pages/auth/login/login"
-    //   });
-    // };
+    if (this.data.hasLogin) {
+      wx.navigateTo({
+        url: "/pages/ucenter/couponList/couponList"
+      });
+    } else {
+      wx.navigateTo({
+        url: "/pages/auth/login/login"
+      });
+    };
   },
   goGroupon() {
     if (this.data.hasLogin) {

litemall-wx/project.config.json

@@ -1,247 +1,264 @@
 {
-  "description": "项目配置文件。",
-  "setting": {
-    "urlCheck": false,
-    "es6": true,
-    "postcss": true,
-    "minified": true,
-    "newFeature": true,
-    "uglifyFileName": true
-  },
-  "compileType": "miniprogram",
-  "libVersion": "2.4.0",
-  "appid": "wxa5b486c6b918ecfb",
-  "projectname": "litemall-wx",
-  "condition": {
-    "search": {
-      "current": -1,
-      "list": []
-    },
-    "conversation": {
-      "current": -1,
-      "list": []
-    },
-    "plugin": {
-      "current": -1,
-      "list": []
-    },
-    "game": {
-      "list": []
-    },
-    "miniprogram": {
-      "current": 34,
-      "list": [
-        {
-          "id": -1,
-          "name": "首页",
-          "pathName": "pages/index/index",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "专题",
-          "pathName": "pages/topic/topic",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "专题详情",
-          "pathName": "pages/topicDetail/topicDetail",
-          "query": "id=314"
-        },
-        {
-          "id": -1,
-          "name": "专题评论列表",
-          "pathName": "pages/topicComment/topicComment",
-          "query": "valueId=314&type=1"
-        },
-        {
-          "id": -1,
-          "name": "专题评论添加",
-          "pathName": "pages/topicCommentPost/topicCommentPost",
-          "query": "valueId=314&type=1"
-        },
-        {
-          "id": -1,
-          "name": "品牌",
-          "pathName": "pages/brand/brand",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "品牌详情",
-          "pathName": "pages/brandDetail/brandDetail",
-          "query": "id=1001000"
-        },
-        {
-          "id": -1,
-          "name": "人气推荐",
-          "pathName": "pages/hotGoods/hotGoods",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "新品首发",
-          "pathName": "pages/newGoods/newGoods",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "分类",
-          "pathName": "pages/catalog/catalog",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "分类详情",
-          "pathName": "pages/category/category",
-          "query": "id=1008002"
-        },
-        {
-          "id": -1,
-          "name": "查找",
-          "pathName": "pages/search/search",
-          "query": ""
-        },
-        {
-          "id": 12,
-          "name": "商品",
-          "pathName": "pages/goods/goods",
-          "query": "id=1181003"
-        },
-        {
-          "id": -1,
-          "name": "商品评论列表",
-          "pathName": "pages/comment/comment",
-          "query": "valueId=1181000&type=0"
-        },
-        {
-          "id": -1,
-          "name": "购物车",
-          "pathName": "pages/cart/cart",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "下单",
-          "pathName": "pages/checkout/checkout",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "支付结果",
-          "pathName": "pages/payResult/payResult",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "我的",
-          "pathName": "pages/ucenter/index/index",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "我的订单列表",
-          "pathName": "pages/ucenter/order/order",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "我的订单详情",
-          "pathName": "pages/ucenter/orderDetail/orderDetail",
-          "query": "id=1"
-        },
-        {
-          "id": 22,
-          "name": "待评价的订单详情",
-          "pathName": "pages/ucenter/orderDetail/orderDetail",
-          "query": "id=1"
-        },
-        {
-          "id": -1,
-          "name": "购买商品评价",
-          "pathName": "pages/commentPost/commentPost",
-          "query": "orderId=2&type=0&valueId=1116011"
-        },
-        {
-          "id": -1,
-          "name": "我的优惠券",
-          "pathName": "pages/ucenter/coupon/coupon",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "我的收藏",
-          "pathName": "pages/ucenter/collect/collect",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "我的足迹",
-          "pathName": "pages/ucenter/footprint/footprint",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "我的地址",
-          "pathName": "pages/ucenter/address/address",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "我的地址添加",
-          "pathName": "pages/ucenter/addressAdd/addressAdd",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "登录",
-          "pathName": "pages/auth/login/login",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "账号登录",
-          "pathName": "pages/auth/accountLogin/accountLogin",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "注册",
-          "pathName": "pages/auth/register/register",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "找回密码",
-          "pathName": "pages/auth/reset/reset",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "关于",
-          "pathName": "pages/about/about",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "测试更新",
-          "pathName": "pages/index/index",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "意见反馈",
-          "pathName": "pages/ucenter/feedback/feedback",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "团购专区",
-          "pathName": "pages/groupon/grouponList/grouponList",
-          "query": ""
-        }
-      ]
-    }
-  }
+	"description": "项目配置文件。",
+	"setting": {
+		"urlCheck": false,
+		"es6": true,
+		"postcss": true,
+		"minified": true,
+		"newFeature": true,
+		"uglifyFileName": true
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.4.0",
+	"appid": "wxa5b486c6b918ecfb",
+	"projectname": "litemall-wx",
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"list": []
+		},
+		"miniprogram": {
+			"current": 37,
+			"list": [
+				{
+					"id": -1,
+					"name": "首页",
+					"pathName": "pages/index/index",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "专题",
+					"pathName": "pages/topic/topic",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "专题详情",
+					"pathName": "pages/topicDetail/topicDetail",
+					"query": "id=314"
+				},
+				{
+					"id": -1,
+					"name": "专题评论列表",
+					"pathName": "pages/topicComment/topicComment",
+					"query": "valueId=314&type=1"
+				},
+				{
+					"id": -1,
+					"name": "专题评论添加",
+					"pathName": "pages/topicCommentPost/topicCommentPost",
+					"query": "valueId=314&type=1"
+				},
+				{
+					"id": -1,
+					"name": "品牌",
+					"pathName": "pages/brand/brand",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "品牌详情",
+					"pathName": "pages/brandDetail/brandDetail",
+					"query": "id=1001000"
+				},
+				{
+					"id": -1,
+					"name": "人气推荐",
+					"pathName": "pages/hotGoods/hotGoods",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "新品首发",
+					"pathName": "pages/newGoods/newGoods",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "分类",
+					"pathName": "pages/catalog/catalog",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "分类详情",
+					"pathName": "pages/category/category",
+					"query": "id=1008002"
+				},
+				{
+					"id": -1,
+					"name": "查找",
+					"pathName": "pages/search/search",
+					"query": ""
+				},
+				{
+					"id": 12,
+					"name": "商品",
+					"pathName": "pages/goods/goods",
+					"query": "id=1181003"
+				},
+				{
+					"id": -1,
+					"name": "商品评论列表",
+					"pathName": "pages/comment/comment",
+					"query": "valueId=1181000&type=0"
+				},
+				{
+					"id": -1,
+					"name": "购物车",
+					"pathName": "pages/cart/cart",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "下单",
+					"pathName": "pages/checkout/checkout",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "支付结果",
+					"pathName": "pages/payResult/payResult",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的",
+					"pathName": "pages/ucenter/index/index",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的订单列表",
+					"pathName": "pages/ucenter/order/order",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的订单详情",
+					"pathName": "pages/ucenter/orderDetail/orderDetail",
+					"query": "id=1"
+				},
+				{
+					"id": 22,
+					"name": "待评价的订单详情",
+					"pathName": "pages/ucenter/orderDetail/orderDetail",
+					"query": "id=1"
+				},
+				{
+					"id": -1,
+					"name": "购买商品评价",
+					"pathName": "pages/commentPost/commentPost",
+					"query": "orderId=2&type=0&valueId=1116011"
+				},
+				{
+					"id": -1,
+					"name": "我的优惠券",
+					"pathName": "pages/ucenter/coupon/coupon",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的收藏",
+					"pathName": "pages/ucenter/collect/collect",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的足迹",
+					"pathName": "pages/ucenter/footprint/footprint",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的地址",
+					"pathName": "pages/ucenter/address/address",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的地址添加",
+					"pathName": "pages/ucenter/addressAdd/addressAdd",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "登录",
+					"pathName": "pages/auth/login/login",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "账号登录",
+					"pathName": "pages/auth/accountLogin/accountLogin",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "注册",
+					"pathName": "pages/auth/register/register",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "找回密码",
+					"pathName": "pages/auth/reset/reset",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "关于",
+					"pathName": "pages/about/about",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "测试更新",
+					"pathName": "pages/index/index",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "意见反馈",
+					"pathName": "pages/ucenter/feedback/feedback",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "团购专区",
+					"pathName": "pages/groupon/grouponList/grouponList",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "选择优惠券",
+					"pathName": "pages/ucenter/couponSelect/couponSelect",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的优惠券列表",
+					"pathName": "pages/ucenter/couponList/couponList",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "优惠券列表",
+					"pathName": "pages/coupon/coupon"
+				}
+			]
+		}
+	}
 }