uniAppXCX/component/numImg.vue

<template>
  <view class="number">
    <image
      class="numImg"
      :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/num' + cardType(type, value) + '/' + num1() + '.png'"
      mode="heightFix"
    ></image>
    <image
      class="numImg"
      :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/num' + cardType(type, value) + '/' + num2() + '.png'"
      mode="heightFix"
    ></image>
    <image
      class="numImg"
      :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/num' + cardType(type, value) + '/' + num3() + '.png'"
      mode="heightFix"
    ></image>
  </view>
</template>

<script>
import { cardType } from '@/utils/utils.js'
export default {
  props: {
    value: {
      type: Object,
      default: {},
    },
    type: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      cardType: cardType,
    }
  },
  onShow() {},
  mounted() {
    // console.log(this.value, 'value')
  },
  methods: {
    num1() {
      let num = 0
      let number = this.value.number
      if (number / 100 > 0) {
        num = Math.trunc(number / 100)
      }
      return num
    },
    num2() {
      let num = 0
      let number = this.value.number % 100
      if (number / 10 > 0) {
        num = Math.trunc(number / 10)
      }
      return num
    },
    num3() {
      let num = 0
      let number = (this.value.number % 100) % 10
      if (number > 0) {
        num = Math.trunc(number)
      }
      return num
    },
  },
}
</script>

<style scoped lang="scss">
.number {
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  .numImg {
    height: 14px;
  }
}
</style>