优惠券

src/main/resources/static/css/shopping/shopping.css

@@ -13,6 +13,7 @@ li{list-style:none}
     .pageTitle h1{color:#2D3036;font-size:16px;font-weight:bold;float:left}
     .pageTitle h1 span{color:#627386;font-size:12px;font-weight:normal;margin-left:10px}
     h2.title{height:36px;font-size:16px;padding:0 16px;line-height:36px;color:#22272e;font-weight:normal;clear:both}
+    h2.title>a{color: #E15621;margin-left: 32px;}
     .pageTitle .step{float:right;color:#999999;font-size:14px;height:44px;line-height:44px}
     .pageTitle .step span{display:inline-block;height:20px;line-height:20px;vertical-align:middle;position:relative;padding-right:55px;}
     .pageTitle .step span:before{font-style:normal;font-size:20px;vertical-align:text-top;margin-right:5px}
@@ -76,6 +77,19 @@ li{list-style:none}
     .invalidTit .tit{color:#22272e;float:left}
     .invalidTit .delAll{color:#e15616;float:right;cursor:pointer}
     .invalidTit .tit em{font-style:normal;color:#e15616}
+    /*优惠券选择*/
+    .couponWrap{width: 100%;min-height: 200px;box-sizing: border-box;padding: 32px 16px 10px 16px;background: #FFF;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);margin-bottom: 32px;float: left;}
+    .couponWrap .coupon-list-cell{width: 369px;height: 148px;float: left;margin-bottom:24px;margin-right: 15px;position: relative;background: url("/img/account/icon-coupon-uesb@2x.png") no-repeat;background-size: cover;}
+    .couponWrap .coupon-list-cell .coupon-list-le{width: 299px;height: 148px;float: left;box-sizing: border-box;padding: 24px 14px 12px 14px;position: relative;}
+    .couponWrap .coupon-list-cell .coupon-list-le .coupon-list-checked{position: absolute;right: 16px;top: 16px;width: 14px;height: 14px;}
+    .couponWrap .coupon-list-cell .coupon-list-money{width: 100%;height: 56px;line-height: 56px;color: #f94b4b;font-size: 14px;text-align: left;}
+    .couponWrap .coupon-list-cell .coupon-list-money .maxMoney{font-size: 40px;margin-right: 8px;}
+    .couponWrap .coupon-list-cell .coupon-list-name{width: 100%;height: 22px;line-height: 22px;color: #333333;font-size: 14px;text-align: left;margin-top: 13px;}
+    .couponWrap .coupon-list-cell .coupon-list-time{width: 100%;height: 22px;line-height: 22px;color: #999999;font-size: 12px;text-align: left;}
+    .couponWrap .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;}
+    .couponWrap .coupon-list-cell .coupon-list-ri.none{padding: 45px 27px;}
+    .couponWrap .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;}
+
     /* 底部结算 */
     .summaryWrap{width:100%;background:#FFF;margin:16px 0 -29px 0;position:relative}
     .summaryWrap .summary{width:1184px;margin:0 auto;font-size:18px;padding:11px 0;height:50px;line-height:50px;text-align:right}
@@ -170,7 +184,7 @@ li{list-style:none}
     .balanceWrap{padding:16px;text-align:left}
     .balanceWrap .text{display:inline-block;height:16px;line-height:16px;font-size:14px;color:#333;margin-left:15px;vertical-align:top}
     .balanceWrap .text .red{color:#FF2A2A}
-    .totalPriceWrap{line-height:36px;text-align:right;padding:16px}
+    .totalPriceWrap{line-height:36px;text-align:right;padding:16px;width: 100%;float: left;}
     .totalPriceWrap span{display:inline-block;width:200px}
     .totalPriceWrap .pis{color: #E15616;}
     .totalPriceWrap span em{font-style:normal;color:#FF2A2A}
@@ -186,6 +200,7 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
+    h2.title>a{color: #E15621;margin-left: 2vw;}
     .pageTitle .step{width:100%;height:12.4vw;line-height:12.4vw;background:#FFF;color:#9AA5B5;font-size:3.1vw;text-align:center}
     .pageTitle .step span{display:inline-block;height:4.2vw;line-height:4.2vw;vertical-align:middle;position:relative;padding-right:6.4vw}
     .pageTitle .step span:before{font-style:normal;font-size:5.2vw;vertical-align:text-top;margin-right:1vw}
@@ -234,6 +249,21 @@ li{list-style:none}
     .invalidTit .tit{color:#22272e;float:left}
     .invalidTit .delAll{color:#e15616;float:right}
     .invalidTit .tit em{font-style:normal;color:#e15616}
+    /*优惠券*/
+    .couponWrap{width: 100%;box-sizing: border-box;padding: 4.8vw 3.2vw 2vw 3.2vw;background: #FFF;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);margin-bottom: 4.8vw;float: left;}
+    .couponWrap .coupon-list-cell{width: 93.1vw;height: 33vw;float: left;margin: 0 0 2.4vw 0;position: relative;border-radius: 1vw;}
+    .couponWrap .coupon-list-cell .coupon-list-le{width: 77.6vw;height: 33vw;float: left;box-sizing: border-box;padding: 6.8vw 3.7vw 3.3vw 3.7vw;position: relative;}
+    .couponWrap .coupon-list-cell .coupon-list-le .coupon-list-checked{position: absolute;right: 4vw;top: 4vw;width: 3.6vw;height: 3.6vw;}
+    .couponWrap .coupon-list-cell .coupon-list-money{width: 100%;height:10vw;line-height: 10vw;color: #f94b4b;font-size: 3vw;text-align: left; }
+    .couponWrap .coupon-list-cell .coupon-list-money .maxMoney{font-size: 7.2vw;margin-right: 2.4vw;}
+    .couponWrap .coupon-list-cell .coupon-list-money.none, .coupon-list-cell .coupon-list-name.none, .coupon-list-cell .coupon-list-time.none{color: #FFF;}
+    .couponWrap .coupon-list-cell .coupon-list-name{width: 100%;height: 4.8vw;line-height: 4.8vw;color: #333333;font-size: 3.4vw;text-align: left;margin-top: 4vw;}
+    .couponWrap .coupon-list-cell .coupon-list-time{width: 100%;height: 4.8vw;line-height: 4.8vw;color: #999999;font-size: 2.4vw;text-align: left;}
+    .couponWrap .coupon-list-cell .coupon-list-ri{width: 15.5vw;height: 33vw;float: left;box-sizing: border-box;padding: 11.8vw 6vw;font-size:3.4vw;color: #FFF;cursor: pointer;}
+    .couponWrap .coupon-list-cell .coupon-list-ri.none{padding: 9.5vw 6vw;}
+    .couponWrap .coupon-list-cell .coupon-tags{height: 4.8vw;line-height: 4.8vw;text-align: center;background-color: #f94b4b;color: #FFF;border-radius: 1.6vw 0 1.6vw 0;position: absolute;top: 0;left: 0;padding: 0 1.5vw;font-size: 3vw;}
+    .couponWrap .coupon-list-cell{background: url("/img/account/icon-coupon-uesb@h52x.png") no-repeat;background-size: cover;}
+
     /* 底部结算 */
     .summaryWrap{width:100%;background:#FFF;margin:1.4vw 0}
     .summaryWrap .summary{width:93vw;margin:0 auto;font-size:3.4vw;padding:1.5vw 0}
@@ -292,7 +322,7 @@ li{list-style:none}
     .balanceWrap,.totalPriceWrap,.invoiceWrap{width:100%;box-sizing:border-box;background:#FFF;color:#9aa5b5;font-size:3.4vw;margin-bottom:1.2vw;text-align:left;padding:3.4vw}
     .balanceWrap .text{display:inline-block;height:4vw;line-height:4vw;color:#333;margin-left:2vw;vertical-align:top;white-space:nowrap}
     .balanceWrap .text .red{color:#FF2A2A}
-    .totalPriceWrap{color:#333;line-height:6vw;text-align:left;padding:3.3vw}
+    .totalPriceWrap{color:#333;line-height:6vw;text-align:left;padding:3.3vw;float: left;}
     .totalPriceWrap span{width:46vw;float:right;text-align:right}
     .totalPriceWrap span em{font-style:normal;color:#FF2A2A}
     .totalPriceWrap:after,.invoiceWrap:after,.invoiceWrap .formLine:after{content:'';display:table;clear:both}

src/main/resources/static/js/shopping/confirm.js

@@ -79,6 +79,42 @@ var shoppingConfirm = new Vue({
         deductionBeans:0,
         hanldUserBeans:0,
         submitLoading: false,
+        checkedIndex:null,
+        dataList:[
+            {
+                maxMoney:5000,
+                minMoney:1000,
+                couponType:1,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:0,
+                ischecked:false
+            },
+            {
+                maxMoney:2000,
+                minMoney:200,
+                couponType:2,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:2,
+                couponBtnType:0,
+                status:1,
+                ischecked:false
+            },
+            {
+                maxMoney:4000,
+                minMoney:800,
+                couponType:3,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:3,
+                couponBtnType:0,
+                status:2,
+                ischecked:false
+            }
+        ]
     },
     computed: {
 
@@ -91,6 +127,38 @@ var shoppingConfirm = new Vue({
           }else{
             return Number(num);
           }
+        },
+        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;
+            }
         }
     },
     methods: {
@@ -389,6 +457,18 @@ var shoppingConfirm = new Vue({
             });
             this.closeAddressBox();
         },
+        checkedCoupon:function(coupon,idx){// 选择优惠券
+            var _self = this;
+            _self.checkedIndex = idx;
+            _self.dataList.forEach((el,index) => {
+                if(_self.checkedIndex == index){
+                    el.ischecked = !el.ischecked;
+                }else{
+                    el.ischecked = false
+                }
+            })
+            console.log('this.dataList===>',this.dataList)
+        },
         toggleThisLadder: function(event){
             var el = event.currentTarget;
             if($(el).hasClass("on")){

src/main/resources/templates/shopping/confirm.html

@@ -15,7 +15,7 @@
 <!-- 核对订单 -->
 <div id="shoppingConfirm" v-cloak>
     <!--列表-->
-    <div class="wrap">
+    <div class="wrap clear">
         <div class="pageTitle">
             <div class="step">
                 <span class="prev">我的购物车</span>
@@ -287,6 +287,28 @@
                 <span class="text">剩余:<span class="red">¥{{balance.surplusMoney | NumFormat}}</span></span>
             </label>
         </div>
+        <h2 class="title">
+            优惠券
+            <a href="/user/coupon-exchange.html">兑换优惠券</a>
+        </h2>
+        <div class="couponWrap">
+            <div class="coupon-list-cell" v-for="(coupon, index) in dataList" :key="index"  @click="checkedCoupon(coupon,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>
+                    <input class="coupon-list-checked" v-model="coupon.ischecked" name="useBalance" type="checkbox">
+                </div>
+                <div class="coupon-list-ri"><span>已领取</span></div>
+                <div class="coupon-tags">{{ coupon.couponType | TypeFormat }}</div>
+            </div>
+        </div>
         <div class="totalPriceWrap">
             <p>商品种类: <span>{{kindCount}}种</span></p>
             <p>数量总计: <span>{{totalCount}}件</span></p>
@@ -296,6 +318,7 @@
                 <span v-if="payInfo.freePostFlag==1"><em>¥{{payInfo.freight | NumFormat}}</em></span>
             </p>
             <p v-if="reducedPrice>0">促销满减: <span><em>- ¥{{reducedPrice | NumFormat}}</em></span></p>
+            <p>优惠券: <span><em>- ¥{{reducedPrice | NumFormat}}</em></span></p>
             <p v-if="balance.deductMoney>0">抵扣账户余额: <span><em>- ¥{{balance.deductMoney | NumFormat}}</em></span></p>
             <p>总价: <span><em>¥{{payInfo.orderShouldPayFee | NumFormat}}</em></span></p>
             <p class="pis" v-if="isBeansShow">
@@ -309,7 +332,6 @@
             </p>
         </div>
     </div>
-
     <div class="summaryWrap">
         <div class="summary">
             <div v-if="isPC" class="left">