oms/omsapp/src/app/pages/message-activity.component.html

<nz-page-header [nzGhost]="false">
  <nz-page-header-title>消息活动管理</nz-page-header-title>
  <nz-page-header-extra>
    <button nz-button nzType="primary" (click)="showCreateModal()">
      <span nz-icon nzType="plus"></span>新建活动
    </button>
  </nz-page-header-extra>
  <nz-page-header-content>
    管理消息推送活动，包括定时推送、周期性推送和定向推送
  </nz-page-header-content>
</nz-page-header>

<nz-card>
  <nz-spin [nzSpinning]="isLoading">
    <nz-table
      #activitiesTable
      [nzData]="activities"
      [nzLoading]="isLoading"
      [nzFrontPagination]="false"
      [nzBordered]="true"
      [nzSize]="'small'"
      [nzShowPagination]="false"
    >
      <thead>
        <tr>
          <th>活动名称</th>
          <th>消息模板</th>
          <th>推送策略</th>
          <th>计划时间</th>
          <th>每日推送</th>
          <th>状态</th>
          <th>创建时间</th>
          <th>更新时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        @for (activity of activitiesTable.data; track activity._id) {
        <tr>
          <td>
            <a (click)="showDetailModal(activity)">{{ activity.name }}</a>
          </td>
          <td>
            <a
              [routerLink]="['/message-template']"
              [queryParams]="{
                templateName: getTemplateName(activity.templateId)
              }"
            >
              {{ getTemplateName(activity.templateId) }}
            </a>
          </td>
          <td>
            <nz-tag [nzColor]="getStrategyColor(activity.strategy)">
              {{ getStrategyName(activity.strategy) }}
            </nz-tag>
          </td>
          <td>{{ activity.scheduleAt | date : "yyyy-MM-dd HH:mm" }}</td>
          <td>
            <nz-switch
              [ngModel]="activity.everyday"
              [nzDisabled]="true"
            ></nz-switch>
          </td>
          <td>
            <nz-tag [nzColor]="getStatusColor(activity.status)">
              {{ getStatusName(activity.status) }}
            </nz-tag>
          </td>
          <td>{{ activity.createdAt | date : "yyyy-MM-dd HH:mm" }}</td>
          <td>{{ activity.updatedAt | date : "yyyy-MM-dd HH:mm" }}</td>
          <td>
            <a (click)="showEditModal(activity)">编辑</a>
            <nz-divider nzType="vertical"></nz-divider>
            <!-- 状态变更操作 -->
            @if (activity.status === 0) {
            <a
              nz-popconfirm
              nzPopconfirmTitle="确定要发布此活动吗？"
              nzPopconfirmOkText="确定"
              nzPopconfirmCancelText="取消"
              (nzOnConfirm)="publishActivity(activity._id)"
            >
              发布
            </a>
            } @if (activity.status === 1) {
            <a
              nz-popconfirm
              nzPopconfirmTitle="确定要发布此活动吗？"
              nzPopconfirmOkText="确定"
              nzPopconfirmCancelText="取消"
              (nzOnConfirm)="publishActivity(activity._id)"
            >
              发布
            </a>
            <a
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确定要中止此活动吗？"
              nzPopconfirmOkText="确定"
              nzPopconfirmCancelText="取消"
              (nzOnConfirm)="abortActivity(activity._id)"
            >
              中止
            </a>

            }

            <nz-divider nzType="vertical"></nz-divider>
            <a
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确定要删除此活动吗？"
              nzPopconfirmOkText="确定"
              nzPopconfirmCancelText="取消"
              (nzOnConfirm)="deleteActivity(activity._id)"
            >
              删除
            </a>
          </td>
        </tr>
        }
      </tbody>
    </nz-table>

    <nz-empty
      *ngIf="activities.length === 0 && !isLoading"
      nzNotFoundContent="暂无消息活动"
    ></nz-empty>
  </nz-spin>
</nz-card>

<!-- 创建/编辑活动模态框 -->
<nz-modal
  [(nzVisible)]="isModalVisible"
  [nzTitle]="isEditMode ? '编辑消息活动' : '新建消息活动'"
  [nzOkText]="isEditMode ? '更新' : '创建'"
  [nzCancelText]="'取消'"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()"
  [nzOkLoading]="isSubmitting"
  [nzWidth]="800"
>
  <form nz-form [formGroup]="activityForm" *nzModalContent>
    <nz-form-item>
      <nz-form-label nzRequired>活动名称</nz-form-label>
      <nz-form-control>
        <input
          nz-input
          formControlName="name"
          placeholder="输入活动名称（内部使用，不可重复）"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label>活动描述</nz-form-label>
      <nz-form-control>
        <textarea
          nz-input
          rows="4"
          formControlName="description"
          placeholder="输入活动描述"
        >
        </textarea>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzRequired>消息模板</nz-form-label>
      <nz-form-control>
        <nz-select
          formControlName="templateId"
          nzPlaceHolder="选择关联的消息模板"
          nzShowSearch
          nzAllowClear
          nzOptionFilterProp="label"
        >
          @for (template of templates; track template._id) {
          <nz-option
            [nzLabel]="template.templateName"
            [nzValue]="template._id"
          ></nz-option>
          }
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label>通知图片</nz-form-label>
      <nz-form-control>
        <input
          nz-input
          formControlName="image"
          placeholder="输入通知图片URL（可选）"
        />
        @if (activityForm.get('image')?.value) {
        <div style="margin-top: 8px">
          <img
            [src]="activityForm.get('image')?.value"
            style="max-width: 100px; max-height: 100px"
            onerror="this.style.display='none'"
          />
        </div>
        }
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label>允许展开</nz-form-label>
      <nz-form-control>
        <nz-switch formControlName="bigger"></nz-switch>
        <span nz-typography nzType="secondary">（有图片时有效）</span>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label>客户端行为</nz-form-label>
      <nz-form-control>
        <nz-select
          formControlName="action"
          nzPlaceHolder="选择客户端行为"
          (ngModelChange)="onActionChange($event)"
        >
          @for (action of getActionOptions(); track action.value) {
          <nz-option
            [nzLabel]="action.label"
            [nzValue]="action.value"
          ></nz-option>
          }
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    @if (showParamField()) {
    <nz-form-item>
      <nz-form-label>参数</nz-form-label>
      <nz-form-control>
        <input
          nz-input
          formControlName="param"
          [placeholder]="getParamPlaceholder()"
        />
      </nz-form-control>
    </nz-form-item>
    }
    <nz-form-item>
      <nz-form-label>扩展参数</nz-form-label>
      <nz-form-control>
        <input
          nz-input
          formControlName="extend"
          placeholder="输入扩展参数（可选）"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label>推送策略</nz-form-label>
      <nz-form-control>
        <nz-select
          formControlName="strategy"
          nzPlaceHolder="选择推送策略"
          [nzAllowClear]="true"
        >
          <nz-option nzValue="0" nzLabel="自定义策略"></nz-option>
          <nz-option nzValue="1" nzLabel="活跃用户推送"></nz-option>
          <nz-option nzValue="2" nzLabel="新用户推送"></nz-option>
          <nz-option nzValue="3" nzLabel="沉默用户唤醒"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label>计划推送时间</nz-form-label>
      <nz-form-control>
        <nz-date-picker
          formControlName="scheduleAt"
          nzShowTime
          nzFormat="yyyy-MM-dd HH:mm"
          nzPlaceHolder="选择推送时间"
        ></nz-date-picker>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label>每日推送</nz-form-label>
      <nz-form-control>
        <nz-switch formControlName="everyday"></nz-switch>
      </nz-form-control>
    </nz-form-item>

    <!-- 筛选条件面板 -->
    <app-filter-panel
      [filterConditions]="filterConditions"
      [filterFields]="filterFields"
      [operatorsMap]="operatorsMap"
      [countries]="countries"
      [estimatedUserCount]="estimatedUserCount"
      [isCountingUsers]="isCountingUsers"
      (addConditionEvent)="addCondition()"
      (removeConditionEvent)="removeCondition($event)"
      (estimateUserCountEvent)="estimateUserCount()"
    ></app-filter-panel>
  </form>
</nz-modal>

<!-- 活动详情模态框 -->
<app-activity-detail
  [activity]="selectedActivity"
  [isVisible]="isDetailModalVisible"
  [templates]="templates"
  (onCancel)="isDetailModalVisible = false"
></app-activity-detail>