7.10 增加登录页面，事件详情接口对接，我的点赞，关注收藏页面搭建，接口对接
This commit is contained in:
尚政杰
@@ -1,19 +1,255 @@
|
||||
<template>
|
||||
<view>
|
||||
<navBar leftText="科锐国际(300662.SZ)"></navBar>
|
||||
<navBar :leftText="navTitle"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||
<view class="tabC fixed" :style="'top:'+navH+'px;'">
|
||||
<view :class="'item relative '+(selectCategory==index?'select':'')" v-for="(item,index) in categoryList" :key="index" @click="clickCategoryItem(index)">
|
||||
{{item}}
|
||||
<view v-if="selectCategory==index" class="line absolute"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentC fixed" :style="'top:'+contentTop+'px;'">
|
||||
<view style="width:750rpx; height:400rpx">
|
||||
<l-echart ref="chartRef"></l-echart>
|
||||
</view>
|
||||
<view class="section">关联描述</view>
|
||||
<view class="des">全球原油运输巨头，VLCC运力规模全球第一，直接受益于霍尔木兹海峡地缘风险带来的运价上涨及风险溢价。</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue';
|
||||
import { stockCandlestickChartData, stockDetails } from '@/request/api';
|
||||
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
navH:inject('navHeight'),
|
||||
contentTop:'',
|
||||
navTitle:'',
|
||||
stockCode:'', //股票code
|
||||
categoryList:['分钟线','分时图','日K线'],
|
||||
selectCategory:0,
|
||||
option:{
|
||||
title: {
|
||||
show:false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show:false
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
boundaryGap: false,
|
||||
axisLine: { onZero: false },
|
||||
splitLine: { show: false },
|
||||
min: 'dataMin',
|
||||
max: 'dataMax'
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 50,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
top: '90%',
|
||||
start: 50,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '日K',
|
||||
type: 'candlestick',
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#ec0000',
|
||||
color0: '#8A0000',
|
||||
borderColor: '#00da3c',
|
||||
borderColor0: '#008F28'
|
||||
},
|
||||
markPoint: {
|
||||
label: {
|
||||
formatter: function (param) {
|
||||
return param != null ? Math.round(param.value) + '' : '';
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: 'Mark',
|
||||
coord: ['2013/5/31', 2300],
|
||||
value: 2300,
|
||||
itemStyle: {
|
||||
color: 'rgb(41,60,85)'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'highest value',
|
||||
type: 'max',
|
||||
valueDim: 'highest'
|
||||
},
|
||||
{
|
||||
name: 'lowest value',
|
||||
type: 'min',
|
||||
valueDim: 'lowest'
|
||||
},
|
||||
{
|
||||
name: 'average value on close',
|
||||
type: 'average',
|
||||
valueDim: 'close'
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
formatter: function (param) {
|
||||
return param.name + '<br>' + (param.data.coord || '');
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
symbol: ['none', 'none'],
|
||||
data: [
|
||||
[
|
||||
{
|
||||
name: 'from lowest to highest',
|
||||
type: 'min',
|
||||
valueDim: 'lowest',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'max',
|
||||
valueDim: 'highest',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
{
|
||||
name: 'min line on close',
|
||||
type: 'min',
|
||||
valueDim: 'close'
|
||||
},
|
||||
{
|
||||
name: 'max line on close',
|
||||
type: 'max',
|
||||
valueDim: 'close'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.contentTop = this.navH+(60+10)/750*inject('windowWidth')
|
||||
if(e.code)
|
||||
{
|
||||
this.stockCode = e.code
|
||||
this.getStockDetailsData()
|
||||
this.getStockCandlestickChartData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
async init() {
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef.init(echarts);
|
||||
chart.setOption(this.option)
|
||||
},
|
||||
/**
|
||||
* 点击切换分类
|
||||
* @param {Object} index
|
||||
*/
|
||||
clickCategoryItem(index)
|
||||
{
|
||||
if(this.selectCategory!=index)
|
||||
{
|
||||
this.selectCategory = index
|
||||
if(index==0||index==2)
|
||||
{
|
||||
this.getStockCandlestickChartData()
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取股票详情数据
|
||||
*/
|
||||
getStockDetailsData()
|
||||
{
|
||||
let stockCode = this.stockCode
|
||||
stockDetails(stockCode).then(res=>{
|
||||
if(res.code==200)
|
||||
{
|
||||
this.navTitle = res.data.basic_info.stock_name+'('+res.data.basic_info.stock_code+')'
|
||||
}else
|
||||
uni.showToast({
|
||||
title:res.message,
|
||||
icon:'none'
|
||||
})
|
||||
}).catch(error=>{
|
||||
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取股票K线数据
|
||||
*/
|
||||
getStockCandlestickChartData()
|
||||
{
|
||||
let stockCode = this.stockCode
|
||||
let param = {chart_type:'minute'}
|
||||
if(this.selectCategory==2)
|
||||
{
|
||||
param.chart_type = 'daily'
|
||||
}
|
||||
stockCandlestickChartData(stockCode,param).then(res=>{
|
||||
let data = res.data
|
||||
let categoryData = []
|
||||
for (let item of data) {
|
||||
categoryData.push(item.time)
|
||||
}
|
||||
this.option.xAxis.data = categoryData
|
||||
this.init()
|
||||
}).catch(error=>{
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -26,4 +262,57 @@
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.tabC
|
||||
{
|
||||
background-color: white;
|
||||
margin-top: 10rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
.item
|
||||
{
|
||||
display: inline-block;
|
||||
padding: 0 30rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #42485B;
|
||||
}
|
||||
.item.select
|
||||
{
|
||||
font-weight: bold;
|
||||
color: #F97316;
|
||||
.line
|
||||
{
|
||||
background-color: #F97316;
|
||||
left: calc((100% - 50rpx)/2);
|
||||
bottom: 0;
|
||||
width: 50rpx;
|
||||
height: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentC
|
||||
{
|
||||
background-color: white;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.section
|
||||
{
|
||||
padding: 0 28rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
.des
|
||||
{
|
||||
padding: 0 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user