|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <app-view>
|
|
|
|
|
|
|
+ <app-view class="swap-detail">
|
|
|
<template #header>
|
|
<template #header>
|
|
|
- <app-navbar :title="`${item.goodscode}/${item.goodsname}`">
|
|
|
|
|
|
|
+ <app-navbar :title="item.goodsgroupname + '/' + item.goodscode">
|
|
|
<template #right>
|
|
<template #right>
|
|
|
<div class="button-more" @click="onListing">
|
|
<div class="button-more" @click="onListing">
|
|
|
<span>挂牌</span>
|
|
<span>挂牌</span>
|
|
@@ -9,20 +9,22 @@
|
|
|
</template>
|
|
</template>
|
|
|
</app-navbar>
|
|
</app-navbar>
|
|
|
</template>
|
|
</template>
|
|
|
- <Cell :title="`${item.goodscode}/${item.goodsname}`" is-link style="margin-bottom: .2rem;">
|
|
|
|
|
- <template #title v-if="quote">
|
|
|
|
|
- <span :class="quote.lastColor" style="font-size: .32rem;">{{ handleNumberValue(quote.last) }}</span>
|
|
|
|
|
- <span :class="quote.lastColor" style="margin-left: .2rem;">{{
|
|
|
|
|
- handleNumberValue(quote.rise.toFixed(quote.decimalplace)) }}</span>
|
|
|
|
|
- <span :class="quote.lastColor" style="margin-left: .2rem;">{{ parsePercent(quote.change) }}</span>
|
|
|
|
|
- </template>
|
|
|
|
|
- </Cell>
|
|
|
|
|
- <Tabs v-model:active="tabIndex" @click="onTabChange">
|
|
|
|
|
- <Tab title="买大厅" />
|
|
|
|
|
- <Tab title="卖大厅" />
|
|
|
|
|
- </Tabs>
|
|
|
|
|
|
|
+ <div class="swap-detail__quote" v-if="quote">
|
|
|
|
|
+ <ul class="price">
|
|
|
|
|
+ <li :class="quote.lastColor">{{ quote.last }}</li>
|
|
|
|
|
+ <li :class="quote.lastColor">{{ handleNumberValue(quote.rise.toFixed(quote.decimalplace)) }}</li>
|
|
|
|
|
+ <li :class="quote.lastColor">{{ parsePercent(quote.change) }}</li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <ul class="time">
|
|
|
|
|
+ <li>{{ formatDate(quote.lasttime, 'MM-DD HH:mm:ss') }}</li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
<app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
|
|
<app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
|
|
|
:page-count="pageCount" @refresh="onTabChange">
|
|
:page-count="pageCount" @refresh="onTabChange">
|
|
|
|
|
+ <Tabs v-model:active="tabIndex" @click="onChange">
|
|
|
|
|
+ <Tab title="买大厅" />
|
|
|
|
|
+ <Tab title="卖大厅" />
|
|
|
|
|
+ </Tabs>
|
|
|
<div class="trade-section sell" v-if="dataList.length">
|
|
<div class="trade-section sell" v-if="dataList.length">
|
|
|
<app-list :columns="columns" :data-list="dataList">
|
|
<app-list :columns="columns" :data-list="dataList">
|
|
|
<template #username="{ row }">
|
|
<template #username="{ row }">
|
|
@@ -41,26 +43,32 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, defineAsyncComponent } from 'vue'
|
|
|
|
|
-import { Tab, Tabs, Button, showToast, Cell } from 'vant'
|
|
|
|
|
-import { parsePercent, handleNumberValue } from '@/filters'
|
|
|
|
|
|
|
+import { shallowRef, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
|
|
|
|
|
+import { Tab, Tabs, Button, showToast } from 'vant'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
import { useRequest } from '@/hooks/request'
|
|
|
import { useNavigation } from '@/hooks/navigation'
|
|
import { useNavigation } from '@/hooks/navigation'
|
|
|
import { useComponent } from '@/hooks/component'
|
|
import { useComponent } from '@/hooks/component'
|
|
|
-import AppList from '@mobile/components/base/list/index.vue'
|
|
|
|
|
import { queryTjmdTradeOrderDetail } from '@/services/api/swap'
|
|
import { queryTjmdTradeOrderDetail } from '@/services/api/swap'
|
|
|
-import { useLoginStore, useFuturesStore } from '@/stores'
|
|
|
|
|
|
|
+import { useLoginStore } from '@/stores'
|
|
|
|
|
+import { useFuturesStore } from '@/stores'
|
|
|
|
|
+import { parsePercent, handleNumberValue, formatDate } from '@/filters'
|
|
|
|
|
+
|
|
|
|
|
+import quoteSocket from '@/services/websocket/quote'
|
|
|
|
|
+
|
|
|
import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
|
|
import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
|
|
|
|
|
+import AppList from '@mobile/components/base/list/index.vue'
|
|
|
|
|
|
|
|
const componentMap = new Map<string, unknown>([
|
|
const componentMap = new Map<string, unknown>([
|
|
|
['delisting', defineAsyncComponent(() => import('./components/delisting/Index.vue'))],
|
|
['delisting', defineAsyncComponent(() => import('./components/delisting/Index.vue'))],
|
|
|
['listing', defineAsyncComponent(() => import('./components/listing/Index.vue'))],
|
|
['listing', defineAsyncComponent(() => import('./components/listing/Index.vue'))],
|
|
|
])
|
|
])
|
|
|
-
|
|
|
|
|
|
|
+const pullRefreshRef = shallowRef()
|
|
|
const loginStore = useLoginStore()
|
|
const loginStore = useLoginStore()
|
|
|
|
|
|
|
|
const { getParamString } = useNavigation()
|
|
const { getParamString } = useNavigation()
|
|
|
-const { componentRef, componentId, openComponent, closeComponent } = useComponent()
|
|
|
|
|
|
|
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
|
|
|
|
|
+ pullRefreshRef.value?.refresh()
|
|
|
|
|
+})
|
|
|
const futuresStore = useFuturesStore()
|
|
const futuresStore = useFuturesStore()
|
|
|
const item: Model.QuoteGoodsListRsp = JSON.parse(getParamString('item')?.toString() || '{}')
|
|
const item: Model.QuoteGoodsListRsp = JSON.parse(getParamString('item')?.toString() || '{}')
|
|
|
const tabIndex = shallowRef(0)
|
|
const tabIndex = shallowRef(0)
|
|
@@ -69,6 +77,8 @@ const error = shallowRef(false)
|
|
|
const dataList = shallowRef<Model.TjmdTradeOrderDetailRsp[]>([])
|
|
const dataList = shallowRef<Model.TjmdTradeOrderDetailRsp[]>([])
|
|
|
const quote = futuresStore.getQuoteInfo(item.refgoodscode)
|
|
const quote = futuresStore.getQuoteInfo(item.refgoodscode)
|
|
|
|
|
|
|
|
|
|
+const subscribe = quoteSocket.addSubscribe([item.refgoodscode])
|
|
|
|
|
+
|
|
|
const { pageIndex, loading, run, pageCount } = useRequest(queryTjmdTradeOrderDetail, {
|
|
const { pageIndex, loading, run, pageCount } = useRequest(queryTjmdTradeOrderDetail, {
|
|
|
params: {
|
|
params: {
|
|
|
pagesize: 20,
|
|
pagesize: 20,
|
|
@@ -88,7 +98,16 @@ const { pageIndex, loading, run, pageCount } = useRequest(queryTjmdTradeOrderDet
|
|
|
|
|
|
|
|
const onTabChange = () => {
|
|
const onTabChange = () => {
|
|
|
run({
|
|
run({
|
|
|
- buyorsell: tabIndex.value
|
|
|
|
|
|
|
+ buyorsell: tabIndex.value,
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const onChange = () => {
|
|
|
|
|
+ /// 重置为1
|
|
|
|
|
+ pageIndex.value = 1
|
|
|
|
|
+ run({
|
|
|
|
|
+ buyorsell: tabIndex.value,
|
|
|
|
|
+ page: 1
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -113,4 +132,12 @@ const onListing = () => {
|
|
|
openComponent('listing')
|
|
openComponent('listing')
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-</script>
|
|
|
|
|
|
|
+onMounted(() => subscribe.start())
|
|
|
|
|
+
|
|
|
|
|
+onUnmounted(() => subscribe.stop())
|
|
|
|
|
+
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="less">
|
|
|
|
|
+@import './index.less';
|
|
|
|
|
+</style>
|