shadowsocks-manager/plugins/webgui/public/views/dialog/order.html

A shadowsocks manager tool for multi user and traffic control.

<md-dialog aria-label="order dialog" ng-style="setDialogWidth()">
    <md-toolbar hide-gt-sm>
        <div class="md-toolbar-tools">
            <h2>订单详情</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="publicInfo.hide()">
                <md-icon class="material-icons" aria-label="Close dialog">close</md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-dialog-content>
        <div class="md-dialog-content">
            <md-list>
                <md-divider></md-divider>
                <md-list-item>
                    <div flex layout="row" layout-align="space-between center">
                        <div flex="30" translate>订单号：</div><div flex="70" style="text-align:right; font-size: 0.9em;">{{ publicInfo.order.orderId }}</div>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-list-item>
                    <div flex layout="row" layout-align="space-between center">
                        <div flex="30" translate>订单类型：</div><div flex="70" style="text-align:right;">{{ publicInfo.order.orderName }}</div>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-list-item ng-if="publicInfo.order.amount">
                    <div flex layout="row" layout-align="space-between center">
                        <div flex="30" translate>金额：</div><div flex="70" style="text-align:right; font-size: 0.9em;">{{ publicInfo.order.amount }}</div>
                    </div>
                </md-list-item>
                <md-divider ng-if="publicInfo.order.amount"></md-divider>
                <md-list-item ng-if="publicInfo.order.refTime">
                    <div flex layout="row" layout-align="space-between center">
                        <div flex="30" translate>时长：</div><div flex="70" style="text-align:right; font-size: 0.9em;">{{ publicInfo.order.refTime | timePeriod }}</div>
                    </div>
                </md-list-item>
                <md-divider ng-if="publicInfo.order.refTime"></md-divider>
                <md-list-item ng-click="publicInfo.toUserPage(publicInfo.order.userId)">
                    <div flex layout="row" layout-align="space-between center">
                        <div flex="30" translate>用户名：</div>
                        <div flex layout="row" layout-align="end center">
                            <div style="text-align:right; font-size: 0.9em;">{{ publicInfo.order.username }}</div>
                            <div><md-icon>chevron_right</md-icon></div>
                        </div>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-list-item>
                    <div flex layout="row" layout-align="space-between center">
                        <div flex="30" translate>端口：</div><div flex="70" style="text-align:right; font-size: 0.9em;">{{ publicInfo.order.port }}</div>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-list-item>
                    <div flex layout="row" layout-align="space-between center">
                        <div flex="30" translate>创建时间：</div><div flex="70" style="text-align:right; font-size: 0.9em;">
                            <span style="font-size: 0.9em;">{{ publicInfo.order.createTime | date : 'yyyy-MM-dd HH:mm' }}</span><br><span style="font-size: 0.9em;">{{ publicInfo.order.createTime | timeago }}</span>
                        </div>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-list-item>
                    <div flex layout="row" layout-align="space-between center">
                        <div flex="30" translate>状态：</div><div flex="70" style="text-align:right;">{{ publicInfo.order.status | order }}</div>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
            <md-list>
        </div>
    </md-dialog-content>
</md-dialog>