assess-app/pages/statistics/module/head_data.vue

<template>
	<view>
		<view class="head_data row-justify-sb center m-lr30 m-t30">
			<view class="data_item page-box-bg-fff column-c r-30 p-tb25">
				<image class="wh-80" src="/static/img/task/task-all.png" mode=""></image>
				<view class="row-c p-tb20">
					<text class="size-40 sys-weight-600 text-color-E83">{{(moneyData.out_money).toFixed(2)}}</text>
					<text class="size-24 text-color-666 m-l10">万</text>
				</view>
				<text class="num r-10 sys-from-background-color size-24 text-color-666">放款{{moneyData.out_num}}笔</text>
			</view>
			<view class="data_item page-box-bg-fff column-c r-30 p-tb25">
				<image class="wh-80" src="/static/img/task/task-all.png" mode=""></image>
				<view class="row-c p-tb20">
					<text class="size-40 text-color-108 sys-weight-600">{{(moneyData.put_money).toFixed(2)}}</text>
					<text class="size-24 text-color-666 m-l10">万</text>
				</view>
				<text class="num r-10 sys-from-background-color size-24 text-color-666">回款{{moneyData.put_num}}笔</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getSysCashier} from "@/api/statistics";

  export default {
		name: 'head_filter',
    props:{
      'dateTypeObj':{
        default:()=>{
          return {
            dateType:4,
            selectDate:'2023-02-25',
            money_type:1,
            censusUserType:0,
            product_id:5,
          }
        }
      }
    },
    watch:{
      'dateTypeObj':function () {
        this.initData()
      }
    },
    mounted() {
      this.initData()
    },
    data() {
			return {
        moneyData:{
          out_money: 0,
          out_num: 0,
          put_money: 0,
          put_num: 0,
        }
			};
		},
    methods: {
      initData(){
        if(this.dateTypeObj.censusUserType>0){
            this.getSysCashier()
        }
      },
      getSysCashier(){
        getSysCashier(this.dateTypeObj).then((res)=>{
          if(res.code===1){
              this.moneyData=res.data
          }
        })
      }
    },
	}
</script>

<style lang="scss" scoped>
	.head_data {
		text-align: center;
		
		.data_item {
			width: 330rpx;
			.num{
				width: 140rpx;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}
</style>