418 lines
13 KiB
Vue
418 lines
13 KiB
Vue
<template>
|
|
<view>
|
|
<navBar leftText="平安银行(000001)" :hideNavBg="true"></navBar>
|
|
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
|
<view class="stockDetailsC fixed" :style="'top:'+contentTop+'px;'">
|
|
<view style="margin: 0 20rpx; height: 99rpx;">
|
|
<scroll-view id="topCategory" scroll-x style="white-space: nowrap;" scroll-with-animation
|
|
:scroll-left="topScrollLeft" show-scrollbar="false">
|
|
<view style="display: inline-block;">
|
|
<view v-for="(item,index) in tabList" :key="index"
|
|
:id="'tab-' + index" style="display: inline-block; text-align: center; line-height: 98rpx;"
|
|
:style="{'margin-right': (index == tabList.length - 1 ? '0' : '40rpx'), color: (activeIndex == index ? '#2B2B2B' : '#999999'), 'font-size': (activeIndex == index ? '28rpx' : '26rpx'), 'border-bottom': (activeIndex == index ? '1rpx solid #F2C369' : 'none'), 'font-weight': (activeIndex == index ? 'bold' : '500')}" @click="clickTabItem($event,index)">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view style="height: 1rpx; background-color: #E7E7E7; margin: 0 20rpx;"></view>
|
|
<view class="flex" style="margin: 20rpx 20rpx 0;">
|
|
<scroll-view id="filterList" class="filterList" scroll-x :scroll-left="secondScrollLeft">
|
|
<view :class="'item flexCenter '+(filterIndex==index?'select':'')" v-for="(item,index) in filterList" :key="index" @click="clickFilterItem($event,index)">
|
|
{{item}}
|
|
</view>
|
|
</scroll-view>
|
|
<view class="flexCenter" style="color: #F2C369; font-size: 22rpx; font-weight: 500; border: 1rpx solid #F2C369; border-radius: 5rpx; padding: 0 10rpx; height: 43rpx;" @click="clickSelectPeriod($event)">
|
|
<text>{{periodList[periodIndex].title}}</text>
|
|
<image style="width: 11rpx; height: 6rpx; margin-left: 10rpx;" src="/pagesStock/static/icon/all-down-ed.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-y class="stockDetailsC fixed" :style="'top:'+(otherTop)+'px;'">
|
|
<view style="display: flex; color: #666666; font-size: 20rpx; font-weight: 500; margin: 0 20rpx;">
|
|
<view>
|
|
<view style="height: 60rpx; background-color: #FAFAFC;"></view>
|
|
<view v-for="(item,index) in leftList[activeIndex]" :key="index" style="line-height: 60rpx; padding-right: 20rpx;" :style="{'background-color' : (index % 2 == 0 ? '#fff' : '#FAFAFC')}">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
<view style="flex: 1; white-space: nowrap; overflow: scroll; display: flex;">
|
|
<view v-for="(item,index) in showDataList" :key="index" style="font-size: 18rpx; text-align: center;">
|
|
<view style="padding: 0 10rpx; line-height: 60rpx; background-color: #FAFAFC;">{{item.report_type}}</view>
|
|
<view v-for="(litem,lindex) in leftList[activeIndex]" :key="lindex" style="line-height: 60rpx;" :style="{'background-color' : (lindex % 2 == 0 ? '#fff' : '#FAFAFC')}">
|
|
<block v-if="activeIndex==0">
|
|
<!-- 盈利能力 -->
|
|
<block v-if="lindex==0">
|
|
{{showDataList[index].profitability.roe?showDataList[index].profitability.roe.toFixed(2):'-'}}
|
|
</block>
|
|
<block v-if="lindex==1">
|
|
{{showDataList[index].profitability.roe_deducted?showDataList[index].profitability.roe_deducted.toFixed(2):'-'}}
|
|
</block>
|
|
<block v-if="lindex==2">
|
|
{{showDataList[index].profitability.roe_weighted?showDataList[index].profitability.roe_weighted.toFixed(2):'-'}}
|
|
</block>
|
|
<block v-if="lindex==3">
|
|
{{showDataList[index].profitability.roa?showDataList[index].profitability.roa.toFixed(2):'-'}}
|
|
</block>
|
|
<block v-if="lindex==4">
|
|
{{showDataList[index].profitability.gross_margin?showDataList[index].profitability.gross_margin.toFixed(2):'-'}}
|
|
</block>
|
|
<block v-if="lindex==5">
|
|
{{showDataList[index].profitability.net_profit_margin?showDataList[index].profitability.net_profit_margin.toFixed(2):'-'}}
|
|
</block>
|
|
<block v-if="lindex==6">
|
|
{{showDataList[index].profitability.operating_profit_margin?showDataList[index].profitability.operating_profit_margin.toFixed(2):'-'}}
|
|
</block>
|
|
<block v-if="lindex==7">
|
|
{{showDataList[index].profitability.cost_profit_ratio?showDataList[index].profitability.cost_profit_ratio.toFixed(2):'-'}}
|
|
</block>
|
|
<block v-if="lindex==8">
|
|
{{showDataList[index].profitability.ebit?showDataList[index].profitability.ebit.toFixed(2):'-'}}
|
|
</block>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
<!-- <view class="bottomC fixed flex">
|
|
<view class="inputC flex1">
|
|
<input type="text" v-model="eventComment" placeholder="对比股票..." placeholder-style="color:#666"
|
|
confirm-type="send" @confirm="sendEventComment()" />
|
|
</view>
|
|
<view class="contrastShareC flex">
|
|
<view class="item">
|
|
<image class="icon" src="/pagesStock/static/icon/contrast.png" mode="heightFix"></image>
|
|
<view>对比</view>
|
|
</view>
|
|
<view class="item" @click="clickComment()">
|
|
<image class="icon" src="/pagesStock/static/icon/optional.png" mode="heightFix"></image>
|
|
<view>自选</view>
|
|
</view>
|
|
<view class="item" @click="clickFollow()">
|
|
<image class="icon" src="/pagesStock/static/icon/share.png" mode="heightFix"></image>
|
|
<view>分享</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view v-if="periodShow" class="periodList fixed" :style="'top:'+periodTop+'px'">
|
|
<view class="item" v-for="(item,index) in periodList" :key="index" @click="clickPeriodItem(index)">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { inject } from 'vue'
|
|
import { financialMetrics, financialBalanceSheet, cashflowSheet, incomeStatementSheet } from '@/request/api'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
navH: inject('navHeight'),
|
|
windowWidth:inject('windowWidth'),
|
|
contentTop: '',
|
|
otherTop: '',
|
|
stockCode:'000001', //股票代码
|
|
tabList: ['盈利能力', '每股指标', '成长能力', '资产负债表', '现金流量指标','现金流量表'],
|
|
activeIndex: 0,
|
|
topScrollWidth:0,
|
|
topScrollLeft:0,
|
|
filterList: ['全部','年报','中报','一季度','三季度'],
|
|
filterIndex: 0,
|
|
secondScrollWidth:0,
|
|
secondScrollLeft:0,
|
|
periodList: [{
|
|
title:'最近4期',
|
|
period:4
|
|
},
|
|
{
|
|
title:'最近8期',
|
|
period:8
|
|
},
|
|
{
|
|
title:'最近12期',
|
|
period:12
|
|
},
|
|
{
|
|
title:'最近16期',
|
|
period:16
|
|
}],
|
|
periodIndex:1,
|
|
periodTop:'',
|
|
periodShow:false, //是否显示弹窗
|
|
leftList: [
|
|
['净资产收益率(ROE)%', '净资产收益率(扣非)%', '净资产收益率(加权)%', '总资产报酬率(ROA)%', '毛利率%', '净利率%', '营业利润率%', '成本费用利润率%','EBIT'],
|
|
['每股收益(EPS)%', '基本每股收益', '稀释每股收益', '扣非每股收益', '每股净资产', '每股经营现金流', '每股资本公积', '每股未分配利润'],
|
|
['营收增长率%', '净利润增长率%', '扣非净利润增长率%', '归母净利润增长率%', '经营现金流增长率%', '总资产增长率%', '净资产增长率%', '固定资产增长率%'],
|
|
['营收增长率%', '净利润增长率%', '扣非净利润增长率%', '归母净利润增长率%', '经营现金流增长率%', '总资产增长率%', '净资产增长率%', '固定资产增长率%'],
|
|
['货币资金', '交易性金融资产', '应收票据', '营收账款', '预付款项', '其他应收款', '存货', '存货','其他流动资产'],
|
|
['经营现金流净额', '销售收现', '购买支付现金', '投资现金流净额', '筹资现金流净额', '现金净增加额','期末现金余额','自由现金流'],
|
|
],
|
|
financialMetricsList:[],
|
|
showDataList:[],
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
if(e.index) {
|
|
this.activeIndex = e.index
|
|
}
|
|
if(e.code) {
|
|
this.stockCode = e.code
|
|
}
|
|
this.contentTop = this.navH + 20 / 750 * inject('windowWidth')
|
|
this.otherTop = this.navH + 204 / 750 * inject('windowWidth')
|
|
this.getFinancialMetricsData()
|
|
},
|
|
onReady() {
|
|
uni.createSelectorQuery().select('#topCategory').boundingClientRect(rect=>{
|
|
this.topScrollWidth = Math.round(rect.width)
|
|
}).exec()
|
|
uni.createSelectorQuery().select('#filterList').boundingClientRect(rect=>{
|
|
if(rect)
|
|
{
|
|
this.secondScrollWidth = Math.round(rect.width)
|
|
}
|
|
}).exec()
|
|
},
|
|
methods: {
|
|
clickTabItem(e,index) {
|
|
if(this.activeIndex!=index) {
|
|
this.activeIndex = index
|
|
let offsetLeft = e.currentTarget.offsetLeft
|
|
this.topScrollLeft = offsetLeft - this.topScrollWidth/2
|
|
}
|
|
},
|
|
/**
|
|
* 点击选择筛选项
|
|
* @param {Object} index
|
|
*/
|
|
clickFilterItem(e,index) {
|
|
if(this.filterIndex!=index) {
|
|
this.filterIndex = index
|
|
let offsetLeft = e.currentTarget.offsetLeft
|
|
this.secondScrollLeft = offsetLeft - this.secondScrollWidth/2
|
|
if(this.activeIndex==0||this.activeIndex==1||this.activeIndex==2||this.activeIndex==4) {
|
|
this.getFinancialMetricsData()
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 点击选择期数
|
|
* @param {Object} e
|
|
*/
|
|
clickSelectPeriod(e)
|
|
{
|
|
this.periodTop = e.currentTarget.offsetTop+this.navH+(70+10)/750*this.windowWidth
|
|
this.periodShow = true
|
|
},
|
|
/**
|
|
* 点击选择期数
|
|
* @param {Object} index
|
|
*/
|
|
clickPeriodItem(index) {
|
|
if(this.periodIndex!=index) {
|
|
this.periodIndex = index
|
|
this.periodShow = false
|
|
}
|
|
},
|
|
/**
|
|
* 获取财务指标数据
|
|
*/
|
|
getFinancialMetricsData()
|
|
{
|
|
let code = this.stockCode
|
|
let period = this.periodList[this.periodIndex].period
|
|
let param = {limit:period}
|
|
financialMetrics(code,param).then(res=>{
|
|
this.financialMetricsList = res.data
|
|
this.getFinancialMetricsShowData()
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
getFinancialMetricsShowData(){
|
|
let data = []
|
|
if (this.filterIndex==0) {
|
|
data = this.financialMetricsList
|
|
}else if (this.filterIndex==1) {
|
|
//年报
|
|
for (let item of this.financialMetricsList) {
|
|
if (item.report_type.indexOf('年报')>-1)
|
|
{
|
|
data.push(item)
|
|
}
|
|
}
|
|
}else if (this.filterIndex==2) {
|
|
for (let item of this.financialMetricsList) {
|
|
if (item.report_type.indexOf('中报')>-1)
|
|
{
|
|
data.push(item)
|
|
}
|
|
}
|
|
}else if (this.filterIndex==3) {
|
|
for (let item of this.financialMetricsList) {
|
|
if (item.report_type.indexOf('一季报')>-1)
|
|
{
|
|
data.push(item)
|
|
}
|
|
}
|
|
}else if (this.filterIndex==4) {
|
|
for (let item of this.financialMetricsList) {
|
|
if (item.report_type.indexOf('三季报')>-1)
|
|
{
|
|
data.push(item)
|
|
}
|
|
}
|
|
}
|
|
this.showDataList = data
|
|
console.log(this.showDataList)
|
|
},
|
|
/**
|
|
* 获取资产负债表数据
|
|
*/
|
|
getFinancialBalanceSheetData()
|
|
{
|
|
let code = this.stockCode
|
|
let period = this.periodList[this.periodIndex].period
|
|
let param = {limit:period}
|
|
financialBalanceSheet(code,param).then(res=>{
|
|
this.financialBalanceList = res.data
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
/**
|
|
* 获取现金流量表数据
|
|
*/
|
|
getCashFlowSheetData()
|
|
{
|
|
let code = this.stockCode
|
|
let period = this.periodList[this.periodIndex].period
|
|
let param = {limit:period}
|
|
cashflowSheet(code,param).then(res=>{
|
|
this.cashFlowList = res.data
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
/**
|
|
* 获取利润表数据
|
|
*/
|
|
getIncomeStatementSheetData()
|
|
{
|
|
let code = this.stockCode
|
|
let period = this.periodList[this.periodIndex].period
|
|
let param = {limit:period}
|
|
incomeStatementSheet(code,param).then(res=>{
|
|
this.incomeStatementList = res.data
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
page {
|
|
background-color: #070707;
|
|
}
|
|
|
|
.topBg {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.stockDetailsC {
|
|
left: 25rpx;
|
|
width: calc(100vw - 50rpx);
|
|
background-color: white;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
overflow: hidden;
|
|
bottom: calc(20rpx + 70rpx + 20rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.bottomC {
|
|
background-color: black;
|
|
padding: 20rpx 25rpx calc(20rpx + env(safe-area-inset-bottom));
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.inputC {
|
|
background-color: #424143;
|
|
margin-right: 20rpx;
|
|
padding: 0 33rpx;
|
|
height: 70rpx;
|
|
border-radius: 35rpx;
|
|
|
|
input {
|
|
height: 100%;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.contrastShareC {
|
|
.item {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #FEFAF6;
|
|
text-align: center;
|
|
.icon {
|
|
margin: 0 30rpx;
|
|
width: auto;
|
|
height: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.filterList {
|
|
margin-right: 20rpx;
|
|
white-space: nowrap;
|
|
width: calc(100% - 150rpx);
|
|
.item
|
|
{
|
|
display: inline-block;
|
|
margin-right: 28rpx;
|
|
background-color: #F6F6F6;
|
|
padding: 0 10rpx;
|
|
min-width: 110rpx;
|
|
line-height: 45rpx;
|
|
border-radius: 5rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #939393;
|
|
text-align: center;
|
|
}
|
|
.item.select
|
|
{
|
|
background-color: #F2C369;
|
|
font-weight: bold;
|
|
color: #070707;
|
|
}
|
|
}
|
|
.periodList {
|
|
right: 25rpx;
|
|
margin: 0 25rpx;
|
|
width: 130rpx;
|
|
.item
|
|
{
|
|
line-height: 40rpx;
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
color: #999;
|
|
text-align: center;
|
|
}
|
|
.item.select {
|
|
color: #F2C369;
|
|
}
|
|
}
|
|
</style> |