|
|
@@ -4,14 +4,14 @@
|
|
|
<template #header>
|
|
|
<app-navbar title="历史资金流水" @back="closed">
|
|
|
<template #footer>
|
|
|
- <Field name="operateType" label="资金类型" is-link input-align="right">
|
|
|
- <template #input>
|
|
|
- <app-select v-model="operatetype" placeholder="请选择资金类型" :options="operateTypeSearchList"
|
|
|
- :optionProps="{ label: 'label', value: 'value' }" @confirm="onSelectConfirm" />
|
|
|
- </template>
|
|
|
- </Field>
|
|
|
- <Cell title="查询日期" :value="`${hisAmountLogReq.startDate}-${hisAmountLogReq.endDate}`"
|
|
|
- @click="showCalendar = true" is-link />
|
|
|
+ <app-calendar type="single" :default-date="[currentDate]" @confirm="onConfirm">
|
|
|
+ <app-select v-model="operatetype" :options="operateTypeSearchList"
|
|
|
+ :optionProps="{ label: 'label', value: 'value' }" @confirm="onSelectConfirm">
|
|
|
+ <template #default="{ label }">
|
|
|
+ {{ label }}
|
|
|
+ </template>
|
|
|
+ </app-select>
|
|
|
+ </app-calendar>
|
|
|
</template>
|
|
|
</app-navbar>
|
|
|
</template>
|
|
|
@@ -24,42 +24,37 @@
|
|
|
</template>
|
|
|
</app-list>
|
|
|
</app-pull-refresh>
|
|
|
- <Calendar v-model:show="showCalendar" type="range" :max-range="7" :default-date="dateValue"
|
|
|
- :max-date="new Date()" :min-date="moment().subtract(1, 'years').toDate()" @confirm="onConfirm" />
|
|
|
</app-view>
|
|
|
</app-modal>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, ref, computed } from 'vue'
|
|
|
+import { shallowRef, computed } from 'vue'
|
|
|
import { formatDate } from '@/filters'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
|
import { queryHisAmountLog } from '@/services/api/bank'
|
|
|
import AppModal from '@/components/base/modal/index.vue'
|
|
|
import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
|
|
|
import AppList from '@mobile/components/base/list/index.vue'
|
|
|
-import moment from 'moment'
|
|
|
-import { Calendar, Cell, Field } from 'vant'
|
|
|
import { getOperateTypeSearchList } from '@/constants/order'
|
|
|
import AppSelect from '@mobile/components/base/select/index.vue'
|
|
|
+import AppCalendar from '@mobile/components/base/calendar/index.vue'
|
|
|
|
|
|
const showModal = shallowRef(true)
|
|
|
const dataList = shallowRef<Model.HisAmountLogRsp[]>([])
|
|
|
const error = shallowRef(false)
|
|
|
-const showCalendar = shallowRef(false) // 是否显示日期选择器
|
|
|
const pullRefreshRef = shallowRef()
|
|
|
/// 资金类型
|
|
|
const operatetype = shallowRef(0)
|
|
|
+const currentDate = shallowRef(new Date())
|
|
|
|
|
|
-const endDate = moment(new Date())
|
|
|
-const startDate = endDate.clone().subtract(6, 'days')
|
|
|
-const dateValue = ref([startDate.toDate(), endDate.toDate()])
|
|
|
-
|
|
|
-const hisAmountLogReq = computed(() => {
|
|
|
- const [begindate, enddate] = dateValue.value
|
|
|
+const hisAmountLogReq = computed<Model.HisAmountLogReq>(() => {
|
|
|
+ const dateString = currentDate.value.toISOString()
|
|
|
+ const dateValue = formatDate(dateString, 'YYYY-MM-DD')
|
|
|
return {
|
|
|
- startDate: formatDate(begindate.toISOString(), 'YYYY-MM-DD'),
|
|
|
- endDate: formatDate(enddate.toISOString(), 'YYYY-MM-DD'),
|
|
|
+ operateType: operatetype.value === 0 ? undefined : operatetype.value.toString(),
|
|
|
+ startDate: dateValue,
|
|
|
+ endDate: dateValue,
|
|
|
}
|
|
|
})
|
|
|
|
|
|
@@ -94,19 +89,16 @@ const { loading, pageIndex, pageCount, run } = useRequest(queryHisAmountLog, {
|
|
|
})
|
|
|
|
|
|
// 选择日期
|
|
|
-const onConfirm = ([start, end]: Date[]) => {
|
|
|
- showCalendar.value = false
|
|
|
- dateValue.value = [start, end]
|
|
|
+const onConfirm = (value: Date) => {
|
|
|
+ currentDate.value = value
|
|
|
pageIndex.value = 1
|
|
|
pullRefreshRef.value?.refresh()
|
|
|
}
|
|
|
|
|
|
// 选中资金类型
|
|
|
-const onSelectConfirm = (value: number) => {
|
|
|
+const onSelectConfirm = () => {
|
|
|
pageIndex.value = 1
|
|
|
- run({
|
|
|
- operateType: value === 0 ? undefined : value.toString()
|
|
|
- })
|
|
|
+ pullRefreshRef.value?.refresh()
|
|
|
}
|
|
|
|
|
|
const onRefresh = () => {
|
|
|
@@ -125,20 +117,5 @@ defineExpose({
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
-.bank-hisstatement {
|
|
|
- &__table {
|
|
|
- td.app-list__column {
|
|
|
- &:first-child {
|
|
|
- span:last-child {
|
|
|
- color: #999;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:not(:first-child) {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+@import './index.less';
|
|
|
</style>
|