1.4.5.2
This commit is contained in:
unknown
255
EdgeUser/web/views/@default/plans/buy.html
Normal file
255
EdgeUser/web/views/@default/plans/buy.html
Normal file
@@ -0,0 +1,255 @@
|
||||
{$layout "layout"}
|
||||
{$template "menu"}
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="planId" :value="planId"/>
|
||||
|
||||
<table class="ui table selectable celled structured plans-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="two wide"><span class="small">用量/功能</span></th>
|
||||
<th v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<div class="plan-name">{{plan.name}}</div>
|
||||
<div><span class="small grey">{{plan.description}}</span> </div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- 选择 -->
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td v-for="plan in plans" class="" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}">
|
||||
<button class="ui button basic" :class="{primary: selectedPlan != null && plan.id == selectedPlan.id}" type="button" @click.prevent="selectPlan(plan, true)">选择</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 流量限制 -->
|
||||
<tr>
|
||||
<td rowspan="2" class="value-category-name">流量配额</td>
|
||||
<td class="value-name">日流量限制</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<div v-if="plan.trafficLimit != null && plan.trafficLimit.isOn && plan.trafficLimit.dailySize != null && plan.trafficLimit.dailySize.count > 0">
|
||||
{{composeCapacity(plan.trafficLimit.dailySize)}}
|
||||
</div>
|
||||
<div v-else>无限制</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-name">月流量限制</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<div v-if="plan.trafficLimit != null && plan.trafficLimit.isOn && plan.trafficLimit.monthlySize != null && plan.trafficLimit.monthlySize.count > 0">
|
||||
{{composeCapacity(plan.trafficLimit.monthlySize)}}
|
||||
</div>
|
||||
<div v-else>无限制</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 带宽限制 -->
|
||||
<tr>
|
||||
<td class="value-category-name">带宽限制</td>
|
||||
<td class="value-name">单节点带宽限制</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<div v-if="plan.bandwidthLimitPerNode != null && plan.bandwidthLimitPerNode.count > 0">
|
||||
<bandwidth-size-capacity-view :v-value="plan.bandwidthLimitPerNode"></bandwidth-size-capacity-view>
|
||||
</div>
|
||||
<div v-else>无限制</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 用量限制 -->
|
||||
<tr>
|
||||
<td rowspan="8" class="value-category-name">用量配额</td>
|
||||
<td class="value-name">总网站数限制</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<plan-quota-value v-model="plan.totalServers"></plan-quota-value>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-name">总域名数限制</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<plan-quota-value v-model="plan.totalServerNames"></plan-quota-value>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-name">每个网站最多域名数</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<plan-quota-value v-model="plan.totalServerNamesPerServer"></plan-quota-value>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-name">单日请求数限制</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<plan-quota-value v-model="plan.dailyRequests"></plan-quota-value>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-name">单月请求数限制</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<plan-quota-value v-model="plan.monthlyRequests"></plan-quota-value>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-name">单日Websocket连接数限制</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<plan-quota-value v-model="plan.dailyWebsocketConnections"></plan-quota-value>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-name">单月Websocket连接数限制</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<plan-quota-value v-model="plan.monthlyWebsocketConnections"></plan-quota-value>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-name">文件上传限制</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<span v-if="plan.maxUploadSize != null && plan.maxUploadSize.count > 0">{{composeCapacity(plan.maxUploadSize)}}</span>
|
||||
<span v-else>无限制</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 功能限制 -->
|
||||
<tr>
|
||||
<td :colspan="plans.length+2">
|
||||
<more-options-indicator>
|
||||
<span v-if="!moreOptionsVisible">查看网站功能支持</span>
|
||||
<span v-if="moreOptionsVisible">收起网站功能支持</span>
|
||||
</more-options-indicator>
|
||||
</td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr v-for="(feature, index) in allFeatures">
|
||||
<td :rowspan="allFeatures.length" v-if="index == 0" class="value-category-name">网站功能</td>
|
||||
<td class="value-name">{{feature.name}}</td>
|
||||
<td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
|
||||
<span v-if="plan.hasFullFeatures || (plan.featureCodes != null && plan.featureCodes.$contains(feature.code))">
|
||||
<i class="icon check green"></i>
|
||||
</span>
|
||||
<span v-else>/</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
|
||||
<!-- 选择 -->
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td v-for="plan in plans" class="bottom" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}">
|
||||
<button class="ui button basic" :class="{primary: selectedPlan != null && plan.id == selectedPlan.id}" type="button" @click.prevent="selectPlan(plan)">选择</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr v-if="selectedPlan != null">
|
||||
<td>已选择套餐</td>
|
||||
<td><strong>{{selectedPlan.name}}</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">账户余额</td>
|
||||
<td>
|
||||
<span v-if="userAccount != null">{{userAccount.total}}元</span>
|
||||
<span v-else>0元</span>
|
||||
<a href="/finance/charge"><span class="small">[充值]</span></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="selectedPlan != null">
|
||||
<td>计费方式</td>
|
||||
<td>
|
||||
<span v-if="selectedPlan.priceType == 'period'">按时间周期付费，{{selectedPlan.monthlyPrice}}元/月，{{selectedPlan.seasonallyPrice}}元/季度，{{selectedPlan.yearlyPrice}}元/年。</span>
|
||||
<span v-if="selectedPlan.priceType == 'traffic'">按流量付费。</span>
|
||||
<span v-if="selectedPlan.priceType == 'bandwidth'">按带宽付费。</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- 按时间周期计费 -->
|
||||
<tbody v-if="selectedPlan != null && selectedPlan.priceType == 'period'">
|
||||
<tr>
|
||||
<td>周期 *</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="period" v-model="period">
|
||||
<option value="monthly">按月</option>
|
||||
<option value="seasonally">按季度</option>
|
||||
<option value="yearly">按年</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="period == 'monthly'">
|
||||
<td>月数 *</td>
|
||||
<td>
|
||||
<div class="ui input right labeled">
|
||||
<input type="text" name="countMonths" value="1" style="width: 5em" maxlength="4" v-model="countMonths"/>
|
||||
<span class="ui label">月</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="period == 'seasonally'">
|
||||
<td>季度数 *</td>
|
||||
<td>
|
||||
<div class="ui input right labeled">
|
||||
<input type="text" name="countSeasons" value="1" style="width: 5em" maxlength="4" v-model="countSeasons"/>
|
||||
<span class="ui label">季度</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="period == 'yearly'">
|
||||
<td>年数 *</td>
|
||||
<td>
|
||||
<div class="ui input right labeled">
|
||||
<input type="text" name="countYears" value="1" style="width: 5em" maxlength="4" v-model="countYears"/>
|
||||
<span class="ui label">年</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>预计费用</td>
|
||||
<td>
|
||||
<span v-if="fee > 0">{{fee}}元</span>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<!-- 按流量计费 -->
|
||||
<tbody v-if="selectedPlan != null && selectedPlan.priceType == 'traffic'">
|
||||
<tr>
|
||||
<td>结束日期</td>
|
||||
<td>
|
||||
<datepicker :v-name="'dayTo'" :v-bottom-left="true" :v-value="defaultDayTo"></datepicker>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>预计费用</td>
|
||||
<td>月结</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<!-- 按带宽计费 -->
|
||||
<tbody v-if="selectedPlan != null && selectedPlan.priceType == 'bandwidth'">
|
||||
<tr>
|
||||
<td>结束日期</td>
|
||||
<td>
|
||||
<datepicker :v-name="'dayTo'" :v-bottom-left="true" :v-value="defaultDayTo"></datepicker>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>预计费用</td>
|
||||
<td>月结</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tr>
|
||||
<td>备注名称</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="50"/>
|
||||
<p class="comment">用于识别不同的套餐，默认为套餐名称。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn>确定购买</submit-btn>
|
||||
</form>
|
||||
Reference in New Issue
Block a user