1.4.5.2

EdgeUser/web/views/@default/servers/packages/index.html

@@ -0,0 +1,53 @@
+{$layout}
+{$template "menu"}
+
+<second-menu>
+    <menu-item href="/servers/packages" :class="{active: type == ''}">可用流量包</menu-item>
+    <menu-item href="/servers/packages?type=all" :class="{active: type == 'all'}">所有流量包</menu-item>
+</second-menu>
+
+<p class="comment" v-if="userPackages.length == 0">
+    <span v-if="type == ''">暂时还没有可用的流量包。</span>
+    <span v-if="type == 'all'">暂时还没有流量包。</span>
+</p>
+
+<div v-if="userPackages.length > 0">
+    <div class="margin"></div>
+    <table class="ui table selectable celled">
+        <thead>
+        <tr>
+            <th>流量包</th>
+            <th style="width: 7em">区域</th>
+            <th style="width: 7em">有效期</th>
+            <th style="width: 7em">开始日期</th>
+            <th style="width: 7em">结束日期</th>
+            <th style="width: 7em">已用流量</th>
+            <th style="width: 7em">剩余流量</th>
+            <th style="width: 12em">购买时间</th>
+        </tr>
+        </thead>
+        <tr v-for="up in userPackages">
+            <td>
+                <span v-if="up.package != null">{{up.package.size}}{{up.package.unit.toUpperCase().replace(/(.)B/, "$1iB")}}</span>
+                <span v-else class="disabled">[已删除]</span>
+
+                <div v-if="up.isUsedAll || up.isExpired">
+                    <span v-if="up.isUsedAll" class="small red">已用尽</span>
+                    <span v-else-if="up.isExpired" class="small red">已过期</span>
+                </div>
+            </td>
+            <td>
+                <span v-if="up.region != null">{{up.region.name}}</span>
+                <span v-else="" class="disabled">[已删除]</span>
+            </td>
+            <td>{{up.periodCount}}{{up.periodUnitName}}</td>
+            <td>{{up.dayFrom}}</td>
+            <td>{{up.dayTo}}</td>
+            <td><span :class="{disabled: up.usedSize == '0B'}">{{up.usedSize}}</span></td>
+            <td><span :class="{disabled: up.availableSize == '0B'}">{{up.availableSize}}</span></td>
+            <td>{{up.createdTime}}</td>
+        </tr>
+    </table>
+
+    <page-box></page-box>
+</div>