zkxw/mobile-h5/components/OaAppIcon.vue

<template>
  <view class="oa-app-icon" :class="'oa-app-icon--' + size" :style="boxStyle">
    <image
      v-if="resolved.kind === 'ep'"
      class="oa-app-icon__glyph"
      :src="epSrc"
      mode="aspectFit"
    />
    <image
      v-else
      class="oa-app-icon__photo"
      :src="resolved.src"
      mode="aspectFit"
    />
  </view>
</template>

<script>
import { resolveOaAppIcon, epIconDataUri } from '../utils/oa-app-icons.js'

export default {
  name: 'OaAppIcon',
  props: {
    iconUrl: { type: String, default: '' },
    /** xs=28, sm=32, card=36, md=40, lg=48 */
    size: { type: String, default: 'sm' }
  },
  computed: {
    resolved() {
      return resolveOaAppIcon(this.iconUrl)
    },
    boxStyle() {
      if (this.resolved.kind === 'ep') {
        return { background: this.resolved.bg }
      }
      return {}
    },
    epSrc() {
      if (this.resolved.kind !== 'ep') return ''
      return epIconDataUri(this.resolved.icon, this.resolved.fg)
    }
  }
}
</script>

<style scoped>
.oa-app-icon {
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oa-app-icon--xs {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.oa-app-icon--sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.oa-app-icon--card {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.oa-app-icon--md {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.oa-app-icon--lg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
.oa-app-icon__glyph {
  width: 16px;
  height: 16px;
}
.oa-app-icon--xs .oa-app-icon__glyph {
  width: 14px;
  height: 14px;
}
.oa-app-icon--card .oa-app-icon__glyph {
  width: 18px;
  height: 18px;
}
.oa-app-icon--md .oa-app-icon__glyph {
  width: 20px;
  height: 20px;
}
.oa-app-icon--lg .oa-app-icon__glyph {
  width: 24px;
  height: 24px;
}
.oa-app-icon__photo {
  width: 100%;
  height: 100%;
  display: block;
}
</style>