+ //
+ //
+ // `;
+
+ tableBody.html(tableHtml);
+ },
/**
- * 更新倒计时显示 - 适配扁平化布局
+ * 渲染移动端原生table
+ * @param {object[]} teamList - 组队列表数据
*/
- private updateCountdown(timeLeft: { hours: number; minutes: number; seconds: number }): void {
- const $hours = $("#countdown-hours-flat");
- const $minutes = $("#countdown-minutes-flat");
- const $seconds = $("#countdown-seconds-flat");
+ renderMobileTable: function (teamList: any) {
+ const tableContainer = $(".activity-simulated-table");
+ if (!tableContainer.length) return;
- // 更新数字（无动画效果）
- const updateDigit = ($element: any, value: number) => {
- const newValue = value.toString().padStart(2, '0');
- $element.text(newValue);
+ // 为移动端添加特殊的类名
+ tableContainer.addClass("mobile-table-view");
+
+ let tableHtml = `
+
+
+
+ | 产品 |
+ 日常价 |
+ 4人团 |
+
+
+
+ `;
+
+ // 渲染产品行
+ teamList.forEach((product: any, index: any) => {
+ const dailyPrice: any = product.discounts.find(
+ (d: any) => d.member_count === 0
+ );
+ const tier10: any = product.discounts.find(
+ (d: any) => d.member_count === 4
+ );
+
+ const originalPrice: any = parseFloat(product.original_price).toFixed(0);
+ const price10: any = parseFloat(tier10.discounted_price).toFixed(2);
+
+ const rowClass = index % 2 === 0 ? "even-row" : "odd-row";
+
+ tableHtml += `
+
+ | ${product.product_name} |
+
+
+ ¥
+ ${originalPrice}
+
+ |
+
+
+ ¥
+ ${price10}
+
+ 省最高¥108
+ |
+
+ `;
+ });
+
+ // 渲染优惠力度行
+ const lastProduct = teamList[teamList.length - 1];
+ if (lastProduct) {
+ tableHtml += `
+
+ | 优惠力度 |
+
+
+ 无折扣
+
+ |
+
+
+ 约0.01折
+
+ |
+
+ `;
+ }
+
+ tableHtml += `
+
+
+ `;
+
+ // 替换原有内容
+ tableContainer.html(tableHtml);
+ },
+
+ /**
+ * 渲染活动页的阶梯优惠表格（智能选择渲染方式）
+ * @param {object[]} teamList - 组队列表数据
+ */
+ renderActivityTable: function (teamList: any, type: string) {
+ this.renderDesktopTable(teamList, type);
+ },
+
+ /**
+ * 渲染弹窗内的阶梯优惠表格
+ * @param {object[]} teamList - 组队列表数据
+ */
+ renderModalTable: function (teamList: any, type: string) {
+ const modalBody = $(".team-modal-container .team-modal-table-body");
+ if (!modalBody.length) return;
+
+ window
+ .jQuery(".team-modal-container .btn-confirm")
+ .data("type", "super_discount");
+ let tableHtml = "";
+ teamList.forEach((product: any) => {
+ const tier10: any = product.discounts[0];
+ const tier4: any = product.discounts[1];
+
+ const price10: any = parseFloat(tier10.discounted_price).toFixed(2);
+ const price4: any = parseFloat(tier4.discounted_price).toFixed(2);
+
+ tableHtml += `
+
+
${product.product_name}
+
¥${price10}
+
¥${price4}
+
+ `;
+ });
+ modalBody.html(tableHtml);
+ },
+
+ /**
+ * 渲染所有与组队相关的表格
+ * @param {object[]} teamList
+ */
+ renderAll: function (teamList: any, type: string) {
+ this.renderActivityTable(teamList, type);
+ // Modal table is rendered on demand
+ },
+};
+
+// ==================== 组队功能 ====================
+/**
+ * 队伍管理器
+ * @namespace TeamManager
+ * @description 封装所有与组队功能相关的操作
+ */
+const TeamManager = {
+ /**
+ * 更新"我的队伍"弹窗的UI
+ * @param {object} teamInfo - 队伍信息
+ */
+ updateMyTeamModal: function (teamInfo, type) {
+ const { team, members, packages } = teamInfo;
+ const memberCount = team.member_count;
+
+ // 更新标题
+ $("#custom-modal .team-modal-title").text(`我的队伍 (${memberCount}人)`);
+
+ // 更新进度条和里程碑
+ const progressPerc = (() => {
+ switch (memberCount) {
+ case 1:
+ return 0;
+ case 2:
+ return 33.33;
+ case 3:
+ return 66.66;
+ case 4:
+ return 100;
+ default:
+ if (memberCount < 3) return 11.1 * memberCount;
+ if (memberCount < 5) return (33.33 / 2 + 33.33).toFixed(2);
+ if (memberCount < 10)
+ return ((33.33 / 5) * (memberCount - 5) + 66.66).toFixed(2);
+ return 100;
+ }
+ })();
+
+ $("#my-team-progress-bar .progress-line").css("width", `${progressPerc}%`);
+
+ const milestones = { 4: "4人组队" };
+ const milestoneDesc = {
+ 4: "4人组队可获得0.01元.top及超低价.com/.cn购买资格",
};
+ let achievedMilestone = 0;
+ for (const count of [4]) {
+ const isAchieved = memberCount >= count;
+ if (isAchieved) {
+ achievedMilestone = count;
+ }
+ const $milestone = $(
+ `#my-team-progress-bar .progress-milestone[data-member="${count}"]`
+ );
+ $milestone.toggleClass("active", isAchieved);
+ $milestone
+ .find(".progress-milestone-icon")
+ .toggleClass("active", isAchieved);
+ }
- updateDigit($hours, timeLeft.hours);
- updateDigit($minutes, timeLeft.minutes);
- updateDigit($seconds, timeLeft.seconds);
+ const nextMilestone = [4].find((count) => memberCount < count) || 4;
- // 时间紧迫时的特殊样式
- const totalMinutes = timeLeft.hours * 60 + timeLeft.minutes;
- if (totalMinutes < 10) {
- $(".time-digit-mini").addClass('urgent');
+ // 更新里程碑提示信息
+ if (achievedMilestone < 4) {
+ $("#my-team-milestone-info").html(
+ `当前
${memberCount} 人，再邀请
${
+ nextMilestone - memberCount
+ } 人即可达标
【${
+ milestones[nextMilestone]
+ }目标】`
+ );
+ $("#my-team-milestone-desc").text(`${milestoneDesc[nextMilestone]}`);
} else {
- $(".time-digit-mini").removeClass('urgent');
+ $("#my-team-milestone-info").html(
+ `
恭喜！已达成 4 人组队！`
+ );
+ $("#my-team-milestone-desc").text(`每人已获得超低价购买资格`);
+ $(".btn-invite")
+ .text("队伍已满")
+ .css("background-color", "#999")
+ .css("color", "#fff")
+ .css("cursor", "not-allowed")
+ .data("invite-link", ``);
}
- }
- /**
- * 倒计时完成处理
- */
- private onTimerComplete(): void {
- const isLoggedIn = (window as any).isLoggedIn;
- const newStatus = isLoggedIn ? SeckillStatus.CAN_SECKILL : SeckillStatus.CAN_QUALIFY;
-
- this.stateManager.updateStatus(newStatus);
- this.updateButtonState(newStatus);
-
- // 隐藏倒计时，显示进度条
- this.$countdownSection.hide();
- this.$progressSection.show();
-
- // 更新进度条显示
- const data = this.stateManager.getActivityData();
- this.updateProgress(data.grabbedCount, data.totalQuota);
-
- // 按钮闪烁提示
- this.$btn.addClass('blink');
- setTimeout(() => this.$btn.removeClass('blink'), 1500);
+ // 更新成员列表
+ const $membersContainer = $("#my-team-members");
+ $membersContainer.empty();
+ var isCurrentLeader = false;
+ members.forEach((member) => {
+ const isLeader = member.is_leader === 1;
+ const isPresent = member.is_present === 1; //是否为当前用户
+ if (isLeader && isPresent) {
+ isCurrentLeader = true;
+ }
+ const memberHtml = `
+
+
+
+
+
${
+ isPresent ? "我" : isLeader ? "队长" : "队员"
+ }
+
`;
+ $membersContainer.append(memberHtml);
+ });
- }
-
- /**
- * 更新按钮状态
- */
- private updateButtonState(status: SeckillStatus): void {
- // 清除所有状态类
- this.$btn.removeClass('not-started can-qualify can-seckill participated sold-out loading');
-
- const config = this.getButtonConfig(status);
- this.$btn.addClass(config.className);
- this.$btnText.text(config.text);
- this.$tips.html(config.tips);
- }
-
- /**
- * 获取按钮配置
- */
- private getButtonConfig(status: SeckillStatus): { className: string; text: string; tips: string } {
- const configs = {
- [SeckillStatus.NOT_STARTED]: {
- className: "not-started",
- text: "即将开始",
- tips: "活动即将开始，请耐心等待",
- },
- [SeckillStatus.CAN_QUALIFY]: {
- className: "can-qualify",
- text: "领取资格",
- tips: "点击领取秒杀资格",
- },
- [SeckillStatus.CAN_SECKILL]: {
- className: "can-seckill",
- text: "立即领取",
- tips: "限时秒杀进行中，立即抢购",
- },
- [SeckillStatus.PARTICIPATED]: {
- className: "participated",
- text: "已领取",
- tips: "您已成功领取秒杀名额快去
注册域名吧",
- },
- [SeckillStatus.SOLD_OUT]: {
- className: "sold-out",
- text: "已抢完",
- tips: "今日名额已抢完，明日再来",
- },
- };
-
- return configs[status];
- }
-
- /**
- * 处理按钮点击
- */
- private handleButtonClick(): void {
- const status = this.stateManager.getCurrentStatus();
-
- this.$btn.addClass('btn-click');
- setTimeout(() => this.$btn.removeClass('btn-click'), 200);
-
- switch (status) {
- case SeckillStatus.CAN_QUALIFY:
- this.handleQualifyAction();
- break;
- case SeckillStatus.CAN_SECKILL:
- this.handleSeckillAction();
- break;
- default:
- break;
+ // 添加 "添加成员" 按钮
+ if (memberCount < 4) {
+ $membersContainer.append(`
+
+ `);
}
- }
- /**
- * 处理资格领取
- */
- private handleQualifyAction(): void {
- NotificationManager.show({
- type: "warning",
- message: "请先登录后再领取资格",
- });
- setTimeout(() => {
- location.href = `/login.html?ReturnUrl=${location.href}`;
- }, 2000);
- }
+ // 更新状态文本
+ const $status = $("#my-team-status");
+ if (achievedMilestone > 0) {
+ $status.find("span").text(`${achievedMilestone}人团已达成`);
+ $status.find(".status-icon").addClass("active"); // 设置状态图标为激活状态
+ $status.find("p").text("已解锁购买资格，快去购买域名吧!");
+ $status.addClass("achieved");
+ } else {
+ $status.find("span").text("未达标");
+ $status.find("p").text("继续邀请好友加入");
+ $status.removeClass("achieved");
+ }
- /**
- * 处理秒杀操作
- */
- private async handleSeckillAction(): Promise
{
- try {
- this.setButtonLoading(true);
- // 这里请求领取接口
- const response = await grabSeckill() as any;
-
- if (response.status === true) {
- // 成功后更新状态
- this.stateManager.updateStatus(SeckillStatus.PARTICIPATED);
-
- // 更新进度（模拟增加一个已抢数量）
- const data = this.stateManager.getActivityData();
- const newGrabbedCount = data.grabbedCount + 1;
- this.stateManager.updateProgress(newGrabbedCount);
- this.updateProgress(newGrabbedCount, data.totalQuota);
-
- // 显示成功消息
- NotificationManager.show({
- type: "success",
- message: response.msg || "恭喜您！成功领取秒杀名额",
- });
- } else {
- // 失败时显示错误消息
- NotificationManager.show({
- type: "error",
- message: response.msg || "领取失败，请稍后重试",
- });
- }
- } catch (error: any) {
- NotificationManager.show({
- type: "error",
- message: error.message || "网络错误，请稍后重试",
+ // 更新优惠券列表
+ const $couponSection = $("#claimed-coupons-section");
+ const $couponList = $("#claimed-coupons-list");
+ const claimedCoupons = packages;
+
+ if (claimedCoupons.length > 0) {
+ $couponList.empty();
+ claimedCoupons.forEach((coupon) => {
+ const couponHtml = `
+
+
+
+
+
${
+ isCurrentLeader ? coupon.over_price_leader : coupon.over_price
+ }元
+
购买资格
+
+
+
${
+ coupon.product_name
+ }
+
满4人发放
+
+
+
-