pet-front/otherPages/workbenchManage/myLevel/commponents/myData.vue

<template>
	<view>
		<view class="my-data">
			<view class="my-data-mounth">
				<cardTitle :cardTitle="nounthName"></cardTitle>
				<cardData :cardData="nounthData"></cardData>
			</view>
		</view>

		<view class="my-data">
			<view class="my-data-total">
				<cardTitle :cardTitle="totalName"></cardTitle>
				<cardData :cardData="totalData"></cardData>
			</view>
		</view>

		<view class="bottom box-size child" :style="{ borderRadius: '16rpx' }" >
			<up-parse :content="configList.cumulative_data_statement.paramValueArea" containerStyle="{
				color: '#A55822',
				fontSize: '22rpx',
				lineHeight: '29rpx',
			}"></up-parse>
		</view>
	</view>

</template>

<script setup>
	import cardTitle from '../../components/cardTitle.vue'
	import cardData from '../../components/cardData.vue'
	import {
		ref,
		reactive,
		computed,
	} from "vue"
	import { useStore } from 'vuex'

	const store = useStore()
	
	const props = defineProps({
		dataInfo : {
			default : () => {
				return {}
			}
		}
	})

	const configList = computed(() => {
		return store.getters.configList
	})
	
	const nounthData = computed(() => {
		return [{
				title: '当月注册用户',
				num: (props.dataInfo.register_users || 0) + "个",
			},
			{
				title: '当月下单用户',
				num: (props.dataInfo.order_users || 0) + "个",
			},
			{
				title: '当月有效用户',
				num: (props.dataInfo.use_users || 0) + "个",
			},
		]
	})
	
	const totalData = computed(() => {
		return [{
				title: '累计注册用户',
				num: (props.dataInfo.register_users_sum || 0) + "个",
			},
			{
				title: '累计下单用户',
				num: (props.dataInfo.order_users_sum || 0) + "个",
			},
			{
				title: '累计有效用户',
				num: (props.dataInfo.use_users_sum || 0) + "个",
				color:'red'
			},
		]
	})

	const nounthName = ref('当月数据')
	const totalName = ref('累计数据')
	
</script>

<style scoped lang="scss">
	@import "../index.scss";
</style>