Browse Source

Merge branch 'feature/yc-purse-1208' into feature-pinganpay-yuj-20171108

yangc 8 years ago
parent
commit
b285c69bf0

+ 4 - 1
src/main/webapp/WEB-INF/spring/webmvc.xml

@@ -64,7 +64,7 @@
 	<mvc:view-controller path="/index" view-name="index" />
 	<mvc:view-controller path="/signin" view-name="signin" />
 	<mvc:view-controller path="/user" view-name="user_center" />
-	<mvc:view-controller path="/sale" view-name="sale_center" />
+	<mvc:view-controller path="/sale" view-name="`" />
 	<mvc:view-controller path="/product" view-name="product" />
 	<mvc:view-controller path="/news" view-name="news" />
 	<mvc:view-controller path="/activity" view-name="activity" />
@@ -87,6 +87,9 @@
 	<mvc:view-controller path="/user_erp" view-name="erp/user_center" />
 	<mvc:view-controller path="/vendor_erp" view-name="erp/vendor_center" />
 
+	<!--平安银行支付相关页面-->
+	<mvc:view-controller path="/pingan_pay" view-name="pingan_pay" />
+
 	<mvc:interceptors>
 		<!-- SSO过滤 -->
 		<mvc:interceptor>

+ 53 - 0
src/main/webapp/WEB-INF/views/normal/pingan_pay.html

@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit">
+    <title>卖家中心-优软商城</title>
+    <meta name="description" content="优软商城,电子元器件搜索引擎" />
+    <meta name="keywords"
+          content="优软商城,B2B,B2C,行业门户,网上贸易,电子商务,网上贸易,网上交易,交易市场,在线交易,供求信息,采购,求购信息,供应信息" />
+    <link href="static/img/all/u.png" rel="icon" type="image/x-icon" />
+    <link rel="stylesheet" href="static/lib/bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="static/css/common.css" />
+    <link rel="stylesheet" href="static/lib/fontawesome/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="static/lib/angular/toaster.css" />
+    <link rel="stylesheet" href="static/lib/jquery/themes/uploadify/uploadify.css" />
+    <link rel="stylesheet" href="static/lib/angular/ng-table.css">
+    <link rel="stylesheet" href="static/css/pinganPay/pinganPay.css">
+</head>
+<body>
+<!-- 消息提示框  Start-->
+<toaster-container
+        toaster-options="{'position-class': 'toast-bottom-center'}" style="font-size: 14px;"></toaster-container>
+<!-- 消息提示框 End -->
+<!-- Loading Start -->
+<div id="loading" class="loading">
+    <i></i>
+</div>
+<!-- Loading End -->
+
+<!--头部开始-->
+<header>
+    <div ng-include src="'static/view/common/site-nav.html'"></div>
+</header>
+
+<!--内容开始-->
+<section class="clearfix">
+    <div class="wrap">
+        <div ui-view></div>
+    </div>
+</section>
+<footer class="clearfix" style="margin-top: 40px;">
+    <div ng-include src="'static/view/common/footer.html'"></div>
+</footer>
+<div ng-include src="'static/view/common/sidebar.html'"></div>
+
+<script type="text/javascript" src="static/lib/require.js"
+        data-main="static/js/pinganPay/main.js"></script>
+
+<script src="static/lib/jquery/jquery.min.js"></script>
+
+</body>
+</html>

+ 4 - 0
src/main/webapp/resources/css/pinganPay/pinganPay.css

@@ -0,0 +1,4 @@
+.clearfix .wrap {
+    width: 1190px;
+    margin: 0 auto;
+}

BIN
src/main/webapp/resources/img/pingan/card-bg.png


BIN
src/main/webapp/resources/img/pingan/card.png


BIN
src/main/webapp/resources/img/pingan/man.png


BIN
src/main/webapp/resources/img/pingan/money.png


BIN
src/main/webapp/resources/img/pingan/phone.png


BIN
src/main/webapp/resources/img/pingan/purse-img.png


BIN
src/main/webapp/resources/img/pingan/purse-title-bg.png


+ 50 - 0
src/main/webapp/resources/js/pinganPay/app.js

@@ -0,0 +1,50 @@
+define([ 'angularAMD', 'ngLocal', 'common/services', 'common/directives', 'common/query/brand', 'common/query/kind', 'common/query/component', 'common/query/goods', 'common/query/rate','common/query/cart', 'common/query/order', 'common/query/address', 'common/query/invoice', 'common/query/property', 'common/query/kindAdvice', 'common/query/propertyAdvice', 'common/query/return' , 'common/query/change', 'common/query/logistics', 'ui.router', 'ui-bootstrap', 'ui-form', 'ui-jquery','angular-toaster', 'ngDraggable', 'angular-sanitize', 'ngTable', 'dynamicInput', 'jquery-imagezoom', 'file-upload', 'file-upload-shim', 'common/query/urlencryption' , 'common/query/purchase', 'common/query/vendor', 'common/query/goods', 'common/query/bankTransfer', 'common/query/enterprise', 'common/query/bill', 'common/query/receipt', 'common/query/collection', 'common/query/express', 'common/query/bankInfo','common/query/charge', 'common/query/statistics', 'common/query/currency', 'jquery-chart', 'common/query/responseLogistics', 'common/query/goodsPrice', 'common/query/address' , 'common/query/search', 'common/query/urlencryption', 'common/query/releaseProInfo', 'common/query/makerDemand', 'common/query/afterSale', 'common/query/messageBoard', 'common/query/logistics', 'common/query/storeInfo', 'common/query/recommendation', 'common/query/user', 'common/query/logisticsPort', 'common/query/cms', 'common/query/material', 'common/query/storeCms', 'common/query/productImport', 'common/query/stockInOut', 'common/module/store_recommend_product', 'common/module/chat_web_module', 'common/query/standardPutOnAdmin', 'common/query/storeViolations', 'common/query/internalMessage', 'common/query/installments'], function(angularAMD) {
+	'use strict';
+	/**
+	 * 自定义Array对象的属性last 方法
+	 * 调用获取数组的最后一个元素
+	 */
+	Array.prototype.last = function() {
+		return this.length > 0 ? this[this.length - 1] : null;
+	};
+
+	var app = angular.module('myApp', [ 'ui.router', 'ui.bootstrap', 'ng.local', 'ui.form', 'ui.jquery', 'toaster', 'ngDraggable', 'tool.directives', 'ngSanitize', 'common.query.kind', 'common.services', 'brandServices', 'componentServices', 'goodsServices',  'rateServices','cartServices', 'orderServices', 'addressServices', 'invoiceServices', 'common.query.propertyAdvice', 'propertyServices', 'returnServices' , 'changeServices',  'logisticsServices', 'common.query.kindAdvice', 'ngTable', 'ngDynamicInput', 'common.directives', 'angularFileUpload', 'urlencryptionServices', 'purchaseServices', 'vendorServices', 'goodsServices', 'bankTransfer', 'common.query.enterprise', 'billServices', 'receiptServices', 'collection', 'expressServices', 'bankInfo','Charge', 'statisticsServices', 'currencyService', 'responseLogisticsService', 'PriceServices', 'addressServices', 'searchService', 'urlencryptionServices', 'ReleaseProductByBatchService', 'makerDemand', 'afterSaleService', 'messageBoardServices', 'logisticsServices', 'table.directives', 'storeInfoServices', 'recommendation', 'common.query.user', 'logisticsPortService', 'cmsService', 'materialServices', 'StoreCmsServices', 'productImportModule', 'stockInOutModule', 'StoreCmsModule', 'WebChatModule', 'StandardPutOnAdminModule', 'StoreViolationsServices', 'internalMessageServices', 'installmentServices']);
+	//初始化,启动时载入app
+	app.init = function() {
+		angularAMD.bootstrap(app);
+	};
+
+	// ui-router 路由配置
+	app.config(['$stateProvider', function($stateProvider){
+		// $urlRouterProvider.otherwise("/index");
+
+		$stateProvider.state('recharge', angularAMD.route({
+			url: '/recharge',
+			templateUrl: 'static/view/pinganPay/forstore/recharge.html',
+			title: '充值-优软商城',
+			controllerUrl: 'app/controllers/forstore/recharge_ctrl',
+			controller: 'rechargeCtrl'
+		}));
+	}]);
+
+	// app.run(['$rootScope', '$state', '$q', 'BaseService', 'StoreInfo', function($rootScope, $state, $q, BaseService, StoreInfo) {
+	// }]);
+
+	//币别的过滤器
+	app.filter('currencySysmbol', function() {
+		return function(moneyParam, currency, add) {
+			if(typeof(moneyParam) == 'undefined') {
+				moneyParam = 0;
+			}
+			if(currency == 'RMB') {
+				return "¥ " + moneyParam + " " + (typeof(add) == "undefined" ? '' : add);
+			}else if(currency == "USD"){
+				return "$ " + moneyParam;
+			}else {
+				return moneyParam;
+			}
+		}
+	});
+
+	return app;
+});

+ 7 - 0
src/main/webapp/resources/js/pinganPay/controllers/forstore/recharge_ctrl.js

@@ -0,0 +1,7 @@
+define([ 'app/app' ], function(app) {
+    'use strict';
+    app.register.controller('rechargeCtrl', ['$scope', '$rootScope', 'toaster', function ($scope, $rootScope, toaster ) {
+
+    }]);
+
+});

+ 73 - 0
src/main/webapp/resources/js/pinganPay/main.js

@@ -0,0 +1,73 @@
+require.config({
+	baseUrl : 'static',
+	paths : {
+		'app' : 'js/pinganPay',
+		'angular' : 'lib/angular/angular.min',
+		'angularAMD' : 'lib/angular/angularAMD',
+		'angular-toaster': 'lib/angular/angular-toaster.min',
+		'angular-sanitize' : 'lib/angular/angular-sanitize.min',
+		'bootstrap' : 'lib/bootstrap/js/bootstrap.min',
+		'common': 'js/common',
+		'dynamicInput' : 'js/common/directives/dynamicInput',
+		'jquery' : 'lib/jquery/jquery.min',
+		'jquery-imagezoom' : 'lib/jquery/jquery.imagezoom.min',
+		'jquery-uploadify' : 'lib/jquery/jquery.uploadify.min',
+		'jquery-summernote' : 'lib/jquery/summernote.min',
+		'jquery-summernote-lang' : 'lib/jquery/summernote-zh-CN',
+		'jquery-chart' : 'lib/jquery/Chart.min',
+		'ngLocal' : 'lib/angular/angular-i18n',
+		'ngAnimate': 'lib/angular/angular-animate.min',
+		'ngDraggable' : 'lib/angular/angular-draggable-min',
+		'ngResource' : 'lib/angular/angular-resource.min',
+		'ngTable' : 'lib/angular/ng-table.min',
+		'ui-bootstrap' : 'lib/angular/ui-bootstrap-tpls.min',
+		'ui.router' : 'lib/angular/angular-ui-router.min',
+		'ui-form' : 'js/common/directives/ui-form',
+		'ui-jquery': 'js/common/ui-jquery',
+		'file-upload': 'lib/angular/angular-file-upload.min',
+		'file-upload-shim': 'lib/angular/angular-file-upload-shim.min',
+		'showdown' : 'lib/showdown/showdown.min',
+		'calendar': 'lib/calendar/calendar',
+		'big': 'lib/decimal/big.min'
+	},
+	shim : {
+		'angular' : {
+			'exports' : 'angular',
+			'deps' : [ 'jquery' ]
+		},
+		'angularAMD' : {
+			'exports' : 'angularAMD',
+			'deps' : [ 'angular' ]
+		},
+		'ngLocal' : {
+			'exports' : 'ngLocal',
+			'deps' : [ 'angular' ]
+		},
+		'ui.router' : ['angular'],
+		'ui-bootstrap' : ['angular'],
+		'bootstrap' : ['jquery'],
+		'jquery-imagezoom' : ['jquery'],
+		'jquery-summernote' : ['jquery', 'bootstrap'],
+		'jquery-summernote-lang' : ['jquery-summernote'],
+		'jquery-chart' : ['jquery'],
+		'ui-form' : ['angular', 'jquery-summernote', 'jquery-summernote-lang'],
+		'jquery-uploadify' : [ 'jquery' ],
+		'ui-jquery': ['jquery'],
+		'ngAnimate': ['angular'],
+		'angular-toaster': ['angular', 'ngAnimate'],
+		'ngDraggable': [ 'jquery', 'angular' ],
+		'angular-sanitize': ['angular'],
+		'ngResource': ['angular'],
+		'dynamicInput': ['angular'],
+		'ngTable' : {
+			'exports' : 'ngTable',
+			'deps' : [ 'angular' ]
+		},
+		'file-upload': ['angular', 'file-upload-shim'],
+		'calendar': ['jquery'],
+		'big' : ['jquery']
+	}
+});
+require([ 'app/app', 'common/controllers/commonCtrls' ], function(app) {
+	app.init();
+});

+ 1 - 1
src/main/webapp/resources/js/usercenter/controllers/forstore/pay_center_ctrl.js

@@ -12,7 +12,7 @@ define(['app/app'], function(app) {
 		//历史记录的状态
 		var hiStatus= SessionService.get("buyCenter");
 
-		$scope.status = hiStatus == null ? 'pay-history' : hiStatus;
+		$scope.status = hiStatus == null ? 'pay-wallet' : hiStatus;
 
 		//切换银行账户信息,历史记录的状态
 		$scope.toggleStatus = function(status) {

+ 3 - 0
src/main/webapp/resources/view/pinganPay/forstore/recharge.html

@@ -0,0 +1,3 @@
+<div>
+    recharge page
+</div>

+ 626 - 1
src/main/webapp/resources/view/usercenter/forstore/pay_center.html

@@ -385,19 +385,644 @@
 		display: inline;
 		float: left;
 	}
+	/*我的钱包 start*/
+	#pay_center .pay-wallet .pay-wallet-title {
+		padding: 0 22px 0 13px;
+		height: 40px;
+		line-height: 40px;
+		font-size: 12px;
+		background: url('static/img/pingan/purse-title-bg.png') no-repeat;
+		color: #fff;
+	}
+	#pay_center .pay-wallet .pay-wallet-title >i{
+		width: 1px;
+		height: 20px;
+		display: inline-block;
+		background: #046ac7;
+		vertical-align: middle;
+		margin: 0 13px 0 16px;
+	}
+	#pay_center .pay-wallet .pay-wallet-title >div {
+		float: right;
+	}
+	#pay_center .pay-wallet .pay-wallet-content {
+		display: flex;
+		justify-content: space-between;
+		padding: 17px 0 13px 0;
+	}
+	#pay_center .pay-wallet .pay-wallet-content >div {
+		width: 342px;
+		height: 173px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content >div:nth-child(2) {
+		border-left: 1px solid #f5f5f5;
+		border-right: 1px solid #f5f5f5;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info {
+		padding: 33px 0 0 15px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >img {
+		width: 96px;
+		height: 96px;
+		border-radius: 100%;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div {
+		float: right;
+		width: 230px;
+		height: 100%;
+		padding-left: 10px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div >p {
+		font-size: 16px;
+		font-weight: bold;
+		margin-bottom: 19px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div >h4 {
+		font-size: 14px;
+		margin-bottom: 11px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .wallet-safe-level span {
+		display: inline-block;
+		width: 46px;
+		height: 8px;
+		background: #b7b6b6;
+		margin-right: 2px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .wallet-safe-level span.active {
+		background: #17b601;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .wallet-safe-level a {
+		color: #4290f7;
+		margin-left: 10px;
+		font-size: 14px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area {
+		margin-top: 19px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area >div {
+		position: relative;
+		width: 24px;
+		height: 24px;
+		border-radius: 100%;
+		display: inline-block;
+		background: #c6c8ca;
+		text-align: center;
+		line-height: 21px;
+		margin-right: 9px;
+		cursor: pointer;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area >div.active {
+		background: #4290f7;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area .expand-box {
+		position: absolute;
+		top: 24px;
+		left: -35px;
+		display: none;
+		padding: 6px 10px;
+		font-size: 14px;
+		border-radius: 3px;
+		border: 1px solid #81b7f1;
+		background: #fff;
+		text-align: left;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area >div .expand-box p{
+		white-space: nowrap;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area >div .expand-box a {
+		color: #4290f7;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area >div:hover .expand-box {
+		display: block;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money,
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card {
+		padding: 14px 0 0 16px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money >p,
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >p {
+		font-size: 16px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money >p img,
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >p img {
+		margin-right: 5px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-balance {
+		color: #fc626f;
+		margin: 22px 0 15px 0;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-balance span:nth-child(1) {
+		font-size: 16px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-balance span:nth-child(2) {
+		font-size: 24px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-balance span:nth-child(3) {
+		font-size: 18px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-income-pay {
+		padding: 0 6px;
+		background: #fcf5f0;
+		border-radius: 3px;
+		height: 28px;
+		line-height: 28px;
+		margin-bottom: 16px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-income-pay >div {
+		display: inline-block;
+		font-size: 14px;
+		color: #666;
+		margin-right: 26px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-income-pay >div div {
+		display: inline-block;
+		width: 35px;
+		height: 17px;
+		line-height: 17px;
+		text-align: center;
+		background: #fff;
+		color: #ff8522;
+		font-size: 12px;
+		margin-right: 10px;
+		border: 1px solid #ff8522;
+		border-radius:3px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .wallet-options span {
+		display: inline-block;
+		width: 70px;
+		height: 30px;
+		text-align: center;
+		border-radius: 3px;
+		line-height: 30px;
+		margin-right: 20px;
+		font-size: 14px;
+		cursor: pointer;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .wallet-options span:nth-child(1) {
+		background: #fc626f;
+		color: #fff;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .wallet-options span:nth-child(2) {
+		background: #fff;
+		color: #fc626f;
+		border: 1px solid #fc626f;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .wallet-options a{
+		font-size: 14px;
+		color: #4290f7;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div {
+		margin-top: 30px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div {
+		width: 95px;
+		height: 56px;
+		line-height: 20px;
+		padding: 10px 11px;
+		color: #fff;
+		font-size: 12px;
+		border-radius: 10px;
+		display: inline-block;
+		margin-left: -29px;
+		vertical-align: middle;
+		cursor: pointer;
+		background: url("static/img/pingan/card-bg.png")no-repeat left;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div a {
+		line-height: 28px;
+		color: #3e84f5;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div:nth-child(1) {
+		background-color: #fa5d6a;
+		margin-left: 0;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div:nth-child(2) {
+		background-color: #02dabc;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div:nth-child(3) {
+		background-color: #8893f0;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div:last-child {
+		border: 1px dashed #3e84f5;
+		background: #fff;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >a {
+		margin-top: 15px;
+		font-size: 14px;
+		display: block;
+		width: 70px;
+		height: 30px;
+		line-height: 30px;
+		text-align: center;
+		color: #fff;
+		background: #3e84f5;
+		border-radius: 3px;
+	}
+	#pay_center .pay-wallet .wallet-empty-line {
+		height: 25px;
+		background: #f5f5f5;
+	}
+	#pay_center .pay-wallet .wallet-record {
+		border-top: 1px solid #89aefa;
+	}
+	#pay_center .pay-wallet .wallet-record >p{
+		width: 117px;
+		height: 36px;
+		line-height: 36px;
+		text-align: center;
+		color: #fff;
+		font-size: 16px;
+		font-weight: bold;
+		background: #3c7cf5;
+		margin: -6px auto 29px;
+		position: relative;
+	}
+	#pay_center .pay-wallet .wallet-record >p::before {
+		content: '';
+		width: 0;
+		height: 0;
+		border-bottom: 6px solid #3c7cf5;
+		border-left: 6px solid transparent;
+		position: absolute;
+		left: -6px;
+	}
+	#pay_center .pay-wallet .wallet-record >p::after {
+		content: '';
+		width: 0;
+		height: 0;
+		border-bottom: 6px solid #3c7cf5;
+		border-right: 6px solid transparent;
+		position: absolute;
+		right: -6px;
+	}
+	#pay_center .pay-wallet .wallet-record .wallet-record-title span {
+		font-size: 16px;
+		margin: 0 14px 10px 21px;
+	}
+	#pay_center .pay-wallet .wallet-record .wallet-record-title a {
+		font-size: 14px;
+	}
+	#pay_center .pay-wallet .wallet-record .wallet-record-title a.active {
+		color: #4290f7;
+	}
+	#pay_center .pay-wallet .wallet-record .wallet-record-title a.fr{
+		font-size: 12px;
+		color: #ff8522;
+		margin-right: 40px;
+	}
+	#pay_center .pay-wallet .wallet-record >ul {
+		margin: 10px 6px 0;
+		border-top: 1px solid #89aefa;
+		border-bottom: 1px solid #89aefa;
+	}
+	#pay_center .pay-wallet .wallet-record >ul li {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 54px 0 20px;
+		height: 52px;
+		line-height: 52px;
+		font-size: 14px;
+		color: #666;
+		border-bottom: 1px solid rgba(25, 81, 222, 0.18);
+	}
+	#pay_center .pay-wallet .wallet-record >ul li:last-child {
+		border-bottom: none;
+	}
+	#pay_center .pay-wallet .wallet-record >ul li span.pay-statuc {
+		color: #333;
+	}
+	#pay_center .pay-wallet .wallet-record >ul li span.record-company{
+		width: 185px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	#pay_center .pay-wallet .wallet-record >ul li span i.fa-minus {
+		color: #1da902;
+	}
+	#pay_center .pay-wallet .wallet-record >ul li span i.fa-plus {
+		color: #f51c24;
+	}
+	/*我的钱包 end*/
+	/*余额明细导航 start*/
+	.match-menu {
+		width: 100%;
+		border-top: #82d2fa 1px solid;
+		height: 0;
+	}
+	.match-menu span.active {
+		background: #fff;
+		border: #82d2fa 1px solid;
+		border-bottom: #fff 1px solid;
+	}
+	.match-menu span {
+		display: inline-block;
+		text-align: center;
+		width: 100px;
+		height: 20px;
+		background: #eee;
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+		margin-left: 390px;
+		line-height: 19px;
+		position: relative;
+		bottom: 20px;
+	}
+	.match-menu span.active a {
+		color: #333;
+	}
+	.match-menu span a {
+		font-size: 12px;
+		color: #999;
+		display: inline-block;
+		height: 20px;
+		width: 78px;
+	}
+	.match-menu span i {
+		font-size: 14px;
+		color: #999;
+	}
+	.match-menu span i:hover, .match-menu span a:hover {
+		color: #5078cb;
+	}
+	/*余额明细导航 end*/
+	/*余额记录 start*/
+	.pay_record .ticket_record_list .wallet-money-record dl span:nth-child(2) {
+		width: 22.73%!important;
+	}
+	.pay_record .ticket_record_list .wallet-money-record dl span:nth-child(4) {
+		width: 14.6%!important;
+	}
+	.pay_record .ticket_record_list .wallet-money-record .record-title {
+		padding: 24px 0 16px 17px;
+	}
+	.pay_record .ticket_record_list .wallet-money-record .record-title p {
+		font-size: 16px;
+		color: #666;
+		font-weight: bold;
+		margin-bottom: 18px;
+	}
+	.pay_record .ticket_record_list .wallet-money-record .record-title a {
+		font-size: 14px;
+		color: #666;
+	}
+	.pay_record .ticket_record_list .wallet-money-record .record-title a.active {
+		color: #4290f7;
+	}
+	/*余额记录 end*/
 </style>
 <!--右侧主体部分-->
 <div class="user_right fr" id="pay_center">
 	<!--支付中心-->
 	<div class="pay_record oder">
-		<div class="oder01" style="margin-bottom: 16px;">
+		<div class="oder01">
 			<ul>
+				<li ng-class="{'active' : status=='pay-wallet'}" ng-click="toggleStatus('pay-wallet')"><a href="javascript:void(0)">我的钱包</a></li>
 				<li ng-class="{'active' : status=='pay-history'}" ng-click="toggleStatus('pay-history')"><a href="javascript:void(0)">交易记录</a></li>
 				<li ng-class="{'active' : status=='pay-info'}" ng-click="toggleStatus('pay-info')"><a href="javascript:void(0)">付款账户</a></li>
 			</ul>
 		</div>
+		<!--余额明细导航-->
+		<div class="match-menu" ng-show="status == 'balance'">
+                <span class="active">
+                    <a ng-bind="'余额明细'"></a>
+                        <i class="fa fa-remove" ng-click="toggleStatus('pay-wallet')"></i>
+                </span>
+		</div>
 		<!--支付中心列表-->
 		<div class="ticket_record_list">
+			<!--我的钱包-->
+			<div class="tab pay-wallet" ng-show="status == 'pay-wallet'" style="display: inline-block;">
+				<div class="pay-wallet-title">
+					欢迎您!<i></i>
+					商城公告:<span>全面升级,给你不一样的精彩!</span>
+					<div>上次登录时间:2017-12-12 33:33:33</div>
+				</div>
+				<div class="pay-wallet-content">
+					<div class="wallet-user-info">
+						<img src="static/img/pingan/purse-img.png" alt="">
+						<div>
+							<p>深圳市优软科技有限公司</p>
+							<h4>账户安全:<span>中</span></h4>
+							<div class="wallet-safe-level">
+								<span class="active"></span><span class="active"></span><span></span>
+								<a href="javascript:void(0)">提升</a>
+							</div>
+							<div class="icon-area">
+								<div class="active">
+									<img src="static/img/pingan/phone.png" alt="" />
+									<div class="expand-box">
+										<p>您已绑定手机<span>136****3333</span></p>
+										<a href="javascript:void(0)">管理</a>
+									</div>
+								</div>
+								<div>
+									<img src="static/img/pingan/man.png" alt="" />
+									<div class="expand-box">
+										<p>您还未进行实名认证</p>
+										<a href="javascript:void(0)">马上去认证</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="wallet-money">
+						<p><img src="static/img/pingan/money.png" alt="">账户余额</p>
+						<div class="money-balance"><span>¥</span><span>8509.</span><span>50</span></div>
+						<div class="money-income-pay">
+							<div><div>支出</div><span>¥</span>56636.00</div>
+							<div><div>收入</div><span>¥</span>56636.00</div>
+						</div>
+						<div class="wallet-options">
+							<span>充值</span>
+							<span>提现</span>
+							<a>查看</a>
+						</div>
+					</div>
+					<div class="wallet-card">
+						<p><img src="static/img/pingan/card.png" alt="">银行卡(<span>6</span>)</p>
+						<div>
+							<div>
+								<p>工商银行</p>
+								**&nbsp;&nbsp;<span>5623</span>
+							</div>
+							<div>
+								<p>工商银行</p>
+								**&nbsp;&nbsp;<span>5623</span>
+							</div>
+							<div>
+								<p>工商银行</p>
+								**&nbsp;&nbsp;<span>5623</span>
+							</div>
+							<div>
+								<a>+&nbsp;新增</a>
+							</div>
+						</div>
+						<a>管理</a>
+					</div>
+				</div>
+				<div class="wallet-empty-line"></div>
+				<div class="wallet-record">
+					<p>余额记录</p>
+					<div class="wallet-record-title">
+						<span>近期余额记录</span>
+						<a class="active">充值记录</a>&nbsp;|&nbsp;<a>提现记录</a>&nbsp;|&nbsp;<a>余额记录</a>
+						<a class="fr" ng-click="toggleStatus('balance')">查看余额明细</a>
+					</div>
+					<ul>
+						<li>
+							<span>2017-08-03 23:12:11</span>
+							<span class="record-company">深圳市优软科技有限公司</span>
+							<span>订单号:SS2017121500000071</span>
+							<span><i class="fa fa-minus"></i>¥1234.00</span>
+							<span class="pay-status">支付成功</span>
+						</li>
+						<li>
+							<span>2017-08-03 23:12:11</span>
+							<span class="record-company">深圳市优软科技有限公司</span>
+							<span>订单号:SS2017121500000071</span>
+							<span><i class="fa fa-plus"></i>¥1234.00</span>
+							<span class="pay-status">支付成功</span>
+						</li>
+						<li>
+							<span>2017-08-03 23:12:11</span>
+							<span class="record-company">深圳市优软科技有限公司</span>
+							<span>订单号:SS2017121500000071</span>
+							<span><i class="fa fa-minus"></i>¥1234.00</span>
+							<span class="pay-status">支付成功</span>
+						</li>
+						<li>
+							<span>2017-08-03 23:12:11</span>
+							<span class="record-company">深圳市优软科技有限公司</span>
+							<span>订单号:SS2017121500000071</span>
+							<span><i class="fa fa-plus"></i>¥1234.00</span>
+							<span class="pay-status">支付成功</span>
+						</li>
+						<li>
+							<span>2017-08-03 23:12:11</span>
+							<span class="record-company">深圳市优软科技有限公司</span>
+							<span>订单号:SS2017121500000071</span>
+							<span><i class="fa fa-minus"></i>¥1234.00</span>
+							<span class="pay-status">支付成功</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+			<!--余额明细-->
+			<div class="tab wallet-money-record" ng-show="status == 'balance'" style="display: inline-block">
+				<div class="record-title">
+					<p>余额明细</p>
+					<a class="active">充值记录</a>&nbsp;|&nbsp;<a>提现记录</a>&nbsp;|&nbsp;<a>交易记录</a>
+				</div>
+				<!--搜索时间筛选-->
+				<div class="screen">
+					<div class="sreach fr">
+						<div class="date fl">
+							<div class="data-input">
+								<input id="start" type="text" ng-model="startDate" readonly="readonly"
+									   class="form-control select-adder" placeholder="起始时间"
+									   datepicker-popup="yyyy-MM-dd"
+									   is-open="condition[0].open"
+									   current-text="今天" clear-text="清除" close-text="关闭"
+									   datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
+									   ng-click="openDatePicker($event, condition, 0,1)"
+									   ng-change="onDateCondition(1)"/>
+								<button class="open" ng-click="openDatePicker($event, condition, 0)"></button>
+							</div>
+
+							<em>–</em>
+							<div class="data-input">
+								<input id="end" type="text" ng-model="endDate" readonly="readonly"
+									   class="form-control select-adder" placeholder="结束时间"
+									   datepicker-popup="yyyy-MM-dd"
+									   is-open="condition[1].open"
+									   current-text="今天" clear-text="清除" close-text="关闭"
+									   datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
+									   ng-click="openDatePicker($event, condition, 1, 2)"
+									   ng-change="onDateCondition(2)"/>
+								<button class="open" ng-click="openDatePicker($event, condition, 1)"></button>
+							</div>
+						</div>
+						<div class="sreach-input fr">
+							<input type="search" placeholder="商家名称/订单号" class="form-control" ng-model="keyword" ng-search="search()"/>
+							<a class="seek" ng-click="search()">搜索</a>
+							<a class="seek" ng-click="exportToExcel()" style="margin-left: 5px;">导出</a>
+						</div>
+					</div>
+				</div>
+				<dl>
+					<dt>
+						<span>时间</span>
+						<span>订单号/流水号</span>
+						<span>商家名称</span>
+						<span>金额</span>
+						<span>
+							<select class="form-control select-adder" style="width: 90px">
+								<option value="ALL">交易方式</option>
+								<option value="1102">网银支付</option>
+								<option value="1103">线下转账</option>
+								<option value="1104">账户余额</option>
+							</select>
+						</span>
+						<span>
+							<select class="form-control select-adder" style="width: 90px">
+								<option>状态</option>
+								<option value="1">支付成功</option>
+								<option value="2">支付失败</option>
+								<option value="3">提现成功</option>
+								<option value="4">金额返还</option>
+							</select>
+						</span>
+					</dt>
+					<dd>
+						<span>2017-01-18 11:11:11</span>
+						<span>订单号:<a>201701160011213213</a></span>
+						<span>深圳市优软科技有限公司</span>
+						<span>
+							<!--<i class="fa fa-plus" style="color:#f51c24"></i>-->
+							<i class="fa fa-minus" style="color:#1da902"></i>
+                            <em style="color: #323232;">¥1212.22</em></span>
+						</span>
+						<span>
+							<b>线上支付</b>
+						</span>
+						<span><b>支付成功</b></span>
+					</dd>
+					<!--<dd ng-if="!tradeRecordPage || tradeRecordPage.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" style="font-size: 12px">暂无支付记录,请下单购买商品吧!</p>
+							<a href=".">马上去逛一逛</a>&nbsp;<i class="fa fa-arrow-right"></i>
+						</div>
+					</dd>-->
+				</dl>
+				<!--<div style="text-align: right;margin-right:20px;margin-top:10px;">
+					<span class="count-tip">显示 {{$$record.start}}-{{$$record.end}} 条,共 <em ng-bind="$$record.totalElements" style="color: #5078cb">2506</em> 条</span>
+				</div>-->
+				<!--<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="" style="font-size: 12px;">&raquo;</a>
+							</li>
+						</ul>
+						<div class="page-go-block">
+							<input class="page-number" type="number" 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-show="status == 'pay-info'" style="display: inline-block;">
 				<div class="tab-header">