[fix]商户号管理页面优化

master
hellolujian 6 years ago
parent 0fe6d492f4
commit 91a89dcc51

@ -23,20 +23,20 @@ define(['angular', 'static/commons/commons', 'uiBootstrap', 'uiRouter', 'ngBootS
// 前端渲染的end索引 // 前端渲染的end索引
$scope.endIndexMap = {}; $scope.endIndexMap = {};
// 初始化索引是60 // 初始化索引是30
const initEndIndex = 60; $scope.initEndIndex = 30;
$scope.loadClient = function () { $scope.loadClient = function () {
$http.get('/sys/merchant_id').then(function (resp) { $http.get('/sys/merchant_id').then(function (resp) {
$scope.clientsMap = resp.data; $scope.clientsMap = resp.data;
$scope.client_loading = false; $scope.client_loading = false;
// 加入对应项的end索引值 // 加入对应项的end索引值
// 如果数据小于60,索引值为数据长度 // 如果数据小于initEndIndex,索引值为数据长度
// 否则设置为60 // 否则设置为initEndIndex
for (var key in $scope.clientsMap) { for (var key in $scope.clientsMap) {
$scope.endIndexMap[key] = initEndIndex; $scope.endIndexMap[key] = $scope.initEndIndex;
var length = $scope.clientsMap[key].length; var length = $scope.clientsMap[key].length;
if (length <= initEndIndex) if (length <= $scope.initEndIndex)
$scope.endIndexMap[key] = length; $scope.endIndexMap[key] = length;
} }
@ -46,12 +46,12 @@ define(['angular', 'static/commons/commons', 'uiBootstrap', 'uiRouter', 'ngBootS
/** /**
* 点击更多加载 * 点击更多加载
* 判断加60后的索引是否超出数组长度 * 判断加initEndIndex后的索引是否超出数组长度
* @param key * @param key
*/ */
$scope.more = function(key) { $scope.more = function(key) {
var endIndex = $scope.endIndexMap[key] + initEndIndex; var endIndex = $scope.endIndexMap[key] + $scope.initEndIndex;
$scope.endIndexMap[key] = endIndex; $scope.endIndexMap[key] = endIndex;
if (endIndex > $scope.clientsMap[key].length) { if (endIndex > $scope.clientsMap[key].length) {
@ -65,9 +65,9 @@ define(['angular', 'static/commons/commons', 'uiBootstrap', 'uiRouter', 'ngBootS
* @param key * @param key
*/ */
$scope.packup = function(key) { $scope.packup = function(key) {
$scope.endIndexMap[key] = initEndIndex; $scope.endIndexMap[key] = $scope.initEndIndex;
var length = $scope.clientsMap[key].length; var length = $scope.clientsMap[key].length;
if (length <= initEndIndex) if (length <= $scope.initEndIndex)
$scope.endIndexMap[key] = length; $scope.endIndexMap[key] = length;
}; };
@ -87,12 +87,27 @@ define(['angular', 'static/commons/commons', 'uiBootstrap', 'uiRouter', 'ngBootS
$scope.params = {}; $scope.params = {};
$scope.isCollapsed = true; $scope.isCollapsed = true;
// 前端渲染的end索引
$scope.endIndexMap = {};
// 初始化索引是30
$scope.initEndIndex = 30;
$scope.loadNotTradeClient = function () { $scope.loadNotTradeClient = function () {
$scope.disable_button = true; $scope.disable_button = true;
$http.get('/sys/merchant_id/trade').then(function (resp) { $http.get('/sys/merchant_id/trade').then(function (resp) {
$scope.notTradeClientsMap = resp.data.merchant_id_map; $scope.notTradeClientsMap = resp.data.merchant_id_map;
$scope.refresh_time = resp.data.refresh_time; $scope.refresh_time = resp.data.refresh_time;
$scope.disable_button = false; $scope.disable_button = false;
// 加入对应项的end索引值
// 如果数据小于initEndIndex索引值为数据长度
// 否则设置为initEndIndex
for (var key in $scope.notTradeClientsMap) {
$scope.endIndexMap[key] = $scope.initEndIndex;
var length = $scope.notTradeClientsMap[key].length;
if (length <= $scope.initEndIndex)
$scope.endIndexMap[key] = length;
}
}); });
}; };
$scope.loadNotTradeClient(); $scope.loadNotTradeClient();
@ -116,6 +131,35 @@ define(['angular', 'static/commons/commons', 'uiBootstrap', 'uiRouter', 'ngBootS
size: 'sm' size: 'sm'
}) })
}; };
/**
* 点击更多加载
* 判断加initEndIndex后的索引是否超出数组长度
* @param key
*/
$scope.more = function(key) {
var endIndex = $scope.endIndexMap[key] + $scope.initEndIndex;
$scope.endIndexMap[key] = endIndex;
if (endIndex > $scope.notTradeClientsMap[key].length) {
$scope.endIndexMap[key] = $scope.notTradeClientsMap[key].length;
}
};
/**
* 收起
* @param key
*/
$scope.packup = function(key) {
$scope.endIndexMap[key] = $scope.initEndIndex;
var length = $scope.notTradeClientsMap[key].length;
if (length <= $scope.initEndIndex)
$scope.endIndexMap[key] = length;
};
}]); }]);
app.controller('showClientsCtrl', ['$scope', '$http','qrJson', function ($scope, $http,qrJson) { app.controller('showClientsCtrl', ['$scope', '$http','qrJson', function ($scope, $http,qrJson) {
$scope.qrJson = qrJson.data; $scope.qrJson = qrJson.data;

@ -156,7 +156,7 @@
</a> </a>
--> -->
<a ng-if="clients.length > 60" <a ng-if="clients.length > initEndIndex"
class="list-group-item col-sm-12 col-xs-12 text-center" > class="list-group-item col-sm-12 col-xs-12 text-center" >
<span class="small-box-footer cursor" <span class="small-box-footer cursor"
ng-click="more(key)" ng-click="more(key)"
@ -165,7 +165,7 @@
</span> </span>
<span class="small-box-footer cursor pull-right" <span class="small-box-footer cursor pull-right"
ng-click="packup(key)" ng-click="packup(key)"
ng-if="endIndexMap[key] > 60"> ng-if="endIndexMap[key] > initEndIndex">
收起 <i class="fa fa-arrow-circle-up"></i> 收起 <i class="fa fa-arrow-circle-up"></i>
</span> </span>
</a> </a>

@ -16,25 +16,54 @@
<div> <div>
<div class="list-group col-sm-12 col-xs-12" <div class="list-group col-sm-12 col-xs-12"
ng-repeat="(key, clients) in notTradeClientsMap"> ng-repeat="(key, clients) in notTradeClientsMap">
<!--
<a class="list-group-item active col-sm-12 col-xs-12"> <a class="list-group-item active col-sm-12 col-xs-12">
{{key|choose_merchant_id}} {{key|choose_merchant_id}}
<span ng-show="clients.length>59" class="small-box-footer cursor pull-right" ng-click="isCollapsed = !isCollapsed">更多 <i class="fa fa-arrow-circle-right" ng-class="{'i-rotate_90':!isCollapsed}"></i></span> <span ng-show="clients.length>59" class="small-box-footer cursor pull-right" ng-click="isCollapsed = !isCollapsed">更多 <i class="fa fa-arrow-circle-right" ng-class="{'i-rotate_90':!isCollapsed}"></i></span>
</a> </a>
-->
<a class="list-group-item col-sm-2 col-xs-6 cursor" <a class="list-group-item col-sm-2 col-xs-6 cursor"
ng-repeat="client in clients | orderBy:'client_count':true" ng-repeat="client in clients.slice(0, endIndexMap[key]) | orderBy:'client_count':true"
ng-click="showClient(client.sub_merchant_id)" ng-if="$index<60"> ng-click="showClient(client.sub_merchant_id)">
<span>{{client.sub_merchant_id}}&nbsp;<i class="fa fa-clock-o text-danger" <span>{{client.sub_merchant_id}}&nbsp;
<i class="fa fa-clock-o text-danger"
title="Temp Sub Merchant ID" title="Temp Sub Merchant ID"
ng-if="client.temp_sub_merchant"></i></span> ng-if="client.temp_sub_merchant">
<span class="badge" aria-hidden="true" title="show detail">{{client.client_count}}</span> </i>
</span>
<span class="badge" aria-hidden="true" title="show detail">
{{client.client_count}}
</span>
</a> </a>
<a class="list-group-item col-sm-2 col-xs-6 cursor" ng-hide="isCollapsed" <!--
<a class="list-group-item col-sm-2 col-xs-6 cursor"
ng-hide="isCollapsed"
ng-repeat="client in clients | orderBy:'client_count':true" ng-repeat="client in clients | orderBy:'client_count':true"
ng-click="showClient(client.sub_merchant_id)" ng-if="$index>59"> ng-click="showClient(client.sub_merchant_id)"
<span>{{client.sub_merchant_id}}&nbsp;<i class="fa fa-clock-o text-danger" ng-if="$index>59">
<span>{{client.sub_merchant_id}}&nbsp;
<i class="fa fa-clock-o text-danger"
title="Temp Sub Merchant ID" title="Temp Sub Merchant ID"
ng-if="client.temp_sub_merchant"></i></span> ng-if="client.temp_sub_merchant">
<span class="badge" aria-hidden="true" title="show detail">{{client.client_count}}</span> </i>
</span>
<span class="badge" aria-hidden="true" title="show detail">
{{client.client_count}}
</span>
</a>
-->
<a ng-if="clients.length > initEndIndex"
class="list-group-item col-sm-12 col-xs-12 text-center" >
<span class="small-box-footer cursor"
ng-click="more(key)"
ng-if="endIndexMap[key] < clients.length">
更多 <i class="fa fa-arrow-circle-down"></i>
</span>
<span class="small-box-footer cursor pull-right"
ng-click="packup(key)"
ng-if="endIndexMap[key] > initEndIndex">
收起 <i class="fa fa-arrow-circle-up"></i>
</span>
</a> </a>
</div> </div>
</div> </div>

Loading…
Cancel
Save