ylrz_his_scrm_companyUI/src/components/H5/config-item/h5-add-wechat-button-config.vue

<template>
  <div class="add-wechat-button-config">
    <div class="config-block">
      <h3>加微按钮配置</h3>

      <!-- 按钮样式选择 -->
      <el-form-item label="按钮样式">
        <el-radio-group v-model="localConfig.buttonStyle" @change="handleStyleChange">
          <el-radio label="text">文字</el-radio>
          <el-radio label="image">图片</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 文字样式配置 -->
      <template v-if="localConfig.buttonStyle === 'text'">
        <el-form-item label="按钮文字">
          <el-input 
            v-model="localConfig.buttonText" 
            placeholder="请输入按钮文字"
            @change="handleConfigChange"
          />
        </el-form-item>

        <el-form-item label="按钮背景色">
          <el-color-picker
            v-model="localConfig.buttonColor"
            show-alpha
            @change="handleConfigChange"
          />
        </el-form-item>

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

      <!-- 图片样式配置 -->
      <template v-if="localConfig.buttonStyle === 'image'">
        <el-form-item label="按钮图片">
          <image-upload 
            v-model="localConfig.buttonImage" 
            :file-type='["png", "jpg", "jpeg", "gif"]' 
            :limit="1"
            @change="handleConfigChange"
          />
        </el-form-item>
      </template>

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

      <el-form-item label="跟随屏幕">
        <el-switch v-model="localConfig.followScreen" @change="handleConfigChange" />
      </el-form-item>

      <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: 'AddWechatButtonConfigComponent',

  props: {
    config: {
      type: Object,
      required: false,
      default: () => ({
        buttonStyle: 'text',
        buttonText: '提交',
        buttonColor: '#FF5A5A',
        buttonTextColor: '#ffffff',
        buttonImage: '',
        enableGetCustomerAssistant: true,
        followScreen: true,
        enableDefaultWechat: false,
        enableMiniProgram: false
      })
    }
  },

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

  methods: {
    handleStyleChange() {
      // 切换样式时不清空图片，保持默认值
      this.handleConfigChange()
    },
    handleConfigChange() {
      this.$emit('update:config', JSON.parse(JSON.stringify(this.localConfig)))
    }
  },

  watch: {
    config: {
      handler(newVal) {
        this.localConfig = JSON.parse(JSON.stringify(newVal))
      },
      deep: true
    },
    'localConfig.buttonImage'(newVal) {
      // 监听图片变化，实时更新父组件
      this.handleConfigChange()
    }
  }
}
</script>

<style scoped>
.add-wechat-button-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;
}

.el-form-item {
  margin-bottom: 16px;
}
</style>