75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
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> |
|
|
阶梯价格：<span v-if="config.ranges.length > 0">{{config.ranges.length}}段</span><span v-else class="disabled">没有设置</span> <span v-if="config.supportRegions">| 支持区域流量计费</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>`
|
|
}) |