【机构】-订单详情页面

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

@@ -43,7 +43,7 @@ li{list-style:none}
     .listWrap .cartItem .c2{text-align:left}
     .listWrap .cartItem>div>*{vertical-align:middle}
     .listWrap .c0{float:left;width:34px;text-align:left}
-    .listWrap .c1{float:left;width:102px;height:100%}
+    .listWrap .c1{float:left;width:102px;height:100%;position:relative;}
     .listWrap .c2{float:left;width:400px}
     .listWrap .c3{float:left;width:200px}
     .listWrap .c4{float:left;width:142px}
@@ -52,6 +52,7 @@ li{list-style:none}
     .listWrap .c7{float:right;width:118px}
     .listWrap .c10{float:left;width:495px}
     .listWrap .c11{float:left;width:480px;text-align:left}
+    .listWrap .c1 span.tip{position:absolute;background:#ff4500;line-height:20px;height:20px;padding:0 10px;white-space:nowrap;font-size:12px;color:#FFF;top:0;left:0}
     .listWrap .check{width:16px;height:16px;line-height:14px;vertical-align:middle}
     .listWrap .image{display:block;width:100px;height:100px;border:1px solid #F7F7F7}
     .listWrap .name,.listWrap .unit{line-height:20px;display:inline-block;max-height:100px;overflow:hidden;vertical-align:middle}
@@ -188,7 +189,9 @@ li{list-style:none}
     .listWrap .supplierItem{width:100%;background:#FFF;color:#9aa5b5;font-size:3.4vw;margin-bottom:1.2vw}
     .listWrap .supplierItem.disable{background:#f1f0f5}
     .listWrap .supplierItem em{font-style:normal}
-    .listWrap .supplierTit{border-bottom:1px solid #F7F7F7;height:7.4vw;line-height:7.4vw;padding:1.3vw 3.3vw}
+    .listWrap .supplierTit{border-bottom:1px solid #F7F7F7;height:7.4vw;line-height:7.4vw;padding:1.3vw 3.3vw;position:relative;}
+    .listWrap .supplierTit .price{width:22vw;height:6.4vw;position:absolute;right:0;top:2vw;}
+    .listWrap .supplierTit .priceTag .tag{top:0;}
     .listWrap .cartItem{padding:2.2vw 3.3vw;height:24vw;line-height:24vw;position:relative}
     .listWrap .supplierBtn{border-top:1px solid #F7F7F7;width:93vw;margin:0 auto;line-height:10.6vw;color:#22272e;font-size:3.4vw;text-align:right}
     .listWrap .supplierBtn em{color:#f55c5c}
@@ -196,7 +199,8 @@ li{list-style:none}
     .listWrap .supplierBtn .note input{width:79vw;height:8vw;line-height:8vw;background:#F7F7F7;border-radius:1vw;border:none;padding:0 2vw;font-size:3.1vw}
     .listWrap .supplierItem .c0{float:left;width:9.6vw;text-align:center}
     .listWrap .check{width:3.5vw;height:3.5vw;line-height:3.5vw;vertical-align:middle}
-    .listWrap .supplierItem .c1{float:left;width:24vw}
+    .listWrap .supplierItem .c1{float:left;width:24vw;position:relative;}
+    .listWrap .c1 span.tip{position:absolute;background:#ff4500;line-height:5vw;height:5vw;padding:0 2vw;white-space:nowrap;font-size:3.1vw;color:#FFF;top:0;left:0}
     .listWrap .supplierItem .image{display:block;box-sizing:border-box;width:24vw;height:24vw;border:1px solid #F7F7F7}
     .listWrap .supplierTit .img{width:7.4vw;height:7.4vw;border:1px solid #F7F7F7;margin-right:2vw}
     .listWrap .supplierTit .name{color:#9aa5b5}

src/main/resources/static/css/user-center/order/detail.css

@@ -26,73 +26,42 @@ li{list-style:none}
     .order-container .title a .icon{display: block;width: 18px;height: 18px;position: absolute;top: 5px;right: 10px;}
     .order-container .title a .icon:before{width: 18px;height: 18px;background-position: -304px -32px;}
     .order-container .section{width: 100%;height: auto;}
-    .order-container .section .section-info {margin-bottom: 10px;box-sizing: border-box;height: 217px;padding-left: 68px;padding-top: 10px;padding-right: 20px;background-color: #FFFFFF;}
-    .order-container .section .section-info .order-title{width: 100%;height: 40px;position: relative;float: left;margin-bottom: 0;}
-    .order-container .section .section-info .order-title .bag{display: block;position: absolute;left: -45px;top: 12px; width: 36px;height: 16px;background-image: linear-gradient(335deg,#e15616 0%,#ffb496 100%);border-radius: 2px;font-size: 10px;color: #FFFFFF;line-height: 16px;text-align: center;}
-    .order-container .section .section-info .order-title .title-name{float: left;line-height:  40px;font-size: 14px;color: #22272e;}
-    .order-container .section .section-info .order-title .title-name p{float: left;margin-right: 10px;}
+    .order-container .section .section-info {margin-bottom: 10px;box-sizing:border-box;padding:10px 20px;background-color: #FFFFFF;}
+    .order-container .section .section-info .order-title{width:100%;box-sizing:border-box;height:40px;position:relative;padding-left:45px;margin-bottom: 0;}
+    .order-container .section .section-info .order-title .bag{display: block;position: absolute;left:0;top: 12px; width: 36px;height: 16px;background-image: linear-gradient(335deg,#e15616 0%,#ffb496 100%);border-radius: 2px;font-size: 10px;color: #FFFFFF;line-height: 16px;text-align: center;}
+    .order-container .section .section-info .order-title .title-name{line-height:  40px;font-size: 14px;color: #22272e;}
+    .order-container .section .section-info .order-title .title-name p{display:inline-block;margin-right:10px;}
     .order-container .section .section-info .order-title .title-name p.state{color: #E15616;margin-left: 10px;font-weight: normal;}
-    .order-container .section .section-info .order-title .title-type{float: left;width: 40px;height: 40px;background: url("/img/order/second.png")center center no-repeat;background-size: cover;}
-    .order-container .section .section-info .order-title .title-time{float: right;line-height:  40px;font-size: 12px;color: #9aa5b5;}
-    .order-container .section .section-info .order-content{width: 100%;height: auto;float: left;}
-    .order-container .section .section-info .order-content .order-item{width: 100%;height: 36px;float: left;}
-    .order-container .section .section-info .order-content .order-item p{float: left;margin-right: 50px;line-height: 36px;color: #22272e;font-size: 14px;}
-    .order-container .section .section-info .order-content .order-item p.org{margin-right: 20px;}
-    .order-container .section .section-info .order-content .order-item p.copy{float: left;display: block;width: 56px;height: 24px;background-image: linear-gradient(214deg, #ff2929 0%, #ff6d1b 100%);border-radius: 2px;line-height: 24px;text-align: center;font-size: 12px;color: #FFF;margin-top: 6px;cursor: pointer;}
+    .order-container .section .section-info .order-title .title-type{float:left;width:40px;height: 40px;background: url("/img/order/second.png")center center no-repeat;background-size: cover;}
+    .order-container .section .section-info .order-title .title-time{position:absolute;right:0;top:0;line-height:40px;font-size: 12px;color: #9aa5b5;}
+    .order-container .section .section-info .order-content{width:100%;height:auto;}
+    .order-container .section .section-info .order-content .order-item{width:100%;}
+    .order-container .section .section-info .order-content .order-item p{display:inline-block;margin-left:45px;line-height: 36px;color: #22272e;font-size: 14px;}
+    .order-container .section .section-info .order-content .order-item p.org{}
+    .order-container .section .section-info .order-content .order-item p.copy{margin-left:20px;width: 56px;height: 24px;background-image: linear-gradient(214deg, #ff2929 0%, #ff6d1b 100%);border-radius: 2px;line-height: 24px;text-align: center;font-size: 12px;color: #FFF;margin-top: 6px;cursor: pointer;}
     .order-container .section .section-info .order-content .order-item p span{margin-left: 5px;}
     .order-container .section .section-info .order-content .order-item p .red{color: #f94b4b;}
     .order-container .section .section-info .order-content .order-item p .org{color: #e15616;}
     .order-container .section .section-info .order-content .order-item p .none{color:#627386;}
     /*商品信息*/
-    .order-container .section-list{margin-bottom: 10px;width: 100%;height: auto;box-sizing: border-box;float: left;}
-    .order-container .section-shopinfo{width: 100%;height: auto;box-sizing: border-box;float: left;padding: 0 20px 20px 20px;background-color: #FFFFFF;}
+    .order-container .section-list{margin-bottom: 10px;width: 100%;height: auto;box-sizing:border-box;}
+    .order-container .section-shopinfo{width: 100%;height: auto;margin-bottom: 5px;box-sizing: border-box;padding: 0 20px 20px 20px;background-color: #FFFFFF;}
     .order-container .section-shopinfo .title{width: 100%;height: 56px;box-sizing: border-box;padding: 8px 0;border-bottom: 1px solid #e2e7ef;}
     .order-container .section-shopinfo .title .logo{width: 39px;height: 39px;box-sizing: border-box;border: 1px solid #e2e7ef;float: left;display: block;margin-right: 5px;}
     .order-container .section-shopinfo .title .name{line-height: 40px;float: left;font-size: 14px;color: #22272E;text-align: left;margin-right: 20px;}
-    .order-container .section-shopinfo .title .activity{float: left;margin-top: 8px;position: relative;cursor:pointer;line-height: 24px;height:24px;float: left;width: 86px;border-radius: 2px;border: 1px solid rgba(225, 86, 22, 0.3);}
-    .order-container .section-shopinfo .title .activity:before{content: '';width: 100%;height: 3px;background-color: #FFFFFF;display:none;position: absolute;left: 0;bottom: -2px;z-index: 999;}
-    .order-container .section-shopinfo .title .activity .tit{width: 100%;height: 100%;}
-    .order-container .section-shopinfo .title .activity .tit p{line-height: 24px;font-size: 12px;color: #22272E;text-align: left;box-sizing: border-box;color: #e15616;text-align: center;padding-right: 16px;}
-    .order-container .section-shopinfo .title .activity .tit .icon{width: 16px;height: 16px;display: block;position: absolute;top: 4px;right: 4px;}
-    .order-container .section-shopinfo .title .activity .tit .icon:before{width: 16px;height: 16px;background-position: -93px -3px;}
-    .order-container .section-shopinfo .title .activity .action{display:none; min-width: 198px;min-height: 94px;box-sizing: border-box;padding: 10px;border: 1px solid rgba(225, 86, 22, 0.3);background-color: #FFF;position: relative;bottom: 0;left: -1px;border-radius: 2px;}
-    .order-container .section-shopinfo .title .activity .action p{color: #22272E;text-align: left;font-size: 12px;line-height: 20px;}
-    .order-container .section-shopinfo .title .activity .action p .btn{height: 24px;position: absolute;bottom: 0;left: 0;}
-    .order-container .section-shopinfo .title .activity .action p span{cursor: pointer;display: block;float: right;width: 56px;height: 24px;background-color: #e15616;border-radius: 2px;line-height: 24px;text-align: center;font-size: 12px;color: #FFF;}
-    .order-container .section-shopinfo .title .activity .action p.org{color: #e15616;}
-    .order-container .section-shopinfo .title .activity:hover .action{display: block;}
-    .order-container .section-shopinfo .title .activity:hover:before{display: block;}
-    .order-container .section-shopinfo .title .activity.active .action{display:block;}
-    .order-container .section-shopinfo .product{width: 100%;height: auto;float: left;}
-    .order-container .section-shopinfo .section-prosinfo{width: 100%;height: 126px;padding: 16px 0;}
-    .order-container .section-shopinfo .product-t{width: 100%;height: 100px;float: left;}
+    .order-container .section-shopinfo .product{width: 100%;height: auto;}
+    .order-container .section-shopinfo .section-prosinfo{width: 100%;height: 126px;padding: 16px 0 0;}
+    .order-container .section-shopinfo .product-t{width: 100%;min-height: 100px;float: left;}
     .order-container .section-shopinfo .product-t .image{width: 98px;height: 98px;float: left;border: 1px solid #e2e7ef;margin-right: 10px;position: relative;}
     .order-container .section-shopinfo .product-t .image img{width: 98px;height: 98px;display: block;}
     .order-container .section-shopinfo .product-t .image .tip{width: 40px;height: 20px;border-radius: 2px;font-size: 12px;line-height: 20px;text-align: center;display: block;position: absolute;top: 0;left: 0;color: #FFFFFF; background-image: linear-gradient(214deg, #ff4500 0%, #ff5800 53%, #ff4367 100%);}
     .order-container .section-shopinfo .product-t .text{width: 810px;float: left;}
     .order-container .section-shopinfo .product-t .tit{float: left;width: 100%;margin-bottom: 6px;line-height: 22px;font-size: 16px;text-align: left;color: #22272E;}
     .order-container .section-shopinfo .product-t .info{width: 100%;height: auto;float: left;}
-    .order-container .section-shopinfo .product-t .info-l{width: 170px;height: auto;float: left;}
-    .order-container .section-shopinfo .product-t .info p{line-height: 24px;font-size: 14px;color: #627386;text-align: left;}
-    .order-container .section-shopinfo .product-t .info-r{width: auto;height: auto;float: left;}
-    .order-container .section-shopinfo .product-b{width: 100%;height: 26px;float: left;box-sizing: border-box;padding-left:110px;}
-    .order-container .section-shopinfo .product-b p{line-height: 24px;font-size: 14px;color: #627386;text-align: left;}
-    .order-container .section-shopinfo .product-b p .red{color: #FF2A2A;}
-    .order-container .section-shopinfo .info-r .activity{float: left;margin-top: 48px;margin-left: 10px;position: relative;cursor:pointer;line-height: 24px;height:24px;float: left;box-sizing:border-box;padding:0 10px;border-radius: 2px;border: 1px solid rgba(225, 86, 22, 0.3);}
-    .order-container .section-shopinfo .info-r .activity:before{content: '';width: 100%;height: 3px;background-color: #FFFFFF;display: none;position: absolute;left: 0;bottom: -2px;z-index: 999;}
-    .order-container .section-shopinfo .info-r .activity .tit{width: 100%;height: 100%;}
-    .order-container .section-shopinfo .info-r .activity .tit p{line-height: 24px;font-size: 12px;color: #22272E;text-align: left;box-sizing: border-box;color: #e15616;text-align: center;padding-right: 16px;}
-    .order-container .section-shopinfo .info-r .activity .tit .icon{width: 16px;height: 16px;display: block;position: absolute;top: 4px;right: 4px;}
-    .order-container .section-shopinfo .info-r .activity .tit .icon:before{width: 16px;height: 16px;background-position: -93px -3px;}
-    .order-container .section-shopinfo .info-r .activity .action{display:none; min-width: 232px;min-height: 74px;box-sizing: border-box;padding: 10px;border: 1px solid rgba(225, 86, 22, 0.3);background-color: #FFF;position: absolute;bottom: -74px;left: -1px;border-radius: 2px;}
-    .order-container .section-shopinfo .info-r .activity .action p{color: #22272E;text-align: left;font-size: 12px;line-height: 20px;}
-    .order-container .section-shopinfo .info-r .activity .action p .btn{height: 24px;position: absolute;bottom: 0;left: 0;}
-    .order-container .section-shopinfo .info-r .activity .action p span{cursor: pointer;display: block;float: right;width: 56px;height: 24px;background-color: #e15616;border-radius: 2px;line-height: 24px;text-align: center;font-size: 12px;color: #FFF;}
-    .order-container .section-shopinfo .info-r .activity .action p.org{color: #e15616;}
-    .order-container .section-shopinfo .info-r .activity:hover .action{display: block;}
-    .order-container .section-shopinfo .info-r .activity:hover:before{display: block;}
-    .order-container .section-shopinfo .info-r .activity.active .action{display:block;}
-    .order-container .section-shopinfo .shopinfo-bott{width: 100%;height: auto;float: left;box-sizing: border-box;padding-left:110px;line-height: 38px;color: #22272E;}
+    .order-container .section-shopinfo .product-t .info>p{line-height:24px;font-size:14px;color:#627386;text-align:left;display:inline-block;width:30%}
+    .price-total{padding-top:20px;text-align:right;color:#22272e;font-size:16px}
+    .price-total span{color:#f94b4b}
+    .order-container .section-shopinfo .shopinfo-bott{width: 100%;height: auto;box-sizing: border-box;padding-left:110px;line-height: 38px;color: #22272E;    border-top: 1px dashed #F7F7F7;}
     .order-container .section-shopinfo .shopinfo-bott p .red{color: #FF2A2A;}
     .order-container .section-shopinfo .shopinfo-bott .bott-top{width: 100%;float: left;}
     .order-container .section-shopinfo .shopinfo-bott .bott-bot{width: 100%;float: left;}
@@ -107,9 +76,8 @@ li{list-style:none}
     .order-container .section-invoice .tit .icon{width: 24px;height: 24px;display: block;float: right;}
     .order-container .section-invoice .tit .icon:before{width: 24px;height: 24px;background-position: -90px -0px;}
     .order-container .section-invoice .invoice-none{width: 100%;line-height: 24px;font-size: 14px;color: #999999;height: 24px;float: left;box-sizing: border-box;}
-    .order-container .section-invoice .invice-item{width: 100%;height: 36px;float: left;}
-    .order-container .section-invoice .invice-item p{float: left;margin-right: 50px;line-height: 36px;color: #627386;font-size: 14px;}
-    .order-container .section-invoice .invice-item p span{color: #22272E;}
+    .order-container .section-invoice .invoice-content>p{display:inline-block;min-width:49%;line-height: 36px;color: #627386;font-size: 14px;}
+    .order-container .section-invoice .invoice-content p span{color: #22272E;}
     /*转账信息*/
     .section-payment{margin-bottom: 10px;width: 100%;height: auto;box-sizing: border-box;float: left;padding:16px 20px;background-color: #FFFFFF;}
     .payment-transfer{width: 100%;height: auto;}
@@ -120,7 +88,7 @@ li{list-style:none}
     .payment-transfer .payment-transfer-main .label .text{color: #333;float: left;width: 25%;}
     .payment-transfer .payment-transfer-main .label .text-p{color: #333;float: left;}
     .payment-transfer .payment-transfer-main .label .text-p input{border: none;background-color: #FFF;width: 60px;font-size: 14px;color: #333;}
-    .payment-transfer .payment-transfer-main .label .text-p .copy{display: block;width: 56px;height: 24px;background-image: linear-gradient(214deg, #ff2929 0%, #ff6d1b 100%);border-radius: 2px;line-height: 24px;opacity:1;float: left;font-size: 12px;margin-top: 5px;margin-left: 5px;color: #FFF;text-align: center;}
+    .payment-transfer .payment-transfer-main .label .text-p .copy{    display: inline-block;width: 56px;height: 24px;background-image: linear-gradient(214deg, #ff2929 0%, #ff6d1b 100%);border-radius: 2px;line-height: 24px;opacity:1;font-size: 12px;margin-top: 5px;margin-left: 5px;color: #FFF;text-align: center;}
     .payment-transfer .payment-transfer-main .label .label-c{color: #E15616;}
     /*退款记录*/
     .section-paymentlist{margin-bottom: 10px;width: 100%;height: auto;box-sizing: border-box;float: left;padding:10px 20px;background-color: #FFFFFF;}
@@ -166,21 +134,59 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
-.navLayout{background:#FFF;border-top:1px solid #F5F5F5;border-bottom:1px solid #F5F5F5;}
-.navLayout .crumbs{display:none;}
-.navLayout .left{width:29.3vw;border-right:1px solid #F5F5F5;line-height:11.8vw;white-space:nowrap;text-indent:3.3vw;font-size:3.4vw;}
-.navLayout .left .title{color:#22272e;font-weight:bold;border-bottom:1px solid #f5f5f5;font-size: 3.7vw;}
-.navLayout .navList .tab{display:block;color:#22272e;position:relative}
-.navLayout .navList .tab:before{content:'\276F';font-weight:normal;position:absolute;right:1.4vw;top:1vw;transform:rotate(90deg);width:6.4vw;height:6.4vw;line-height:6.4vw;text-align:center;color:#bec2c9}
-.navLayout .navList .con a{display:block;color:#9aa5b5;}
-.navLayout .navList.on .tab:before{top:4vw;transform:rotate(270deg);color:#e15616}
-.navLayout .navList.on .tab{color:#e15616}
-.navLayout .navList .con a.on{color:#e15616;background-color:#ffe6dc}
-.navLayout .right{width:70.5vw}
+    .order-container .section-info,
+    .order-container .section-invoice,
+    .order-container .section-payment{box-sizing:border-box;width:100%;background:#FFF;margin-top:1.5vw;padding:2vw 3.2vw 4vw 3.2vw;font-size:3.2vw;color:#627386;line-height:7vw}
+    .order-container .order-title{position:relative;height:16vw}
+    .order-container .order-title .title-name:nth-of-type(1){padding-left:11.6vw;color:#e15616;font-size:3.5vw;line-height:9vw}
+    .order-container .order-title .bag{position:absolute;left:0;top:2.6vw;width:9.6vw;height:4.2vw;line-height:4.2vw;text-align:center;color:#FFF;background-image:linear-gradient(90deg,#ffb427 0%,#f58e4d 100%);border-radius:2px}
+    .order-container .order-title .state{position:absolute;right:0;bottom:0;color:#e15616}
+    .order-container .order-title .title-time span,.order-container .order-content span{color:#22272e}
+    .order-container .order-item p{display:inline-block;width:49%}
+    .order-container .copy{width:auto!important;display:inline-block;height:6.4vw;line-height:6.4vw;padding:0 3vw;background-image:linear-gradient(214deg,#ff2929 0%,#ff6d1b 100%);border-radius:2px;color:#FFF;margin-left:2vw}
+    .order-container .order-item p.org{width:auto}
+    .order-container .order-item p.org span{color:#e15616}
+    .order-container .order-item p.address{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .section-shopinfo .title{border-bottom:1px solid #F7F7F7;height:7.4vw;line-height:7.4vw;padding:1.3vw 0;position:relative}
+    .section-shopinfo .logo{width:7.4vw;height:7.4vw;border:1px solid #F7F7F7;margin-right:2vw}
+    .section-shopinfo .name{display:inline-block;color:#9aa5b5}
+    .section-shopinfo .title .priceTag{width:22vw;height:6.4vw;position:absolute;right:0;top:2vw}
+    .section-shopinfo .title .priceTag .tag{top:0}
+    .section-shopinfo{width:100%;background:#FFF;color:#9aa5b5;font-size:3.4vw;margin-top:1.5vw;padding:0 3.2vw;box-sizing:border-box}
+    .section-prosinfo{padding:1vw 0 1vw 32.2vw;position:relative;margin-top:2vw}
+    .section-prosinfo .image{width:28vw;position:absolute;left:0;top:0}
+    .section-prosinfo .image img{width:28vw;height:28vw}
+    .section-prosinfo .image .tip{position:absolute;background:#ff4500;line-height:5vw;height:5vw;padding:0 2vw;white-space:nowrap;font-size:3.1vw;color:#FFF;top:0;left:0}
+    .section-prosinfo .text .tit{max-height:10.4vw;line-height:5.2vw;color:#22272e;font-size:3.7vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+    .section-prosinfo .text .info{position:relative}
+    .section-prosinfo .text .info .priceTag .tag{position:absolute;right:0;top:auto;left:auto;}
+    .section-prosinfo .text .info>p{display:inline-block;min-width:48%;font-size:3.1vw;color:#627386}
+    .section-prosinfo .text .price{font-size:3.4vw;color:#627386}
+    .section-prosinfo .text .price .red{color:#f94b4b}
+    .shopinfo-bott{border-top:1px solid #F7F7F7;width:100%;box-sizing:border-box;margin:0 auto;line-height:10.6vw;color:#22272e;font-size:3.4vw;text-align:right;padding:0 3.2vw}
+    .shopinfo-bott p{display:inline-block;margin-left:3vw}
+    .shopinfo-bott p .red{color:#627386}
+    .shopinfo-bott .bott-bot{text-align:left;line-height:6vw;color:#627386;padding-bottom:2vw}
+    .shopinfo-bott .bott-bot p{margin:0}
+    .section-invoice p{font-size:3.4vw;color:#627386;line-height:5vw;padding:1.6vw 0}
+    .section-invoice p span{color:#22272e}
+    .section-invoice .tit p{font-size:3.7vw;color:#22272e}
+    .price-total{padding:3vw;text-align:right;color:#22272e;font-size:3.4vw}
+    .price-total span{color:#f94b4b}
+    .payment-transfer{color:#22272e}
+    .payment-transfer .label>p{font-size:3.4vw;color:#22272e;line-height:5vw;padding:1.6vw 0}
+    .payment-transfer .label .label-title{font-size:3.1vw;color:#e15616}
+    .payment-transfer .label .label-t{color:#627386}
+    .payment-transfer .label .label-c{color:#1890f9;font-size:3.1vw}
+    .payment-transfer .label>p .red{color:#e15616}
+    .record-title,.record-empty{width:100%;box-sizing:border-box;font-size:3.4vw;margin-top:1.5vw;padding:3.2vw;background:#FFF;color:#22272e}
+    .record-title span{color:#f94b4b}
+    .section-botton{margin-top:1.5vw}
+    .section-botton .btn{display:block;width:93.4vw;height:11.2vw;line-height:11.2vw;font-size:3.7vw;text-align:center;background-color:#ffe6dc;border-radius:2px;border:1px solid #e15616;margin:0 auto 2.6vw auto;color:#e15616}
+    .section-botton .primary{color:#FFF;Background:#e15616}
 
 
 
 
 
 }
-

src/main/resources/static/js/base.js

@@ -180,13 +180,19 @@ $(function(){
             looseBody();
         });
         $('body').on("click", '#centerNav .home',function () {
-            $('#centerNav').find('.home').toggleClass("on");
-            $('#centerNav').find('.centerBox').slideToggle();
-            fixedBody();
+            if($('#centerNav').find('.home').hasClass("on")){
+                $('#centerNav').find('.home').removeClass("on");
+                $('#centerNav').find('.centerBox').slideUp();
+                looseBody();
+            }else{
+                $('#centerNav').find('.home').addClass("on");
+                $('#centerNav').find('.centerBox').slideDown();
+                fixedBody();
+            }
         }).on("click", '#centerNav .wrap',function (e) {
             e.stopPropagation();
         }).on("click", '#centerNav .centerBox',function () {
-             $('#centerNav').find('.home').removeClass("on");
+            $('#centerNav').find('.home').removeClass("on");
             $('#centerNav').find('.centerBox').slideUp();
             looseBody();
         });

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

@@ -382,7 +382,7 @@ var shoppingConfirm = new Vue({
                 CAIMEI.dialog('请先添加收货地址～');
                 return false;
             }
-            if(this.invoice.type === 1){
+            if(this.invoice.type*1 === 1){
                 // 普通发票
                 if(!this.invoice.invoiceTitle){
                     CAIMEI.dialog('请输入个人抬头');return false;
@@ -390,7 +390,7 @@ var shoppingConfirm = new Vue({
                 if(this.invoice.invoiceTitleType===1 && !this.invoice.corporationTaxNum){
                     CAIMEI.dialog('请输入纳税人识别号');return false;
                 }
-            }else if(this.invoice.type === 2){
+            }else if(this.invoice.type*1 === 2){
                 // 增值税发票
                 if(!this.invoice.invoiceTitle){
                     CAIMEI.dialog('请输入个人抬头');return false;
@@ -418,11 +418,13 @@ var shoppingConfirm = new Vue({
                 clubUserId: this.userId,   // 机构用户ID
                 addressId: this.address.id,// 地址ID
                 orderInfo: [],             // 商品信息
-                payInfo: {},     // 订单信息
-                orderInvoice: {type: 0}    // 默认不开发票
+                payInfo: {},               // 订单信息
+                orderInvoice: {}           // 发票信息
             };
             // 发票信息
-            if(this.invoice.type === 1){
+            if(this.invoice.type*1 === 0){
+                params.orderInvoice =  {type: 0};
+            }else if(this.invoice.type*1 === 1){
                 params.orderInvoice = {
                    type: 1,  // 普通发票
                    invoiceContent: '商品明细',
@@ -430,7 +432,7 @@ var shoppingConfirm = new Vue({
                    invoiceTitle: this.invoice.invoiceTitle,         //发票抬头
                    corporationTaxNum: this.invoice.corporationTaxNum//纳税人识别号
                 }
-            }else if(this.invoice.type === 2){
+            }else if(this.invoice.type*1 === 2){
                 params.orderInvoice = {
                    type: 2,  // 增值税发票
                    invoiceTitle: this.invoice.invoiceTitle,          //单位名称

src/main/resources/static/js/user-center/order/detail.js

@@ -208,6 +208,21 @@ var orderPage = new Vue({
         toFixedFn:function(text){//处理小数点后两位数
             return Number(text).toFixed(2);
         },
+        toggleThisLadder: function(event){
+            var el = event.currentTarget;
+            if($(el).hasClass("on")){
+                $(el).removeClass("on").siblings('.mFixed').hide();
+                if(!isPC){looseBody();}
+            }else{
+                $(el).addClass("on").siblings('.mFixed').show();
+                if(!isPC){fixedBody();}
+            }
+        },
+        hideThisLadder: function(event){
+            var el = event.currentTarget;
+            $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
+            if(!isPC){looseBody();}
+        },
     },
     mounted: function () {
         if(globalUserData){

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

@@ -131,6 +131,7 @@
                 <div class="cartItem clear"  v-for="cart in supplier.cartList" >
                     <div class="c1"><a :href="'/product-'+cart.productId+'.html'" target="_blank">
                         <img class="image" :src="cart.image">
+                        <span v-if="cart.productType==2" class="tip">赠品</span>
                     </a></div>
                     <div class="c2">
                         <a class="name" :href="'/product-'+cart.productId+'.html'" target="_blank">

src/main/resources/templates/user-center/order/detail.html

@@ -42,7 +42,7 @@
                                 </div>
                                 <div class="title-type" v-if="orderInfo.secondHandOrderFlag == 1"></div>
                                 <div class="title-time">
-                                    <p>{{orderInfo.orderTime}}</p>
+                                    <p>下单时间：<span>{{orderInfo.orderTime}}</span></p>
                                 </div>
                             </div>
                             <div class="order-content">
@@ -51,27 +51,27 @@
                                     <p class="copy" @click="copyOrderBtnSubmitFn">复制</p>
                                 </div>
                                 <div class="order-item">
-                                    <p>收货人:<span class="none">{{userInfo.shouHuoRen}}</span> </p>
-                                    <p>电话:<span class="none">{{userInfo.mobile}}</span> </p>
-                                    <p>地址:<span class="none">{{userInfo.province}}{{userInfo.city}}{{userInfo.town}}{{userInfo.address}}</span> </p>
+                                    <p>收货人：<span class="none">{{userInfo.shouHuoRen}}</span> </p>
+                                    <p>电话：<span class="none">{{userInfo.mobile}}</span> </p>
+                                    <p class="address">地址：<span class="none">{{userInfo.province}}{{userInfo.city}}{{userInfo.town}}{{userInfo.address}}</span> </p>
                                 </div>
                                 <div class="order-item">
-                                    <p>订单总额:<span class="red">￥{{orderInfo.payTotalFee | NumFormat}}</span> </p>
-                                    <p>应付总额:
+                                    <p>订单总额：<span class="red">￥{{orderInfo.payTotalFee | NumFormat}}</span> </p>
+                                    <p>应付总额：
                                         <span class="red">￥{{orderInfo.payableAmount | NumFormat}}</span>
-                                        <span class="none" v-if="orderInfo.balancePayFee>0">(账户余额抵扣:￥{{orderInfo.balancePayFee | NumFormat}})</span>
+                                        <span class="none" v-if="orderInfo.balancePayFee>0">(账户余额抵扣：￥{{orderInfo.balancePayFee | NumFormat}})</span>
                                     </p>
-                                    <p>已支付:<span class="red">￥{{orderInfo.receiptAmount | NumFormat}}</span> </p>
-                                    <p>待付金额:<span class="red">￥{{orderInfo.pendingPayments | NumFormat}}</span> </p>
+                                    <p>已支付：<span class="red">￥{{orderInfo.receiptAmount | NumFormat}}</span> </p>
+                                    <p>待付金额：<span class="red">￥{{orderInfo.pendingPayments | NumFormat}}</span> </p>
                                 </div>
                                 <div class="order-item">
-                                    <p>税费: <span class="none">￥{{orderInfo.expensesOfTaxation | NumFormat}}</span> </p>
-                                    <p v-if="orderInfo.freePostFlag == '0'">运费:<span class="none">包邮</span> </p>
-                                    <p v-if="orderInfo.freePostFlag == '-1'">运费:<span class="none">到付</span> </p>
-                                    <p v-if="orderInfo.freePostFlag == '1'">运费:<span class="none">￥{{orderInfo.freight | NumFormat}}</span> </p>
-                                    <p v-if="orderInfo.discountFee!=0">经理折扣:<span class="none">￥{{orderInfo.discountFee | NumFormat}}</span> </p>
-                                    <p>促销满减:<span class="none">￥{{orderInfo.payTotalFee | NumFormat}}</span> </p>
-                                    <p>赠品数: <span class="none">{{orderInfo.presentCount}}</span></p>
+                                    <p>税费： <span class="none">￥{{orderInfo.expensesOfTaxation | NumFormat}}</span> </p>
+                                    <p v-if="orderInfo.freePostFlag == '0'">运费：<span class="none">包邮</span> </p>
+                                    <p v-if="orderInfo.freePostFlag == '-1'">运费：<span class="none">到付</span> </p>
+                                    <p v-if="orderInfo.freePostFlag == '1'">运费：<span class="none">￥{{orderInfo.freight | NumFormat}}</span> </p>
+                                    <p v-if="orderInfo.discountFee!=0">经理折扣：<span class="none">￥{{orderInfo.discountFee | NumFormat}}</span> </p>
+                                    <p>促销满减：<span class="none">￥{{orderInfo.payTotalFee | NumFormat}}</span> </p>
+                                    <p>赠品数：<span class="none">{{orderInfo.presentCount}}</span></p>
                                 </div>
                             </div>
                         </div>
@@ -80,82 +80,111 @@
                                 <div class="title">
                                     <img :src="shop.shopLogo" alt="" class="logo">
                                     <p class="name">{{shop.shopName}}</p>
-                                    <div class="activity">
-                                        <div class="tit"><p>店铺满减</p><i class="icon mIcon"></i></div>
-                                        <div class="action">
-                                            <p class="org">全店铺:满1000.00,减500.00</p>
-                                            <p>促销时间:不限时</p>
-                                            <p class="btn"><span>了解</span></p>
+                                    <!--店铺促销-->
+                                    <div v-if="shop.shopPromotion" class="priceTag">
+                                        <i @click="toggleThisLadder($event)" class="tag icon mIcon" v-text="shop.shopPromotion.name"></i>
+                                        <div class="promotion mFixed">
+                                            <div>
+                                                <p class="t">
+                                                    <em v-if="shop.shopPromotion.mode==2">{{shop.shopPromotion.name+'，满 ¥'+toFloat(shop.shopPromotion.touchPrice)+' 减 ¥'+toFloat(shop.shopPromotion.reducedPrice)}}</em>
+                                                    <em v-if="shop.shopPromotion.mode==3">{{shop.shopPromotion.name+'，满 ¥'+toFloat(shop.shopPromotion.touchPrice)+' 赠送商品'}}</em>
+                                                </p>
+                                                <p>促销时间：<em v-if="shop.shopPromotion.status==1">不限时</em><em v-else>{{shop.shopPromotion.beginTime.substr(0,10)+' ~ '+shop.shopPromotion.endTime.substr(0,10)}}</em></p>
+                                                <template v-if="shop.shopPromotion.mode==3">
+                                                    <p>赠品：</p>
+                                                    <p>
+                                                        <span v-for="g in shop.shopPromotion.giftList" class="p">
+                                                            <img :src="g.image">
+                                                            <span v-text="g.name"></span>
+                                                            <span v-text="'× '+g.number"></span>
+                                                        </span>
+                                                    </p>
+                                                </template>
+                                                <p class="c"><a class="close" @click="hideThisLadder($event)" href="JavaScript:void(0);">了解</a></p>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="product">
                                     <div class="section-prosinfo" v-for="(pros, pIndex) in shop.orderProductList" :key="pIndex">
-                                        <div class="product-t">
+                                        <div class="product-t clear">
                                             <div class="image">
                                                 <img :src="pros.productImage" alt="">
-                                                <span class="tip">赠品</span>
+                                                <span v-if="pros.productType==2||pros.productType==1" class="tip">赠品</span>
                                             </div>
                                             <div class="text">
                                                 <p class="tit">{{pros.name}}</p>
                                                 <div class="info">
-                                                    <div class="info-l">
-                                                        <p v-if="pros.productCategory != 2">规格:<span class="none">{{pros.productUnit ? pros.productUnit : ''}}</span> </p>
-                                                        <p>数量:<span class="none">{{pros.num}}</span> </p>
-                                                        <p>单价:<span class="none">￥{{pros.price | NumFormat}}</span> </p>
-                                                    </div>
-                                                    <div class="info-r">
-                                                        <p>税率:<span class="none">{{pros.taxRate}}%</span></p>
-                                                        <p>折扣:<span class="none">{{pros.discount == null ? '0' : pros.discount}}%</span></p>
-                                                        <p>折后单价:<span class="none">￥{{pros.discountPrice | NumFormat}}</span></p>
-                                                    </div>
-                                                    <div class="info-r">
-                                                        <div class="activity">
-                                                            <div class="tit">
-                                                                <p>优惠价:￥<span>1200.00</span></p><i class="icon mIcon"></i></div>
-                                                            <div class="action">
-                                                                <p>促销时间:2020.6.28~2020.9.30</p>
-                                                                <p class="btn"><span>了解</span></p>
+                                                    <p v-if="pros.productCategory != 2">规格：<span class="none">{{pros.productUnit ? pros.productUnit : ''}}</span> </p>
+                                                    <p>数量：<span class="none">{{pros.num}}</span> </p>
+                                                    <p>单价：<span class="none">￥{{pros.price | NumFormat}}</span> </p>
+                                                    <p>税率：<span class="none">{{pros.taxRate}}%</span></p>
+                                                    <p>折扣：<span class="none">{{pros.discount == null ? '0' : pros.discount}}%</span></p>
+                                                    <p>折后单价：<span class="none">￥{{pros.discountPrice | NumFormat}}</span></p>
+                                                    <!-- 促销活动 -->
+                                                    <div v-if="pros.productPromotion" class="priceTag">
+                                                        <i v-if="pros.productPromotion.type==1 && pros.productPromotion.mode==1" @click="toggleThisLadder($event)" class="tag icon mIcon" v-text="pros.productPromotion.name+'：¥'+toFloat(pros.productPromotion.touchPrice)"></i>
+                                                        <i v-else class="tag icon mIcon" @click="toggleThisLadder($event)" v-text="pros.productPromotion?pros.productPromotion.name:''"></i>
+                                                        <div class="promotion mFixed">
+                                                            <div>
+                                                                <p class="t">
+                                                                    <em v-if="pros.productPromotion.type==1 && pros.productPromotion.mode==1">{{pros.productPromotion.name+'：¥'+toFloat(pros.productPromotion.touchPrice)}}</em>
+                                                                    <em v-if="pros.productPromotion.mode==2">{{pros.productPromotion.name+'，满 ¥'+toFloat(pros.productPromotion.touchPrice)+' 减 ¥'+toFloat(pros.productPromotion.reducedPrice)}}</em>
+                                                                    <em v-if="pros.productPromotion.mode==3">{{pros.productPromotion.name+'，满 ¥'+toFloat(pros.productPromotion.touchPrice)+' 赠送商品'}}</em>
+                                                                </p>
+                                                                <p>促销时间：<em v-if="pros.productPromotion.status==1">不限时</em><em v-else>{{pros.productPromotion.beginTime.substr(0,10)+' ~ '+pros.productPromotion.endTime.substr(0,10)}}</em></p>
+                                                                <template v-if="pros.productPromotion.mode==3">
+                                                                    <p>赠品：</p>
+                                                                    <p>
+                                                                        <span v-for="g in pros.productPromotion.giftList" class="p">
+                                                                            <img :src="g.image">
+                                                                            <span v-text="g.name"></span>
+                                                                            <span v-text="'× '+g.number"></span>
+                                                                        </span>
+                                                                    </p>
+                                                                </template>
+                                                                <p class="c"><a class="close" @click="hideThisLadder($event)" href="JavaScript:void(0);">了解</a></p>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
+                                                <div class="price">
+                                                    <p>合计: <span class="red">￥{{pros.totalFee | NumFormat}}</span></p>
+                                                </div>
                                             </div>
                                         </div>
-                                        <div class="product-b">
-                                            <p>合计: <span class="red">￥{{pros.totalFee | NumFormat}}</span></p>
-                                        </div>
                                     </div>
                                 </div>
-                                <div class="shopinfo-bott">
+                                <div class="shopinfo-bott clear">
                                     <div class="bott-top">
-                                        <p class="count">共计  <span class="red">{{shop.itemCount}}</span>商品</p>
-                                        <p class="total">合计: <span class="red">￥{{shop.totalAmount | NumFormat}}</span></p>
+                                        <p class="count">共<span class="red">{{shop.itemCount}}</span>件商品</p>
+                                        <p class="total">合计：<span class="red">￥{{shop.totalAmount | NumFormat}}</span></p>
                                     </div>
-                                    <div class="bott-bot" v-if="shop.note!=''">
-                                         <p>备注: <span>{{shop.note ? shop.note : ''}}</span></p>
+                                    <div v-if="shop.note" class="bott-bot">
+                                         <p>备注: <span>{{shop.note ? shop.note : '无'}}</span></p>
                                     </div>
                                 </div>
                             </div>
+                            <div class="section-shopinfo">
+                                <p class="price-total">待付金额：<span class="red">￥{{orderInfo.pendingPayments | NumFormat}}</span> </p>
+                            </div>
                         </div>
                         <div class="section-invoice shadow">
-                            <div class="tit"><p>发票信息</p><i class="icon mIcon" v-if="orderInvoice != null"></i></div>
-                            <div class="invoice-none" v-if="orderInvoice != null">
-                                <p>不开发票</p>
+                            <div class="tit"><p>发票信息</p><!--<i class="icon mIcon"></i>--></div>
+                            <div class="invoice-content" v-if="orderInvoice&&orderInvoice.type==2">
+                                <p>公司抬头: <span>{{orderInvoice.invoiceTitle}}</span></p>
+                                <p>纳锐人识别号: <span>{{orderInvoice.corporationTaxNum}}}</span></p>
+                                <p>注册地址: <span>{{orderInvoice.registeredAddress}}</span></p>
+                                <p>注册电话: <span>{{orderInvoice.registeredPhone}}</span></p>
+                                <p>开户银行: <span>{{orderInvoice.openBank}}</span></p>
+                                <p>银行账号: <span>{{orderInvoice.bankAccountNo}}</span></p>
                             </div>
-                            <div class="invoice-content" v-else>
-                                <div class="invice-item">
-                                    <p>公司抬头: <span>采美信息技术有限公司</span></p>
-                                    <p>纳锐人识别号: <span>430527199206186615</span></p>
-                                </div>
-                                <div class="invice-item">
-                                    <p>注册地址: <span>广东省深圳市福田区上步</span></p>
-                                    <p>注册电话: <span>0755-2190777</span></p>
-                                </div>
-                                <div class="invice-item">
-                                    <p>开户银行: <span>农业银行</span></p>
-                                    <p>银行账号: <span>6228481456743154778</span></p>
-                                </div>
+                            <div class="invoice-content" v-if="orderInvoice&&orderInvoice.type==1">
+                                <p>发票类型: <span>普通发票（{{orderInvoice.invoiceTitleType==1?'公司':'个人'}}）</span></p>
+                                <p>发票抬头: <span>{{orderInvoice.invoiceTitle}}</span></p>
+                            </div>
+                            <div class="invoice-none" v-else>
+                                <p>不开发票</p>
                             </div>
                         </div>
                         <div class="section-payment shadow">
@@ -169,22 +198,21 @@
                                         <P class="text">户名：周仁声</P>
                                     </div>
                                     <div class="label">
-                                        <P class="text-p">订单标识：{{orderIdentificationId}}</P>
-                                        <P class="text-p"><a href="javascript: void(0);" class="copy" @click="copyOrderBtnSubmitFn">复制</a></P>
+                                        <P class="text-p">订单标识：<span class="red">{{orderIdentificationId}}</span><a href="javascript: void(0);" class="copy" @click="copyOrderBtnSubmitFn">复制</a></P>
                                     </div>
                                     <div class="label"><P class="label-t">特别注意</P></div>
                                     <div class="label"><P class="label-c">请在转账备注中填写上述订单标识，方便财务快速审核，提高发货速度</P></div>
                                 </div>
                             </div>
                         </div>
-                        <div class="section-paymentlist shadow" v-if ='orderInfo.receiptAmount >0 '>
-                            <div class="record-title">
+                        <div class="section-paymentlist shadow" v-if='orderInfo.receiptAmount>0' >
+                            <div class="record-title mfbt">
                                 <div class="record-title-l">支付记录</div>
                                 <div class="record-title-r">
                                     已支付：<span class="red">￥{{ orderInfo.receiptAmount != null ? orderInfo.receiptAmount.toFixed(2) : '0.00'}}</span>
                                 </div>
                             </div>
-                            <div class="record-list" v-if="discernReceiptList.length > 0">
+                            <div class="record-list" v-if="discernReceiptList.length>0">
                                 <div class="record-item" v-for="(item,index) in discernReceiptList" :key="index">
                                     <div class="item-time mm">￥{{item.associateAmount | NumFormat}}</div>
                                     <div class="item-time pp">{{item.payType}}</div>
@@ -195,14 +223,14 @@
                                 <p>暂无支付记录</p>
                             </div>
                         </div>
-                        <div class="section-paymentlist shadow" v-if ='orderInfo.returnedPurchaseFee != null'>
+                        <div class="section-paymentlist shadow" v-if='orderInfo.returnedPurchaseFee != null'>
                             <div class="record-title">
                                 <div class="record-title-l">退款记录</div>
                                 <div class="record-title-r">
                                     已退款：<span class="red">￥{{ orderInfo.returnedPurchaseFee != null ? orderInfo.returnedPurchaseFee.toFixed(2) : '0.00'}}</span>
                                 </div>
                             </div>
-                            <div class="record-list" v-if="returnedPurchaseList.length > 0">
+                            <div class="record-list" v-if="returnedPurchaseList.length>0">
                                 <div class="record-item" v-for="(item,index) in returnedPurchaseList" :key="index">
                                     <div class="item-rec mm">{{item.returnedWay =='4' ? '无支付无退款' : '￥'+item.refundFee.toFixed(2)}}</div>
                                     <div class="item-rec tt">{{item.confirmReturnTime}}</div>
@@ -263,7 +291,7 @@
                     <p>开户行：中信银行（深圳泰然支行）</p>
                     <p>银行卡号：6217 6803 0362 0897</p>
                     <p>户名：周仁声</p>
-                    <p>订单标识：{{orderIdentificationId}}}<span class="copy" id="copyOrderBtn" @click="copyOrderBtnSubmitFn">复制</span></p>
+                    <p>订单标识：<span class="red">{{orderIdentificationId}}}</span><span class="copy" id="copyOrderBtn" @click="copyOrderBtnSubmitFn">复制</span></p>
                     <p class="red">请在转账备注中填写上述订单标识，方便财务快速审核，提高发货速度</p>
                 </div>
             </div>