<template>
|
<section class="pb-fix">
|
<div class="container-box">
|
<header class="header">
|
<div class="flex-l">
|
<div class="icon back">
|
<img src="@/assets/image/back.png" alt="" @click="onRoute('/quotes/openTrade')">
|
</div>
|
<span class="title">历史成交</span>
|
</div>
|
<div class="icon-group">
|
<div class="icon refresh">
|
<img src="@/assets/image/quotes/refresh.png" alt="">
|
</div>
|
<div class="icon search" @click="onRoute('/exchangeHistory/search')">
|
<img src="@/assets/image/optional/search.png" alt="">
|
</div>
|
</div>
|
</header>
|
<section class="tab-container">
|
<van-tabs v-model:active="tabActive">
|
<van-tab title="历史成交" />
|
<van-tab title="历史成交汇总" />
|
</van-tabs>
|
<div class="select-date-container flex">
|
<div class="flex-l">
|
<div class="flex-l-item" @click="showCalendar = true">
|
<span>{{ startTime }}</span>
|
</div>
|
<span class="symbol">～</span>
|
<div class="flex-l-item" @click="showCalendar = true">
|
<span>{{ endTime }}</span>
|
</div>
|
</div>
|
<div class="flex-r">
|
<van-button type="primary" size="small">确定</van-button>
|
</div>
|
<van-calendar v-model:show="showCalendar" type="range" @confirm="onConfirm" :confirm-text="$t('confirm')"
|
:confirm-disabled-text="$t('confirm')" :formatter="formatter" :title="$t('selectDate')" :min-date="minDate"
|
:max-date="maxDate" />
|
</div>
|
<div>
|
<DealTab v-if="tabActive === 0" />
|
<DealTab2 v-if="tabActive === 1" />
|
</div>
|
</section>
|
</div>
|
</section>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onBeforeMount } from 'vue';
|
import { useUserStore } from '@/store/user';
|
import { useRoute, useRouter } from 'vue-router';
|
import { DatePicker } from 'vant';
|
import {
|
contractOrder
|
} from "@/service/trade.api.js";
|
import { _getQuotes } from '@/service/quotes.api'
|
import { useI18n } from 'vue-i18n'
|
import { useQuotesStore } from '@/store/quotes.store'
|
import DealTab from './components/DealTab.vue'
|
import DealTab2 from './components/DealTab2.vue'
|
import dayjs from 'dayjs';
|
|
const minDate = ref(new Date(new Date().getFullYear(), 0, 1));
|
const maxDate = ref(new Date());
|
const showCalendar = ref(false) // 自定义日期筛选组件
|
const startTime = ref(dayjs().add(-90, 'd').format('YYYY-MM-DD')) // 默认最近三个月
|
const endTime = ref(dayjs().format('YYYY-MM-DD'))
|
|
const quotesStore = useQuotesStore()
|
const { t } = useI18n()
|
const router = useRouter()
|
const route = useRoute()
|
const allEtfTabIndex = ref(0)
|
const allEtfListData = ref([])
|
const interval = ref(null)
|
const symbolType = ref('forex') //默认查询外汇
|
const price = ref('')
|
const tabActive = ref(0)
|
|
onMounted(async () => {
|
|
|
})
|
|
onBeforeMount(() => {
|
|
})
|
|
const onRoute = (path) => {
|
router.push({
|
path,
|
query: {
|
tabActive: 3
|
}
|
})
|
}
|
|
const onConfirm = (values) => {
|
const [start, end] = values;
|
showCalendar.value = false;
|
startTime.value = dayjs(start).format('YYYY-MM-DD')
|
endTime.value = dayjs(end).format('YYYY-MM-DD')
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
:deep(.van-tabs__nav) {
|
background: $selectSymbol_background;
|
}
|
|
:deep(.van-tab) {
|
font-size: 14px;
|
color: $text_color;
|
font-weight: 400;
|
}
|
|
:deep(.van-tab.van-tab--active) {
|
font-weight: 700;
|
}
|
|
:deep(.van-button--small) {
|
height: 30px;
|
width: 70px;
|
}
|
|
:deep(.van-calendar) {
|
background: #1F233D;
|
;
|
}
|
|
:deep(.van-calendar__header-title) {
|
color: $text_color;
|
}
|
|
:deep(.van-calendar__header-subtitle) {
|
color: $text_color;
|
}
|
|
:deep(.van-calendar__month-title) {
|
color: $text_color;
|
}
|
|
:deep(.van-calendar__month-mark) {
|
color: rgb(242, 243, 245, 0.1);
|
}
|
|
.container-box {
|
|
.header {
|
position: relative;
|
display: flex;
|
height: 28px;
|
padding: 0 12px;
|
|
.flex-l {
|
flex: 1;
|
display: inline-flex;
|
|
.icon {
|
display: inline-block;
|
width: 24px;
|
height: 28px;
|
padding: 6px 4px;
|
|
img {
|
height: 20px;
|
width: 20px;
|
}
|
}
|
}
|
|
.title {
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
flex: 1;
|
text-align: center;
|
font-weight: 700;
|
font-size: 16px;
|
line-height: 28px;
|
color: $mainTextColor;
|
}
|
|
.icon-group {
|
text-align: right;
|
|
.icon {
|
display: inline-block;
|
width: 28px;
|
height: 28px;
|
padding: 4px;
|
margin-left: 16px;
|
}
|
}
|
|
|
}
|
|
.tab-container {
|
margin-top: 8px;
|
}
|
|
.select-date-container {
|
margin-top: 8px;
|
padding: 0 30px;
|
justify-content: space-between;
|
|
.flex-l {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
|
.flex-l-item {
|
border: 1px solid $border_color;
|
border-radius: 2px;
|
padding: 2px 8px;
|
}
|
|
.symbol {
|
margin: 0 10px;
|
}
|
}
|
|
.flex-r {
|
width: 80px;
|
text-align: right;
|
}
|
}
|
|
}
|
</style>
|
