69 lines
2.3 KiB
Vue
69 lines
2.3 KiB
Vue
<template>
|
|
<div class="page-div">
|
|
<back-button />
|
|
<div class="header flex items-center justify-center">
|
|
<h1 class="title">{{ seriesName }}</h1>
|
|
</div>
|
|
<div class="grid">
|
|
<van-grid :column-num="1" :gutter="16" :border="false">
|
|
<van-grid-item v-for="item in list" :key="item.indexId">
|
|
<div @touchstart="onTouchStart(item.indexName)" @touchend="onTouchEnd(item.indexName, 'index-detail', item.indexId)" class="item"
|
|
@touchcancel="onTouchCancel(item.indexName)" :class="{ 'tapped': tappedItem === item.indexName }">
|
|
<div class="card-content" :style="{ backgroundColor: item.bgColor, borderLeftColor: item.color }">
|
|
<div class="card-code" :style="{ color: item.color }">{{ item.indexCode }}</div>
|
|
<div class="card-name">{{ item.indexName }}</div>
|
|
<div class="card-note">{{ item.indexNote }}</div>
|
|
</div>
|
|
</div>
|
|
</van-grid-item>
|
|
</van-grid>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import BackButton from '@/components/back-button.vue'
|
|
|
|
import { tapMixins } from '@/mixins/tap-mixins'
|
|
const { tappedItem, onTouchStart, onTouchEnd, onTouchCancel } = tapMixins()
|
|
|
|
import { ref, onMounted, watch, nextTick } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
const route = useRoute()
|
|
let seriesName = ref('')
|
|
let list = ref<any[]>([])
|
|
import { indexInfoSeries, sysDicListByType } from '@/utils/api'
|
|
import { colorList } from '@/utils/colorList'
|
|
|
|
const init = async () => {
|
|
const { data: series } = await sysDicListByType({ dicType: 'index_series' })
|
|
const seriesItem = series.find((item: any) => { return item.dicKey === route.params.id })
|
|
seriesName.value = seriesItem.dicValue
|
|
const { data } = await indexInfoSeries({ seriesCode: route.params.id })
|
|
list.value = data.fundList
|
|
list.value.forEach((ele, index) => {
|
|
ele.color = colorList[index % colorList.length].color
|
|
ele.bgColor = colorList[index % colorList.length].bgColor
|
|
})
|
|
}
|
|
|
|
onMounted (() =>{
|
|
init()
|
|
})
|
|
|
|
watch(
|
|
() => route.fullPath,
|
|
(newPath, oldPath) => {
|
|
if (oldPath?.includes('series-list') && newPath?.includes('index-list')) {
|
|
nextTick(() => {
|
|
init()
|
|
})
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
</style>
|