ylrz_his_scrm_companyUI/src/components/H5/config-item/h5-countdown-config.vue

<template>
  <div class="countdown-config">
    <div class="config-block">
      <h3>倒计时配置</h3>

      <el-form-item class="time-config" label="时间配置">
        <div class="button-group">
          <el-radio-group v-model="localConfig.countdownMode" @change="handleModeChange">
            <el-radio-button :label="'1'" class="select-button"
                             :class="{ 'selected': localConfig.countdownMode == '1' }"
            >固定截止时间
            </el-radio-button>
            <el-radio-button :label="'2'" class="select-button"
                             :class="{ 'selected': localConfig.countdownMode == '2' }"
            >固定倒计时长
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 固定截止时间模式 -->
        <template v-if="localConfig.countdownMode == 1">
          <div class="datetime-picker">
            <el-date-picker
              v-model="localConfig.endDateTime"
              type="datetime"
              placeholder="选择截止日期时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="handleEndTimeChange"
            ></el-date-picker>
          </div>
          <div class="help-text">
            * 设置一个截至日期固定的倒计时，例如，设置2021-03-04 12:00:00，访客进入页面，该倒计时将会倒计至2021-03-04
            12:00:00结束。
          </div>
        </template>

        <!-- 固定倒计时长模式 -->
        <template v-else>
          <div class="time-input">
            <el-input v-model="localConfig.timeDisplay" @change="handleCountMinusChange" placeholder="分钟">
              <template #append>
                <i class="el-icon-time"></i>
              </template>
            </el-input>
          </div>
          <div class="help-text">
            * 固定时长：设置一个固定时长的倒计时，例如，设置5分钟，访客每次进入页面，倒计时均倒计5分钟，若倒计时间结束，用户再次进入页面，倒计时重新开始计时。
          </div>
        </template>
      </el-form-item>

      <el-form-item class="color-config" label="颜色">
        <el-color-picker
          v-model="localConfig.mainColor"
          show-alpha
          @change="handleColorChange"
        ></el-color-picker>
      </el-form-item>

      <el-form-item class="bg-image-config" label="倒计时底图">
        <image-upload v-model="localConfig.bgImage" :file-type='["png", "jpg", "jpeg", "gif"]' :limit="1"/>
      </el-form-item>
    </div>
  </div>
</template>

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

  props: {
    config: {
      type: Object,
      required: false,
      default: () => ({
        hours: 0,
        minutes: 10,
        seconds: 0,
        endDateTime: null,
        timeDisplay: 0,
        mainColor: '#FF5722',
        bgImage: ''
      })
    }
  },

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

  methods: {
    // 数字补零
    padZero(num) {
      return num.toString().padStart(2, '0')
    },

    // 格式化时间显示
    formatTimeDisplay(hours, minutes, seconds) {
      return `${this.padZero(hours)}时 ${this.padZero(minutes)}分 ${this.padZero(seconds)}秒`
    },

    // 处理倒计时模式变更
    handleModeChange(value) {
      this.localConfig.countdownMode = value
      this.$emit('update:config', { ...this.localConfig })
    },

    // 处理倒计时长
    handleCountMinusChange(value) {
      this.localConfig.timeDisplay = value
      this.$emit('update:config', { ...this.localConfig })
    },
    // 处理截止时间变更
    handleEndTimeChange(value) {
      this.localConfig.endDateTime = value
      this.$emit('update:config', { ...this.localConfig })
    },

    // 处理颜色变更
    handleColorChange(value) {
      this.localConfig.mainColor = value
      this.$emit('update:config', { ...this.localConfig })
    }
  },

  // 监听属性变化
  watch: {
    'localConfig.bgImage': {
      handler(newVal, oldVal) {
        this.localConfig.bgImage = newVal
        this.$emit('update:config', { ...this.localConfig })
      },
      deep: false
    }
  }
}
</script>

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

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

h3, h4 {
  font-weight: 500;
  margin: 15px 0 10px 0;
  color: #303133;
}

h3 {
  font-size: 16px;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 10px;
}

h4 {
  font-size: 14px;
  margin-top: 20px;
}

.button-group {
  margin: 10px 0;
}

.select-button {
  margin-right: -1px;
}

.selected {
  color: #fff;
  background-color: #409EFF;
  border-color: #409EFF;
}

.datetime-picker, .time-input {
  margin: 10px 0;
}

.help-text {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.5;
}

.color-config {
  margin: 15px 0;
}

.color-preview {
  height: 30px;
  border-radius: 4px;
  margin-top: 10px;
}

.image-upload-area {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 100%;
  height: 108px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 10px 0;
  overflow: hidden;
}

.image-preview {
  width: 100%;
  height: 100%;
  position: relative;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-around;
  padding: 5px 0;
}

.upload-tip {
  text-align: center;
  color: #909399;
  font-size: 12px;
}

.upload-tip i {
  font-size: 28px;
  color: #C0C4CC;
  margin-bottom: 5px;
}

.price-config {
  margin-top: 15px;
}

.price-input {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.color-label {
  margin-right: 10px;
  min-width: 40px;
}

.price-value {
  margin: 10px 0 20px 0;
}
</style>