ylrz_saas_his_scrm_companyUI/src/views/adv/configuration/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 站点重复报名设置 -->
      <el-col :span="8">
        <el-card shadow="hover" class="box-card" @click.native="openDialog('duplicate')">
          <div slot="header" class="clearfix">
            <span>站点重复报名设置</span>
            <el-button style="float: right; padding: 3px 0" type="text">设置</el-button>
          </div>
          <div class="card-content">
            <i class="el-icon-document-copy card-icon"></i>
            <p class="card-desc">配置学员报名规则及重复报名限制天数</p>
          </div>
        </el-card>
      </el-col>

      <!-- 全局熟客设置 -->
      <el-col :span="8">
        <el-card shadow="hover" class="box-card" @click.native="openDialog('regular')">
          <div slot="header" class="clearfix">
            <span>全局熟客设置</span>
            <el-button style="float: right; padding: 3px 0" type="text">设置</el-button>
          </div>
          <div class="card-content">
            <i class="el-icon-user-solid card-icon"></i>
            <p class="card-desc">配置全局熟客判断及小程序授权熟客逻辑</p>
          </div>
        </el-card>
      </el-col>

      <!-- 重复回传设置 -->
      <el-col :span="8">
        <el-card shadow="hover" class="box-card" @click.native="openDialog('repeat')">
          <div slot="header" class="clearfix">
            <span>重复回传设置</span>
            <el-button style="float: right; padding: 3px 0" type="text">设置</el-button>
          </div>
          <div class="card-content">
            <i class="el-icon-refresh card-icon"></i>
            <p class="card-desc">配置线索去重策略及回传过滤规则</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 弹窗1: 站点重复报名设置 -->
    <el-dialog title="站点重复报名设置" :visible.sync="dialogs.duplicate" width="600px" append-to-body>
      <el-form ref="duplicateForm" :model="form.duplicateRegistrationSettings" label-width="120px">
        <el-form-item label="报名逻辑">
          <el-radio-group v-model="form.duplicateRegistrationSettings.signUpLogic">
            <el-radio :label="1">学员可正常报名</el-radio>
            <el-radio :label="2">学员不可重复报名</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理逻辑" v-if="form.duplicateRegistrationSettings.signUpLogic === 2">
          <div>
            客户站点报名后的
            <el-input-number v-model="form.duplicateRegistrationSettings.day" :min="1" :max="9999" size="small" style="width: 100px; margin: 0 5px;" />
            天内，不可重复报名相同项目站点
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitConfig">确 定</el-button>
        <el-button @click="dialogs.duplicate = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 弹窗2: 全局熟客设置 -->
    <el-dialog title="全局熟客设置" :visible.sync="dialogs.regular" width="650px" append-to-body>
      <el-form ref="regularForm" :model="form.regularCustomerSettings" label-width="200px">
        <el-form-item label="全局熟客开关">
          <el-switch
            v-model="form.regularCustomerSettings.repeatSwitch"
            :active-value="1"
            :inactive-value="2"
            active-text="开启"
            inactive-text="关闭">
          </el-switch>
          <div class="form-tip">开启后，客户“站点投放报名”或“在线客服留言”时，将分配当前名片跟进人的二维码。特殊的，站点投放配置个微群活码或客服码，则在此模式下无法实现全局熟客，将按照分配规则进行分配出码</div>
        </el-form-item>
        <el-form-item label="小程序/加粉站点熟客判断">
          <el-switch
            v-model="form.regularCustomerSettings.authSwitch"
            :active-value="1"
            :inactive-value="2"
            active-text="开启"
            inactive-text="关闭">
          </el-switch>
          <div class="form-tip">小程序表单站点/加粉类站点可支持在微信授权后，根据微信身份判断熟客</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitConfig">确 定</el-button>
        <el-button @click="dialogs.regular = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 弹窗3: 重复回传设置 -->
    <el-dialog title="重复回传设置" :visible.sync="dialogs.repeat" width="600px" append-to-body>
      <el-form ref="repeatForm" :model="form.repeatPostbackSettings" label-width="140px">
        <el-form-item label="重复回传过滤">
          <el-switch
            v-model="form.repeatPostbackSettings.filter"
            :active-value="1"
            :inactive-value="2"
            active-text="开启"
            inactive-text="关闭">
          </el-switch>
          <div class="form-tip">开启后，若投放站点获取的线索与系统中已有客户重复，系统将不针对该线索进行回传。</div>
        </el-form-item>
        <el-form-item label="过滤方式" v-if="form.repeatPostbackSettings.filter === 1">
          <el-radio-group v-model="form.repeatPostbackSettings.method">
            <el-radio :label="1">按行为过滤</el-radio>
            <el-radio :label="2">按手机号过滤</el-radio>
          </el-radio-group>
          <div class="form-tip" v-if="form.repeatPostbackSettings.method === 1">若同一个客户在不同站点，重复触发相同行为事件，则不会向广告商回传</div>
          <div class="form-tip" v-if="form.repeatPostbackSettings.method === 2">若同一个客户在不同站点，重复提交相同手机号，则不会向广告商回传</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitConfig">确 定</el-button>
        <el-button @click="dialogs.repeat = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getConfigDetail, addOrUpdateConfig } from "@/api/adv/configuration";

export default {
  name: "AdvConfiguration",
  data() {
    return {
      // 弹窗控制
      dialogs: {
        duplicate: false,
        regular: false,
        repeat: false
      },
      // 完整表单数据
      form: {
        duplicateRegistrationSettings: {
          signUpLogic: 1,
          day: undefined
        },
        regularCustomerSettings: {
          repeatSwitch: 2,
          authSwitch: 2
        },
        repeatPostbackSettings: {
          filter: 2,
          method: 1
        }
      }
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    /** 获取配置详情 */
    getDetail() {
      getConfigDetail().then(response => {
        if (response.data) {
          // 合并数据，防止后端返回null导致结构丢失
          const data = response.data;
          if (data.duplicateRegistrationSettings) {
            this.form.duplicateRegistrationSettings = { ...this.form.duplicateRegistrationSettings, ...data.duplicateRegistrationSettings };
          }
          if (data.regularCustomerSettings) {
            this.form.regularCustomerSettings = { ...this.form.regularCustomerSettings, ...data.regularCustomerSettings };
          }
          if (data.repeatPostbackSettings) {
            this.form.repeatPostbackSettings = { ...this.form.repeatPostbackSettings, ...data.repeatPostbackSettings };
          }
        }
      });
    },
    /** 打开弹窗 */
    openDialog(type) {
      if (this.dialogs.hasOwnProperty(type)) {
        this.dialogs[type] = true;
      }
    },
    /** 提交保存 */
    submitConfig() {
      const loading = this.$loading({
        lock: true,
        text: '保存中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      addOrUpdateConfig(this.form).then(response => {
        loading.close();
        // 根据要求：返回1成功，0失败
        // 通常 axios拦截器已处理code!=200的情况，但这里根据描述 data=1 成功
        if (response.code === 200) {
          if (response.data === 1 || response.data === '1' || response.data === true) {
            this.$message.success("保存成功");
            this.dialogs.duplicate = false;
            this.dialogs.regular = false;
            this.dialogs.repeat = false;
            this.getDetail(); // 刷新数据
          } else {
            this.$message.error("保存失败");
          }
        } else {
            this.$message.error(response.msg || "保存失败");
        }
      }).catch(() => {
        loading.close();
      });
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.box-card {
  cursor: pointer;
  height: 220px;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
  }

  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 120px;
    
    .card-icon {
      font-size: 48px;
      color: #409EFF;
      margin-bottom: 20px;
    }
    
    .card-desc {
      color: #909399;
      font-size: 14px;
      text-align: center;
      line-height: 1.5;
      padding: 0 10px;
    }
  }
}

.form-tip {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  margin-top: 5px;
}
</style>