fs-uni-template/components/fs-text/fs-text.vue

<template>
	<text 
		:class="[colorType,decoration,{block}]" 
		:style="styleStr"
		@click="handleClick">
			{{formatText(text)}}
		</text>
</template>

<script>
export default {
	name: 'fs-text'
}
</script>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	text: String,
	mode: {
		type: String,
		validator(value) {
			return ['price', 'phone', 'name'].includes(value)
		}
	},
	colorType: {
	  type: String,
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
		}
	},
	color: String,
	link: String,
	linkType: {
		type: String,
		default: 'navigateTo'
	},
	block: Boolean,
	encrypt: Boolean,
	decoration: {
		type: String,
		validator(value) {
			return ['underline', 'line-through'].includes(value)
		}
	}
})
const emits = defineEmits(['click'])

const styleStr = computed(() => {
	return props.color ? `color: ${props.color};` : ''
})

const formatText = text => {
	if (props.mode === 'price') {
		return '¥' + text
	} else if (props.mode === 'name') {
		return text[0] + '**'
	} else if (props.mode === 'phone' && props.encrypt) {
		return text.slice(0, 3) + '****' + text.slice(-4)
	}
	return text
}
const handleClick = () => {
	if (props.mode === 'phone') {
		uni.makePhoneCall({
			phoneNumber: props.text
		})
	} else if (props.link) {
		uni[props.linkType]({
			url: props.link
		})
	}
	emits('click')
}
</script>

<style lang="scss" scoped>

</style>