uniAppXCX/component/numImg.vue

<template>
	<view class="number">
		<image class="numImg" :src="'../static/img/ka/num' + cardType(value) + '/' + num1() + '.png'" mode="heightFix"></image>
		<image class="numImg" :src="'../static/img/ka/num' + cardType(value) + '/' + num2() + '.png'" mode="heightFix"></image>
		<image class="numImg" :src="'../static/img/ka/num' + cardType(value) + '/' + num3() + '.png'" mode="heightFix"></image>
	</view>
</template>

<script>
	import {
		cardType
	} from "@/utils/utils.js"
	export default {
		props: {
			value: {
				type: Object,
				default: {}
			}
		},
		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)
				}
				console.log(num, 'num')
				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: 15px;
		}
	}
</style>