ylrz_his_scrm_companyUI/src/views/adv/site/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          plain
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          type="success"
          icon="el-icon-refresh"
          size="mini"
          @click="getList"
        >刷新</el-button>
      </el-col>
    </el-row>

    <el-table border v-loading="loading" :data="siteList">
      <el-table-column label="ID" align="center" prop="id" width="80" />
      <el-table-column label="站点名称" align="center" prop="siteName" min-width="150" show-overflow-tooltip />
      <el-table-column label="投放类型" align="center" prop="launchType" width="100" />
      <el-table-column label="配置回传" align="center" prop="configCallback" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.configCallback === 1 ? 'success' : 'info'" size="small">
            {{ scope.row.configCallback === 1 ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="站点状态" align="center" prop="status" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'info'" size="small">
            {{ scope.row.status === 1 ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="420" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-data-line"
            @click="handleStatistics(scope.row)"
          >统计</el-button>
          <el-button
            size="mini"
            type="text"
            :icon="scope.row.status === 1 ? 'el-icon-video-pause' : 'el-icon-video-play'"
            @click="handleEnable(scope.row)"
          >{{ scope.row.status === 1 ? '停用' : '启用' }}</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-link"
            @click="handleGenerateUrl(scope.row)"
          >生成投放url</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改站点对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body class="site-dialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="130px" class="elegant-form">
        <!-- 基础信息 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-info"></i>
            <span>基础信息</span>
          </div>
          <el-form-item label="站点名称" prop="siteName">
            <el-input 
              v-model="form.siteName" 
              placeholder="请输入站点名称"
              prefix-icon="el-icon-notebook-2"
              clearable
              :disabled="isDetail"
            />
          </el-form-item>
          <el-form-item label="渠道" prop="channelId">
            <el-select 
              v-model="form.channelId" 
              placeholder="请选择渠道" 
              style="width: 100%"
              filterable
              @change="handleChannelChange"
              :disabled="isDetail"
            >
              <el-option
                v-for="item in channelList"
                :key="item.id"
                :label="item.channelName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目" prop="projectId">
            <el-select 
              v-model="form.projectId" 
              placeholder="请选择项目" 
              style="width: 100%"
              filterable
              @change="handleProjectChange"
              :disabled="isDetail"
            >
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.projectName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>

        <!-- 投放配置 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-setting"></i>
            <span>投放配置</span>
          </div>
          <el-form-item label="投放类型" prop="launchType">
            <el-select 
              v-model="form.launchType" 
              placeholder="请选择投放类型" 
              style="width: 100%"
              prefix-icon="el-icon-s-flag"
              @change="handleLaunchTypeChange"
              :disabled="isDetail"
            >
              <el-option
                v-for="item in launchTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="广告类型" prop="adType">
            <el-select 
              v-model="form.adType" 
              placeholder="请选择广告类型" 
              style="width: 100%"
              :disabled="isDetail"
            >
              <el-option
                v-for="item in adTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <!-- 企微分配规则 -->
          <el-form-item label="企微分配规则" prop="allocationRule">
            <el-radio-group v-model="form.allocationRule" @change="handleAllocationRuleChange" :disabled="!form.launchType || isDetail">
              <el-radio 
                label="1"
                :border="true"
              >个人码分配</el-radio>
              <el-radio 
                label="0"
                :border="true"
              >活码分配</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <!-- 根据选择的分配规则显示不同的下拉框 -->
          <el-form-item 
            v-if="form.allocationRule === '1'" 
            label="企业微信" 
            prop="allocationRuleId"
            class="slide-fade"
          >
            <el-select 
              v-model="form.allocationRuleId" 
              placeholder="请选择企业微信" 
              style="width: 100%"
              filterable
              :disabled="isDetail"
            >
              <el-option
                v-for="item in allocationRuleList"
                :key="item.id"
                :label="item.ruleName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item 
            v-if="form.allocationRule === '0'" 
            :label="form.launchType === 1 ? '群活码' : '企业微信活码'" 
            prop="allocationRuleId"
            class="slide-fade"
          >
            <el-select 
              v-model="form.allocationRuleId" 
              :placeholder="form.launchType === 1 ? '请选择群活码' : '请选择企业微信活码'" 
              style="width: 100%"
              filterable
              :disabled="isDetail"
            >
              <el-option
                v-for="item in form.launchType === 1 ? groupActiveList : contactWayList"
                :key="item.id"
                :label="form.launchType === 1 ? item.groupName : item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>

        <!-- 广告商信息 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-office-building"></i>
            <span>广告商信息</span>
          </div>
          <el-form-item label="投放广告商" prop="advertiserId">
            <el-select 
              v-model="form.advertiserId" 
              placeholder="请先选择投放类型" 
              style="width: 100%"
              @change="handleAdvertiserChange"
              filterable
              :disabled="!form.launchType || isDetail"
            >
              <el-option
                v-for="item in advertiserList"
                :key="item.id"
                :label="item.advertiserName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="投放广告商账号" prop="promotionAccountId">
            <el-select 
              v-model="form.promotionAccountId" 
              placeholder="请选择投放广告商账号" 
              style="width: 100%"
              @change="handlePromotionAccountChange"
              filterable
              :disabled="!form.advertiserId || isDetail"
            >
              <el-option
                v-for="item in promotionAccountList"
                :key="item.id"
                :label="item.accountName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>

        <!-- 页面和来源 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-monitor"></i>
            <span>页面和来源</span>
          </div>
          <el-form-item label="投放页面" prop="launchPageId">
            <el-select 
              v-model="form.launchPageId" 
              placeholder="请选择投放页面" 
              style="width: 100%"
              @change="handleLaunchPageChange"
              filterable
              :disabled="isDetail"
            >
              <el-option
                v-for="item in landingPageTemplateList"
                :key="item.id"
                :label="item.templateName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="投放域名" prop="launchDomain">
            <el-select 
              v-model="form.launchDomain" 
              placeholder="请选择投放域名" 
              style="width: 100%"
              filterable
              :disabled="isDetail"
            >
              <el-option
                v-for="item in launchDomainList"
                :key="item.id"
                :label="item.domain"
                :value="item.domain"
              />
            </el-select>
          </el-form-item>

        </div>

        <!-- 回传配置 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-share"></i>
            <span>回传配置</span>
          </div>
          <el-form-item label="是否配置回传" prop="configCallback">
            <el-radio-group v-model="form.configCallback" @change="handleConfigCallbackChange" :disabled="isDetail">
              <el-radio 
                v-for="item in configCallbackOptions"
                :key="item.value"
                :label="item.value"
                :border="true"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item 
            v-if="form.configCallback === 1" 
            label="回传账号" 
            prop="callbackAccountId"
            class="slide-fade"
          >
            <el-select 
              v-model="form.callbackAccountId" 
              placeholder="请选择回传账号" 
              style="width: 100%"
              @change="handleCallbackAccountChange"
              filterable
              :disabled="isDetail"
            >
              <el-option
                v-for="item in callbackAccountList"
                :key="item.id"
                :label="item.accountName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          
          <!-- 转换类型配置区域 -->
          <div v-if="form.configCallback === 1 && form.callbackAccountId" class="conversion-config-section">
            <div class="config-header">
              <span class="config-title">转换类型配置</span>
              <el-button type="primary" size="small" icon="el-icon-plus" @click="addConversionEvent">添加事件</el-button>
            </div>
            
            <div v-if="conversionEvents.length === 0" class="empty-tip">
              暂无转换事件，请点击“添加事件”按钮添加
            </div>
            
            <div v-for="(event, index) in conversionEvents" :key="index" class="conversion-event-item">
              <div class="event-header">
                <span class="event-title">事件{{ index + 1 }}</span>
                <el-button 
                  type="danger" 
                  size="mini" 
                  icon="el-icon-delete" 
                  circle
                  @click="removeConversionEvent(index)"
                ></el-button>
              </div>
              
              <el-form label-width="130px" style="margin-top: 10px;">
                <el-form-item label="广告商转化类型">
                  <el-select 
                    v-model="event.advertiserEventType" 
                    placeholder="请选择广告商转化类型" 
                    style="width: 100%"
                    @change="handleAdvertiserEventChange(index, $event)"
                  >
                    <el-option
                      v-for="item in advertiserEventOptions"
                      :key="item.eventType"
                      :label="item.eventName"
                      :value="item.eventType"
                    />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="回传数据类型">
                  <el-select 
                    v-model="event.systemEventType" 
                    placeholder="请选择回传数据类型" 
                    style="width: 100%"
                    @change="handleSystemEventChange(index, $event)"
                  >
                    <el-option
                      v-for="item in systemEventOptions"
                      :key="item.eventType"
                      :label="item.eventName"
                      :value="item.eventType"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="!isDetail" type="primary" @click="submitForm" icon="el-icon-check">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 站点详情对话框 -->
    <el-dialog title="站点详情" :visible.sync="detailOpen" width="900px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="站点名称">{{ detail.siteName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="站点URL" :span="2">{{ detail.siteUrl || '-' }}</el-descriptions-item>
        <el-descriptions-item label="投放类型">{{ detail.launchType || '-' }}</el-descriptions-item>
        <el-descriptions-item label="广告类型">{{ detail.adType || '-' }}</el-descriptions-item>
        <el-descriptions-item label="广告商名称" :span="2">{{ detail.advertiserName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="推广账户名称" :span="2">{{ detail.promotionAccountName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="投放页面名称" :span="2">{{ detail.launchPageName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="投放域名" :span="2">{{ detail.launchDomain || '-' }}</el-descriptions-item>
        <el-descriptions-item label="一级分配规则">
          <span v-if="detail.allocationRule === '1'">选择员工"个人码"分配规则</span>
          <span v-else-if="detail.allocationRule === '0'">选择员工"活码"分配规则</span>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="二级分配汇总">{{ detail.allocationRuleId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="项目名称">{{ detail.projectName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="配置回传">
          <el-tag :type="detail.configCallback === 1 ? 'success' : 'info'" size="small">
            {{ detail.configCallback === 1 ? '是' : '否' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="回传账号名称">{{ detail.callbackAccountName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="站点状态">
          <el-tag :type="detail.status === 1 ? 'success' : 'info'" size="small">
            {{ detail.status === 1 ? '启用' : '停用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建人">{{ detail.creator || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ parseTime(detail.createTime) || '-' }}</el-descriptions-item>
        <el-descriptions-item label="更新人">{{ detail.updater || '-' }}</el-descriptions-item>
        <el-descriptions-item label="更新时间" :span="2">{{ parseTime(detail.updateTime) || '-' }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 站点统计对话框 -->
    <el-dialog title="站点统计" :visible.sync="statisticsOpen" width="800px" append-to-body>
      <el-descriptions :column="2" border v-if="statistics">
        <el-descriptions-item label="站点ID">{{ statistics.siteId }}</el-descriptions-item>
        <el-descriptions-item label="访问量">{{ statistics.visitCount || 0 }}</el-descriptions-item>
        <el-descriptions-item label="访客数">{{ statistics.visitorCount || 0 }}</el-descriptions-item>
        <el-descriptions-item label="转化数">{{ statistics.conversionCount || 0 }}</el-descriptions-item>
        <el-descriptions-item label="转化率">
          {{ statistics.conversionRate ? (statistics.conversionRate * 100).toFixed(2) + '%' : '0%' }}
        </el-descriptions-item>
        <el-descriptions-item label="统计时间">{{ parseTime(statistics.updateTime) }}</el-descriptions-item>
      </el-descriptions>
      <div v-else style="text-align: center; padding: 40px 0;">
        <el-empty description="暂无统计数据"></el-empty>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="statisticsOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 生成投放url对话框 -->
    <el-dialog title="生成投放url" :visible.sync="urlDialogOpen" width="500px" append-to-body>
      <el-form label-width="100px">
        <el-form-item label="投放链接">
          <div class="url-container">
            <el-input 
              v-model="launchUrl" 
              readonly
              class="url-input"
            />
            <el-button 
              type="primary" 
              size="small"
              icon="el-icon-document-copy"
              @click="copyUrl"
            >复制</el-button>
          </div>
        </el-form-item>
        <el-form-item label="二维码">
          <div id="qrcode" class="qrcode-container"></div>
          <el-button 
            type="primary" 
            size="small"
            icon="el-icon-download"
            @click="downloadQrcode"
            style="margin-top: 10px;"
          >下载</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="urlDialogOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSite, getSite, addSite, updateSite, delSite, getSiteStatistics, enableSite } from "@/api/adv/site";
import { pageAdvertiser } from "@/api/adv/advertiser";
import { pagePromotionAccount } from "@/api/adv/promotionAccount";
import { pageTemplate } from "@/api/adv/landingPageTemplate";
import QRCode from 'qrcode';

import { pageCallbackAccount, getCallbackAccount, queryEventType, saveEventType } from "@/api/adv/callbackAccount";
import { pageDomain } from "@/api/adv/domain";
import { pageProject as pageChannel } from "@/api/adv/channel";
import { pageProject } from "@/api/adv/project";
import { pageAssignRule } from "@/api/qw/assignRule";
import { pageGroupLiveCode } from "@/api/qw/groupLiveCode";
import { listContactWay } from "@/api/qw/contactWay";

export default {
  name: "Site",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 站点表格数据
      siteList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否为详情模式（只读）
      isDetail: false,
      // 是否显示详情对话框
      detailOpen: false,
      // 详情数据
      detail: {},
      // 是否显示统计弹出层
      statisticsOpen: false,
      // 统计数据
      statistics: null,
      // 表单参数
      form: {},
      // 投放类型选项
      launchTypeOptions: [
        { label: "线上投放", value: 1 },
        { label: "线下投放", value: 2 }
      ],
      // 广告类型选项
      adTypeOptions: [
        { label: "信息流广告", value: "信息流广告" }
      ],
      // 是否配置回传选项
      configCallbackOptions: [
        { label: "否", value: 0 },
        { label: "是", value: 1 }
      ],
      // 广告商列表
      advertiserList: [],
      // 广告商账号列表
      promotionAccountList: [],
      // 落地页模板列表
      landingPageTemplateList: [],
      // 企业微信分配规则列表
      allocationRuleList: [],
      // 群活码列表
      groupActiveList: [],
      // 企业微信活码列表
      contactWayList: [],
      // 回传账号列表
      callbackAccountList: [],
      // 投放域名列表
      launchDomainList: [],
      // 渠道列表
      channelList: [],
      // 项目列表
      projectList: [],
      // 转换事件列表
      conversionEvents: [],
      // 广告商事件选项（systemBuiltin='0'）
      advertiserEventOptions: [],
      // 系统事件选项（systemBuiltin='1'）
      systemEventOptions: [],
      // 生成url对话框
      urlDialogOpen: false,
      // 投放链接
      launchUrl: "",
      // 表单校验
      rules: {
        siteName: [
          { required: true, message: "站点名称不能为空", trigger: "blur" }
        ],
        siteUrl: [
          { required: true, message: "站点地址不能为空", trigger: "blur" }
        ],
        launchType: [
          { required: true, message: "请选择投放类型", trigger: "change" }
        ],
        adType: [
          { required: true, message: "请选择广告类型", trigger: "change" }
        ],
        advertiserId: [
          { required: true, message: "请选择投放广告商", trigger: "change" }
        ],
        promotionAccountId: [
          { required: true, message: "请选择投放广告商账号", trigger: "change" }
        ],
        launchPageId: [
          { required: true, message: "请选择投放页面", trigger: "change" }
        ],

        launchDomain: [
          { required: true, message: "请选择投放域名", trigger: "change" }
        ],
        configCallback: [
          { required: true, message: "请选择是否配置回传", trigger: "change" }
        ],
        callbackAccountId: [
          { 
            validator: (rule, value, callback) => {
              if (this.form.configCallback === 1 && !value) {
                callback(new Error('请选择回传账号'));
              } else {
                callback();
              }
            }, 
            trigger: "change" 
          }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询站点列表 */
    getList() {
      this.loading = true;
      listSite().then(response => {
        this.siteList = response.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        siteName: undefined,
        siteUrl: undefined,
        launchType: undefined,
        adType: undefined,
        advertiserId: undefined,
        advertiserName: undefined,
        promotionAccountId: undefined,
        promotionAccountName: undefined,
        launchPageId: undefined,
        launchPageName: undefined,
        projectId: undefined,
        projectName: undefined,
        channelId: undefined,
        channelName: undefined,
        launchDomain: undefined,
        configCallback: 0,
        callbackAccountId: undefined,
        callbackAccountName: undefined,
        allocationRule: undefined,
        allocationRuleId: undefined
      };
      this.promotionAccountList = [];
      this.launchDomainList = [];
      this.allocationRuleList = [];
      this.groupActiveList = [];
      this.contactWayList = [];
      this.conversionEvents = [];
      this.advertiserEventOptions = [];
      this.systemEventOptions = [];
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      // 不再预加载广告商列表，等待选择投放类型后再加载
      this.loadCommonSelectOptions();
      this.isDetail = false;
      this.open = true;
      this.title = "添加站点";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.loadCommonSelectOptions();
      this.isDetail = false;
      getSite(row.id).then(response => {
        this.form = response.data;
        // 确保 allocationRule 是字符串类型
        if (this.form.allocationRule !== undefined && this.form.allocationRule !== null) {
          this.form.allocationRule = String(this.form.allocationRule);
        }
        // 根据投放类型加载广告商列表
        if (this.form.launchType) {
          this.loadAdvertiserList(this.form.launchType);
        }
        // 如果有广告商ID，加载对应的广告商账号列表
        if (this.form.advertiserId) {
          this.loadPromotionAccountList(this.form.advertiserId);
          
          // 如果配置了回传，加载回传账号列表
          if (this.form.configCallback === 1) {
            this.loadCallbackAccountList(this.form.advertiserId);
            
            // 如果有回传账号，加载事件类型和转换事件
            if (this.form.callbackAccountId) {
              this.loadEventTypesAndConversionEvents(this.form.advertiserId, this.form.callbackAccountId);
            }
          }
        }
        // 如果设置了企微分配规则，加载对应的数据
        if (this.form.allocationRule) {
          if (this.form.allocationRule === '1') {
            // 加载企业微信分配规则列表
            this.loadAllocationRuleList();
          } else if (this.form.allocationRule === '0') {
            // 加载活码列表（根据投放类型）
            if (this.form.launchType === 1) {
              this.loadGroupActiveList();
            } else if (this.form.launchType === 2) {
              this.loadContactWayList();
            }
          }
        }
        this.$nextTick(() => {
          this.open = true;
          this.title = "修改站点";
        });
      });
    },
    /** 查看统计按钮操作 */
    handleStatistics(row) {
      this.$router.push({
        path: '/adv/new-adv/statistics',
        query: { siteId: row.id }
      });
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      this.detail = {};
      this.detailOpen = true;
      getSite(row.id).then(response => {
        this.detail = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 如果配置了回传且有转换事件，校验转换事件
          if (this.form.configCallback === 1 && this.form.callbackAccountId && this.conversionEvents.length > 0) {
            for (let i = 0; i < this.conversionEvents.length; i++) {
              const event = this.conversionEvents[i];
              if (!event.systemEventType || !event.advertiserEventType) {
                this.msgError(`请完善事件${i + 1}的配置`);
                return;
              }
            }
          }
          
          if (this.form.id != undefined) {
            // 修改
            updateSite(this.form.id, this.form).then(response => {
              if (response.code === 200) {
                // 如果配置了回传，保存转换事件
                if (this.form.configCallback === 1 && this.form.callbackAccountId) {
                  this.saveConversionEvents();
                } else {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              }
            });
          } else {
            // 新增
            addSite(this.form).then(response => {
              if (response.code === 200) {
                // 如果配置了回传，保存转换事件
                if (this.form.configCallback === 1 && this.form.callbackAccountId) {
                  this.saveConversionEvents();
                } else {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除站点"' + row.siteName + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return delSite(row.id);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    /** 启用/停用按鑵操作 */
    handleEnable(row) {
      const statusText = row.status === 1 ? '停用' : '启用';
      this.$confirm(`是否确认${statusText}站点"${row.siteName}"?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return enableSite(row.id);
      }).then(() => {
        this.getList();
        this.msgSuccess(`${statusText}成功`);
      }).catch(function() {});
    },
    /** 生成投放url */
    handleGenerateUrl(row) {
      this.launchUrl = row.siteUrl || '';
      this.urlDialogOpen = true;
      this.$nextTick(() => {
        this.generateQrcode();
      });
    },
    /** 生成二维码 */
    generateQrcode() {
      const qrcodeElement = document.getElementById('qrcode');
      if (qrcodeElement) {
        qrcodeElement.innerHTML = '';
        // 创建 canvas 元素
        const canvas = document.createElement('canvas');
        QRCode.toCanvas(canvas, this.launchUrl, {
          errorCorrectionLevel: 'H',
          type: 'image/jpeg',
          quality: 0.95,
          margin: 1,
          width: 200
        }).then(() => {
          qrcodeElement.appendChild(canvas);
        }).catch(error => {
          console.error('生成二维码失败:', error);
          this.msgError('生成二维码失败');
        });
      }
    },
    /** 复制url */
    copyUrl() {
      if (!this.launchUrl) {
        this.msgError('投放链接为空');
        return;
      }
      navigator.clipboard.writeText(this.launchUrl).then(() => {
        this.msgSuccess('复制成功');
      }).catch(() => {
        // 平台不支持新API，改成传统方法
        const textarea = document.createElement('textarea');
        textarea.value = this.launchUrl;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        this.msgSuccess('复制成功');
      });
    },
    /** 下载二维码 */
    downloadQrcode() {
      const qrcodeCanvas = document.querySelector('#qrcode canvas');
      if (qrcodeCanvas) {
        const link = document.createElement('a');
        link.href = qrcodeCanvas.toDataURL();
        link.download = `qrcode_${new Date().getTime()}.png`;
        link.click();
        this.msgSuccess('下载成功');
      } else {
        this.msgError('没有找到二维码');
      }
    },
    /** 加载下拉选项数据 */
    loadSelectOptions() {
      // 加载广告商列表（已废弃，改用loadAdvertiserList）
      pageAdvertiser({ pageNum: 1, pageSize: 1000 }).then(response => {
        this.advertiserList = response.data.records;
      }).catch(error => {
        console.error('加载广告商列表失败:', error);
        this.advertiserList = [];
      });
      
      // 加载落地页模板列表
      pageTemplate({ pageNum: 1, pageSize: 1000, status: 1 }).then(response => {
        this.landingPageTemplateList = response.data.records;
      }).catch(error => {
        console.error('加载落地页模板失败:', error);
        this.landingPageTemplateList = [];
      });
      
      // 加载域名列表
      pageDomain({ pageNum: 1, pageSize: 1000, status: 1 }).then(response => {
        this.launchDomainList = response.data.records;
      }).catch(error => {
        console.error('加载域名失败:', error);
        this.launchDomainList = [];
      });
    },
    /** 加载公共下拉选项数据（不包含广告商） */
    loadCommonSelectOptions() {
      // 加载落地页模板列表
      pageTemplate({ pageNum: 1, pageSize: 1000, status: 1 }).then(response => {
        this.landingPageTemplateList = response.data.records;
      }).catch(error => {
        console.error('加载落地页模板失败:', error);
        this.landingPageTemplateList = [];
      });
      
      // 加载域名列表
      pageDomain({ pageNum: 1, pageSize: 1000, status: 1 }).then(response => {
        this.launchDomainList = response.data.records;
      }).catch(error => {
        console.error('加载域名失败:', error);
        this.launchDomainList = [];
      });
      
      // 加载渠道列表
      pageChannel({ pageNum: 1, pageSize: 1000 }).then(response => {
        this.channelList = response.data.records || [];
      }).catch(error => {
        console.error('加载渠道列表失败:', error);
        this.channelList = [];
      });
      
      // 加载项目列表
      pageProject({ pageNum: 1, pageSize: 1000 }).then(response => {
        this.projectList = response.data.records || [];
      }).catch(error => {
        console.error('加载项目列表失败:', error);
        this.projectList = [];
      });
    },
    /** 投放类型变化时 */
    handleLaunchTypeChange(launchType) {
      // 重置广告商相关数据
      this.form.advertiserId = undefined;
      this.form.advertiserName = "";
      this.form.promotionAccountId = undefined;
      this.form.promotionAccountName = "";
      this.advertiserList = [];
      this.promotionAccountList = [];
      
      // 重置回传账号相关数据
      this.form.callbackAccountId = undefined;
      this.form.callbackAccountName = "";
      this.callbackAccountList = [];
      this.conversionEvents = [];
      this.advertiserEventOptions = [];
      this.systemEventOptions = [];
      
      // 重置企业微信分配规则相关数据
      this.form.allocationRule = undefined;
      this.form.allocationRuleId = undefined;
      this.allocationRuleList = [];
      this.groupActiveList = [];
      this.contactWayList = [];
      
      // 根据投放类型加载广告商列表
      if (launchType) {
        this.loadAdvertiserList(launchType);
      }
      
      // 根据投放类型重新加载活码数据（如果已选择活码分配）
      if (this.form.allocationRule === '0') {
        if (launchType === 1) {
          this.loadGroupActiveList();
        } else if (launchType === 2) {
          this.loadContactWayList();
        }
      }
    },
    /** 加载广告商列表 */
    loadAdvertiserList(launchType) {
      if (!launchType) return;
      // launchType: 1=线上投放, 2=线下投放
      // custom: 1=线上广告商, 2=自定义广告商
      const customValue = launchType; // launchType值直接对应custom值
      pageAdvertiser({ 
        pageNum: 1, 
        pageSize: 1000, 
        enabled: 1,
        custom: customValue 
      }).then(response => {
        this.advertiserList = response.data.records;
      }).catch(error => {
        console.error('加载广告商列表失败:', error);
        this.advertiserList = [];
      });
    },
    /** 广告商变化时 */
    handleAdvertiserChange(advertiserId) {
      this.form.advertiserName = "";
      this.form.promotionAccountId = undefined;
      this.form.promotionAccountName = "";
      this.promotionAccountList = [];
      
      // 重置回传账号相关数据
      this.form.callbackAccountId = undefined;
      this.form.callbackAccountName = "";
      this.callbackAccountList = [];
      
      if (advertiserId) {
        const advertiser = this.advertiserList.find(item => item.id === advertiserId);
        if (advertiser) {
          this.form.advertiserName = advertiser.advertiserName;
        }
        // 加载对应的广告商账号列表
        this.loadPromotionAccountList(advertiserId);
        
        // 如果已选择配置回传，加载回传账号列表
        if (this.form.configCallback === 1) {
          this.loadCallbackAccountList(advertiserId);
        }
      }
    },
    /** 加载广告商账号列表 */
    loadPromotionAccountList(advertiserId) {
      if (!advertiserId) return;
      pagePromotionAccount({ pageNum: 1, pageSize: 1000, advertiserId: advertiserId }).then(response => {
        this.promotionAccountList = response.data.records;
      }).catch(error => {
        console.error('加载广告商账号失败:', error);
        this.promotionAccountList = [];
      });
    },
    /** 广告商账号变化时 */
    handlePromotionAccountChange(promotionAccountId) {
      this.form.promotionAccountName = "";
      if (promotionAccountId) {
        const account = this.promotionAccountList.find(item => item.id === promotionAccountId);
        if (account) {
          this.form.promotionAccountName = account.accountName;
        }
      }
    },
    /** 投放页面变化时 */
    handleLaunchPageChange(launchPageId) {
      this.form.launchPageName = "";
      
      if (launchPageId) {
        const template = this.landingPageTemplateList.find(item => item.id === launchPageId);
        if (template) {
          this.form.launchPageName = template.templateName;
        }
      }
    },
    
    /** 渠道变化时 */
    handleChannelChange(channelId) {
      this.form.channelName = "";
      
      if (channelId) {
        const channel = this.channelList.find(item => item.id === channelId);
        if (channel) {
          this.form.channelName = channel.channelName;
        }
      }
    },

    /** 项目变化时 */
    handleProjectChange(projectId) {
      this.form.projectName = "";
      
      if (projectId) {
        const project = this.projectList.find(item => item.id === projectId);
        if (project) {
          this.form.projectName = project.projectName;
        }
      }
    },

    /** 回传账号变化时 */
    handleCallbackAccountChange(callbackAccountId) {
      this.form.callbackAccountName = "";
      this.conversionEvents = [];
      this.advertiserEventOptions = [];
      this.systemEventOptions = [];
      
      if (callbackAccountId) {
        const account = this.callbackAccountList.find(item => item.id === callbackAccountId);
        if (account) {
          this.form.callbackAccountName = account.accountName;
          // 加载事件类型和转换事件
          this.loadEventTypesAndConversionEvents(this.form.advertiserId, callbackAccountId);
        }
      }
    },
    /** 配置回传变化时 */
    handleConfigCallbackChange(value) {
      // 重置回传账号
      this.form.callbackAccountId = undefined;
      this.form.callbackAccountName = "";
      this.callbackAccountList = [];
      this.conversionEvents = [];
      this.advertiserEventOptions = [];
      this.systemEventOptions = [];
      
      // 重置企微分配规则相关数据
      this.form.allocationRule = undefined;
      this.form.allocationRuleId = undefined;
      this.allocationRuleList = [];
      this.groupActiveList = [];
      
      // 如果选择配置回传，且已选择广告商，加载回传账号列表
      if (value === 1 && this.form.advertiserId) {
        this.loadCallbackAccountList(this.form.advertiserId);
      }
    },
    /** 加载回传账号列表 */
    loadCallbackAccountList(advertiserId) {
      if (!advertiserId) return;
      pageCallbackAccount({ pageNum: 1, pageSize: 1000, advertiserId: advertiserId }).then(response => {
        this.callbackAccountList = response.data.records;
      }).catch(error => {
        console.error('加载回传账号列表失败:', error);
        this.callbackAccountList = [];
      });
    },
    /** 加载事件类型和转换事件 */
    loadEventTypesAndConversionEvents(advertiserId, callbackAccountId) {
      // 加载事件类型选项
      queryEventType(advertiserId).then(response => {
        const eventTypes = response.data || [];
        // systemBuiltin='0' 为广告商事件
        this.advertiserEventOptions = eventTypes.filter(item => item.systemBuiltin === '0');
        // systemBuiltin='1' 为系统事件
        this.systemEventOptions = eventTypes.filter(item => item.systemBuiltin === '1');
      }).catch(error => {
        console.error('加载事件类型失败:', error);
      });
      
      // 加载已有的转换事件
      getCallbackAccount(callbackAccountId).then(response => {
        const account = response.data;
        this.parseConversionEvents(account.conversionEvent);
      }).catch(error => {
        console.error('加载回传账号详情失败:', error);
      });
    },
    /** 解析转换事件 */
    parseConversionEvents(conversionEvent) {
      try {
        if (conversionEvent && typeof conversionEvent === 'string') {
          this.conversionEvents = JSON.parse(conversionEvent);
        } else if (Array.isArray(conversionEvent)) {
          this.conversionEvents = conversionEvent;
        } else {
          this.conversionEvents = [];
        }
      } catch (error) {
        console.error('解析转换事件失败:', error);
        this.conversionEvents = [];
      }
    },
    /** 添加转换事件 */
    addConversionEvent() {
      this.conversionEvents.push({
        systemEventType: '',
        systemEventTypeName: '',
        advertiserEventType: '',
        advertiserEventName: ''
      });
    },
    /** 删除转换事件 */
    removeConversionEvent(index) {
      this.conversionEvents.splice(index, 1);
    },
    /** 广告商事件变化 */
    handleAdvertiserEventChange(index, eventType) {
      const event = this.advertiserEventOptions.find(item => item.eventType === eventType);
      if (event) {
        this.conversionEvents[index].advertiserEventName = event.eventName;
      }
    },
    /** 系统事件变化 */
    handleSystemEventChange(index, eventType) {
      const event = this.systemEventOptions.find(item => item.eventType === eventType);
      if (event) {
        this.conversionEvents[index].systemEventTypeName = event.eventName;
      }
    },
    /** 企微分配规则变化 */
    handleAllocationRuleChange(allocationRule) {
      // 重置需要加载的数据列表
      this.form.allocationRuleId = undefined;
      this.allocationRuleList = [];
      this.groupActiveList = [];
      this.contactWayList = [];
      
      // 根据不同的分配规则加载对应数据
      if (allocationRule === '1') {
        // 加载企业微信分配规则列表
        this.loadAllocationRuleList();
      } else if (allocationRule === '0') {
        // 根据投放类型加载群活码或企业微信活码
        if (this.form.launchType === 1) {
          this.loadGroupActiveList();
        } else if (this.form.launchType === 2) {
          this.loadContactWayList();
        }
      }
    },
    /** 加载企业微信分配规则列表 */
    loadAllocationRuleList() {
      pageAssignRule({
        pageNum: 1,
        pageSize: 1000,
        status: 1
      }).then(response => {
        this.allocationRuleList = response.data.records || [];
      }).catch(error => {
        console.error('加载企业微信分配规则列表失败:', error);
        this.allocationRuleList = [];
      });
    },
    /** 加载群活码列表 */
    loadGroupActiveList() {
      pageGroupLiveCode({
        pageNum: 1,
        pageSize: 1000,
        status: 1
      }).then(response => {
        this.groupActiveList = response.data.records || [];
      }).catch(error => {
        console.error('加载群活码列表失败:', error);
        this.groupActiveList = [];
      });
    },
    /** 加载企业微信活码列表 */
    loadContactWayList() {
      // 调用/qw/contactWay/list接口获取企业微信活码数据
      // 注意：此接口返回rows字段，不是data.records
      listContactWay().then(response => {
        this.contactWayList = response.rows || [];
      }).catch(error => {
        console.error('加载企业微信活码列表失败:', error);
        this.contactWayList = [];
      });
    },
    /** 保存转换事件 */
    saveConversionEvents() {
      // 调用保存接口
      saveEventType(this.form.callbackAccountId, this.conversionEvents).then(response => {
        if (response.code === 200) {
          this.msgSuccess('保存成功');
          this.open = false;
          this.getList();
        }
      }).catch(error => {
        console.error('保存失败:', error);
        this.msgError('保存失败');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

// 对话框样式
::v-deep .site-dialog {
  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    margin: 0;
    border-radius: 4px 4px 0 0;
    
    .el-dialog__title {
      color: #fff;
      font-size: 18px;
      font-weight: 500;
    }
    
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 20px;
      
      &:hover {
        color: #f0f0f0;
      }
    }
  }
  
  .el-dialog__body {
    padding: 25px 30px;
    background-color: #f8f9fa;
  }
  
  .el-dialog__footer {
    padding: 15px 30px;
    border-top: 1px solid #e8e8e8;
    background-color: #fff;
  }
}

// 表单样式
.elegant-form {
  .form-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      transform: translateY(-2px);
    }
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8e8e8;
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    
    i {
      font-size: 18px;
      margin-right: 8px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    span {
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -12px;
        width: 0;
        height: 2px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        transition: width 0.3s ease;
      }
    }
  }
  
  .form-section:hover .section-title span::after {
    width: 100%;
  }
  
  .el-form-item {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  ::v-deep .el-form-item__label {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
  }
  
  ::v-deep .el-input__inner,
  ::v-deep .el-textarea__inner {
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #c0c4cc;
    }
    
    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }
  }
  
  ::v-deep .el-select {
    .el-input__inner {
      padding-left: 15px;
    }
  }
  
  ::v-deep .el-radio {
    margin-right: 20px;
    
    &.is-bordered {
      border-radius: 6px;
      padding: 10px 20px;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #667eea;
      }
      
      &.is-checked {
        border-color: #667eea;
        background-color: rgba(102, 126, 234, 0.05);
      }
    }
  }
  
  // 回传账号显示动画
  .slide-fade {
    animation: slideDown 0.3s ease;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 按钮样式优化
.dialog-footer {
  text-align: right;
  
  .el-button {
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &.el-button--primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
    
    &.el-button--default {
      &:hover {
        color: #667eea;
        border-color: #667eea;
        background-color: rgba(102, 126, 234, 0.05);
      }
    }
  }
}

// 表格样式优化
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  
  ::v-deep .el-table__header {
    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 600;
      font-size: 14px;
    }
  }
  
  ::v-deep .el-table__row {
    transition: all 0.3s ease;
    
    &:hover {
      background-color: rgba(102, 126, 234, 0.05);
    }
  }
}

// 顶部按钮组样式
.mb8 {
  margin-bottom: 15px;
  
  .el-button {
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &.el-button--primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      }
    }
    
    &.el-button--success {
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(103, 194, 58, 0.4);
      }
    }
  }
}

// 转换类型配置区域样式
.conversion-config-section {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  
  .config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    
    .config-title {
      font-size: 15px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .empty-tip {
    text-align: center;
    padding: 30px 0;
    color: #909399;
    font-size: 14px;
  }
}

.conversion-event-item {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background-color: #fff;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    
    .event-title {
      font-weight: 600;
      font-size: 14px;
      color: #303133;
    }
  }
}

// 投放链接对话框样式
.url-container {
  display: flex;
  gap: 10px;
  align-items: center;
  
  .url-input {
    flex: 1;
  }
}

.qrcode-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  
  canvas {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
  }
}
</style>