129 lines
5.4 KiB
Vue
129 lines
5.4 KiB
Vue
<template>
|
|
<crud-layout bg="/static/page/blue-bg.png">
|
|
<z-paging
|
|
ref="pageRef"
|
|
:fixed="false"
|
|
v-model="list"
|
|
:default-page-size="10"
|
|
safe-area-inset-bottom
|
|
:loading-more-enabled="true"
|
|
:show-scrollbar="false"
|
|
@query="query"
|
|
:auto-clean-list-when-reload="false"
|
|
:auto-scroll-to-top-when-reload="false"
|
|
@scroll="scroll"
|
|
>
|
|
<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">{{ state.formatVal }}</tm-text>
|
|
<view class="flex items-center cursor-pointer">
|
|
<tm-between-time
|
|
start="2020-1-1"
|
|
end="2040-1-1"
|
|
v-model="state.date"
|
|
v-model:model-str="state.formatVal"
|
|
@confirm="datePickerConfirm"
|
|
format="YYYY-MM-DD"
|
|
>
|
|
<svg
|
|
t="1742280333491"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="4288"
|
|
width="16"
|
|
height="14"
|
|
>
|
|
<path
|
|
d="M568.552727 954.181818a86.341818 86.341818 0 0 1-41.425454-10.472727l-114.269091-62.836364a86.574545 86.574545 0 0 1-44.916364-76.101818V442.181818a16.989091 16.989091 0 0 0-6.981818-13.730909L97.047273 218.298182 93.090909 214.807273A85.876364 85.876364 0 0 1 155.927273 69.818182h711.214545A86.574545 86.574545 0 0 1 930.909091 214.807273l-3.490909 3.490909-266.24 213.410909a17.454545 17.454545 0 0 0-6.050909 13.730909v422.4A86.341818 86.341818 0 0 1 568.552727 954.181818zM141.963636 166.632727l262.283637 209.454546A85.178182 85.178182 0 0 1 437.061818 442.181818v362.589091a17.92 17.92 0 0 0 8.610909 15.592727l114.269091 62.138182a17.687273 17.687273 0 0 0 17.687273 0 17.221818 17.221818 0 0 0 8.378182-15.36V445.44a85.876364 85.876364 0 0 1 31.883636-67.258182l263.214546-211.549091a17.687273 17.687273 0 0 0 1.62909-18.152727 17.454545 17.454545 0 0 0-15.592727-8.843636H155.927273a17.221818 17.221818 0 0 0-13.963637 27.694545zM920.669091 512h-188.974546a34.443636 34.443636 0 0 1 0-69.818182h188.974546a34.443636 34.443636 0 0 1 0 69.818182z m0 128.930909h-188.974546a34.443636 34.443636 0 0 1 0-69.818182h188.974546a34.443636 34.443636 0 0 1 0 69.818182z m0 128h-188.974546a34.443636 34.443636 0 0 1 0-69.818182h188.974546a34.443636 34.443636 0 0 1 0 69.818182z"
|
|
p-id="4289"
|
|
/>
|
|
</svg>
|
|
<text class="ml-1 text-30">筛选</text>
|
|
</tm-between-time>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="h-20rpx" />
|
|
|
|
<view class="bg-white rounded-16rpx p-2 mb-2 shadow-md" v-for="(v, i) in list" :key="i">
|
|
<view class="text-28 text-gray-800 font-medium px-2 mb-2">
|
|
{{ "2022-01-01" }}
|
|
</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 mr-1">
|
|
<text class="flex-1 text-center text-gray-600">流水金额</text>
|
|
<text class="flex-1 text-center text-26 text-gray-800 font-medium">¥{{ 1145 }}</text>
|
|
</view>
|
|
<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx ml-1">
|
|
<text class="flex-1 text-center text-gray-600">流水次数</text>
|
|
<text class="flex-1 text-center text-26 text-gray-800 font-medium">{{ 1145 }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-between mb-2">
|
|
<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx mr-1">
|
|
<text class="flex-1 text-center text-gray-600">退款金额</text>
|
|
<text class="flex-1 text-center text-26 text-red-500 font-medium">¥{{ 1145 }}</text>
|
|
</view>
|
|
<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx ml-1">
|
|
<text class="flex-1 text-center text-gray-600">退款次数</text>
|
|
<text class="flex-1 text-center text-26 text-red-500 font-medium">{{ 1145 }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-between mb-0">
|
|
<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx mr-1">
|
|
<text class="flex-1 text-center text-gray-600">盈利金额</text>
|
|
<text class="flex-1 text-center text-26 text-green-500 font-medium">¥{{ 1145 }}</text>
|
|
</view>
|
|
<view class="flex-1 flex items-center p-2 bg-white rounded-8rpx ml-1">
|
|
<text class="flex-1 text-center text-gray-600">盈利次数</text>
|
|
<text class="flex-1 text-center text-26 text-green-500 font-medium">{{ 1145 }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</crud-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from "vue"
|
|
import { onShow } from "@dcloudio/uni-app"
|
|
import { hooks } from "@@/index"
|
|
import { flowStatisticsApi } from "@@/api"
|
|
|
|
const pageRef = ref<any>(null)
|
|
const state = reactive<any>({
|
|
pa: {
|
|
createTimeList: [],
|
|
},
|
|
formatVal: "",
|
|
date: "",
|
|
})
|
|
const { list, startPage, scroll } = hooks.usePage(pageRef, flowStatisticsApi.page, null, "data.records")
|
|
|
|
onShow(() => {
|
|
const isLogin = hooks.useCheckLogin()
|
|
if (!isLogin) return
|
|
})
|
|
|
|
const query = (page: number, pagesize: number) => {
|
|
const isLogin = hooks.useStaticCheckLogin()
|
|
if (!isLogin) return
|
|
startPage(page, pagesize, false, state.pa)
|
|
}
|
|
|
|
// 时间范围选择器确认
|
|
const datePickerConfirm = (date: any) => {
|
|
state.pa.createTimeList = date.map((v: any) => hooks.useTime(v, "{y}-{m}-{d}"))
|
|
console.log("xx", state.pa.createTimeList)
|
|
|
|
pageRef.value.reload(false)
|
|
}
|
|
</script>
|