更新股票报价功能,调整数据获取方式并优化组件样式,确保信息动态展示。

This commit is contained in:
Phoenix 2025-05-23 10:39:23 +08:00
parent bda93351eb
commit 1976c7d9da
3 changed files with 28 additions and 24 deletions

View File

@ -1,17 +1,22 @@
import { ref } from 'vue' import { ref } from 'vue'
import { createGlobalState, useLocalStorage } from '@vueuse/core' import { createGlobalState, useLocalStorage } from '@vueuse/core'
import axios from 'axios' import axios from 'axios'
export const useStockQuote = createGlobalState(() => {
const stockQuote = useLocalStorage('stockQuote', {})
const getStockQuate= async()=>{
const res = await axios.post('http://saas-test.szjixun.cn/api/chart/forward/test')
console.log('res',res);
stockQuote.value.Open=res.data.nodes?.[2]?.data?.[10]
stockQuote.value.Volume=res.data.nodes?.[1]?.data?.[21]
stockQuote.value.DayRange=[res.data.nodes?.[2]?.data?.[10],res.data.nodes?.[2]?.data?.[11]]
stockQuote.value.WeekRange=[res.data.nodes?.[2]?.data?.[31],res.data.nodes?.[1]?.data?.[30]]
console.log('stockQuote.value',stockQuote.value); export const useStockQuote = createGlobalState(() => {
const stockQuote = useLocalStorage('stockQuote', {
"Open": "",
"Volume": "",
"DayRange": "",
"WeekRange": "",
"MarketCap": "",
"change": [
"",
""
]
})
const getStockQuate= async()=>{
const res = await axios.get('http://localhost:3213/api/minm/open')
stockQuote.value=res.data
} }
return { return {
getStockQuate, getStockQuate,

View File

@ -7,11 +7,13 @@ import customFooter from '@/components/customFooter/index.vue'
</script> </script>
<template> <template>
<div class="flex flex-col h-screen">
<customHeader></customHeader> <customHeader></customHeader>
<div style="margin: 80px 0;"> <div class="bg-[url('@/assets/image/bg-pc.png')] bg-cover bg-center flex-1" style="margin: 80px 0;">
<router-view /> <router-view />
</div> </div>
<customFooter></customFooter> <customFooter></customFooter>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@ -1,15 +1,14 @@
<script setup> <script setup>
import {useStockQuote} from '@/store/stock-quote/index.js' import {useStockQuote} from '@/store/stock-quote/index.js'
const useStock=useStockQuote() const {getStockQuate,stockQuote}=useStockQuote()
useStock.getStockQuate()
getStockQuate()
</script> </script>
<template> <template>
<header class="header">
</header>
<main <main
ref="main" ref="main"
class="min-h-80 flex flex-col md:flex-row justify-center items-center gap-12 bg-gradient-to-br from-primary/10 to-white/80 p-12 rounded-3xl shadow-2xl animate-bounce-in" class="min-h-80 flex flex-col md:flex-row justify-center items-center gap-12 p-12 rounded-3xl animate-bounce-in"
> >
<!-- 左侧大号价格 --> <!-- 左侧大号价格 -->
<section class="flex flex-col items-center justify-center glass-card p-14 rounded-2xl shadow-xl animate-bounce-in"> <section class="flex flex-col items-center justify-center glass-card p-14 rounded-2xl shadow-xl animate-bounce-in">
@ -20,32 +19,30 @@ useStock.getStockQuate()
<section class="grid grid-cols-2 gap-8"> <section class="grid grid-cols-2 gap-8">
<div class="info-card"> <div class="info-card">
<div class="text-xs text-gray-400">Open</div> <div class="text-xs text-gray-400">Open</div>
<div class="text-xl font-bold">$2.00</div> <div class="text-xl font-bold">{{ stockQuote.Open }}</div>
</div> </div>
<div class="info-card"> <div class="info-card">
<div class="text-xs text-gray-400">Change</div> <div class="text-xs text-gray-400">Change</div>
<div class="text-xl font-bold text-red-500 animate-bounce-in">-0.05 (-2.46%)</div> <div class="text-xl font-bold text-red-500 animate-bounce-in">{{ stockQuote.change?.join('') }}</div>
</div> </div>
<div class="info-card"> <div class="info-card">
<div class="text-xs text-gray-400">Day's Range</div> <div class="text-xs text-gray-400">Day's Range</div>
<div class="text-xl font-bold">$1.85 - $2.03</div> <div class="text-xl font-bold">{{ stockQuote.DaysRange }}</div>
</div> </div>
<div class="info-card"> <div class="info-card">
<div class="text-xs text-gray-400">52-Week Range</div> <div class="text-xs text-gray-400">52-Week Range</div>
<div class="text-xl font-bold">$1.85 - $12.60</div> <div class="text-xl font-bold">{{ stockQuote.Week52Range }}</div>
</div> </div>
<div class="info-card"> <div class="info-card">
<div class="text-xs text-gray-400">Volume</div> <div class="text-xs text-gray-400">Volume</div>
<div class="text-xl font-bold">23.5K</div> <div class="text-xl font-bold">{{ stockQuote.Volume }}</div>
</div> </div>
<div class="info-card"> <div class="info-card">
<div class="text-xs text-gray-400">Market Cap</div> <div class="text-xs text-gray-400">Market Cap</div>
<div class="text-xl font-bold">$1.2M</div> <div class="text-xl font-bold">{{ stockQuote.MarketCap }}</div>
</div> </div>
</section> </section>
</main> </main>
<footer>
</footer>
</template> </template>
<style scoped> <style scoped>