ylrz_saas_his_scrm_companyUI/src/components/H5/config-item/h5-qrcode-config.vue

<template>
  <div class="qrcode-config">
    <div class="config-block">
      <h3>二维码配置</h3>

      <!-- 获客助手跳转 -->
      <el-form-item label="获客助手跳转">
        <el-switch v-model="localConfig.enableGetCustomerAssistant" @change="handleConfigChange" />
      </el-form-item>

      <!-- 二维码尺寸 -->
      <el-form-item label="二维码尺寸(px)">
        <el-input-number 
          v-model="localConfig.qrcodeSize" 
          :min="80"
          :max="300"
          @change="handleConfigChange"
        />
      </el-form-item>

      <!-- 复制微信号区域 -->
      <el-divider></el-divider>
      <h4>复制微信号按钮</h4>
      <el-form-item label="是否启用">
        <el-switch v-model="localConfig.showCopyBtn" @change="handleConfigChange" />
      </el-form-item>

      <template v-if="localConfig.showCopyBtn">
        <el-form-item label="按钮文字">
          <el-input 
            v-model="localConfig.copyBtnText" 
            placeholder="请输入按钮文字"
            @change="handleConfigChange"
          />
        </el-form-item>

        <el-form-item label="文字颜色">
          <el-color-picker
            v-model="localConfig.copyBtnTextColor"
            show-alpha
            @change="handleConfigChange"
          />
        </el-form-item>

        <el-form-item label="填充颜色">
          <el-color-picker
            v-model="localConfig.copyBtnColor"
            show-alpha
            @change="handleConfigChange"
          />
        </el-form-item>
      </template>

      <!-- 点击添加老师区域 -->
      <el-divider></el-divider>
      <h4>点击添加老师按钮</h4>
      <el-form-item label="是否启用">
        <el-switch v-model="localConfig.showClickBtn" @change="handleConfigChange" />
      </el-form-item>

      <template v-if="localConfig.showClickBtn">
        <el-form-item label="按钮文字">
          <el-input 
            v-model="localConfig.clickBtnText" 
            placeholder="请输入按钮文字"
            @change="handleConfigChange"
          />
        </el-form-item>

        <el-form-item label="文字颜色">
          <el-color-picker
            v-model="localConfig.clickBtnTextColor"
            show-alpha
            @change="handleConfigChange"
          />
        </el-form-item>

        <el-form-item label="填充颜色">
          <el-color-picker
            v-model="localConfig.clickBtnColor"
            show-alpha
            @change="handleConfigChange"
          />
        </el-form-item>

        <el-form-item label="微信内跳转">
          <el-switch v-model="localConfig.clickBtnWechatJump" @change="handleConfigChange" />
        </el-form-item>
      </template>

      <!-- 其他选项 -->
      <el-divider></el-divider>
      <h4>其他设置</h4>
      <el-form-item label="默认尝试拉起微信">
        <el-switch v-model="localConfig.enableDefaultWechat" @change="handleConfigChange" />
      </el-form-item>

      <el-form-item label="启用小程序授权">
        <el-switch v-model="localConfig.enableMiniProgram" @change="handleConfigChange" />
      </el-form-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QrcodeConfigComponent',

  props: {
    config: {
      type: Object,
      required: false,
      default: () => ({
        qrcodeImage: '',
        qrcodeSize: 140,
        showCopyBtn: true,
        copyBtnText: '复制并添加老师',
        copyBtnColor: '#FF9500',
        copyBtnTextColor: '#ffffff',
        showClickBtn: true,
        clickBtnText: '点击添加老师',
        clickBtnColor: '#FF9500',
        clickBtnTextColor: '#ffffff',
        clickBtnWechatJump: false,
        enableGetCustomerAssistant: false,
        enableDefaultWechat: false,
        enableMiniProgram: false
      })
    }
  },

  data() {
    return {
      localConfig: JSON.parse(JSON.stringify(this.config))
    }
  },

  methods: {
    handleConfigChange() {
      this.$emit('update:config', JSON.parse(JSON.stringify(this.localConfig)))
    }
  },

  watch: {
    config: {
      handler(newVal) {
        this.localConfig = JSON.parse(JSON.stringify(newVal))
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.qrcode-config {
  width: 100%;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

.config-block {
  padding: 0px 15px;
}

h3 {
  font-weight: 500;
  margin: 15px 0 10px 0;
  color: #303133;
  font-size: 16px;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 10px;
}

h4 {
  font-weight: 500;
  margin: 10px 0 8px 0;
  color: #606266;
  font-size: 14px;
}

.el-form-item {
  margin-bottom: 16px;
}

.el-divider {
  margin: 15px 0;
}
</style>