完成页面的更新

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

@@ -162,6 +162,10 @@
         text-align: center;
         vertical-align: middle;
     }
+
+
+
+
     .user_r_01{width:100%;height:88px;margin:0 auto;background: #ecf2fd;border:#e8e8e8 1px solid;}
     .user_r_01 dl{width:94%;margin:0 auto;position: relative;}
     .user_r_01 dl dt{width:60px;float: left;margin-right: 20px;}
@@ -366,203 +370,360 @@
         white-space: nowrap;
     }
     <!-- 分页的样式 end-->
+     /*搜索时间筛选*/
+      .screen {
+
+     }
+    .screen .sreach input{
+        border: #5078cb 1px solid;
+        height: 32px;
+        width: 330px;
+        box-shadow: none;
+    }
+    .screen .sreach .date{
+        margin-right: 6px;
+    }
+    .screen .sreach .date input{
+        width: 117px;
+        text-align: left;
+        border: 1px solid #5078cb;
+    }
+    .screen .sreach .date input:hover{
+        cursor: pointer;
+    }
+    .screen .sreach .date em{
+        float: left;
+        line-height: 32px;
+        color: #999;
+        margin: 0 5px;
+    }
+    .screen .sreach a.seek{
+        width: 58px;
+        height: 32px;
+        background: #5078cb;
+        color: #fff;
+        line-height: 32px;
+        float: none;
+    }
+    .screen .sreach a.seek:hover{
+        background: #3f7ae3;
+    }
+    .screen .sreach .form-control{
+        border-radius: 1px;
+    }
+    .data-input{
+        float: left;
+        position: relative;
+    }
+    .data-input button.open{
+        position: absolute;
+        right: 1px;
+        top: 1px;
+        width: 20px;
+        height: 30px;
+        background: url(static/img/user/images/xiala.png) right no-repeat #fff !important;
+        background-position-x: 100% !important;
+        border: none;
+    }
+    .screen .sreach .date input.form-control{
+        padding: 6px 6px;
+    }
+
+    .pay_record .ticket_record_list dl span{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 14.27%!important;
+
+    }
+    .pay_record .ticket_record_list dl span .select-adder {
+        opacity: 1;
+        width: 64px;
+        border-radius: 0;
+        height: 24px;
+        padding: 0 0 0 10px;
+        text-align: center;
+        margin: 0 auto;
+        margin-top: 7px;
+    }
+    .pay_record .ticket_record_list dl dt span {
+        color: #fff;
+        font-weight: normal;
+        font-size: 14px;
+        background: #89aefa;
+    }
+    .pay_record .ticket_record_list dl dd:hover {
+        background: #f1f5ff;
+    }
+    .pay_record .ticket_record_list dl dd span:first-child{
+        border-left: 1px solid #dae5fd;
+    }
+    .pay_record .ticket_record_list dl dd span {
+        color: #666;
+        border-right: 1px solid #dae5fd;
+        border-bottom: 1px solid #dae5fd;
+    }
+    .ticket_record_list{
+        background: none;
+    }
+    .ticket_record_list .total{
+        width:98%;
+        height:39px;
+        background: #e6eefe;
+        display:inline-flex;
+        justify-content: space-around;
+        align-items: center;
+        margin:0 10px;
+    }
+    .ticket_record_list .total span{
+        width:33%
+    }
+    .ticket_record_list .total span:first-child em{
+        color:#f51c24;
+    }
+    .ticket_record_list .total span:nth-child(2) em{
+        color:#1da902;
+    }
+    .ticket_record_list .total span:last-child{
+        font-weight:bold;
+    }
+    .ticket_record_list .total span:last-child em{
+        font-size:12px;
+    }
+    .ticket_record_list .total span b{
+        color:#abc4f7;
+    }
+
+    #pay_center .tab .tab-header {
+        width: 999px;
+        margin: 0 auto;
+        padding: 31px 0 11px 0;
+    }
+    #pay_center .tab .tab-header >span {
+        font-size: 14px;
+        position: relative;
+        bottom: 5px;
+    }
+    #pay_center .tab .tab-header >div {
+        width: auto;
+        text-align: center;
+        float: right;
+        font-size: 12px;
+        margin-right: 32px;
+        cursor: pointer;
+    }
+    #pay_center .tab .tab-header >div i {
+        background: white;
+        color: #32b500;
+        margin-right: 5px;
+        font-size: 14px;
+    }
+
+    #pay_center .tab {
+        background: #fff;
+        padding-bottom: 48px;
+    }
+    #pay_center .tab .user-account-table {
+        width: 999px;
+        margin: 0 auto;
+    }
+    #pay_center .tab .user-account-table thead {
+        background: #89aefa;
+    }
+    #pay_center .tab .user-account-table thead tr th {
+        height: 38px;
+        text-align: center;
+        font-size: 14px;
+        color: #fff;
+        font-weight: normal;
+    }
+    #pay_center .tab .user-account-table tbody tr:hover {
+        background: #f1f5ff;
+    }
+    #pay_center .tab .user-account-table tbody tr td {
+        font-size: 14px;
+        color: #666;
+        padding-left: 11px;
+        height: 51px;
+        line-height: 51px;
+        border-left: 1px solid #dae5fd;
+        border-bottom: 1px solid #dae5fd;
+    }
+    #pay_center .tab .user-account-table tbody tr td.operate-area {
+        border-right: 1px solid #dae5fd;
+        color:#5f82cf;
+    }
 </style>
 <!--右侧主体部分-->
 <div class="user_right fr" id="pay_center">
     <!--支付中心-->
     <div class="pay_record oder">
-        <div class="user_r_01">
-            <dl>
-                <dt><img src="static/img/user/images/user_photo.png" /></dt>
-                <dd>
-					<span>{{userInfo.enterprise.enName}}<br/>
-                        <!--<em>账户余额：￥<b ng-bind="0"></b></em>-->
-					</span>
-                    <a href="vendor#/account/management">账户设置&nbsp;》</a>
-                </dd>
-            </dl>
-        </div>
-        <div class="oder01">
-            <ul>
-                <li class="active"><a href="javascript:void(0)">收款账户信息</a></li>
-            </ul>
-        </div>
         <div class="oder01">
             <ul>
-                <li ng-click="setTab('accountTab')" ng-class="{'active' : $payCenter.tab == 'accountTab'}"><a href="javascript:void(0)">收款账户信息</a></li>
-                <li ng-click="setTab('accountHis')" ng-class="{'active' : $payCenter.tab == 'accountHis'}"><a href="javascript:void(0)">账户申请记录</a></li>
-                <li ng-click="setTab('paymentRecode')" ng-class="{'active' : $payCenter.tab == 'paymentRecode'}"><a href="javascript:void(0)">收款记录</a></li>
-                <li ng-if="$payCenter.tab == 'accountTab'" class="new-account" ng-click="newAccount()"><a ng-disabled="bankInfos.length > 0" ><i class="fa fa-plus-circle"></i>&nbsp;新增账户</a></li>
+                <li ng-click="setTab('accountTab')" ng-class="{'active' : $payCenter.tab == 'accountTab'}"><a href="javascript:void(0)">交易记录</a></li>
+                <li ng-click="setTab('accountHis')" ng-class="{'active' : $payCenter.tab == 'accountHis'}"><a href="javascript:void(0)">收款帐户</a></li>
             </ul>
         </div>
         <!--支付中心列表-->
         <div class="ticket_record_list">
-            <!-- 收款账户信息-->
-            <div class="tab" ng-if="$payCenter.tab == 'accountTab'">
-                <dl class="pay_xq">
+            <!-- 交易记录-->
+            <div class="tab" ng-if="$payCenter.tab == 'accountTab'" style="display: inline-block">
+                <!--搜索时间筛选-->
+                <div class="screen" style="background: #f5f8fe;height: 40px;margin-bottom: 15px;margin-top: 5px;padding-top: 4px;padding-right: 11px;">
+                    <div class="sreach fr">
+                        <div class="date fl">
+                            <div class="data-input">
+                                <input type="text" ng-model="startDate"
+                                       class="form-control select-adder" placeholder="起始时间"
+                                       datepicker-popup="yyyy-MM-dd HH:mm:ss"
+                                       is-open="condition.startDateOpen"
+                                       max-date="endDate" current-text="今天" clear-text="清除" close-text="关闭"
+                                       datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
+                                       ng-click="openDatePicker($event, condition, 'startDateOpen',1)"
+                                       ng-change="onDateCondition(true)"/>
+                                <button class="open" ng-click="openDatePicker($event, condition, 'startDateOpen')"></button>
+                            </div>
+
+                            <em>–</em>
+                            <div class="data-input">
+                                <input type="text" ng-model="endDate"
+                                       class="form-control select-adder" placeholder="结束时间"
+                                       datepicker-popup="yyyy-MM-dd HH:mm:ss"
+                                       is-open="condition.endDateOpen"
+                                       min-date="startDate" current-text="今天" clear-text="清除" close-text="关闭"
+                                       datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
+                                       ng-click="openDatePicker($event, condition, 'endDateOpen',2)"
+                                       ng-change="onDateCondition(false)"/>
+                                <button class="open" ng-click="openDatePicker($event, condition, 'endDateOpen')"></button>
+                            </div>
+                        </div>
+                        <div class="sreach-input fr">
+                            <input type="search" placeholder="商家名称/订单号" class="form-control" ng-model="keyword" ng-search="search()"/>
+                            <a class="seek" href="javascript:void(0)" ng-click="search()">搜索</a>
+                            <a class="seek" href="javascript:void(0)" style="margin-left: 5px;">导出</a>
+                        </div>
+                    </div>
+                </div>
+
+                <dl>
                     <dt>
-                        <span class="wd01">类型</span>
-                        <span>账户</span>
-                        <span>账户名</span>
-                        <span>其他</span>
-                        <span style="width: 14%;">操作</span>
-                    </dt>
-                    <p class="height16">&nbsp;</p>
-                    <dd class="pay_ok" ng-if="bankInfos.length != 0">
-                        <span class="wd01"><em>已绑定</em></span>
-                    </dd>
-                    <dd ng-repeat="info in bankInfos">
-                        <span class="wd01"><img src="static/img/user/images/bank_card.png" class="img"/> </span>
-                        <span ng-bind="info.number | hideBankFilter"></span>
-                        <span ng-bind="info.accountname"></span>
-                        <span ng-bind="info.bankname"></span>
-                        <span style="width: 14%;" class="account-operate">
-							<a class="modify" href="javascript:void(0)" ng-click="deleteAccount(info)">删除</a>
+                        <span>时间</span>
+                        <span>订单号</span>
+                        <span>买家名称</span>
+                        <span>币种</span>
+                        <span>金额</span>
+                        <span>
+							<select class="form-control select-adder" style="width: 90px">
+								<option>交易方式</option>
+								<option value="1">RMB</option>
+								<option value="2">USD</option>
+							</select>
+						</span>
+                        <span>
+							<select class="form-control select-adder">
+								<option>状态</option>
+								<option value="1">RMB</option>
+								<option value="2">USD</option>
+							</select>
 						</span>
+                    </dt>
+                    <dd>
+                        <span>2017.01.18</span>
+                        <span>20170116001</span>
+                        <span>￥8888.52</span>
+                        <span>支付宝</span>
+                        <span>12345678909</span>
+                        <span>退款成功</span>
+                        <span>退款成功</span>
                     </dd>
-                    <dd class="text-center f14" ng-if="bankInfos.length == 0">
+                    <div class="total">
+                        <span>收入总计&nbsp;  <em>111111112</em></span><b>|</b>
+                        <span>支出总计&nbsp;  <em>2222222222</em></span><b>|</b>
+                        <span>结余&nbsp;<em>(共计5笔交易)</em></span>
+                    </div>
+
+                    <dd ng-if="!tradeRecordPage.content || tradeRecordPage.content.length == 0" class="tab-dd" style="height: 125px; padding: 30px;">
                         <div class="col-xs-offset-3 col-xs-2">
                             <img src="static/img/all/empty-cart.png">
                         </div>
                         <div class="col-xs-4">
-                            <p class="grey f16" style="font-size: 12px">暂无个人账户信息，请新增账户信息</p>
+                            <p class="grey" style="font-size: 12px">暂无支付记录，请下单购买商品吧！</p>
+                            <a href=".">马上去逛一逛</a>&nbsp;<i class="fa fa-arrow-right"></i>
                         </div>
                     </dd>
                 </dl>
-                <div class="beizhu row" ng-if="bankInfos.length != 0">
-                    <div class="col-md-1" style="color: #f00;">*声明：</div>
-                    <div class="col-md-11">
-                        1. 此账户为卖家收款账户，请仔细核对信息内容，若由信息错误造成的损失，优软商城不承担赔偿责任。<br/>
-                        2. 如您的企业名称、开户银行及账号变更，您须在优软商城开展资金结算前进行更正，否则发生转账错误优软商城不承担赔偿责任。<br/>
-                        3. 更多的条款请阅读<a href="help/helpDetail/51" target="_blank">《优软商城代收代付协议》</a> 。
+                <p style="text-align:right;margin-right:28px;margin-top:10px;">显示1-10 条，共 2506 条</p>
+                <div style="background-color: white; width: 100%; height: 75px;">
+                    <div class="ng-cloak ng-table-pager" ng-if="pages.length" style="float: right;margin-right: 60px;">
+                        <ul class="pagination ng-table-pagination">
+                            <li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
+                                <a ng-switch-when="prev" ng-click="setPage(page.type, -1)" href="">&laquo;</a>
+                                <a ng-switch-when="first" ng-click="setPage(page.type, page.number)" href=""><span ng-bind="page.number"></span></a>
+                                <a ng-switch-when="page" ng-click="setPage(page.type, page.number)" href=""><span ng-bind="page.number"></span></a>
+                                <a ng-switch-when="more" ng-click="setPage(page.type, -1)" href="">&#8230;</a>
+                                <a ng-switch-when="last" ng-click="setPage(page.type, page.number)" href=""><span ng-bind="page.number"></span></a>
+                                <a ng-switch-when="next" ng-click="setPage(page.type, -1)" href="">&raquo;</a>
+                            </li>
+                        </ul>
+                        <div class="page-go-block">
+                            <input class="page-number" type="text" ng-model="tradeRecordPage.number" ng-keydown="listenEnter()"/>
+                            <a class="page-a" ng-click="setPage('page', tradeRecordPage.number)" href="">GO</a>
+                        </div>
                     </div>
                 </div>
             </div>
-            <!-- 账户申请记录-->
-            <div class="tab" ng-if="$payCenter.tab == 'accountHis'">
-                <table class="count-tab table">
-                    <thead>
-                        <tr>
-                            <th width="70">序号</th>
-                            <th width="80">类型</th>
-                            <th width="150">账户</th>
-                            <th width="250">账户名</th>
-                            <th width="150">其他</th>
-                            <th width="100">申请时间</th>
-                            <th width="100">状态</th>
-                            <th width="100">原因</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td colspan="8" class="hei16"></td>
-                        </tr>
-                    </tbody>
-                    <tbody ng-if="bankInfos.length != 0">
-                        <tr ng-repeat="info in bankInfos" ng-class="{'color999' : info.status == 112}">
-                            <td ng-bind="$index + 1" style="color: #323232;"></td>
-                            <td><img src="static/img/user/images/bank_card.png" class="img"/></td>
-                            <td ng-bind="::info.number | hideBankFilter"></td>
-                            <td ng-bind="::info.accountname"></td>
-                            <td ng-bind="::info.bankname"></td>
-                            <td ng-bind="::info.createTime | date : 'yyyy-MM-dd'"></td>
-                            <td ng-bind="::info.status | bankStatusFilter" ng-class="{'red': info.status == 103}"></td>
-                            <td class="f12" ng-bind="::info.remark || '-'"></td>
-                        </tr>
-                    </tbody>
-                    <!--<tbody ng-if="bankInfos.length == 0">
-                        <tr style="height: 190px;">
-                            <td colspan="8" style="  height: 239px;">
-                                <div class="text-center">
-                                    <div class="col-xs-offset-3 col-xs-2">
-                                        <img src="static/img/all/empty-cart.png">
-                                    </div>
-                                    <div class="col-xs-4 text-info">
-                                        <p class="grey f16" style="line-height: 80px; font-size: 12px;">暂无账户申请记录，请新增账户信息</p>
-                                    </div>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>-->
-                    <tbody class="no-record-list" ng-if="bankInfos.length == 0">
-                        <tr class="height200">
-                            <td colspan="10"><img src="static/img/all/empty-cart.png"><span>暂无账户申请记录，请新增账户信息！</span></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <!-- 收款记录-->
-            <div class="tab" ng-if="$payCenter.tab == 'paymentRecode'">
-                <table class="count-tab table">
+            <!-- 收款账户-->
+            <div class="tab" ng-if="$payCenter.tab == 'accountHis'" style="display: inline-block;">
+                <div class="tab-header">
+                    <span>已设置的账户信息</span>
+                    <div ng-click="editAccount()">
+                        <i class="fa fa-plus-circle"></i>
+                        <span>新增账户</span>
+                    </div>
+                </div>
+                <table class="user-account-table">
                     <thead>
                     <tr>
-                        <th width="70">序号</th>
-                        <th width="150">时间</th>
-                        <th width="250">订单号</th>
-                        <th width="150">金额</th>
-                        <th width="100">方式</th>
-                        <th width="160">收款账号</th>
-                        <th width="100">状态</th>
+                        <th width="130 ">开户银行</th>
+                        <th width="190">开户支行</th>
+                        <th width="230">银行账号</th>
+                        <th width="155">开户名称</th>
+                        <th width="65">状态</th>
+                        <th width="100">操作</th>
                     </tr>
                     </thead>
                     <tbody>
-                        <tr>
-                            <td colspan="8" class="hei16"></td>
-                        </tr>
-                    </tbody>
-                    <tbody>
-                        <tr ng-repeat="bankInfo in bankTransRecode">
-                            <td>{{$index + 1}}</td>
-                            <td>
-                                <span ng-bind="::bankInfo.tranferCreateTime | date : 'yyyy-MM-dd'"></span><br/>
-                                <span class="color666" style="margin-right: 23px;" ng-bind="::bankInfo.tranferCreateTime | date : 'HH:mm:ss'"></span>
-                            </td>
-                            <td><a ng-click="goToPurchaseDetail(bankInfo.bankTransAssociate.btaTableserNum)">{{bankInfo.bankTransAssociate.btaTableserNum}}</a></td>
-                            <td ng-bind="::bankInfo.total | currencySysmbol : bankInfo.currencyName"></td>
-                            <td>银行转账</td>
-                            <td ng-bind="::bankInfo.jsonReceive.number | hideBankFilter"></td>
-                            <td>收款成功</td>
-                        </tr>
-                    </tbody>
-                    <tbody class="no-record-list" ng-if="bankTransRecode.length == 0">
-                        <tr class="height200">
-                            <td colspan="10"><img src="static/img/all/empty-cart.png"><span>暂无收款记录！</span></td>
-                        </tr>
-                    </tbody>
-                    <!--<tbody>
-                        <tr style="height: 190px;" ng-if="bankTransRecode.length == 0">
-                            <td colspan="8">
-                                <div class="text-center">
-                                    <div class="col-xs-2 col-xs-offset-3 info-img" style="margin-left: 18%;">
-                                        <img src="static/img/all/empty-cart.png">
-                                    </div>
-                                    <div class="col-xs-4">
-                                        <p class="grey f16" style="font-size: 12px">暂无收款记录</p>
-                                    </div>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>-->
+                    <tr>
+                        <!--<td colspan="8" class="hei16"></td>-->
+                        <td>111</td>
+                        <td>111</td>
+                        <td>111</td>
+                        <td>111</td>
+                        <td>111</td>
+                        <td class="operate-area">
+                            <span>重新使用</span>
+                            <span>删除</span>
+                        </td>
+                    </tr>
                 </table>
-                <div class="ng-cloak ng-table-pager" ng-if="pages.length" style="float: right;margin-right: 60px;">
-                    <ul class="pagination ng-table-pagination">
-                        <li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
-                            <a ng-switch-when="prev" ng-click="setPage(page.type, -1)" href="">&laquo;</a>
-                            <a ng-switch-when="first" ng-click="setPage(page.type, page.number)" href=""><span ng-bind="page.number"></span></a>
-                            <a ng-switch-when="page" ng-click="setPage(page.type, page.number)" href=""><span ng-bind="page.number"></span></a>
-                            <a ng-switch-when="more" ng-click="setPage(page.type, -1)" href="">&#8230;</a>
-                            <a ng-switch-when="last" ng-click="setPage(page.type, page.number)" href=""><span ng-bind="page.number"></span></a>
-                            <a ng-switch-when="next" ng-click="setPage(page.type, -1)" href="">&raquo;</a>
-                        </li>
-                    </ul>
-                    <div class="page-go-block">
-                        <input class="page-number" type="text" ng-model="param.currentPage" ng-keydown="listenEnter()"/>
-                        <a class="page-a" ng-click="setPage('page', param.currentPage)" href="">GO</a>
+                <p style="text-align:right;margin-right:28px;margin-top:10px;">显示1-10 条，共 2506 条</p>
+                <div class="com-del-box">
+                    <div class="title">
+                        <i></i>
+                    </div>
+                    <div class="content">
+                        <!--<p><i class="fa fa-exclamation-circle"></i>是否要删除此账户信息?</p>-->
+                        <p style="width:80%;line-height:20px;margin: 15px;margin-left: 30px;"><i class="fa fa-exclamation-circle"></i>此操作会让使用中的收款账户失效，是否确定重新使用？</p>
+                        <div>
+                            <a>取消</a>
+                            <a>确认</a>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+
 </div>
 <!--模态框-->
 <div class="view-box" ng-if="$payCenter.newAccount">