|
|
@@ -8,13 +8,13 @@
|
|
|
<app-block>
|
|
|
<Cell title="通知公告" value="更多" :to="{ name: 'notice-list' }" icon="volume" is-link />
|
|
|
</app-block>
|
|
|
- <app-block class="home-main__chart" v-if="loginStore.token">
|
|
|
+ <app-block class="home-main__chart" v-if="userStore.accountName && goodsGroup.length">
|
|
|
<Swipe :show-indicators="false" :loop="false">
|
|
|
<SwipeItem v-for="(list, i) in goodsGroup" :key="i">
|
|
|
<ul>
|
|
|
<template v-for="(item, n) in list" :key="n">
|
|
|
- <li :class="[item.lastColor, item.refgoodscode === goodsCode ? 'is-active' : '']"
|
|
|
- @click="onTabChange(item.refgoodscode)">
|
|
|
+ <li :class="[item.lastColor, item.goodsid === selectedGoods?.goodsid ? 'is-active' : '']"
|
|
|
+ @click="onTabChange(item)">
|
|
|
<div>
|
|
|
<b style="color: #444;">{{ item.goodsname }}</b>
|
|
|
</div>
|
|
|
@@ -30,7 +30,7 @@
|
|
|
</ul>
|
|
|
</SwipeItem>
|
|
|
</Swipe>
|
|
|
- <component :is="LineChart" :goodscode="goodsCode" v-if="showChart" />
|
|
|
+ <component :is="LineChart" :goodscode="selectedGoods.refgoodscode" v-if="showChart && selectedGoods" />
|
|
|
</app-block>
|
|
|
<app-block class="home-main__news">
|
|
|
<CellGroup class="article">
|
|
|
@@ -46,13 +46,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, defineAsyncComponent, computed, nextTick, watch, watchEffect } from 'vue'
|
|
|
+import { shallowRef, defineAsyncComponent, computed, nextTick, watch } from 'vue'
|
|
|
import { Cell, CellGroup, PullRefresh, Swipe, SwipeItem } from 'vant'
|
|
|
import { formatDate, parsePercent, handleNumberValue, formatDecimal } from '@/filters'
|
|
|
import { queryQuoteGoodsList } from '@/services/api/swap'
|
|
|
import { queryImageConfigs } from '@/services/api/common'
|
|
|
import { queryNewTitles } from "@/services/api/news"
|
|
|
-import { useGlobalStore, useLoginStore, useUserStore, useFuturesStore } from '@/stores'
|
|
|
+import { useGlobalStore, useUserStore, useFuturesStore } from '@/stores'
|
|
|
import quoteSocket from '@/services/websocket/quote'
|
|
|
import Banner from '@mobile/components/base/banner/index.vue'
|
|
|
|
|
|
@@ -60,25 +60,25 @@ const LineChart = defineAsyncComponent(() => import('@mobile/components/modules/
|
|
|
|
|
|
const subscribe = quoteSocket.createSubscribe()
|
|
|
const globalStore = useGlobalStore()
|
|
|
-const loginStore = useLoginStore()
|
|
|
const userStore = useUserStore()
|
|
|
const futuresStore = useFuturesStore()
|
|
|
const refreshing = shallowRef(false) // 是否处于加载中状态
|
|
|
const topBanners = shallowRef<string[]>([]) // 轮播图列表
|
|
|
const newsList = shallowRef<Model.NewTitlesRsp[]>([]) // 资讯列表
|
|
|
const goodsList = shallowRef<Model.QuoteGoodsListRsp[]>([]) // 掉期商品列表
|
|
|
-const goodsCode = shallowRef('')
|
|
|
+const selectedGoods = shallowRef<Model.QuoteGoodsListRsp>() // 选中的掉期商品
|
|
|
const showChart = shallowRef(false)
|
|
|
|
|
|
// 掉期商品组
|
|
|
const goodsGroup = computed(() => {
|
|
|
const arr = []
|
|
|
- const list = goodsList.value.map(({ refgoodscode, goodsname }) => {
|
|
|
+ const list = goodsList.value.map(({ goodsid, goodsname, refgoodscode }) => {
|
|
|
const quote = futuresStore.getGoodsQuote(refgoodscode)
|
|
|
const { lastColor, last = 0, rise = 0, change, decimalplace } = quote.value ?? {}
|
|
|
return {
|
|
|
- refgoodscode,
|
|
|
+ goodsid,
|
|
|
goodsname,
|
|
|
+ refgoodscode,
|
|
|
lastColor,
|
|
|
last: handleNumberValue(formatDecimal(last, decimalplace)),
|
|
|
rise: handleNumberValue(formatDecimal(rise, decimalplace)),
|
|
|
@@ -93,9 +93,9 @@ const goodsGroup = computed(() => {
|
|
|
})
|
|
|
|
|
|
// 切换掉期商品
|
|
|
-const onTabChange = (value: string) => {
|
|
|
+const onTabChange = (item: unknown) => {
|
|
|
showChart.value = false
|
|
|
- goodsCode.value = value
|
|
|
+ selectedGoods.value = item as Model.QuoteGoodsListRsp
|
|
|
|
|
|
nextTick(() => {
|
|
|
showChart.value = true
|
|
|
@@ -128,8 +128,8 @@ const onRefresh = () => {
|
|
|
|
|
|
onRefresh()
|
|
|
|
|
|
-watchEffect(() => {
|
|
|
- if (loginStore.token) {
|
|
|
+watch(() => userStore.accountName, (accountName) => {
|
|
|
+ if (accountName) {
|
|
|
if (goodsList.value.length) {
|
|
|
const goodsCodes = goodsList.value.map((e) => e.refgoodscode)
|
|
|
subscribe.start(...goodsCodes)
|
|
|
@@ -141,14 +141,18 @@ watchEffect(() => {
|
|
|
marketids: userStore.getMarketId('TRADEMODE_TJMD').toString()
|
|
|
}
|
|
|
}).then((res) => {
|
|
|
- const goodsCodes = res.data.map((e) => e.refgoodscode)
|
|
|
- goodsList.value = res.data
|
|
|
- goodsCode.value = goodsCodes[0]
|
|
|
- showChart.value = true
|
|
|
- subscribe.start(...goodsCodes)
|
|
|
+ if (res.data.length) {
|
|
|
+ const goodsCodes = res.data.map((e) => e.refgoodscode)
|
|
|
+ goodsList.value = res.data
|
|
|
+ selectedGoods.value = res.data[0]
|
|
|
+ showChart.value = true
|
|
|
+ subscribe.start(...goodsCodes)
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
+}, {
|
|
|
+ immediate: true
|
|
|
})
|
|
|
</script>
|
|
|
|