优惠券

src/main/java/com/caimei/www/controller/authorized/user/UserPageController.java

@@ -52,6 +52,12 @@ public class UserPageController extends BaseController {
 	private static final String ACCOUNT_LIST = "user-center/account/account";
 	/** 采美豆明细 */
 	private static final String BEANS_LIST = "user-center/account/beans";
+	/** 优惠券列表 */
+	private static final String COUPON_LIST = "user-center/account/coupon";
+	/** 领券中心 */
+	private static final String COUPON_COLLECTION = "user-center/account/coupon-collection";
+	/** 兑换优惠券 */
+	private static final String COUPON_EXCHANGE = "user-center/account/coupon-exchange";
 
     /** 我的采美 */
     @GetMapping("/user/dashboard.html")
@@ -162,4 +168,16 @@ public class UserPageController extends BaseController {
     @GetMapping("/user/beans.html")
     public String beans() {return BEANS_LIST;}
 
+    /** 优惠券列表 */
+    @GetMapping("/user/coupon.html")
+    public String coupon() {return COUPON_LIST;}
+
+    /** 领券中心 */
+    @GetMapping("/user/coupon-collection.html")
+    public String couponCollection() {return COUPON_COLLECTION;}
+
+    /** 兑换优惠券 */
+    @GetMapping("/user/coupon-exchange.html")
+    public String couponExchange() {return COUPON_EXCHANGE;}
+
 }

src/main/java/com/caimei/www/controller/unlimited/ProductController.java

@@ -30,6 +30,8 @@ public class ProductController extends BaseController {
     private static final String INSTRUMENT_LIST_PATH = "product/instruelist";
     private static final String QUALITY_AUTHORRIZE_PATH = "product/qualityauthorize";
     private static final String ACTIVITY_TOP_PATH = "activity/activityTopic";
+    /** 优惠券活动商品列表 */
+    private static final String PRODUCT_COUPON = "product/product-coupon";
     /**
      * 美博会专题页
      */
@@ -57,6 +59,12 @@ public class ProductController extends BaseController {
         return PRODUCT_LIST_PATH;
     }
 
+    /**
+     * 搜索结果 页面
+     */
+    @GetMapping("/product/product-coupon.html")
+    public String productCoupon() { return PRODUCT_COUPON; }
+
     /**
      * 促销活动商品列表
      */

src/main/resources/static/css/product/product-coupon.css

@@ -0,0 +1,163 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;padding:12px;font-size:0;text-align:center;background:#FFF}
+    .sortBox li{display:inline-block;cursor:pointer;width:128px;height:40px;line-height:40px;font-size:16px;background:#F5F5F5;color:#93979F;position:relative;margin:0 8px}
+    .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#E15616}
+    .sortBox li:before,.sortBox li:after{position:absolute;right:35px;content:'';width:0;height:0;border-style:solid}
+    .sortBox li:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:14px}
+    .sortBox li:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:22px}
+    .sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
+    .sortBox li.up:before{border-bottom-color:#E15616}
+    .sortBox li.up:after{border-top-color:#E15616;opacity:.3}
+    .sortBox li.down:after{border-top-color:#E15616}
+    .sortBox li.down:before{border-bottom-color:#E15616;opacity:.3}
+    .productList{width:1200px;margin:0 auto;box-sizing:border-box}
+    .productList .productItem {
+        width: 184px;
+        height: 268px;
+        float: left;
+        background: #fff;
+        position: relative;
+        margin: 0 16px 16px 0;
+        overflow: hidden;
+        float: left;
+    }
+    .productList .productItem img {
+        width: 100%;
+        height: 164px;
+    }
+    .productList .productItem .name{
+        display: block;
+        padding: 0 8px;
+        margin-top: 8px;
+        height: 40px;
+        line-height: 21px;
+        vertical-align: middle;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-inline-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical
+    }
+    .productItem .price{
+        border: 0;
+        box-sizing: border-box;
+        padding: 0 8px;
+        height: 54px;
+        width: 100%;
+    }
+    .productItem .price .icon:before{
+        width: 63px;
+    }
+    .productItem .price .icon.i5:before {
+        background-position: -2px -832px;
+    }
+    .productItem .price .icon.i1:before {
+        background-position: -2px -712px;
+    }
+    .productItem .price .icon.i2:before {
+        background-position: -2px -742px;
+    }
+    .productItem .price .icon.i3:before {
+        background-position: -2px -772px;
+    }
+    .productItem .price .icon.i4:before {
+        background-position: -2px -802px;
+    }
+    .listTag{
+        margin: 12px 8px 0 0;
+        padding: 0 2px;
+    }
+    .productItem .image .icon{
+        position: inherit;
+    }
+    .sortBox li.on, .sortBox li.up, .sortBox li.down {
+        background: #FFE6DC;
+        color: #E15616;
+    }
+    .empty{
+        margin-top: 32px;
+        background: #fff;
+    }
+    .empty p{
+        color: #909090;
+        font-size: 14px;
+    }
+    .productItem .price em{font-weight: normal}
+    .productItem .price em.bold{font-weight: bold}
+    .productItem .price .price_text_tag{width: 100%;height: 22px;box-sizing: border-box;float: left;margin-top: 3px;}
+    .productItem .price .price_text_tag .listTag{margin: 0;float: left}
+    .productItem .price .price_text_tag .couponTag{margin: 0 8px 0 0;float: left}
+    .productItem .price .main_price_unde { width: 100%;height: 31px;line-height: 31px;font-size: 14px;color: #4a4f58;text-align: left;float: left;}
+    .productItem .price .main_price_show { width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #f94b4b;text-align: left;float: left;}
+    .productItem .price .main_price_show.none { color: #999999; text-decoration: line-through;}
+    .productItem .name .tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;}
+
+    .login-btn{font-size: 12px}
+    .listTitle{width:1184px;margin:0 auto 16px auto;box-sizing:border-box;padding:16px 30px;border-radius:0 0 2px 2px;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
+    .listTitle h1{font-size:20px;line-height:42px;font-weight:normal;margin-bottom:16px}
+    .listTitle p{text-indent:1em;line-height:36px;font-size:16px}
+    .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:24px;line-height:24px;padding:0 10px;background:#FFF}
+    .productItem .name span.tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: 2px;}
+
+
+
+}
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    /*footer{display:none!important;}*/
+    .sortBox{width:100%;margin:1px auto;box-sizing:border-box;background:#FFF;}
+    .sortBox li{width:15vw;height:11.6vw;line-height:11.6vw;text-align:center;font-size:3.4vw;color:#93979F;position:relative;margin:0 5vw}
+    .sortBox li.on,.sortBox li.up,.sortBox li.down{color:#E15616}
+    .sortBox li:before,.sortBox li:after{position:absolute;right:1vw;content:'';width:0;height:0;border-style:solid}
+    .sortBox li:before{border-width:0 .8vw .8vw .8vw;border-color:transparent transparent #BEC2C9 transparent;top:5vw}
+    .sortBox li:after{border-width:.8vw .8vw 0 .8vw;border-color:#BEC2C9 transparent transparent transparent;top:6.5vw}
+    .sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
+    .sortBox li.up:before{border-bottom-color:#E15616}
+    .sortBox li.up:after{border-top-color:#E15616;opacity:.3}
+    .sortBox li.down:after{border-top-color:#E15616}
+    .sortBox li.down:before{border-bottom-color:#E15616;opacity:.3}
+    .productList{margin: 3.2vw auto;width: 97vw;}
+    .productList .productItem{width: 45.6vw;height: 70vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;}
+    .productItem .price em {display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;float: left;}
+    .productItem .price .mIcon:before{width:15.8vw;height: 5vw}
+    .productItem .price .mIcon.i5:before {background-position: -84vw -97.5vw;}
+    .productItem .price .mIcon.i1:before {background-position: -84vw -69.5vw;}
+    .productItem .price .mIcon.i2:before {background-position: -84vw -76.5vw;}
+    .productItem .price .mIcon.i3:before {background-position: -84vw -83.7vw;}
+    .productItem .price .mIcon.i4:before {background-position: -84vw -90.7vw;}
+    .productItem .price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
+    .productItem img {width: 45.6vw;height: 45.6vw;}
+    .productItem .name {display: block;padding: 0 3.2vw;height: 9.3vw;line-height: 4.8vw;font-size: 3.4vw;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
+    .price {padding: 2vw 3.2vw;overflow: hidden;}
+    .couponTag{padding:0 2vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 1vw;}
+    .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
+    .price_grade{width: 100%;float: left;margin-top: 2vw;}
+    .productItem .price .main_price_unde {width: 100%;height: 6.5vw;line-height: 6.5vw;font-size: 3.4vw;color: #4a4f58;text-align: left;float: left;}
+    .productItem .price .price_text_tag {width: 100%;box-sizing: border-box;}
+    .productItem .price .main_price_show{color: #f94b4b}
+    .productItem .name span.tag{width: 11.3vw;height: 4.3vw;line-height: 4.3vw;font-size: 2.8vw;display: inline-block;margin-right: 1.3vw;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: .25vw;}
+
+    .original-price{text-decoration:line-through}
+    .listTitle{width:100%;min-height:3.2vw;box-sizing:border-box;padding:3.3vw;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
+    .listTitle h1{font-size:4vw;line-height:8vw;font-weight:normal}
+    .listTitle p{text-indent:1em;line-height:7vw;font-size:3.2vw}
+    .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:4.8vw;line-height:4.8vw;padding:0 1.5vw;background:#FFF}
+
+
+
+
+
+
+
+
+
+}
+

src/main/resources/static/css/user-center/account/beans.css

@@ -27,7 +27,7 @@ li{list-style:none}
     .beans-content-tabs .time-template .time-next .icon{width:30px;height:30px;display: block;}
     .beans-content-tabs .time-template .time-next .icon:before{width:30px;height:30px;background-position:-311px -550px}
     .beans-content-tabs .time-tabs{width: 216px;height:30px;position: absolute;right: 0;top: 33px;cursor: pointer;}
-    .beans-content-tabs .time-tabs-cell{width: 72px;height: 100%;float: left;text-align: center;font-size: 14px;color: #22272e;line-height: 30px;display: block;}
+    .beans-content-tabs .time-tabs-cell{width: 72px;height: 100%;float: left;text-align: center;font-size: 14px;color: #22272e;line-height: 30px;display: block;cursor: pointer;}
     .beans-content-tabs .time-tabs-cell.active{color: #E15616;}
 
     .beans-content-list{width: 100%;height: auto;box-sizing: border-box;padding:24px;}

src/main/resources/static/css/user-center/account/coupon-collection.css

@@ -0,0 +1,60 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    /*采美豆右侧*/
+    .coupon-title{width: 1184px;margin: 0 auto;box-sizing: border-box;height: 60px;padding: 0 24px;padding-top: 16px;line-height: 44px;}
+    .coupon-title .coupon-name{float: left;font-size: 16px;color: #4a4f58;font-weight: bold;}
+    .coupon-title .coupon-name-use{float: right;font-size: 14px;color: #627386;cursor: pointer;}
+    .coupon-title .coupon-name-use:hover{color: #E15621;}
+    .pageWrap{width: 968px;}
+    .navLayout{min-height: 500px;}
+    .coupon-container{width: 100%;min-height: 500px;background-color: #FFFFFF;}
+    .coupon-content-list{width: 100%;height: auto;box-sizing: border-box;padding:24px 13px;}
+    .coupon-list-cell{width: 369px;height: 148px;float: left;margin: 0 17px 17px 0;position: relative;background: url("/img/account/icon-coupon-uesb@2x.png") no-repeat;background-size: cover;}
+    .coupon-list-cell .coupon-list-le{width: 299px;height: 148px;float: left;box-sizing: border-box;padding: 24px 14px 12px 14px;}
+    .coupon-list-cell .coupon-list-money{width: 100%;height: 56px;line-height: 56px;color: #f94b4b;font-size: 14px;text-align: left;}
+    .coupon-list-cell .coupon-list-money .maxMoney{font-size: 40px;margin-right: 8px;}
+    .coupon-list-cell .coupon-list-name{width: 100%;height: 22px;line-height: 22px;color: #333333;font-size: 14px;text-align: left;margin-top: 13px;}
+    .coupon-list-cell .coupon-list-time{width: 100%;height: 22px;line-height: 22px;color: #999999;font-size: 12px;text-align: left;}
+    .coupon-list-cell .coupon-list-ri{width: 70px;height: 148px;float: left;box-sizing: border-box;padding: 54px 27px;font-size: 16px;color: #FFF;cursor: pointer;}
+    .coupon-list-cell .coupon-list-ri.none{padding: 45px 27px;}
+    .coupon-list-cell .coupon-tags{height: 24px;line-height: 24px;text-align: center;border-radius: 8px 0 8px 0;position: absolute;top: 0;left: 0;padding: 0 10px;background-color: #f94b4b;color: #FFF;}
+    .empty{width: 100%;float: left;}
+    .empty img{width: 180px;height: 180px;}
+
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    .beans-header{width:100%;height:28vw;box-sizing:border-box;padding:4vw 8vw;background:url("/img/account/icon-beans-bg.png")no-repeat;background-size: cover;}
+    .beans-header-l{float: left;line-height: 10vw;color: #FFFFFF;font-size:3.2vw;}
+    .beans-header-l span{display: inline-block;width: 100%;height: 10vw;float: left;}
+    .beans-header-l span.big{font-size: 7.2vw;font-weight: bold;}
+    .beans-header-r{float: right;line-height:20vw;}
+    .beans-header-r a{color: #FFFFFF;font-size: 3vw;}
+    .beans-header-r a .icon{width:4vw;height:4vw;display: block;float: right;margin-left: 1vw;}
+    .beans-header-r a .icon:before{width:4vw;height:4vw;background-position:-44.6vw -78.3vw;}
+    .beans-container{width: 100%;min-height: 50vw;background-color: #FFFFFF;margin-top:2vw;}
+    .coupon-content-tabs{width: 100%;height: auto;box-sizing: border-box;padding:0 3.4vw;}
+    .coupon-content-tabs .tabs-main{width: 100%;height:100%;border-bottom: 1px solid #e2e7ef;box-sizing: border-box;padding-top: 6.4vw;position: relative;float: left;}
+    .coupon-content-tabs .time-tabs{width:100%;height:9.6vw;float: left;margin-top: 3.6vw;}
+    .coupon-content-tabs .time-tabs-cell{width: 33.3%;height: 100%;float: left;text-align: center;font-size: 4vw;color: #22272e;line-height: 9.6vw;display: block;}
+    .coupon-content-tabs .time-tabs-cell.active{color: #E15616;font-weight: bold;}
+
+    .beans-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.4vw;float: left;}
+    .beans-content-list .beans-list-cell{width: 100%;height: 10.7vw;box-sizing: border-box;float: left;margin-bottom: 6.4vw;}
+    .beans-content-list .list-cell-left{width: 50%;height: 10.7vw;float: left;text-align: left;}
+    .beans-content-list p{width: 100%;height: 4.7vw;float: left;line-height:  4.7vw;font-size: 3.6vw;color: #22272e;margin-bottom: 2vw;}
+    .beans-content-list p.none{color: #627386;font-size: 3.2vw;line-height: 4.2vw;}
+    .beans-content-list p.blod{font-weight: bold;line-height: 4.2vw;}
+    .beans-content-list .list-cell-right{width: 50%;height:10.7vw;float: right;text-align: right;}
+    .empty{width: 100%;float: left;}
+    .empty img{width: 36vw;height: 36vw;}
+
+}
+

src/main/resources/static/css/user-center/account/coupon-exchange.css

@@ -0,0 +1,46 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    /*采美豆右侧*/
+    .crumbs{font-size: 16px;}
+    .pageWrap{width: 968px;}
+    .navLayout{min-height: 500px;}
+    .coupon-container{width: 100%;min-height: 500px;background-color: #FFFFFF;}
+    .coupon-content{width: 100%;height: auto;box-sizing: border-box;padding:40px 128px;}
+    .coupon-input{width: 100%;height: 36px;box-sizing: border-box;margin-bottom: 48px;}
+    .coupon-input .input{width: 528px;height: 36px;box-sizing: border-box;border: 1px solid #b8bfca;padding: 0 20px;border-radius: 2px;}
+    .coupon-input .coupon-btn{width: 168px;height: 36px;box-sizing: border-box;border-radius: 2px;line-height: 36px;display: block;font-size: 16px;text-align: center;color: #FFF;background: #E15621;float: right;}
+    .coupon-text{width: 100%;height: auto;color: #4a4f58;}
+    .coupon-text h1{width: 100%;height: auto;font-size: 16px;line-height: 40px;text-align: left;font-weight: normal;}
+    .coupon-text p{width: 100%;height: auto;font-size: 14px;line-height: 35px;text-align: left;}
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    .beans-header{width:100%;height:28vw;box-sizing:border-box;padding:4vw 8vw;background:url("/img/account/icon-beans-bg.png")no-repeat;background-size: cover;}
+    .beans-header-l{float: left;line-height: 10vw;color: #FFFFFF;font-size:3.2vw;}
+    .beans-header-l span{display: inline-block;width: 100%;height: 10vw;float: left;}
+    .beans-header-l span.big{font-size: 7.2vw;font-weight: bold;}
+    .beans-header-r{float: right;line-height:20vw;}
+    .beans-header-r a{color: #FFFFFF;font-size: 3vw;}
+    .beans-header-r a .icon{width:4vw;height:4vw;display: block;float: right;margin-left: 1vw;}
+    .beans-header-r a .icon:before{width:4vw;height:4vw;background-position:-44.6vw -78.3vw;}
+    .beans-container{width: 100%;min-height: 50vw;background-color: #FFFFFF;margin-top:2vw;}
+
+    .beans-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.4vw;float: left;}
+    .beans-content-list .beans-list-cell{width: 100%;height: 10.7vw;box-sizing: border-box;float: left;margin-bottom: 6.4vw;}
+    .beans-content-list .list-cell-left{width: 50%;height: 10.7vw;float: left;text-align: left;}
+    .beans-content-list p{width: 100%;height: 4.7vw;float: left;line-height:  4.7vw;font-size: 3.6vw;color: #22272e;margin-bottom: 2vw;}
+    .beans-content-list p.none{color: #627386;font-size: 3.2vw;line-height: 4.2vw;}
+    .beans-content-list p.blod{font-weight: bold;line-height: 4.2vw;}
+    .beans-content-list .list-cell-right{width: 50%;height:10.7vw;float: right;text-align: right;}
+    .empty{width: 100%;float: left;}
+    .empty img{width: 36vw;height: 36vw;}
+
+}
+

src/main/resources/static/css/user-center/account/coupon.css

@@ -0,0 +1,70 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    /*采美豆右侧*/
+    .crumbs{font-size: 16px;}
+    .pageWrap{width: 968px;}
+    .navLayout{min-height: 500px;}
+    .coupon-container{width: 100%;min-height: 500px;background-color: #FFFFFF;}
+    .coupon-content-tabs{width: 100%;height: 64px;box-sizing: border-box;padding:0 24px;}
+    .coupon-content-tabs .tabs-main{width: 100%;height:100%;border-bottom: 1px solid #e2e7ef;box-sizing: border-box;padding:18px 0 0 0; position: relative;}
+    .coupon-content-tabs .time-tabs{height:46px;float: left}
+    .coupon-content-tabs .time-tabs-cell{width: 72px;height: 100%;float: left;text-align: center;font-size: 14px;color: #22272e;line-height: 46px;display: block;cursor: pointer;margin-right: 40px;}
+    .coupon-content-tabs .time-tabs-cell.active{color: #E15616;border-bottom: 1px solid #E15621;box-sizing: border-box;}
+    .coupon-content-tabs .time-btn{float: right;}
+    .coupon-content-tabs .time-btn a{display: inline-block;float: left;text-align: center;font-size: 14px;color: #627386;line-height: 46px;margin-left: 24px;}
+    .coupon-content-tabs .time-btn a:hover{color: #E15621;}
+    .coupon-content-list{width: 100%;height: auto;box-sizing: border-box;padding:24px 147px 24px 24px;}
+    .coupon-list-cell{width: 369px;height: 148px;float: left;margin: 0 24px 24px 0;position: relative;}
+    .coupon-list-cell .coupon-list-le{width: 299px;height: 148px;float: left;box-sizing: border-box;padding: 24px 14px 12px 14px;}
+    .coupon-list-cell .coupon-list-money{width: 100%;height: 56px;line-height: 56px;color: #f94b4b;font-size: 14px;text-align: left;}
+    .coupon-list-cell .coupon-list-money .maxMoney{font-size: 40px;margin-right: 8px;}
+    .coupon-list-cell .coupon-list-money.none, .coupon-list-cell .coupon-list-name.none, .coupon-list-cell .coupon-list-time.none{color: #FFF;}
+    .coupon-list-cell .coupon-list-name{width: 100%;height: 22px;line-height: 22px;color: #333333;font-size: 14px;text-align: left;margin-top: 13px;}
+    .coupon-list-cell .coupon-list-time{width: 100%;height: 22px;line-height: 22px;color: #999999;font-size: 12px;text-align: left;}
+    .coupon-list-cell .coupon-list-ri{width: 70px;height: 148px;float: left;box-sizing: border-box;padding: 45px 27px;font-size: 16px;color: #FFF;cursor: pointer;}
+    .coupon-list-cell .coupon-list-ri.none{cursor: default;}
+    .coupon-list-cell .coupon-tags{height: 24px;line-height: 24px;text-align: center;border-radius: 8px 0 8px 0;position: absolute;top: 0;left: 0;padding: 0 10px;}
+    .coupon-list-cell .coupon-tags.used{background-color: #f94b4b;color: #FFF;}
+    .coupon-list-cell .coupon-tags.none{background-color: #dbdbdb;color: #FFF;}
+    .coupon-list-cell.used{background: url("/img/account/icon-coupon-uesb@2x.png") no-repeat;background-size: cover;}
+    .coupon-list-cell.none{background: url("/img/account/icon-coupon-none@2x.png") no-repeat;background-size: cover;}
+    .empty{width: 100%;float: left;}
+    .empty img{width: 180px;height: 180px;}
+
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    .beans-header{width:100%;height:28vw;box-sizing:border-box;padding:4vw 8vw;background:url("/img/account/icon-beans-bg.png")no-repeat;background-size: cover;}
+    .beans-header-l{float: left;line-height: 10vw;color: #FFFFFF;font-size:3.2vw;}
+    .beans-header-l span{display: inline-block;width: 100%;height: 10vw;float: left;}
+    .beans-header-l span.big{font-size: 7.2vw;font-weight: bold;}
+    .beans-header-r{float: right;line-height:20vw;}
+    .beans-header-r a{color: #FFFFFF;font-size: 3vw;}
+    .beans-header-r a .icon{width:4vw;height:4vw;display: block;float: right;margin-left: 1vw;}
+    .beans-header-r a .icon:before{width:4vw;height:4vw;background-position:-44.6vw -78.3vw;}
+    .beans-container{width: 100%;min-height: 50vw;background-color: #FFFFFF;margin-top:2vw;}
+    .coupon-content-tabs{width: 100%;height: auto;box-sizing: border-box;padding:0 3.4vw;}
+    .coupon-content-tabs .tabs-main{width: 100%;height:100%;border-bottom: 1px solid #e2e7ef;box-sizing: border-box;padding-top: 6.4vw;position: relative;float: left;}
+    .coupon-content-tabs .time-tabs{width:100%;height:9.6vw;float: left;margin-top: 3.6vw;}
+    .coupon-content-tabs .time-tabs-cell{width: 33.3%;height: 100%;float: left;text-align: center;font-size: 4vw;color: #22272e;line-height: 9.6vw;display: block;}
+    .coupon-content-tabs .time-tabs-cell.active{color: #E15616;font-weight: bold;}
+
+    .beans-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.4vw;float: left;}
+    .beans-content-list .beans-list-cell{width: 100%;height: 10.7vw;box-sizing: border-box;float: left;margin-bottom: 6.4vw;}
+    .beans-content-list .list-cell-left{width: 50%;height: 10.7vw;float: left;text-align: left;}
+    .beans-content-list p{width: 100%;height: 4.7vw;float: left;line-height:  4.7vw;font-size: 3.6vw;color: #22272e;margin-bottom: 2vw;}
+    .beans-content-list p.none{color: #627386;font-size: 3.2vw;line-height: 4.2vw;}
+    .beans-content-list p.blod{font-weight: bold;line-height: 4.2vw;}
+    .beans-content-list .list-cell-right{width: 50%;height:10.7vw;float: right;text-align: right;}
+    .empty{width: 100%;float: left;}
+    .empty img{width: 36vw;height: 36vw;}
+
+}
+

src/main/resources/static/css/user-center/dashboard.css

@@ -121,8 +121,8 @@ li{list-style:none}
     .user-header .message .ellipse,.user-header .message .circular{padding:.6vw;border-radius:3.1vw;font-size:3.1vw;background-color:#f55c5c;color:#FFF;font-style:normal;position:absolute;right:4vw;top:-1vw;transform:scale(.7)}
     .user-header .message .circular{padding:0 1vw;}
     .user-content{width:100%;margin:0 auto 2.4vw auto;background:#FFF;padding-top: 2.4vw;margin-top: 2.4vw;}
-    .user-content .section .user-main.account{height: 14vw;box-sizing: border-box;padding: 0 3.2vw;}
-    .user-content .section .user-main.account .account-cell{line-height:14vw;font-size:3.4vw;color: #333333;float: left;margin-right: 10vw;display: block;}
+    .user-content .section .user-main.account{height: 23vw;box-sizing: border-box;padding: 2vw 3.2vw;}
+    .user-content .section .user-main.account .account-cell{line-height:9vw;font-size:3.4vw;color: #333333;float: left;margin-right: 10vw;display: block;}
     .user-content .section .user-main.account .account-cell .red{font-size:4.2vw;color: #f94b4b;font-weight: bold;}
     .user-content .user-main .tabs-left{box-sizing:border-box;width:100vw;padding:.7vw 6vw 4vw 6vw}
     .user-content .user-main .tabs-left .item{width:20.8vw;height:8.4vw;line-height:8.4vw;text-align:center;border-radius:4.2vw;border:1px solid #b8bfca;font-size:3.3vw;color:#627386;margin:3.3vw 4vw 0 4vw;position:relative}

src/main/resources/static/js/product/product-coupon.js

@@ -0,0 +1,251 @@
+var productList = new Vue({
+    el: "#productList",
+    data: {
+        // searchFlag: false,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        params: {
+            size: 0,
+            num: 0,
+            keyword: "",
+            sortField: "",
+            sortType: 1, // 1降序，其他升序
+            // bid: "",
+            // sid: "",
+            // tid: ""
+        },
+        classify: [],
+        listData: [], //priceflag 0公开价格 1不公开价格 2仅对会员机构公开,//userIdentity: 2-会员机构, 4-普通机构
+        listRecord: 0,
+        pageInput: '1',
+        bigType: "",
+        smallType: "",
+        tinyType: "",
+        userId: 0,
+        shopID:0,
+        userIdentity: '',
+        userToken: '',
+        addhtml:'<span class="tag">美博会</span>'
+    },
+    filters: {
+        NumFormat:function(value) {
+            return Number(value).toFixed(2);
+        }
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            total = total > 0 ? total : 1;
+            var index = this.params.num, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    methods: {
+        toPagination: function (pageNum) {
+            if (pageNum <= this.pageTotal) {
+                var params = {pageNum: pageNum};
+                window.location.href = updateUrlParam(params);
+            }
+        },
+        toSortList: function (sortField, sortType) {
+            var params = {
+                sortfield: sortField,
+                sorttype: sortType
+            };
+            window.location.href = updateUrlParam(params);
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        PromotionsFormat:function(promo){//促销活动类型数据处理
+            if(promo!=null){
+                if(promo.type == 1 && promo.mode == 1){
+                    return true
+                }else{
+                    return false
+                }
+            }
+            return false
+        },
+        getListByKeyword: function () {
+            var _self = this;
+            ProductApi.GetProductSearchList({
+                keyword: this.params.keyword,
+                identity: GLOBAL_USER_IDENTITY,
+                pageSize: this.params.size,
+                pageNum: this.params.num,
+                sortField: this.params.sortField,
+                sortType: this.params.sortType
+            },function (res) {
+                console.log(res);
+                if (res.code === 0 && res.data ) {
+                    var result = JSON.parse(res.data);
+                    _self.listRecord = result.total;
+                    var resultData = setSearchProductList(result.items, _self.userId, function(){
+                        _self.$forceUpdate();
+                        setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500);
+                    });
+                    if(isPC){
+                        _self.listData = resultData;
+                    }else{
+                        _self.listData = _self.listData.concat(resultData);
+                    }
+                    console.log(_self.listData)
+                    _self.listLoading = false;
+                    _self.requestFlag = true;
+                }else {
+                    CAIMEI.Alert(res.msg, '确定');
+                }
+            });
+        },
+        // getListByCategory: function (path, categoryId) {
+        //     var _self = this;
+        //     $.getJSON(spiServer+"/search/query/product/"+ path ,{
+        //         id: categoryId,
+        //         identity: GLOBAL_USER_IDENTITY,
+        //         pageSize: this.params.size,
+        //         pageNum: this.params.num,
+        //         sortField: this.params.sortField,
+        //         sortType: this.params.sortType
+        //     }, function (r) {
+        //         if (r.code === 0 && r.data) {
+        //             var result = JSON.parse(r.data);
+        //             _self.listRecord = result.total;
+        //             var resultData = setSearchProductList(result.items, _self.userId, function(){
+        //                 _self.$forceUpdate();
+        //                 setTimeout(function(){
+        //                     // 图片懒加载
+        //                     $("img[data-original]").lazyload();
+        //                 },500);
+        //             });
+        //             if(isPC){
+        //                 _self.listData = resultData;
+        //             }else{
+        //                 _self.listData = _self.listData.concat(resultData);
+        //             }
+        //             console.log(_self.listData)
+        //         }
+        //         _self.listLoading = false;
+        //         _self.requestFlag = true;
+        //     })
+        // }
+    },
+    created: function () {
+        if(isPC){
+            this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 20;
+            this.params.num = getUrlParam("pageNum") ? getUrlParam("pageNum") * 1 : 1;
+        }else{
+            this.params.size = 10;
+            this.params.num = 1;
+        }
+        this.params.keyword = getUrlParam("keyword") ? getUrlParam("keyword") : "";
+        // 搜索框赋值
+        $('#topSearch').find('[data-select]').attr("data-select", 0).text("产品");
+        $('#topSearch').find('.jqSelect').find('select').val(0);
+        $('#topSearch').find('.keyword').val(getUrlParam("keyword"));
+        this.params.sortField = getUrlParam("sortField") ? getUrlParam("sortField") : "";
+        this.params.sortType = getUrlParam("sortType") ? getUrlParam("sortType") * 1 : 1;
+        // this.searchFlag = (this.params.keyword !== "");
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+            this.userIdentity = globalUserData.identity;
+            this.userToken = globalUserData.token;
+        }
+        var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId;
+            this.shopID = JSON.parse(userInfo).shopId;
+        }
+        // 获取列表数据
+        this.getListByKeyword();
+
+        // if (this.searchFlag) {
+        //     // 获取列表数据
+        //     this.getListByKeyword();
+        // } else {
+        //     // category=1000-1001-1005
+        //     if (!getUrlParam("category")) {
+        //         this.listLoading = false;
+        //         return false;
+        //     }
+        //     var category = getUrlParam("category").split("-");
+        //     this.params.bid = category[0];
+        //     this.params.sid = category[1];
+        //     this.params.tid = category[2];
+        //     // 根据分类获取数据
+        //     if (this.params.tid && this.params.tid>0) {
+        //         this.getListByCategory("tinyType", this.params.tid);
+        //     } else if (this.params.sid && this.params.sid>0){
+        //         this.getListByCategory("smallType", this.params.sid);
+        //     } else if (this.params.bid && this.params.bid>0) {
+        //         this.getListByCategory("bigType", this.params.bid);
+        //     } else {
+        //         alertInfo("URL参数异常！", function(){
+        //             window.location.href = "/";
+        //         });
+        //     }
+        // }
+    },
+    mounted: function () {
+        var _self = this;
+        if(!isPC){
+            $('footer').addClass("noneImportant");
+            //移动端上垃加载更多
+            $(window).on('scroll', function(){
+                var scrollTop = $(this).scrollTop();
+                var scrollHeight = $(document).height();
+                var windowHeight = window.innerHeight;
+                if (scrollTop + windowHeight >= scrollHeight) {
+                    //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                    var totalPage = Math.ceil(_self.listRecord / _self.params.size)?Math.ceil(_self.listRecord / _self.params.size):1;
+                    var next = _self.params.num+1;
+                    if(next <= totalPage){
+                        if (_self.requestFlag){
+                            _self.params.num = next;
+                            // 获取列表数据
+                            _self.getListByKeyword();
+                            // if (_self.searchFlag) {
+                            //     // 获取列表数据
+                            //     _self.getListByKeyword();
+                            // } else {
+                            //     // 根据分类获取数据
+                            //     if (_self.params.tid && _self.params.tid>0) {
+                            //         _self.getListByCategory("tinyType", _self.params.tid);
+                            //     } else if (_self.params.sid && _self.params.sid>0){
+                            //         _self.getListByCategory("smallType", _self.params.sid);
+                            //     } else if (_self.params.bid && _self.params.bid>0) {
+                            //         _self.getListByCategory("bigType", _self.params.bid);
+                            //     }
+                            // }
+                        }
+                        _self.requestFlag = false;
+                    }else{
+                        //到底了
+                        _self.noMore = true;
+                        $('footer').removeClass("noneImportant");
+                    }
+                }
+            });
+        }
+    }
+});

src/main/resources/static/js/user-center/account/coupon-collection.js

@@ -0,0 +1,259 @@
+;
+var orderPage = new Vue({
+    el: "#beansPage",
+    data: {
+        isRequset:false,
+        noMore: false,
+        tabsListIndex:0,
+        listQuery:{
+            userId: 0,
+            year:'',
+            month:'',
+            type:0,
+            pageNum:1,
+            pageSize:10
+        },
+        beansList:[],
+        listRecord: 0,
+        pageInput: '1',
+        modelType:0,
+        dataList:[
+            {
+                maxMoney:5000,
+                minMoney:1000,
+                couponType:1,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:0,
+            },
+            {
+                maxMoney:2000,
+                minMoney:200,
+                couponType:2,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:2,
+                couponBtnType:0,
+                status:1,
+            },
+            {
+                maxMoney:4000,
+                minMoney:800,
+                couponType:3,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:3,
+                couponBtnType:0,
+                status:2,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:0,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:0,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:1,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:2,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:5,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:2,
+                couponBtnType:0,
+                status:1,
+            }
+        ],
+    },
+    filters: {
+        TypeFormat:function(value) {
+            switch (value) {
+                case 1:
+                    return  '活动券';
+                    break;
+                case 2:
+                    return  '品类券';
+                    break;
+                case 3:
+                    return  '店铺券';
+                    break;
+                case 4:
+                    return  '专享券';
+                    break;
+                case 5:
+                    return  '新用户券';
+                    break;
+            }
+        },
+        TypeFormatText:function(value) {
+            switch (value) {
+                case 1:
+                    return  '全商城商品通用';
+                    break;
+                case 2:
+                    return  '仅限购买仪器类商品';
+                    break;
+                case 3:
+                    return  '仅可购买店铺';
+                    break;
+            }
+        }
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            total = total > 0 ? total : 1;
+            var index = this.listQuery.pageNum, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    methods: {
+        tabClick:function(index){//点击Tab切换查询列表
+            var  _self = this;
+            _self.tabsListIndex = index;
+            _self.listQuery.type = index;
+            _self.GetQueryBeansListData();
+        },
+        initDate:function(){//初始化获取当前年月
+            var _self = this;
+
+        },
+        reduceMonth:function(){//减月份
+            var _self = this;
+            _self.listQuery.month--;
+            if(_self.listQuery.month == 0){
+                _self.listQuery.year--;
+                _self.listQuery.month = 12;
+            }
+            _self.GetQueryBeansListData();
+            console.log('年==========>', _self.listQuery.year);
+            console.log('月==========>', _self.listQuery.month);
+        },
+        addMonth:function(){//加月份
+            var _self = this;
+            _self.listQuery.month++;
+            if(_self.listQuery.month > 12){
+                _self.listQuery.year++;
+                _self.listQuery.month = 1;
+            }
+            _self.GetQueryBeansListData();
+        },
+        toPagination: function (pageNum) {//点击切换分页
+            if (pageNum <= this.pageTotal) {
+                this.listQuery.pageNum = pageNum;
+                this.GetQueryBeansListData();
+            }
+        },
+        checkNum: function () {//输入跳转分页
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        changeOrderFn:function(index,status){
+            var  _self = this;
+            _self.orderTabBarIndex = index;
+            _self.listQuery.orderState = status;
+            _self.listQuery.searchNo = '';
+            _self.listQuery.beginTime = '';
+            _self.listQuery.endTime = '';
+            _self.listQuery.pageNum = 1;
+            _self.isRequset = true;
+            _self.GetQueryBeansListData()
+        },
+        GetQueryBeansListData:function(){//查询订单列表
+            var _self = this;
+            UserApi.GetUserClubBeansList(_self.listQuery,function (response) {
+                if(response.code == 0){
+                    var data = response.data;
+                    var pageInfo = data.pageInfo;
+                    _self.userBeans = data.userBeans;
+                    if( pageInfo.list && pageInfo.list.length>0) {
+                        _self.beansList = [];
+                        _self.beansList = pageInfo.list;
+                        _self.listRecord = pageInfo.total;
+                    }else{
+                        _self.beansList = [];
+                        _self.beansList = pageInfo.list;
+                        _self.listRecord = pageInfo.total;
+                    }
+                    _self.isRequset = false;
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        receiveCoupon:function(coupon){
+            var  _self = this;
+            if(_self.listQuery.userId == 0){
+                window.location.href='/login.html';
+            }else{
+                coupon.couponBtnType = 1;
+            }
+        },
+        myClickCoupon:function (){
+            var  _self = this;
+            if(_self.listQuery.userId>0){
+                window.location.href='/user/coupon.html';
+            }else{
+                window.location.href='/login.html';
+            }
+        }
+    },
+    mounted: function () {
+        var _self = this;
+        if(globalUserData){
+            _self.userId = globalUserData.userId;
+            _self.listQuery.userId = this.userId;
+            _self.GetQueryBeansListData();
+        }
+    }
+});

src/main/resources/static/js/user-center/account/coupon-exchange.js

@@ -0,0 +1,28 @@
+;
+var orderPage = new Vue({
+    el: "#beansPage",
+    data: {
+        params:{
+            couponCode:'',
+        },
+        userId: 0,
+    },
+    computed: {
+
+    },
+    methods: {
+        exchangeConfirm:function(){//查询订单列表
+            var _self = this;
+            if( _self.params.couponCode == ''){
+                CAIMEI.dialog('请输入位兑换码',false)
+                return
+            }
+        }
+    },
+    mounted: function () {
+        var _self = this;
+        if(globalUserData){
+            _self.userId = globalUserData.userId;
+        }
+    }
+});

src/main/resources/static/js/user-center/account/coupon.js

@@ -0,0 +1,288 @@
+;
+var orderPage = new Vue({
+    el: "#beansPage",
+    data: {
+        isRequset:true,
+        noMore: false,
+        tabsListIndex:0,
+        tabsList: [
+            {value: 0,text: '未使用'},
+            {value: 1,text: '已使用'},
+            {value: 2,text: '已失效'}
+        ],
+        listQuery:{
+            userId: 0,
+            year:'',
+            month:'',
+            type:0,
+            pageNum:1,
+            pageSize:10
+        },
+        beansList:[],
+        listRecord: 0,
+        pageInput: '1',
+        userBeans:0,
+        confirmedCount:'',//待確認數量
+        paymentCount:'',//待付款
+        waitShipmentsCount:'',//待发货
+        shipmentsCount:'',//已发货
+        salesReturnCount:'',//退货款
+        modelType:0,
+        orderIdentificationId:0,
+        payModelData:{},
+        hanldOrderData:{},//监听点击的单个订单项的按钮
+        confrimsBtn:true,
+        listClass:'used',
+        dataList:[
+            {
+                maxMoney:5000,
+                minMoney:1000,
+                couponType:1,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:0,
+            },
+            {
+                maxMoney:2000,
+                minMoney:200,
+                couponType:2,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:2,
+                couponBtnType:0,
+                status:1,
+            },
+            {
+                maxMoney:4000,
+                minMoney:800,
+                couponType:3,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:3,
+                couponBtnType:0,
+                status:2,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:0,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:0,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:1,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:2,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:5,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:2,
+                couponBtnType:0,
+                status:1,
+            }
+        ],
+    },
+    filters: {
+        TypeBtnFormat:function(value){
+            switch (value) {
+                case 0:
+                    return  '去使用';
+                    break;
+                case 1:
+                    return  '已使用';
+                    break;
+                case 2:
+                    return  '已失效';
+                    break;
+            }
+        },
+        TypeFormat:function(value) {
+            switch (value) {
+                case 1:
+                    return  '活动券';
+                    break;
+                case 2:
+                    return  '品类券';
+                    break;
+                case 3:
+                    return  '店铺券';
+                    break;
+                case 4:
+                    return  '专享券';
+                    break;
+                case 5:
+                    return  '新用户券';
+                    break;
+            }
+        },
+        TypeFormatText:function(value) {
+            switch (value) {
+                case 1:
+                    return  '全商城商品通用';
+                    break;
+                case 2:
+                    return  '仅限购买仪器类商品';
+                    break;
+                case 3:
+                    return  '仅可购买店铺';
+                    break;
+            }
+        }
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            total = total > 0 ? total : 1;
+            var index = this.listQuery.pageNum, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    methods: {
+        tabClick:function(index){//点击Tab切换查询列表
+            var  _self = this;
+            _self.tabsListIndex = index;
+            console.log('tabsListIndex',_self.tabsListIndex)
+            switch(_self.tabsListIndex){
+                case 0:
+                    _self.listClass = 'used'
+                    break;
+                case 1:
+                    _self.listClass = 'none'
+                    break;
+                case 2:
+                    _self.listClass = 'none'
+                    break;
+            }
+            _self.listQuery.type = index;
+            _self.GetQueryBeansListData();
+        },
+        initDate:function(){//初始化获取当前年月
+            var _self = this;
+            var _Date = new Date();
+            _self.listQuery.year = _Date.getFullYear();
+            _self.listQuery.month = _Date.getMonth()+1;
+            console.log('当前年份==========>', _self.listQuery.year);
+            console.log('当前月份==========>', _self.listQuery.month);
+        },
+        reduceMonth:function(){//减月份
+            var _self = this;
+            _self.listQuery.month--;
+            if(_self.listQuery.month == 0){
+                _self.listQuery.year--;
+                _self.listQuery.month = 12;
+            }
+            _self.GetQueryBeansListData();
+            console.log('年==========>', _self.listQuery.year);
+            console.log('月==========>', _self.listQuery.month);
+        },
+        addMonth:function(){//加月份
+            var _self = this;
+            _self.listQuery.month++;
+            if(_self.listQuery.month > 12){
+                _self.listQuery.year++;
+                _self.listQuery.month = 1;
+            }
+            _self.GetQueryBeansListData();
+        },
+        toPagination: function (pageNum) {//点击切换分页
+            if (pageNum <= this.pageTotal) {
+                this.listQuery.pageNum = pageNum;
+                this.GetQueryBeansListData();
+            }
+        },
+        checkNum: function () {//输入跳转分页
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        changeOrderFn:function(index,status){
+            var  _self = this;
+            _self.orderTabBarIndex = index;
+            _self.listQuery.orderState = status;
+            _self.listQuery.searchNo = '';
+            _self.listQuery.beginTime = '';
+            _self.listQuery.endTime = '';
+            _self.listQuery.pageNum = 1;
+            _self.isRequset = true;
+            _self.GetQueryBeansListData()
+        },
+        GetQueryBeansListData:function(){//查询订单列表
+            var _self = this;
+            UserApi.GetUserClubBeansList(_self.listQuery,function (response) {
+                if(response.code == 0){
+                    var data = response.data;
+                    var pageInfo = data.pageInfo;
+                    if( pageInfo.list && pageInfo.list.length>0) {
+                        _self.beansList = [];
+                        _self.beansList = pageInfo.list;
+                        _self.listRecord = pageInfo.total;
+                    }else{
+                        _self.beansList = [];
+                        _self.beansList = pageInfo.list;
+                        _self.listRecord = pageInfo.total;
+                    }
+                    _self.isRequset = false;
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        }
+    },
+    mounted: function () {
+        var _self = this;
+        if(globalUserData){
+            _self.userId = globalUserData.userId;
+            _self.listQuery.userId = this.userId;
+            _self.initDate();
+            _self.GetQueryBeansListData();
+        }
+    }
+});

src/main/resources/templates/product/product-coupon.html

@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-商品列表</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/product/list.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 商品列表 -->
+<div id="productList">
+    <!-- 面包屑 -->
+    <div v-if="isPC && listData && listData.length>0" class="crumbs">
+        <span>搜索结果</span>
+        <span>&gt;</span> <a href="javascript:void(0);" @click="toPagination(1)" v-text="params.keyword"></a>
+    </div>
+
+    <!--    <template v-if="isPC && listData && listData.length>0">-->
+    <!--        &lt;!&ndash; 面包屑 &ndash;&gt;-->
+    <!--        <div v-if="searchFlag" class="crumbs">-->
+    <!--            <span>搜索结果</span>-->
+    <!--            <span>&gt;</span> <a href="javascript:void(0);" @click="toPagination(1)" v-text="params.keyword"></a>-->
+    <!--        </div>-->
+    <!--        <div v-else class="crumbs">-->
+    <!--            <a href="/">首页</a>-->
+    <!--            <template v-if="params.bid && params.bid>0">-->
+    <!--                <template v-if="params.sid && params.sid>0">-->
+    <!--                    <span>&gt;</span> <a :href="'/product/list.html?category='+params.bid+'-0-0'" v-text="bigType"></a>-->
+    <!--                    <template v-if="params.tid && params.tid>0">-->
+    <!--                        <span>&gt;</span> <a :href="'/product/list.html?category='+params.bid+'-'+params.sid+'-0'" v-text="smallType"></a>-->
+    <!--                        <span>&gt;</span> <span v-text="tinyType"></span>-->
+    <!--                    </template>-->
+    <!--                    <template v-else>-->
+    <!--                        <span>&gt;</span> <span v-text="smallType"></span>-->
+    <!--                    </template>-->
+    <!--                </template>-->
+    <!--                <template v-else>-->
+    <!--                    <span>&gt;</span> <span v-text="bigType"></span>-->
+    <!--                </template>-->
+    <!--            </template>-->
+    <!--        </div>-->
+    <!--        &lt;!&ndash;分类&ndash;&gt;-->
+    <!--        <div v-if="(!searchFlag)" id="listClassify" class="classifyBox">-->
+    <!--            <div class="clsTab">-->
+    <!--                <template v-for="(big,i) in classify">-->
+    <!--                    <a :class="{'on': params.bid==big.bigTypeID}" v-if="big.validFlag==1" href="javascript:void(0);" v-text="big.name"></a>-->
+    <!--                </template>-->
+    <!--            </div>-->
+    <!--            <div class="clsCon">-->
+    <!--                <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID" style="display: none;">-->
+    <!--                    <div class="line" :class="{'on': params.sid==small.smallTypeID}" v-for="small in big.smalltypeList" v-if="small.validFlag==1">-->
+    <!--                        <div class="lft" :class="{'on': params.sid==small.smallTypeID}">-->
+    <!--                            <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>-->
+    <!--                        </div>-->
+    <!--                        <div class="rgt">-->
+    <!--                            <template v-for="tiny in small.tinytypeList">-->
+    <!--                                <a v-if="tiny.validFlag==1" :class="{'on': params.tid==tiny.tinyTypeID}" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID" v-text="tiny.name"></a>-->
+    <!--                            </template>-->
+    <!--                        </div>-->
+    <!--                    </div>-->
+    <!--                </div>-->
+    <!--            </div>-->
+    <!--        </div>-->
+    <!--    </template>-->
+    <!--loading-->
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <!--数据为空-->
+    <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
+        <img src="/img/common/empty.png">
+        <div class="msg">
+            <p>暂未找到你搜索的商品，去<a href="/">商城</a>，逛逛吧~</p>
+        </div>
+    </div>
+    <template v-else>
+        <!--排序-->
+        <div class="sortBox">
+            <ul class="mfc">
+                <li :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</li>
+                <template>
+                    <li v-if="params.sortField == 'sales' && params.sortType == 1" class="down"
+                        @click="toSortList('sales',0)"><span>销量</span></li>
+                    <li v-else-if="params.sortField == 'sales' && params.sortType == 0" class="up"
+                        @click="toSortList('sales',1)"><span>销量</span></li>
+                    <li v-else @click="toSortList('sales',0)"><span>销量</span></li>
+                </template>
+                <template>
+                    <li v-if="params.sortField == 'favorite' && params.sortType == 1" class="down"
+                        @click="toSortList('favorite',0)"><span>人气</span></li>
+                    <li v-else-if="params.sortField == 'favorite' && params.sortType == 0" class="up"
+                        @click="toSortList('favorite',1)"><span>人气</span></li>
+                    <li v-else @click="toSortList('favorite',0)"><span>人气</span></li>
+                </template>
+                <template>
+                    <li v-if="params.sortField == 'price' && params.sortType == 1" class="down"
+                        @click="toSortList('price',0)"><span>价格</span></li>
+                    <li v-else-if="params.sortField == 'price' && params.sortType == 0" class="up"
+                        @click="toSortList('price',1)"><span>价格</span></li>
+                    <li v-else @click="toSortList('price',0)"><span>价格</span></li>
+                </template>
+            </ul>
+        </div>
+        <!--商品列表-->
+        <ul class="productList clear mfw">
+            <li class="productItem " v-for="p in listData">
+                <a class="image" :href="'/product-'+p.productId+'.html'">
+                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                    <p class="name" v-html="addhtml + p.name" v-if="p.beautyActFlag==1"></p>
+                    <p class="name" v-html="p.name" v-else></p>
+                    <div class="price">
+                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                            <template v-if="p.priceFlag==1">
+                                <div class="price_text_tag">
+                                    <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                </div>
+                                <div class="main_price_unde">￥价格未公开</div>
+                            </template>
+                            <template v-else>
+                                <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.shopId==GLOBAL_SHOP_ID)">
+                                    <div class="price_text_tag">
+                                        <p class="couponTag">优惠券</p>
+                                        <p class="listTag" v-if="p.actStatus==1">
+                                            {{p.promotions.name}}
+                                            <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:￥{{p.price | NumFormat}}</span>
+                                        </p>
+                                    </div>
+                                    <div class="main_price_show" :class="PromotionsFormat(p.promotions) ? 'none' : ''">
+                                        ￥{{ (PromotionsFormat(p.promotions) ? p.originalPrice : p.price ) | NumFormat }}
+                                    </div>
+                                </template>
+                                <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                    <div class="price_text_tag">
+                                        <p class="couponTag">优惠券</p>
+                                        <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                    </div>
+                                    <div class="main_price_unde">￥会员可见</div>
+                                </template>
+                                <template v-else>
+                                    <div class="price_text_tag">
+                                        <p class="couponTag">优惠券</p>
+                                        <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                    </div>
+                                    <div class="price_grade"><span class="bold">￥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
+                                </template>
+                            </template>
+                        </template>
+                        <template v-else>
+                            <div class="price_text_tag ">
+                                <p class="couponTag">优惠券</p>
+                                <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                            </div>
+                            <div class="price_grade "><span class="bold">￥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
+                        </template>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </template>
+    <!--分页-->
+    <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+    <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+        <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>
+        <template v-for="n in showPageBtn">
+            <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+            <span v-else>···</span>
+        </template>
+        <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>
+        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+        <span>跳至</span>
+        <input v-model="pageInput" @blur="checkNum()"/>
+        <span>页</span>&nbsp;
+        <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/list.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/user-center/account/coupon-collection.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+  <title>采美365网</title>
+  <template th:replace="components/head-link"></template>
+  <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+  <link th:href="@{/css/user-center/account/coupon-collection.css(v=${version})}" rel="stylesheet" type="text/css">
+  <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!-- 采美豆明细 -->
+<div id="beansPage" v-cloak>
+  <div class="navLayout" v-cloak>
+    <div class="coupon-title">
+      <div class="coupon-name">优惠券</div>
+      <div class="coupon-name-use"  @click="myClickCoupon">我的优惠券</div>
+    </div>
+    <div class="wrap clear">
+        <!--loading-->
+        <div v-if="isRequset" class="loading">
+          <img src="/img/base/loading.gif">
+        </div>
+        <div class="coupon-container clear" v-else>
+          <div class="coupon-content-list clear" v-if="!beansList.length > 0">
+            <div class="coupon-list-cell" v-for="(coupon, index) in dataList" :key="index">
+              <div class="coupon-list-le">
+                <div class="coupon-list-money">
+                  <p>￥<span class="maxMoney">{{ coupon.maxMoney }}</span><span class="minMoney">满{{ coupon.minMoney }}可用</span></p>
+                </div>
+                <div class="coupon-list-name">
+                  <p v-if="coupon.useType == 1">{{ coupon.useType | TypeFormatText }}</p>
+                  <p v-if="coupon.useType == 2">{{ coupon.useType | TypeFormatText }}</p>
+                  <p v-if="coupon.useType == 3">{{ coupon.useType | TypeFormatText }}{{ coupon.couponText }}的商品</p>
+                </div>
+                <div class="coupon-list-time">{{ coupon.couponTime }}</div>
+              </div>
+              <div class="coupon-list-ri" :class="coupon.couponBtnType == 1 ? 'none' : ''">
+                <span v-if="coupon.couponBtnType == 0" @click="receiveCoupon(coupon)">领取</span>
+                <span v-if="coupon.couponBtnType == 1">去使用</span>
+              </div>
+              <div class="coupon-tags">{{ coupon.couponType | TypeFormat }}</div>
+            </div>
+          </div>
+          <div v-else class="empty">
+            <img src="/img/account/icon-coupon-empty@2x.png">
+            <div class="msg"><p>暂无可领的优惠券</p></div>
+          </div>
+        </div>
+        <!--分页-->
+        <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+        <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+          <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)" href="javascript:void(0);"></a>
+          <template v-for="n in showPageBtn">
+            <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+            <span v-else>···</span>
+          </template>
+          <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)" href="javascript:void(0);"></a>
+          <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+          <span>跳至</span>
+          <input v-model="pageInput" @blur="checkNum()"/>
+          <span>页</span>&nbsp;
+          <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+        </div>
+    </div>
+  </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/account/coupon-collection.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/user-center/account/coupon-exchange.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+  <title>采美365网</title>
+  <template th:replace="components/head-link"></template>
+  <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+  <link th:href="@{/css/user-center/account/coupon-exchange.css(v=${version})}" rel="stylesheet" type="text/css">
+  <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!-- 采美豆明细 -->
+<div id="beansPage" v-cloak>
+  <div class="navLayout" v-cloak>
+    <div v-if="isPC" class="crumbs">
+      <span>我的采美</span>
+      <span>&gt;</span>
+      <span>兑换优惠券</span>
+    </div>
+    <div class="wrap clear">
+      <!--左侧导航-->
+      <template th:replace="user-center/components/tableft"></template>
+      <div class="right">
+        <div class="coupon-container clear">
+          <div class="coupon-content">
+              <div class="coupon-input">
+                <input class="input" type="text"  v-model="params.couponCode" placeholder="请输入16位兑换码">
+                <a href="javascript:void(0);" class="coupon-btn" @click="exchangeConfirm">立即兑换</a>
+              </div>
+              <div class="coupon-text">
+                <h1>注意事项：</h1>
+                <p>1. 兑换码获取：可通过采美线下发放或者销售顾问线上发放获得优惠券兑换码。兑换码由16位数字和字母组成；</p>
+                <p>2. 兑换码使用：在当前页面输入兑换码即可兑换相应优惠券，一个兑换码只能兑换一张优惠券，不可重复使用；</p>
+                <p>3. 输入兑换码时请区分字母大小写。</p>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/account/coupon-exchange.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/user-center/account/coupon.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+  <title>采美365网</title>
+  <template th:replace="components/head-link"></template>
+  <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+  <link th:href="@{/css/user-center/account/coupon.css(v=${version})}" rel="stylesheet" type="text/css">
+  <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!-- 采美豆明细 -->
+<div id="beansPage" v-cloak>
+  <div class="navLayout" v-cloak>
+    <div v-if="isPC" class="crumbs">
+      <span>我的采美</span>
+      <span>&gt;</span>
+      <span>优惠券</span>
+    </div>
+    <div class="wrap clear">
+      <!--左侧导航-->
+      <template th:replace="user-center/components/tableft"></template>
+      <div class="right">
+        <!--loading-->
+        <div v-if="isRequset" class="loading">
+          <img src="/img/base/loading.gif">
+        </div>
+        <div class="coupon-container clear" v-else>
+          <div class="coupon-content-tabs clearfix">
+            <div class="tabs-main">
+              <div class="time-tabs">
+                <div   class="time-tabs-cell"
+                       v-for="(tabs, index) in tabsList"
+                       :key="index"
+                       :class="tabsListIndex == index ? 'active' : ''"
+                       @click="tabClick(index)"
+                >
+                  {{ tabs.text }}
+                </div>
+              </div>
+              <div class="time-btn" v-if="isPC">
+                <a href="/user/coupon-exchange.html">兑换优惠券</a>
+                <a href="/user/coupon-collection.html">领取更多好券</a>
+              </div>
+              <div class="time-btn" v-else></div>
+            </div>
+          </div>
+          <!--数据为空-->
+          <div class="coupon-content-list clear" v-if="beansList.length > 0">
+              <div class="coupon-list-cell" v-for="(coupon, index) in dataList" :key="index" :class="listClass">
+                <div class="coupon-list-le">
+                  <div class="coupon-list-money" :class="listClass">
+                    <p>￥<span class="maxMoney">{{ coupon.maxMoney }}</span><span class="minMoney">满{{ coupon.minMoney }}可用</span></p>
+                  </div>
+                  <div class="coupon-list-name" :class="listClass">
+                    <p v-if="coupon.useType == 1">{{ coupon.useType | TypeFormatText }}</p>
+                    <p v-if="coupon.useType == 2">{{ coupon.useType | TypeFormatText }}</p>
+                    <p v-if="coupon.useType == 3">{{ coupon.useType | TypeFormatText }}{{ coupon.couponText }}的商品</p>
+                  </div>
+                  <div class="coupon-list-time" :class="listClass">{{ coupon.couponTime }}</div>
+                </div>
+                <div class="coupon-list-ri" :class="listClass">{{ coupon.status | TypeBtnFormat }}</div>
+                <div class="coupon-tags" :class="listClass">{{ coupon.couponType | TypeFormat }}</div>
+              </div>
+          </div>
+          <div v-else class="empty">
+            <img src="/img/account/icon-coupon-empty@2x.png">
+            <div class="msg"><p>暂无数据</p></div>
+          </div>
+        </div>
+        <!--分页-->
+        <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+        <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+          <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)" href="javascript:void(0);"></a>
+          <template v-for="n in showPageBtn">
+            <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+            <span v-else>···</span>
+          </template>
+          <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)" href="javascript:void(0);"></a>
+          <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+          <span>跳至</span>
+          <input v-model="pageInput" @blur="checkNum()"/>
+          <span>页</span>&nbsp;
+          <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/account/coupon.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/user-center/dashboard.html

@@ -69,6 +69,10 @@
                                     <span>采美豆：</span>
                                     <span class="red">{{ userInfo.userBeans }}</span>
                                 </a>
+                                <a href="/user/coupon.html" class="account-cell">
+                                    <span>优惠券：</span>
+                                    <span class="red">{{ userInfo.userBeans }}</span>
+                                </a>
                             </div>
                         </div>
                     </div>