卖家中心查看分期付款情况页面。

src/main/webapp/resources/view/vendor/forstore/vendor_order.html

@@ -269,7 +269,7 @@
 		top: 27px;
 		z-index: 155;
 		width: 140px;
-		border: 2px solid #3A75E6;
+		border: 1px solid #3A75E6;
 		padding: 5px 10px;
 		color: #1C54CA;
 	}
@@ -608,6 +608,108 @@
 	.border-bt-16:nth-of-type(1){
 		border-top: none;
 	}
+	/*补充*/
+	.operate-height{
+		position: relative;
+		color: #333 !important;
+	}
+	.operate-height .ship-btn:hover + .ship-content,.operate-height .ship-btn:hover + .pay{
+		display: inline-block !important;
+	}
+	.ship-content,.pay{
+		display: none;
+		width: 165px;
+	}
+	.ship-content .content{
+		font-size: 12px;
+		color: #333;
+		padding: 5px;
+	}
+	.pay{
+		min-width: 275px;
+		right: 0;
+		left: -54px;
+		padding: 0;
+	}
+	.pay .arrow{
+		right: 34px;
+		left: 127px;
+	}
+	.pay .content{
+		padding: 0;
+		margin: 0;
+	}
+	.pay .content .title{
+		width: 100%;
+		height: 28px;
+		text-align: center;
+		line-height: 28px;
+		background: #f6f9ff;
+		font-size: 14px;
+	}
+	.pay .content .title em{
+		font-weight: bold;
+		color: #333;
+	}
+	.color999{
+		color: #999 !important;
+	}
+	.color333{
+		color: #333 !important;
+	}
+	.red{
+		color: #f00 !important;
+	}
+	.pay .content ul{
+		width: 100%;
+		margin: 0 auto;
+		display: inline-block;
+		padding-top: 5px;
+	}
+	.pay .content ul li{
+		width: 100%;
+		float: left;
+		height: 20px;
+		line-height: 20px;
+		font-size: 12px;
+	}
+	.pay .content ul li em{
+		width: 14px;
+		height: 14px;
+		display: inline-block;
+		border-radius: 100%;
+		line-height: 14px;
+		color: #fff;
+		background: #5078cb;
+		float: left;
+		position: relative;
+		top: 3px;
+		margin-left: 20px;
+		text-align: left;
+		padding-left: 3px;
+	}
+	.pay .content ul li div{
+		float: left;
+		margin: 0 5px;
+	}
+	.pay .content ul li div.price{
+		color: #f00;
+		max-width: 105px;
+		text-align: left;
+	}
+	.pay .content ul li div.status{
+		color: #5078cb;
+	}
+	.pay .content .tip-01{
+		width: 100%;
+		height: 28px;
+		line-height: 28px;
+		background: #eff0f2;
+		font-size: 12px;
+	}
+	.sellOder .oder_list .click_shop a{
+		text-decoration: none;
+	}
 </style>
 <div class="user_right fr">
 	<!--订单中心-->
@@ -800,7 +902,50 @@
 						<span ng-bind="detail.ensurePrice | formateNumber : 6 | currencySysmbol : detail.currencyName"></span>
 						<span class="border01 click_shop">
                             <div ng-if="$index == 0">
-                                <em ng-bind="purchase.status | VendorStatusFilter"></em><br/>
+                                <a class="operate-height">
+									<em ng-bind="purchase.status | VendorStatusFilter">待买家付款</em>
+									<!--分期付款-->
+								  <div class="ship-btn seller-ship-tip" style="position: absolute;right: -15px;top: -1px;">
+                                     <img src="static/img/common/notice-tip.png"/>
+                                  </div>
+                                  <div class="pay ship-content ship-notify">
+                                      <div class="arrow"></div>
+                                      <div class="content">
+										  <div class="title">货款共计
+											  <em>￥9000</em>
+											  &nbsp;&nbsp;&nbsp;&nbsp;分
+											  <em style="color: #5078cb;">5</em> 期
+										  </div>
+										  <ul>
+											  <li>
+												  <em>1</em>
+												  <div class="color333 price">￥13131</div>
+												  <div class="color999 time">2017-15-12前</div>
+												  <div class="color333 status">已付</div>
+											  </li>
+											  <li>
+												  <em>2</em>
+												  <div class="color333 price">￥13131</div>
+												  <div class="color999 time">2017-15-12前</div>
+												  <div class="color333 status">已付</div>
+											  </li>
+											  <li>
+												  <em>3</em>
+												  <div class="price">￥13131</div>
+												  <div class="time">2017-15-12前</div>
+												  <div class="status">代付</div>
+											  </li>
+											  <li>
+												  <em>4</em>
+												  <div class="price">￥13131</div>
+												  <div class="time">2017-15-12前</div>
+												  <div class="status">代付</div>
+											  </li>
+									  </ul>
+										<div class="tip-01"><em class="red">*</em> 若第一期款项逾期未付，卖家有权利取消订单</div>
+									 </div>
+                                  </div><br/>
+								</a>
                                 <a href="vendor#/purchase/detail/{{purchase.purchaseid | EncryptionFilter}}" class="oder_d action-link" target="_blank">订单详情</a><br/>
                                 <em ng-if="purchase.buyerNotifyShip && (purchase.status == 502 || purchase.status == 406)" style="display: block;">买家催促发货</em>
                                 <a class="oder_d action-link" href="vendor#/logistics/query/{{purchase.purchaseid | EncryptionFilter}}" ng-if="purchase.status == 404 || purchase.status == 520 || purchase.status == 405 || purchase.status == 503 || purchase.status == 514" target="_blank">查看物流</a>
@@ -874,7 +1019,242 @@
 		</ul>
 	</div>-->
 </div>
-
+<!--确认收款-->
+<div class="confirm-Payment-box">
+	<div class="head"><a ng-click="">&times;</a></div>
+	<div class="content">
+		<div class="title">
+			<i class="fa fa-exclamation-circle"></i>
+			买家于2017-02-03 13:14:20上传新单据，<br/>
+			&nbsp;&nbsp;&nbsp;&nbsp;合计支付金额 <em>￥452658.12</em>
+		</div>
+		<div class="payment-upload-list">
+			<div class="item">
+				<div class="img-list">
+					<div class="prev"><i class="fa fa-angle-left"></i></div>
+					<div class="img">
+						<div class="number"><em>第一期</em></div>
+						<div class="list">
+							<span><img src="static/img/icon/img.png" /></span>
+							<div class="hover-show">
+								<!-- 图片预览 -->
+								<a ng-click=""><i class="fa fa-search"></i>查看</a>
+							</div>
+						</div>
+					</div>
+					<div class="next"><i class="fa fa-angle-right"></i></div>
+				</div>
+				<div class="small-img">
+					<span class="active"><img src="static/img/icon/payment-upload.png" /></span>
+					<span><img src="static/img/icon/payment-upload.png" /></span>
+					<span><img src="static/img/icon/payment-upload.png" /></span>
+					<span><img src="static/img/icon/payment-upload.png" /></span>
+					<span><img src="static/img/icon/payment-upload.png" /></span>
+					<span><img src="static/img/icon/payment-upload.png" /></span>
+				</div>
+			</div>
+		</div>
+		<div class="tip"><em>*</em> 若未收到货款，请勿点击【确认收款】</div>
+		<div class="deal-btn-box">
+			<button class="off">取消</button>
+			<button class="ok">确认收款</button>
+		</div>
+	</div>
+</div>
+<style>
+	.confirm-Payment-box{
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		margin: -162px 0 0 -183px;
+		width: 366px;
+		height: 324px;
+		background-color: rgba(255, 255, 255, 1);
+		box-shadow: 0px 3px 7px 0px
+		rgba(0, 0, 0, 0.19);
+		border-radius: 5px 5px 5px 5px;
+	}
+	.confirm-Payment-box .head{
+		width: 100%;
+		height: 20px;
+		line-height: 20px;
+	}
+	.confirm-Payment-box .head a{
+		color: #dfdddd;
+		float: right;
+		margin-right: 6px;
+		font-size: 16px;
+	}
+	.confirm-Payment-box .content .title{
+		width: 100%;
+		height: 34px;
+		font-size: 14px;
+		line-height: 18px;
+		padding-left: 43px;
+	}
+	.confirm-Payment-box .content .title i{
+		color: #5078cb;
+		font-size: 18px;
+	}
+	.confirm-Payment-box .content .title em{
+		color: #ea1010;
+	}
+	.confirm-Payment-box .content .tip{
+		width: 100%;
+		margin: 0 auto;
+		height: 13px;
+		font-size: 12px;
+		text-align: center;
+	}
+	.confirm-Payment-box .content .tip em{
+		color: #ea1010;
+	}
+	.confirm-Payment-box .content .deal-btn-box{
+		width: 100%;
+		margin: 0 auto;
+		text-align: center;
+		margin-top: 18px;
+	}
+	.confirm-Payment-box .content .deal-btn-box button{
+		border: none;
+		background: #5078cb;
+		height:26px;
+		line-height: 26px;
+		font-size: 14px;
+		text-align: center;
+		color: #fff;
+	}
+	.confirm-Payment-box .content .deal-btn-box button:hover{
+		background: #337ab7;
+	}
+	.confirm-Payment-box .content .deal-btn-box button.off{
+		width: 60px;
+		margin-right: 10px;
+		background: #c8c8c8;
+	}
+	.confirm-Payment-box .content .deal-btn-box button.ok{
+		width: 78px;
+	}
+	/*修改扫描单*/
+	.payment-upload-list{
+		width: 100%;
+		margin: 0 auto;
+		display: inline-block;
+		margin-top: 15px;
+	}
+	.payment-upload-list .item{
+		width: 200px;
+		margin: 0 auto;
+	}
+	.payment-upload-list .item .img-list{
+		width: 100%;
+		height: 152px;
+		margin: 0 auto;
+	}
+	.payment-upload-list .item .img-list div{
+		float: left;
+	}
+	.payment-upload-list .item .img-list .img{
+		width: 152px;
+		height: 152px;
+		border: solid 1px rgb(212, 212, 212);
+		position: relative;
+		overflow: hidden;
+		background: #fff;
+	}
+	.payment-upload-list .item .img-list .number{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 47px;
+		height: 47px;
+		display: inline-block;
+		background: url("static/img/icon/nummber-bg.png") no-repeat center;
+		z-index: 20;
+	}
+	.payment-upload-list .item .img-list .number em{
+		line-height: 30px;
+		font-size: 12px;
+		color: #fff;
+		transform: rotate(-45deg);
+		display: inline-block;
+		position: relative;
+		left: -3px;
+	}
+	.payment-upload-list .item .img-list div.prev,.payment-upload-list .item .img-list div.next{
+		width: 13px;
+		height: 25px;
+		font-size: 38px;
+		position: relative;
+		top: 48px;
+		color: #c9c9c7;
+	}
+	.payment-upload-list .item .img-list div.prev:hover,.payment-upload-list .item .img-list div.next:hover{
+		color: #5078cb;
+	}
+	.payment-upload-list .item .img-list div.prev{
+		margin-right: 6px;
+	}
+	.payment-upload-list .item .img-list div.next{
+		margin-left: 6px;
+	}
+	.payment-upload-list .item .img-list .list,.payment-upload-list .item .img-list .list img{
+		width: 152px;
+		height: 152px;
+		margin: 0 auto;
+		position: relative;
+	}
+	.payment-upload-list .item .img-list .list span{
+		width: 152px;
+		height: 152px;
+		display: inline-block;
+	}
+	.payment-upload-list .item .img-list .list:hover .hover-show{
+		top: 0;
+	}
+	.payment-upload-list .item .small-img{
+		width: 152px;
+		height: 15px;
+		margin: 4px 0 6px 20px;
+	}
+	.payment-upload-list .item  .small-img span{
+		width: 15px;
+		height: 15px;
+		display: inline-block;
+		overflow: hidden;
+		border: #e0dddd 1px solid;
+		background: #e0dddd;
+		float: left;
+		margin-left: 12px;
+	}
+	.payment-upload-list .item  .small-img span:first-child{
+		margin-left: 0;
+	}
+	.payment-upload-list .item .small-img span.active,.payment-upload-list .item .small-img span:hover{
+		border: #5078cb 1px solid;
+	}
+	.payment-upload-list .item .small-img span img{
+		width: 15px;
+		height: 15px;
+	}
+	.payment-upload-list .hover-show{
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 100%;
+		background: rgba(0,0,0,.35);
+	}
+	.payment-upload-list .hover-show a{
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+		font-size: 14px;
+		color: #fff;
+		text-align: center;
+		line-height: 152px;
+	}
+</style>
 <script class="ng-scope">
 	$(function(){
 		//产品字数超过两行时改变样式