localization-management-system/src/views/digitalScreen/module/wecharQrCode.vue

<template>
  <div class="config-item">
    <div class="config-item-main">
      <span class="data-title">二维码</span>
      <div class="upload-item" style="margin-bottom: 20px;">
        <p>公众号二维码</p>
        <div style="display: flex; justify-content: flex-start;">
          <div class="image-container">
            <div v-if="isLoading" class="image-loading">
              <div class="spinner" />
              <span class="loading-text">加载中...</span>
            </div>
            <img
              v-show="!isLoading || imageError"
              :key="imageKey"
              style="display: block; height: 120px; margin-right: 15px; transition: opacity 0.3s ease-in-out;"
              :src="currentQrCodeUrl"
              :class="{ 'image-loaded': !isLoading && currentQrCodeUrl }"
              alt="公众号二维码"
              @load="handleImageLoad"
              @error="handleImageError"
            >
            <!-- 错误提示 -->
            <div v-if="imageError" class="image-error">
              <i class="iconfont icon-error" />
              <span>加载失败</span>
            </div>
          </div>
          <UploadCover upload-type="other-digital" @childCover="handleCover" />
        </div>
      </div>
    </div>
    <div class="config-remarks">双击可上传图片。二维码用于“总览屏”、“媒体屏”，在任意分屏编辑均可生效！</div>
  </div>
</template>

<script>
import { FetchEditScreenSetting } from '@/api/digitalScreen/index'
import UploadCover from '@/views/components/upload.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'WecharQrCode',
  components: { UploadCover },
  props: {
    qrCodeUrl: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      defaultImg: '@/assets/images/cover-bg.png',
      imageKey: 0,
      localQrCodeUrl: null,
      isLoading: false, // 加载状态
      imageError: false // 错误状态
    }
  },
  computed: {
    ...mapGetters(['baseApi']),
    currentQrCodeUrl() {
      if (this.localQrCodeUrl) {
        return this.localQrCodeUrl
      }
      if (this.qrCodeUrl) {
        return this.qrCodeUrl.startsWith('http') ? this.qrCodeUrl : this.baseApi + this.qrCodeUrl
      }
      return this.defaultImg
    }
  },
  watch: {
    qrCodeUrl(newVal) {
      this.localQrCodeUrl = newVal
      this.reloadImage()
    },
    currentQrCodeUrl(newVal) {
      if (newVal && newVal !== this.defaultImg) {
        this.reloadImage()
      }
    }
  },
  created() {
    this.localQrCodeUrl = this.qrCodeUrl
  },
  mounted() {
    this.$emit('ready')
  },
  methods: {
    handleCover(value) {
      if (value) {
        const imgUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=1&imgId=' + value
        this.submitCover(imgUrl)
      } else {
        this.localQrCodeUrl = null
        this.imageKey++
        this.isLoading = false
        this.imageError = false
      }
    },
    submitCover(imgUrl) {
      const param = {
        'code': 'wechar_qr_code',
        'context': imgUrl,
        'remarks': null
      }
      FetchEditScreenSetting(param)
        .then(() => {
          this.$message.success('公众号二维码更新成功')
          this.localQrCodeUrl = imgUrl
          this.reloadImage()
          this.$emit('update:qrCodeUrl', imgUrl)
          this.$emit('triggerInit')
        })
        .catch(() => {
          this.$message.error('公众号二维码更新失败')
        })
    },
    reloadImage() {
      this.isLoading = true
      this.imageError = false
      this.imageKey++
    },
    // 图片加载完成
    handleImageLoad() {
      this.isLoading = false
      this.imageError = false
    },
    // 图片加载失败
    handleImageError() {
      this.isLoading = false
      this.imageError = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/digitalScreen.scss";
.image-container {
  position: relative;
  min-width: 120px;
  height: 120px;
  // margin-right: 15px;
}

.image-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #eee;
  border-top: 2px solid #0348f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 12px;
  color: #666;
}

.image-loaded {
  opacity: 1;
}

.image-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 4px;
  color: #ED4A41;
  font-size: 12px;
}

.image-error .icon-error {
  font-size: 20px;
  margin-bottom: 8px;
}
</style>