ylrz_his_scrm_companyUI/src/components/H5/h5-qrcode.vue

<template>
  <div :class="config.classText.join(' ')">
    <div class="qrcode-container">
      <div class="qrcode-image-row">
        <img 
          :src="config.qrcodeImage || require('@/assets/images/qr_code.png')"
          class="qrcode-image"
          :style="{ width: config.qrcodeSize + 'px', height: config.qrcodeSize + 'px' }"
        />
      </div>


      <div v-if="config.showCopyBtn" class="copy-btn-row">
        <button class="circle-btn copy-btn" :style="{ backgroundColor: config.copyBtnColor, color: config.copyBtnTextColor }">
          {{ config.copyBtnText }}
        </button>
      </div>

      <div v-if="config.showClickBtn" class="click-btn-row">
        <button class="circle-btn click-btn" :style="{ backgroundColor: config.clickBtnColor, color: config.clickBtnTextColor }">
          {{ config.clickBtnText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'h5-qrcode',
  props: {
    config: {
      type: Object,
      default: () => ({
        classText: ['parent-div'],
        qrcodeImage: '',
        qrcodeSize: 140,
        showCopyBtn: true,
        copyBtnText: '复制并添加老师',
        copyBtnColor: '#FF9500',
        copyBtnTextColor: '#ffffff',
        showClickBtn: true,
        clickBtnText: '点击添加老师',
        clickBtnColor: '#FF9500',
        clickBtnTextColor: '#ffffff'
      })
    }
  }
}
</script>

<style src="./css/base.css"></style>
<style lang="scss" scoped>
.qrcode-container {
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.qrcode-image-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.qrcode-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.wechat-number-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.wechat-number-text {
  font-size: 14px;
  color: #303133;
  text-align: center;
}

.copy-btn-row,
.click-btn-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.circle-btn {
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-weight: 500;

  &:hover {
    opacity: 0.9;
  }

  &:active {
    opacity: 0.8;
  }
}

.copy-btn {
  min-width: 160px;
}

.click-btn {
  min-width: 160px;
}

.active {
  border-color: #02ff9b;
}
</style>