1.4.5.2

EdgeUser/web/views/@default/lb/server/settings/plan/index.html

@@ -0,0 +1,76 @@
+{$layout}
+
+{$template "/left_menu"}
+
+<div class="right-box">
+    <form class="ui form" data-tea-success="success" data-tea-action="$">
+        <csrf-token></csrf-token>
+
+        <input type="hidden" name="serverId" :value="serverId"/>
+        <table class="ui table selectable definition">
+            <tr>
+                <td class="title">当前绑定套餐</td>
+                <td>
+                    <span v-if="userPlan.id == 0" class="disabled">暂时还没有绑定套餐。
+                        <a href="" @click.prevent="update()" v-if="!isUpdating">[修改]</a>
+                        <a href="" @click.prevent="update()" v-if="isUpdating">[取消修改]</a>
+                    </span>
+                    <div v-else>
+                        {{userPlan.plan.name}}<span v-if="userPlan.name.length > 0">-{{userPlan.name}}</span> （到期时间：{{userPlan.dayTo}}）&nbsp;
+                        <a href="" @click.prevent="update()" v-if="!isUpdating">[修改]</a>
+                        <a href="" @click.prevent="update()" v-if="isUpdating">[取消修改]</a>
+                        <p class="comment" v-if="userPlan.isExpired"><a href="/plans"><span class="red">[已过期，请及时续费]</span></a></p>
+                    </div>
+                </td>
+            </tr>
+            <!-- 注意：必须使用v-if -->
+            <tr v-if="isUpdating">
+                <td>新套餐 *</td>
+                <td>
+                    <input type="hidden" name="isChanged" value="1"/>
+                    <span v-if="userPlans.length == 0" class="disabled">当前还没有可以使用的套餐。</span>
+                    <div v-else>
+                        <select class="ui dropdown auto-width" name="userPlanId" v-model="newUserPlanId" @change="changeUserPlan">
+                            <option value="0">[不使用套餐]</option>
+                            <option v-for="userPlan in userPlans" :value="userPlan.id">{{userPlan.name}}（{{userPlan.dayTo}}）</option>
+                        </select>
+                        <p class="comment" v-if="newUserPlanId > 0 && newUserPlanId == userPlan.id">当前正在使用的套餐。</p>
+                    </div>
+                </td>
+            </tr>
+            <tr v-if="isUpdating && newUserPlan != null">
+                <td>所选套餐限制</td>
+                <td>
+                    <div v-if="newUserPlan != null && newUserPlanDescription.length > 0">
+                        {{newUserPlanDescription}}
+                    </div>
+                    <div v-else><span class="disabled">没有限制</span></div>
+
+                    <div v-if="newUserPlanLimit.length > 0 && newUserPlanId != userPlan.id">
+                        <span class="red">{{newUserPlanLimit}}</span>
+                    </div>
+                </td>
+            </tr>
+
+            <tbody v-if="!isUpdating && hasTrafficLimit">
+                <tr v-if="userPlan.plan.trafficLimit.dailySize != null && userPlan.plan.trafficLimit.dailySize.count > 0">
+                    <td>套餐日流量限制</td>
+                    <td>
+                        <size-capacity-view :v-value="userPlan.plan.trafficLimit.dailySize"></size-capacity-view>
+                        <p class="comment">当天流量：{{trafficDailyFormat}}</p>
+                    </td>
+                </tr>
+                <tr v-if="userPlan.plan.trafficLimit.monthlySize != null && userPlan.plan.trafficLimit.monthlySize.count > 0">
+                    <td>套餐月流量限制</td>
+                    <td>
+                        <size-capacity-view :v-value="userPlan.plan.trafficLimit.monthlySize"></size-capacity-view>
+                        <p class="comment">当月流量：{{trafficMonthlyFormat}}</p>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+        <submit-btn v-show="newUserPlanLimit.length == 0 && newUserPlanId != userPlan.id"></submit-btn>
+        <button class="ui button disabled" type="button" v-if="newUserPlanLimit.length > 0 || newUserPlanId == userPlan.id">保存</button>
+    </form>
+</div>

EdgeUser/web/views/@default/lb/server/settings/plan/index.js

@@ -0,0 +1,69 @@
+Tea.context(function () {
+	this.isUpdating = false
+
+	this.success = NotifyReloadSuccess("保存成功")
+
+	this.update = function () {
+		this.isUpdating = !this.isUpdating
+	}
+
+	this.newUserPlanId = 0
+	this.newUserPlan = null
+	this.newUserPlanDescription = ""
+	this.newUserPlanLimit = ""
+
+	let changePlanRequestId = ""
+
+	this.changeUserPlan = function () {
+		this.newUserPlan = null
+		this.newUserPlanDescription = ""
+		this.newUserPlanLimit = ""
+		if (this.newUserPlanId == 0) {
+			return
+		}
+		let that = this
+		this.newUserPlan = this.userPlans.find(function (v) {
+			return v.id == that.newUserPlanId
+		})
+		if (this.newUserPlan != null) {
+			changePlanRequestId = Math.random().toString()
+			var requestId = changePlanRequestId
+
+			this.$post(".data")
+				.params({
+					serverId: this.serverId,
+					userPlanId: this.newUserPlanId
+				})
+				.success(function (resp) {
+					// check request
+					if (requestId != changePlanRequestId) {
+						return
+					}
+
+					let quotaInfo = resp.data
+					let descriptionItems = []
+					if (quotaInfo.servers.max > 0) {
+						descriptionItems.push("网站数限制：" + quotaInfo.servers.current + "+1/" + quotaInfo.servers.max)
+						if (!quotaInfo.servers.isValid) {
+							this.newUserPlanLimit = "已绑定网站数超出当前套餐限制"
+						}
+					}
+					if (quotaInfo.allServerNames.max > 0) {
+						descriptionItems.push("域名数限制：" + quotaInfo.allServerNames.current + "+" + quotaInfo.serverNames.current + "/" + quotaInfo.allServerNames.max)
+						if (!quotaInfo.allServerNames.isValid) {
+							this.newUserPlanLimit = "已绑定域名数超出当前套餐限制"
+						}
+					}
+					if (quotaInfo.serverNames.max > 0) {
+						descriptionItems.push("单网站域名数限制：+" + quotaInfo.serverNames.current + "/" + quotaInfo.serverNames.max)
+						if (!quotaInfo.serverNames.isValid) {
+							this.newUserPlanLimit = "当前网站域名数超出当前套餐限制"
+						}
+					}
+					if (descriptionItems.length > 0) {
+						this.newUserPlanDescription = descriptionItems.join("；") + "。"
+					}
+				})
+		}
+	}
+})