72 lines
3.0 KiB
HTML
72 lines
3.0 KiB
HTML
{$layout}
|
|
{$template "menu"}
|
|
|
|
<div class="margin"></div>
|
|
|
|
<form class="ui form" data-tea-action="$" data-tea-success="success" ref="calculatorForm">
|
|
<table class="ui table definition selectable">
|
|
<tr>
|
|
<td class="title">计费类型</td>
|
|
<td>
|
|
<radio name="priceType" :v-value="'bandwidth'" v-model="config.priceType">按带宽计费</radio>
|
|
|
|
<radio name="priceType" :v-value="'traffic'" v-model="config.priceType">按流量计费</radio>
|
|
</td>
|
|
</tr>
|
|
<tr v-show="config.priceType == 'bandwidth'">
|
|
<td>所需带宽</td>
|
|
<td>
|
|
<div class="ui fields inline">
|
|
<div class="ui field">
|
|
<input type="text" name="bandwidth" size="10" maxlength="10" @input="change" ref="bandwidthInput"/>
|
|
</div>
|
|
<div class="ui field">
|
|
<select class="ui dropdown auto-width" name="bandwidthUnit" @change="change">
|
|
<option value="mb">Mbps</option>
|
|
<option value="gb">Gbps</option>
|
|
<option value="tb">Tbps</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr v-show="config.priceType == 'traffic'">
|
|
<td>所需流量</td>
|
|
<td>
|
|
<div class="ui fields inline">
|
|
<div class="ui field">
|
|
<input type="text" name="traffic" size="10" maxlength="10" @input="change" ref="trafficInput"/>
|
|
</div>
|
|
<div class="ui field">
|
|
<select class="ui dropdown auto-width" name="trafficUnit" @change="change">
|
|
<option value="gb">GiB</option>
|
|
<option value="tb">TiB</option>
|
|
<option value="eb">EiB</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr v-show="regions.length > 0">
|
|
<td>所在区域</td>
|
|
<td>
|
|
<select class="ui dropdown auto-width" name="regionId" @change="change">
|
|
<option value="0">[不区分区域]</option>
|
|
<option v-for="region in regions" :value="region.id">{{region.name}}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>价格</td>
|
|
<td>
|
|
<strong v-if="formattedAmount.length > 0">
|
|
￥{{formattedAmount}}元
|
|
<span v-if="hasRegionPrice" class="small grey" style="font-weight: normal">（基于区域价格设定）</span>
|
|
</strong>
|
|
<span v-else class="disabled">-</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<submit-btn>计算价格</submit-btn>
|
|
</form> |