pj_h5_cloud/src/pages/water/waterTotal.vue

<template>
	<crud-layout bg="/static/page/blue-bg.png">
		<z-paging
			ref="pageRef"
			:fixed="false"
			height="100%"
			safe-area-inset-bottom
			:loading-more-enabled="true"
			:show-scrollbar="false"
			:auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false"
		>
			<template #top>
				<view class="h-30rpx" />
				<view class="bg-white rounded-12rpx p-20rpx flex justify-between items-center">
					<text class="text-30 font-600">月度流水统计</text>
					<tm-text color="#999999" font-size="26">{{ formatVal }}</tm-text>
					<view class="flex items-center cursor-pointer">
						<tm-between-time
							start="2020-1-1"
							end="2050-1-1"
							v-model="state.date"
							v-model:model-str="state.formatVal"
							@confirm="datePickerConfirm"
							format="YYYY-MM-DD"
							:quickDate="[]"
							drawerSize="900"
						>
							<image class="w-[30rpx] h-[30rpx]" src="@/static/page/filter.svg" />
							<text class="ml-1 text-30">筛选</text>
						</tm-between-time>
					</view>
				</view>
			</template>

			<view class="h-20rpx" />

			<view v-if="state.waterData.merchantId" class="bg-white rounded-16rpx p-3 mb-2 shadow-md">
				<view class="flex justify-between items-center text-sm text-gray-800 mb-1">
					<view class="flex items-center">
						<image class="w-50rpx h-50rpx rounded-8rpx" :src="filePath(state.waterData.logoPic)" mode="aspectFill" />
						<view class="ml-2">{{ state.waterData.merchantName }}</view>
					</view>
					<view>{{ state.waterData.day }}</view>
				</view>
				<view class="bg-gray-100 rounded-12rpx p-2">
					<view class="flex justify-between mb-2">
						<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx">
							<text class="flex-1 text-sm text-center text-gray-600">流水金额</text>
							<text class="flex-1 text-sm text-center text-gray-800">¥ {{ hooks.useMoney(state.waterData.totalPayPrice) }}</text>
						</view>
						<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx ml-2">
							<text class="flex-1 text-sm text-center text-gray-600">流水次数</text>
							<text class="flex-1 text-sm text-center text-gray-800">{{ state.waterData.totalPayCount || 0 }}</text>
						</view>
					</view>
					<view class="flex justify-between mb-2">
						<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx">
							<text class="flex-1 text-sm text-center text-gray-600">盈利金额</text>
							<text class="flex-1 text-sm text-center text-green-500">¥ {{ hooks.useMoney(state.waterData.totalProfitPrice) }}</text>
						</view>
						<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx ml-2">
							<text class="flex-1 text-sm text-center text-gray-600">盈利次数</text>
							<text class="flex-1 text-sm text-center text-green-500">{{ state.waterData.totalProfitCount || 0 }}</text>
						</view>
					</view>
					<view class="flex justify-between mb-0">
						<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx">
							<text class="flex-1 text-sm text-center text-gray-600">退款金额</text>
							<text class="flex-1 text-sm text-center text-red-500">¥ {{ hooks.useMoney(state.waterData.totalRefundPrice) }}</text>
						</view>
						<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx ml-2">
							<text class="flex-1 text-sm text-center text-gray-600">退款次数</text>
							<text class="flex-1 text-sm text-center text-red-500">{{ state.waterData.totalRefundCount || 0 }}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</crud-layout>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { hooks } from "@@/index"
import { filePath } from "@@/utils/file"
import { flowStatisticsApi } from "@@/api"

const pageRef = ref<any>(null)
const state = reactive<any>({
	pa: {
		createTimeList: [hooks.useTime(new Date(), "{y}-{m}-{d}"), hooks.useTime(new Date(), "{y}-{m}-{d}")],
	},
	formatVal: "",
	date: [hooks.useTime(new Date(), "{y}-{m}"), hooks.useTime(new Date(), "{y}-{m}")],
	waterData: {},
})
const formatVal = computed(() => (state.date.length === 2 ? state.formatVal : ""))

onLoad(() => {
	const app = getApp()
	app._initTabbar()
})
onShow(() => {
	const isLogin = hooks.useCheckLogin()
	if (!isLogin) return
	getWaterTotalData()
})

const getWaterTotalData = async () => {
	const isLogin = hooks.useStaticCheckLogin()
	if (!isLogin) return

	try {
		uni.showLoading({ title: "加载中", mask: true })
		const res: any = await flowStatisticsApi.mchWaterTotal({
			createTimeList: state.pa.createTimeList,
		})
		if (res.code == 0) {
			state.waterData = res.data
			uni.hideLoading()
		} else {
			state.waterData = {}
			uni.showToast({ title: res.msg, icon: "none" })
		}
	} catch (error: any) {
		uni.showToast({ title: error.msg, icon: "none" })
	}
}

// 时间范围选择器确认
const datePickerConfirm = (date: any) => {
	if (!formatVal.value) return
	state.pa.createTimeList = formatVal.value.split("~")
	getWaterTotalData()
}
</script>