dvcp_v2_wxcp_app/src/components/AiOpenData.vue

<template>
  <div :type="type" :openid="oid">
    <div class="loading" v-text="`读取中...`"/>
  </div>
</template>

<script>
import {mapActions} from "vuex";

export default {
  name: "AiOpenData",
  props: ['type', 'openid'],
  computed: {
    oid() {
      /**
       * 后端返回格式(cropId|userId)
       */
      return this.openid?.split("|")?.[1] || this.openid || ""
    }
  },
  methods: {
    ...mapActions(['injectJWeixin']),
    bindWWOpenData() {
      if (window?.WWOpenData) {
        WWOpenData.bind(this.$el)
      } else {
        this.injectJWeixin().then(() => {
          this.$nextTick(() => {
            WWOpenData.bind(this.$el)
          })
        })
      }
    }
  },
  watch: {
    openid(v) {
      v && this.bindWWOpenData()
    }
  },
  mounted() {
    this.bindWWOpenData()
  }
}
</script>
<style lang="scss" scoped>
.loading {
  color: transparent;
  height: 100%;
  animation: loading 1s infinite alternate;
}

@keyframes loading {
  from {
    background: rgba(#eee,.6);
  }
  to {
    background: rgba(#eee,.2);
  }
}
</style>