Initial commit (code only without large binaries)

EdgeAdmin/web/public/js/components/plans/plan-price-traffic-config-box-plus.js

@@ -0,0 +1,75 @@
+Vue.component("plan-price-traffic-config-box", {
+	props: ["v-plan-price-traffic-config"],
+	data: function () {
+		let config = this.vPlanPriceTrafficConfig
+		if (config == null) {
+			config = {
+				base: 0,
+				ranges: [],
+				supportRegions: false
+			}
+		}
+
+		if (config.ranges == null) {
+			config.ranges = []
+		}
+
+		return {
+			config: config,
+			priceBase: config.base,
+			isEditing: false
+		}
+	},
+	watch: {
+		priceBase: function (v) {
+			let f = parseFloat(v)
+			if (isNaN(f) || f < 0) {
+				this.config.base = 0
+			} else {
+				this.config.base = f
+			}
+		}
+	},
+	methods: {
+		edit: function () {
+			this.isEditing = !this.isEditing
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="trafficPriceJSON" :value="JSON.stringify(config)"/>
+	<div>
+		基础流量价格：<span v-if="config.base > 0">{{config.base}}元/GB</span><span v-else class="disabled">没有设置</span> &nbsp; | &nbsp; 
+		阶梯价格：<span v-if="config.ranges.length > 0">{{config.ranges.length}}段</span><span v-else class="disabled">没有设置</span>  &nbsp; <span v-if="config.supportRegions">| &nbsp;支持区域流量计费</span>
+		<div style="margin-top: 0.5em">
+			<a href="" @click.prevent="edit">修改 <i class="icon angle" :class="{up: isEditing, down: !isEditing}"></i></a>
+		</div>		
+	</div>
+	<div v-show="isEditing" style="margin-top: 0.5em">
+		<table class="ui table definition selectable" style="margin-top: 0">
+			<tr>
+				<td class="title">基础流量费用</td>
+				<td>
+					<div class="ui input right labeled">
+						<input type="text" v-model="priceBase" maxlength="10" style="width: 7em"/>
+						<span class="ui label">元/GB</span>
+					</div>
+					<p class="comment">没有定义流量阶梯价格时，使用此价格。</p>
+				</td>
+			</tr>
+			<tr>
+				<td>流量阶梯价格</td>
+				<td>
+					<plan-traffic-ranges v-model="config.ranges"></plan-traffic-ranges>
+				</td>
+			</tr>
+			<tr>
+				<td>支持按区域流量计费</td>
+				<td>
+					<checkbox v-model="config.supportRegions"></checkbox>
+					<p class="comment">选中后，表示可以根据节点所在区域设置不同的流量价格；并且开启此项后才可以使用流量包。</p>
+				</td>
+			</tr>
+		</table>
+	</div>
+</div>`
+})