12.12 页面风格改版，增加事件详情相关概念网页跳转，增加绑定手机号功能
This commit is contained in:
尚政杰
File diff suppressed because it is too large
Load Diff
@@ -1,17 +1,20 @@
|
||||
<template>
|
||||
<view>
|
||||
<navBar leftText="事件详情"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||
<navBar leftText="事件详情" :hideNavBg="true"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
||||
<view v-if="eventDetails" class="eventDetailsC fixed" :style="'top:'+navH+'px;'">
|
||||
<view class="categoryTitleC">
|
||||
<view class="category">{{eventDetails.event_type}}</view>
|
||||
<text class="title">{{eventDetails.event_title}}</text>
|
||||
</view>
|
||||
<view class="eventTime">{{eventDetails.event_created_at.substr(0,16)}}</view>
|
||||
<view class="eventContent">{{eventDetails.event_desc}}<text class="ai">（AI合成）</text></view>
|
||||
<view class="riskTips">
|
||||
【风险提示：解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息，团队辛苦编写，未经许可严禁转载。本产品内容内容均不构成投资建议，请投资者注意风险，独立审慎决策。】
|
||||
<view class="eventIntroC">
|
||||
<view class="categoryTitleC">
|
||||
<view class="category">{{eventDetails.event_type}}</view>
|
||||
<text class="title">{{eventDetails.event_title}}</text>
|
||||
</view>
|
||||
<view class="eventTime">{{eventDetails.event_created_at.substr(0,16)}}</view>
|
||||
<view class="eventContent">{{eventDetails.event_desc}}<text class="ai">（AI合成）</text></view>
|
||||
<view class="riskTips">
|
||||
【风险提示：解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息，团队辛苦编写，未经许可严禁转载。本产品内容内容均不构成投资建议，请投资者注意风险，独立审慎决策。】
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-x class="categoryList">
|
||||
<view :class="'item relative '+(selectCategory==index?'select':'')" v-for="(item,index) in categoryList" :key="index" @click="clickCategoryItem(index)">
|
||||
{{item}}
|
||||
@@ -42,33 +45,30 @@
|
||||
<view class="content">{{item.relation_desc}}<text class="ai">（AI合成）</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="selectCategory==1" class="conceptList flexWrap">
|
||||
<view v-if="selectCategory==1" class="conceptList">
|
||||
<view class="conceptItem" v-for="(item,index) in conceptList" :key="index" @click="clickConceptItem(item.concept)">
|
||||
<view class="coverC relative">
|
||||
<image class="cover" src="" mode="aspectFill"></image>
|
||||
<view :class="'rateC absolute '+(getRateUpOrDown(item.price_info.avg_change_pct)?'down':'up')">
|
||||
<image v-if="getRateUpOrDown(item.price_info.avg_change_pct)" class="icon" src="/static/icon/home/conceptDownArrow.png" mode="widthFix"></image>
|
||||
<image v-else class="icon" src="/static/icon/home/conceptUpArrow.png" mode="widthFix"></image>
|
||||
<text>{{getRateStr(item.price_info.avg_change_pct)}}%</text>
|
||||
</view>
|
||||
<view class="totalC absolute">{{item.stock_count}}只股票</view>
|
||||
<view class="titleChgStockNumC flex">
|
||||
<view class="title">{{item.concept}}</view>
|
||||
<view v-if="item.price_info" :class="'chg '+(getRateUpOrDown(item.price_info.avg_change_pct)?'down':'up')">{{getChgRateStr(item.price_info.avg_change_pct)}}%</view>
|
||||
<view v-if="item.price_info" :class="'stockNum '+(getRateUpOrDown(item.price_info.avg_change_pct)?'down':'up')">{{item.stock_count}} 只股票</view>
|
||||
</view>
|
||||
<view class="infoC">
|
||||
<view class="title">{{item.concept}}</view>
|
||||
<view class="content">{{item.description}}</view>
|
||||
<view class="transactionDate">交易日期: {{item.price_info.trade_date}}</view>
|
||||
<view class="hotStockC">
|
||||
<view class="titleC flex">
|
||||
<text class="flex1">热门个股</text>
|
||||
<image class="arrow" src="/static/icon/home/stockArrow.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="stockList flexWrap">
|
||||
<view class="item" v-for="(item,index) in item.stocks" :key="index">{{item.stock_name}}</view>
|
||||
</view>
|
||||
<view class="content">{{item.description}}</view>
|
||||
<view class="hotStockC flex">
|
||||
<view class="title">热门个股</view>
|
||||
<view v-if="memberInfo&&memberInfo.is_member&&memberInfo.subscription_type=='pro'" class="stockList flex">
|
||||
<view class="stockItem" v-for="(sitem,sindex) in item.stocks.slice(0,3)" :key="sindex">{{sitem.name}}</view>
|
||||
<view class="more" @click.stop="clickStockMore(item)">+{{item.stock_count-3}}更多</view>
|
||||
</view>
|
||||
<view class="dateHistoryTimeC flex">
|
||||
<view class="date flex1">{{item.happened_times[0]+(item.happened_times.length>1?('(共'+item.happened_times.length+'次)'):'')}}</view>
|
||||
<view class="historyTimeC">历史时间轴</view>
|
||||
<view v-else class="notVipC flex" @click.stop="clickNotVip()">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/lock.png" mode="widthFix"></image>
|
||||
<view>需升级Pro会员查看{{item.stock_count}}只个股</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="transactionDateHistoryTimeC flex">
|
||||
<view class="transactionDate flex1">交易时间：{{item.price_info?item.price_info.trade_date:''}}</view>
|
||||
<view class="historyTimeC flex" @click.stop="clickHistoricalTimeline(item)">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/timeAxis.png" mode="widthFix"></image>
|
||||
<view>历史时间轴</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -83,9 +83,7 @@
|
||||
<view class="item flexStretch" v-for="(item,index) in historyEventList" :key="index">
|
||||
<view class="eventLineC relative">
|
||||
<view class="line"></view>
|
||||
<view class="pointC absolute flexCenter">
|
||||
<view class="point"></view>
|
||||
</view>
|
||||
<image class="point absolute" src="/static/icon/home/expectScoreDot.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eventInfoC flex1">
|
||||
<view class="titleCorrelationC flex">
|
||||
@@ -234,13 +232,70 @@
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="vipPopup" type="center">
|
||||
<view class="vipPopup">
|
||||
<image class="topIcon" src="/static/icon/home/conceptCenter/vipPopIcon.png" mode="widthFix"></image>
|
||||
<view class="popTitle">需要Pro版订阅</view>
|
||||
<view class="popSubtitle">当前功能需要更高权限</view>
|
||||
<view class="moduleC visit">
|
||||
<view class="section">您正在尝试访问</view>
|
||||
<view class="visitC relative">
|
||||
<view class="line absolute"></view>
|
||||
<view class="contentC relative flex">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/visitModule.png" mode="widthFix"></image>
|
||||
<view>概念统计中心和热门个股</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="moduleC">
|
||||
<view class="section flex">
|
||||
当前订阅
|
||||
<view class="version free">免费版</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item flex">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/free_s.png" mode="widthFix"></image>
|
||||
<view>基础事件浏览</view>
|
||||
</view>
|
||||
<view class="item flex">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/free_s.png" mode="widthFix"></image>
|
||||
<view>有限历史事件查看</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="moduleC">
|
||||
<view class="section flex">
|
||||
所需订阅
|
||||
<view class="version pro">Pro版</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item flex">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/pro_s.png" mode="widthFix"></image>
|
||||
<view>相关标的分析</view>
|
||||
</view>
|
||||
<view class="item flex">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/pro_s.png" mode="widthFix"></image>
|
||||
<view>相关概念分析</view>
|
||||
</view>
|
||||
<view class="item flex">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/pro_s.png" mode="widthFix"></image>
|
||||
<view>完整历史事件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnC flex">
|
||||
<view class="btn flex1 later" @click="clickLater()">稍后再说</view>
|
||||
<view class="btn flex1 upgrade" @click="clickUpgradeAtOnce()">立即升级</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue';
|
||||
import { eventRelatedConcept, eventHistoryEvent, eventRelatedStock, eventCommentList, commentEvent, likeEventComment, replyComment, followEvent } from '@/request/api';
|
||||
import { getLocaleHourMinute, getLocaleTime, getRateStr, getRateUpOrDown } from '@/utils/util';
|
||||
import { eventRelatedConcept, eventHistoryEvent, eventRelatedStock, eventCommentList, commentEvent, likeEventComment, replyComment, followEvent, membershipStatus } from '@/request/api';
|
||||
import { getLocaleHourMinute, getLocaleTime, getRateStr, getRateUpOrDown, getChgRateStr } from '@/utils/util';
|
||||
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');
|
||||
|
||||
export default {
|
||||
@@ -249,6 +304,7 @@
|
||||
navH:inject('navHeight'),
|
||||
windowWidth:inject('windowWidth'),
|
||||
eventId:'', //事件id
|
||||
memberInfo:null, //会员信息
|
||||
eventDetails:null, //事件详情
|
||||
categoryList:['相关标的','相关概念','历史事件'],
|
||||
targetList:[], //相关标的
|
||||
@@ -261,6 +317,7 @@
|
||||
getLocaleTime:getLocaleTime,
|
||||
getRateUpOrDown:getRateUpOrDown,
|
||||
getRateStr:getRateStr,
|
||||
getChgRateStr:getChgRateStr,
|
||||
scoreTop:'',
|
||||
expectScore:0, //预期得分
|
||||
commentList:[], //评价列表
|
||||
@@ -421,6 +478,45 @@
|
||||
url:'/pages/index/conceptDetails/conceptDetails?name='+name
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 非vip点击
|
||||
*/
|
||||
clickNotVip()
|
||||
{
|
||||
this.$refs["vipPopup"].open()
|
||||
},
|
||||
/**
|
||||
* 点击稍后再说
|
||||
*/
|
||||
clickLater()
|
||||
{
|
||||
this.$refs["vipPopup"].close()
|
||||
},
|
||||
/**
|
||||
* 点击立即升级
|
||||
*/
|
||||
clickUpgradeAtOnce()
|
||||
{
|
||||
this.clickLater()
|
||||
},
|
||||
/**
|
||||
* 点击查看更多个股
|
||||
*/
|
||||
clickStockMore(item)
|
||||
{
|
||||
uni.navigateTo({
|
||||
url:'/pages/concept/hotStock/hotStock?id='+item.concept_id
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 点击查看历史时间轴
|
||||
*/
|
||||
clickHistoricalTimeline(item)
|
||||
{
|
||||
uni.navigateTo({
|
||||
url:'/pages/concept/historicalTimeline/historicalTimeline?id='+item.concept_id
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 点击查看历史事件的相关股票
|
||||
*/
|
||||
@@ -441,7 +537,7 @@
|
||||
*/
|
||||
clickExpectScore(e)
|
||||
{
|
||||
this.scoreTop = e.currentTarget.offsetTop+this.navH+(70+10+20)/750*this.windowWidth
|
||||
this.scoreTop = e.currentTarget.offsetTop+this.navH+(70+10)/750*this.windowWidth
|
||||
this.$refs['expectScorePopup'].open()
|
||||
},
|
||||
|
||||
@@ -586,7 +682,7 @@
|
||||
getEventRelatedConceptData()
|
||||
{
|
||||
let eventDetails = this.eventDetails
|
||||
let param = {query:eventDetails.event_title,size:4,page:1,sort_by:"_score",isJson:1}
|
||||
let param = {query:eventDetails.event_title,size:10,page:1,sort_by:"_score",isJson:1}
|
||||
eventRelatedConcept(param).then(res=>{
|
||||
// if(res.code==200)
|
||||
// {
|
||||
@@ -637,6 +733,10 @@
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
page
|
||||
{
|
||||
background-color: #070707;
|
||||
}
|
||||
.topBg
|
||||
{
|
||||
top: 0;
|
||||
@@ -646,106 +746,104 @@
|
||||
}
|
||||
.eventDetailsC
|
||||
{
|
||||
background-color: white;
|
||||
margin-top: 10rpx;
|
||||
padding: 20rpx 0 0;
|
||||
padding: 20rpx 25rpx 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(20rpx + 70rpx + 20rpx + env(safe-area-inset-bottom));
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
overflow-y: scroll;
|
||||
.categoryTitleC
|
||||
.eventIntroC
|
||||
{
|
||||
padding: 0 25rpx;
|
||||
.category
|
||||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||||
padding: 26rpx 0 34rpx;
|
||||
border-radius: 10rpx;
|
||||
.categoryTitleC
|
||||
{
|
||||
background-color: #FD9A14;
|
||||
margin-right: 12rpx;
|
||||
display: inline-block;
|
||||
padding: 0 11rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 25rpx;
|
||||
.category
|
||||
{
|
||||
background-color: #F3C368;
|
||||
margin-right: 8rpx;
|
||||
display: inline-block;
|
||||
padding: 0 11rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
.title
|
||||
{
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
}
|
||||
.eventTime
|
||||
{
|
||||
margin: 20rpx 25rpx 0;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
.title
|
||||
.eventContent
|
||||
{
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
margin: 18rpx 27rpx 0;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #71675D;
|
||||
line-height: 1.3rem;
|
||||
.ai
|
||||
{
|
||||
color: #EC3440;
|
||||
}
|
||||
}
|
||||
}
|
||||
.eventTime
|
||||
{
|
||||
margin: 20rpx 25rpx 0;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #aaa;
|
||||
}
|
||||
.eventContent
|
||||
{
|
||||
margin: 22rpx 24rpx 0;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 1.2rem;
|
||||
.ai
|
||||
.riskTips
|
||||
{
|
||||
color: #C00000;
|
||||
margin: 24rpx 25rpx 0;
|
||||
line-height: 1.2rem;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #A2A2A1;
|
||||
}
|
||||
}
|
||||
.riskTips
|
||||
{
|
||||
margin: 20rpx 25rpx 0;
|
||||
padding-bottom: 30rpx;
|
||||
line-height: 1.4rem;
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
border-bottom: solid 1rpx #E4E4E4;
|
||||
}
|
||||
.categoryList
|
||||
{
|
||||
white-space: nowrap;
|
||||
margin-top: 10rpx;
|
||||
.item
|
||||
{
|
||||
display: inline-block;
|
||||
line-height: 60rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-size: 27rpx;
|
||||
font-weight: 500;
|
||||
color: #42485B;
|
||||
color: #939393;
|
||||
}
|
||||
.item.select
|
||||
{
|
||||
font-weight: bold;
|
||||
color: #F97316;
|
||||
.line
|
||||
{
|
||||
background-color: #F97316;
|
||||
left: calc((100% - 50rpx)/2);
|
||||
bottom: 0;
|
||||
width: 50rpx;
|
||||
height: 2rpx;
|
||||
}
|
||||
color: #F3C368;
|
||||
}
|
||||
}
|
||||
.headingList
|
||||
{
|
||||
background-color: #F3F6F9;
|
||||
margin: 28rpx 25rpx 0;
|
||||
background-color: #FFF1E7;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
.item
|
||||
{
|
||||
line-height: 55rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
color: #070707;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.targetList
|
||||
{
|
||||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||||
padding: 0 25rpx;
|
||||
.item
|
||||
{
|
||||
@@ -769,7 +867,7 @@
|
||||
}
|
||||
.chg
|
||||
{
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
}
|
||||
.chg.up
|
||||
{
|
||||
@@ -777,168 +875,169 @@
|
||||
}
|
||||
.chg.down
|
||||
{
|
||||
color: #22C55E;
|
||||
color: #355422;
|
||||
}
|
||||
}
|
||||
.content
|
||||
{
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
color: #71675D;
|
||||
line-height: 1.2rem;
|
||||
.ai
|
||||
{
|
||||
color: #C00000;
|
||||
color: #EC3440;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.conceptList
|
||||
{
|
||||
padding: 30rpx 25rpx;
|
||||
.conceptItem
|
||||
{
|
||||
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.05);
|
||||
margin: 0 30rpx 30rpx 0;
|
||||
width: calc((100% - 30rpx)/2);
|
||||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
.coverC
|
||||
.titleChgStockNumC
|
||||
{
|
||||
.cover
|
||||
padding: 24rpx 18rpx 0;
|
||||
.title
|
||||
{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
margin-right: 20rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.rateC
|
||||
.chg
|
||||
{
|
||||
top: 12rpx;
|
||||
left: 12rpx;
|
||||
padding: 0 10rpx;
|
||||
margin-right: 20rpx;
|
||||
padding: 0 13rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
.chg.up
|
||||
{
|
||||
background-color: #EC3440;
|
||||
}
|
||||
.chg.down
|
||||
{
|
||||
background-color: #355422;
|
||||
}
|
||||
.stockNum
|
||||
{
|
||||
padding: 0 16rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.stockNum.up
|
||||
{
|
||||
color: #EC3440;
|
||||
border: solid 2rpx #EC3440;
|
||||
}
|
||||
.stockNum.down
|
||||
{
|
||||
color: #355422;
|
||||
border: solid 2rpx #355422;
|
||||
}
|
||||
}
|
||||
.content
|
||||
{
|
||||
margin-top: 26rpx;
|
||||
padding: 0 22rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #71675D;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.hotStockC
|
||||
{
|
||||
margin-top: 30rpx;
|
||||
padding: 0 20rpx;
|
||||
.title
|
||||
{
|
||||
margin-right: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #936E5C;
|
||||
}
|
||||
.stockList
|
||||
{
|
||||
font-size: 22rpx;
|
||||
.stockItem
|
||||
{
|
||||
background-color: #3D3D3D;
|
||||
margin-right: 10rpx;
|
||||
padding: 0 8rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 5rpx 20rpx 5rpx 20rpx;
|
||||
color: #EFDDD1;
|
||||
}
|
||||
.more
|
||||
{
|
||||
color: #936E5C;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
.notVipC
|
||||
{
|
||||
background-color: #3D3D3D;
|
||||
padding: 0 21rpx 0 16rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 5rpx;
|
||||
font-size: 22rpx;
|
||||
color: #F3C368;
|
||||
.icon
|
||||
{
|
||||
width: 11rpx;
|
||||
margin-right: 9rpx;
|
||||
width: 15rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.rateC.up
|
||||
{
|
||||
background-color: #E53E3E;
|
||||
}
|
||||
.rateC.down
|
||||
{
|
||||
background-color: #38A169;
|
||||
}
|
||||
.totalC
|
||||
{
|
||||
background: linear-gradient(-90deg, #FAC915 0%, #F18D10 100%);
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
padding: 0 9rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.infoC
|
||||
.transactionDateHistoryTimeC
|
||||
{
|
||||
padding: 20rpx 23rpx;
|
||||
.title
|
||||
padding: 20rpx 22rpx 30rpx;
|
||||
.transactionDate
|
||||
{
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
.content
|
||||
{
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-top: 10rpx;
|
||||
line-height: 1.2rem;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
.transactionDate
|
||||
.historyTimeC
|
||||
{
|
||||
margin-top: 12rpx;
|
||||
background-color: #F3C368;
|
||||
padding: 0 10rpx 0 15rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #AAA;
|
||||
}
|
||||
.hotStockC
|
||||
{
|
||||
background-color: #F7FAFC;
|
||||
margin-top: 16rpx;
|
||||
padding: 10rpx 13rpx;
|
||||
border-radius: 5rpx;
|
||||
.titleC
|
||||
color: #101213;
|
||||
.icon
|
||||
{
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
.arrow
|
||||
{
|
||||
width: 6rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.stockList
|
||||
{
|
||||
margin-top: 10rpx;
|
||||
height: 35rpx;
|
||||
overflow: hidden;
|
||||
.item
|
||||
{
|
||||
background-color: #FFEADC;
|
||||
margin: 0 5rpx 5rpx 0;
|
||||
padding: 0 9rpx;
|
||||
line-height: 30rpx;
|
||||
border-radius: 5rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 500;
|
||||
color: #F97316;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dateHistoryTimeC
|
||||
{
|
||||
margin-top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
.date
|
||||
{
|
||||
color: #666;
|
||||
}
|
||||
.historyTimeC
|
||||
{
|
||||
background-color: #F97316;
|
||||
padding: 0 6rpx;
|
||||
line-height: 38rpx;
|
||||
border-radius: 5rpx;
|
||||
color: white;
|
||||
margin-right: 7rpx;
|
||||
width: 20rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.conceptItem:nth-child(2n)
|
||||
{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
.historyEventList
|
||||
{
|
||||
padding: 34rpx 25rpx;
|
||||
padding: 20rpx 0;
|
||||
.expectScoreC
|
||||
{
|
||||
background-color: #FBEFE7;
|
||||
padding: 0 25rpx;
|
||||
padding: 0 20rpx;
|
||||
height: 70rpx;
|
||||
.icon
|
||||
{
|
||||
@@ -950,7 +1049,7 @@
|
||||
{
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #F97316;
|
||||
color: #FFF6F0;
|
||||
}
|
||||
.tips
|
||||
{
|
||||
@@ -961,38 +1060,28 @@
|
||||
}
|
||||
.list
|
||||
{
|
||||
padding: 23rpx 0;
|
||||
.item
|
||||
{
|
||||
.eventLineC
|
||||
{
|
||||
padding: 0 43rpx 0 15rpx;
|
||||
padding: 30rpx 34rpx 0 25rpx;
|
||||
.line
|
||||
{
|
||||
background-color: #F0F0F0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
width: 1rpx;
|
||||
border-left: dashed 1rpx #F3C368;
|
||||
height: calc(100% - 10rpx);
|
||||
}
|
||||
.pointC
|
||||
.point
|
||||
{
|
||||
background-color: #F9731680;
|
||||
top: 0;
|
||||
left: 5rpx;
|
||||
left: 14rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
.point
|
||||
{
|
||||
background-color: #F97316;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.eventInfoC
|
||||
{
|
||||
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.07);
|
||||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||||
margin-bottom: 20rpx;
|
||||
padding-top: 27rpx;
|
||||
min-width: 0;
|
||||
@@ -1006,19 +1095,19 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 30rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
.correlation
|
||||
{
|
||||
background-color: #F973161A;
|
||||
background-color: #FFF8EB;
|
||||
padding: 0 12rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 5rpx;
|
||||
font-size: 24rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #F97316;
|
||||
color: #EFB342;
|
||||
}
|
||||
}
|
||||
.content
|
||||
@@ -1055,7 +1144,7 @@
|
||||
}
|
||||
.rateItem.up
|
||||
{
|
||||
background-color: #C00000;
|
||||
background-color: #EC3440;
|
||||
}
|
||||
.rateItem.down
|
||||
{
|
||||
@@ -1070,7 +1159,7 @@
|
||||
padding: 16rpx 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #F97316;
|
||||
color: #070707;
|
||||
.icon
|
||||
{
|
||||
margin-right: 13rpx;
|
||||
@@ -1093,14 +1182,14 @@
|
||||
}
|
||||
.bottomC
|
||||
{
|
||||
background-color: #131313;
|
||||
padding: 20rpx 25rpx calc(20rpx + env(safe-area-inset-bottom));
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-shadow: 0px -1rpx 0px 0px #EEEEEE;
|
||||
.inputC
|
||||
{
|
||||
background-color: #F0F0F0;
|
||||
background-color:#424143;
|
||||
margin-right: 20rpx;
|
||||
padding: 0 33rpx;
|
||||
height: 70rpx;
|
||||
@@ -1327,7 +1416,7 @@
|
||||
}
|
||||
.expectScorePopup
|
||||
{
|
||||
background-color: white;
|
||||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||||
margin-left: calc(100% - 320rpx - 24rpx);
|
||||
width: 320rpx;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
@@ -1391,13 +1480,13 @@
|
||||
}
|
||||
.correlation
|
||||
{
|
||||
background-color: #F973161A;
|
||||
background-color: #F3C368;
|
||||
padding: 0 12rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 5rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #F97316;
|
||||
color: #101213;
|
||||
}
|
||||
}
|
||||
.sectorRateC
|
||||
@@ -1452,4 +1541,140 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.vipPopup
|
||||
{
|
||||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||||
margin: 0 95rpx;
|
||||
padding-bottom: 34rpx;
|
||||
width: 560rpx;
|
||||
border-radius: 10rpx;
|
||||
.topIcon
|
||||
{
|
||||
margin: -60rpx 0 0 calc((100% - 143rpx)/2);
|
||||
width: 143rpx;
|
||||
height: auto;
|
||||
}
|
||||
.popTitle
|
||||
{
|
||||
margin-top: 28rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #101213;
|
||||
text-align: center;
|
||||
}
|
||||
.popSubtitle
|
||||
{
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #493F2B;
|
||||
text-align: center;
|
||||
}
|
||||
.moduleC
|
||||
{
|
||||
background-color: white;
|
||||
margin: 0 30rpx 20rpx;
|
||||
padding-top: 25rpx;
|
||||
border-radius: 10rpx;
|
||||
.section
|
||||
{
|
||||
padding: 0 25rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
.version
|
||||
{
|
||||
margin-left: 18rpx;
|
||||
padding: 0 15rpx;
|
||||
line-height: 32rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.version.free
|
||||
{
|
||||
background-color: #3D3D3D;
|
||||
color: #FEFCFB;
|
||||
}
|
||||
.version.pro
|
||||
{
|
||||
background-color: #F2C367;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
.visitC
|
||||
{
|
||||
margin: 18rpx 24rpx 0;
|
||||
height: 60rpx;
|
||||
.line
|
||||
{
|
||||
background-color: #F2C367;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 44rpx;
|
||||
height: 100%;
|
||||
border-radius: 7rpx 0 0 7rpx;
|
||||
}
|
||||
.contentC
|
||||
{
|
||||
background-color: #F7F7F7;
|
||||
margin-left: 6rpx;
|
||||
padding: 0 15rpx;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #3D3D3D;
|
||||
.icon
|
||||
{
|
||||
margin-right: 14rpx;
|
||||
width: 25rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list
|
||||
{
|
||||
padding-bottom: 10rpx;
|
||||
.item
|
||||
{
|
||||
padding: 10rpx 25rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
.icon
|
||||
{
|
||||
margin-right: 13rpx;
|
||||
width: 27rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.moduleC.visit
|
||||
{
|
||||
margin-top: 20rpx;
|
||||
padding-bottom: 25rpx;
|
||||
}
|
||||
.btnC
|
||||
{
|
||||
margin: 28rpx 92rpx 0;
|
||||
.btn
|
||||
{
|
||||
line-height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.btn.later
|
||||
{
|
||||
background-color: #EDEDED;
|
||||
margin-right: 56rpx;
|
||||
}
|
||||
.btn.upgrade
|
||||
{
|
||||
background-color: #F2C367;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,629 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<navBar leftText="历史时间轴" :hideNavBg="true"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
||||
<view class="timelineTitle fixed" :style="'top: '+navH+'px;'">{{conceptName}}- 历史时间轴</view>
|
||||
<view class="dateStatisticsC fixed" :style="'top: '+contentTop+'px;'">
|
||||
<view class="dateC">
|
||||
<view class="yearMonthC flex">
|
||||
<view class="btn" @click="clickPreMonth()">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/pre.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="yearMonth flex1">
|
||||
<picker mode="date" fields="month" @change="monthChange">
|
||||
{{selectMonth}}
|
||||
</picker>
|
||||
</view>
|
||||
<view class="btn" @click="clickNextMonth()">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/next.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="weekList flex">
|
||||
<view class="item flex1" v-for="(item,index) in weekList" :key="index">{{item}}</view>
|
||||
</view>
|
||||
<view class="monthDateList flexWrap">
|
||||
<view class="item flexColumnCenter" v-for="(item,index) in monthDateList[selectMonthIndex]" :key="index" @click="clickSelectDate(item)">
|
||||
<block v-if="item.date==selectDateStr">
|
||||
<view :class="'date select '+(item.avg_change_pct?(getRateUpOrDown(item.avg_change_pct)?'down':'up'):'')">
|
||||
{{item.day}}
|
||||
<view v-if="item.avg_change_pct" class="chg">{{getChgRateStr(item.avg_change_pct)}}%</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<block v-if="!item.isCurrentMonth">
|
||||
<view class="date notCurrentMonth">{{item.day}}</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view :class="'date '+(item.avg_change_pct?(getRateUpOrDown(item.avg_change_pct)?'down':'up'):'')">
|
||||
{{item.day}}
|
||||
<view v-if="item.avg_change_pct" :class="'chg '+(getRateUpOrDown(item.avg_change_pct)?'down':'up')">{{getChgRateStr(item.avg_change_pct)}}%</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="statisticsC">
|
||||
<view class="date">{{selectDateStr}}统计</view>
|
||||
<view v-if="chgStockData&&chgStockData.avg_change_pct" class="chgStockNumC flex">
|
||||
<view class="chgC flex flex1">
|
||||
<view class="title">涨跌幅</view>
|
||||
<image v-if="getRateUpOrDown(chgStockData.avg_change_pct)" class="icon" src="/static/icon/home/conceptCenter/chgDown.png" mode="widthFix"></image>
|
||||
<image v-else class="icon" src="/static/icon/home/conceptCenter/chgUp.png" mode="widthFix"></image>
|
||||
<view :class="'chg '+(getRateUpOrDown(chgStockData.avg_change_pct)?'down':'up')">{{getChgRateStr(chgStockData.avg_change_pct)}}%</view>
|
||||
</view>
|
||||
<view class="stockNumC flex flex1">
|
||||
<view class="title">统计股票</view>
|
||||
<view class="stockNum">{{chgStockData.stock_count}} 只股票</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="newsReportC flex">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/newsReport.png" mode="widthFix"></image>
|
||||
<text class="news">{{newsList.length}} 条新闻 · </text>
|
||||
<text class="report" decode> {{reportList.length}} 份研报</text>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="(item,index) in newsList" :key="index">
|
||||
<view class="flex">
|
||||
<view class="type news">新闻</view>
|
||||
<view class="title flex1">{{item.title}}</view>
|
||||
</view>
|
||||
<view class="content">{{item.detail}}</view>
|
||||
</view>
|
||||
<view class="item" v-for="(item,index) in reportList" :key="index">
|
||||
<view class="flex">
|
||||
<view class="type report">研报</view>
|
||||
<view class="title flex1">{{item.report_title}}</view>
|
||||
</view>
|
||||
<view class="content">坚定看好锂电材料，建议继续加配坚定六氟、添加剂，关注隔膜更加坚定的看好六氟：下游传导如期</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue';
|
||||
import { conceptNews, conceptReport, priceTimeline } from '@/request/api';
|
||||
import { getChgRateStr, getRateUpOrDown } from '@/utils/util';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navH:inject('navHeight'),
|
||||
contentTop:'',
|
||||
conceptId:'', //概念id
|
||||
conceptName:'',
|
||||
weekList:['一','二','三','四','五','六','日'],
|
||||
monthDateList:[],
|
||||
selectMonthIndex:0, //选中月份下标
|
||||
selectMonth:'', //选中年月
|
||||
selectDateStr:'', //选中日期
|
||||
startDateStr:'', //开始日期
|
||||
endDateStr:'', //结束日期
|
||||
chgStockData:null, //涨跌幅和股票数据
|
||||
newsList:[], //新闻数据
|
||||
reportList:[], //研报数据
|
||||
getRateUpOrDown:getRateUpOrDown,
|
||||
getChgRateStr:getChgRateStr,
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.contentTop = this.navH + 70/750*inject('windowWidth')
|
||||
let currentDate = new Date();
|
||||
// 获取当前年份
|
||||
let currentYear = currentDate.getFullYear();
|
||||
let currentMonth = currentDate.getMonth()+1;
|
||||
let currentDay = currentDate.getDate();
|
||||
this.selectMonthIndex = 20*12+currentMonth-1
|
||||
this.selectMonth = currentYear+'年'+currentMonth+'月'
|
||||
//开始日期默认为当前月份第一天
|
||||
this.startDateStr = currentYear+'-'+currentMonth+'-'+'01'
|
||||
//结束日期默认为当前日期
|
||||
this.endDateStr = this.selectDateStr = currentYear+'-'+currentMonth+'-'+(currentDay>9?currentDay:('0'+currentDay))
|
||||
// this.getYesterdayDateData()
|
||||
this.generateMonthDateListData()
|
||||
if (e.id) {
|
||||
this.conceptId = e.id
|
||||
this.getTimelineData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取当前时间前一天的数据
|
||||
*/
|
||||
getYesterdayDateData()
|
||||
{
|
||||
let currentDate = new Date();
|
||||
let selectDate = new Date(currentDate)
|
||||
selectDate.setDate(selectDate.getDate()-1)
|
||||
let selectYear = selectDate.getFullYear();
|
||||
let selectMonth = selectDate.getMonth()+1;
|
||||
let selectDay = selectDate.getDate();
|
||||
this.selectDateStr = selectYear+'-'+(selectMonth>9?selectMonth:('0'+selectMonth))+'-'+(selectDay>9?selectDay:('0'+selectDay))
|
||||
},
|
||||
/**
|
||||
* 生成日期数组
|
||||
*/
|
||||
generateMonthDateListData()
|
||||
{
|
||||
let currentDate = new Date();
|
||||
// 获取当前年份
|
||||
let currentYear = currentDate.getFullYear();
|
||||
let currentMonth = currentDate.getMonth()+1;
|
||||
let currentDay = currentDate.getDate();
|
||||
let monthDateList = []
|
||||
for (var i = currentYear-20; i < currentYear+20; i++) {
|
||||
for (var j = 0; j < 12; j++) {
|
||||
let date = new Date(i,j+1,0)
|
||||
let firstDayOfMonth = new Date(i,j+1,0);
|
||||
firstDayOfMonth.setDate(1);
|
||||
//获取当前月天数
|
||||
let currentMonthDay = date.getDate()
|
||||
let firstDayWeek = firstDayOfMonth.getDay() || 7
|
||||
let daysOfMonth = []
|
||||
for (var k = 1; k <= currentMonthDay; k++) {
|
||||
let newDate = new Date(i,j+1,0)
|
||||
newDate.setDate(k); // 设置日期为当前月的相应日期
|
||||
let newMonth = newDate.getMonth()+1
|
||||
let newDay = newDate.getDate()
|
||||
let time = newDate.getTime()
|
||||
let date = i+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||||
daysOfMonth.push({date:date,year:i,month:newMonth,day:newDay,isToday:(i==currentYear&&newMonth==currentMonth&&newDay==currentDay)?true:false,isCurrentMonth:true,isLastDay:newDay==currentMonthDay?true:false,timestamp:time});
|
||||
}
|
||||
for (var k = 0; k < firstDayWeek-1; k++) {
|
||||
//获取上月天数
|
||||
let year = i
|
||||
let month = j
|
||||
if(j<1)
|
||||
{
|
||||
year = i - 1
|
||||
month = 12
|
||||
}
|
||||
let lastMonthDay = new Date(year, month, 0).getDate()
|
||||
//获取上月日期
|
||||
let newDate = new Date(year,month-1,lastMonthDay-k)
|
||||
let newMonth = newDate.getMonth()+1
|
||||
let newDay = newDate.getDate()
|
||||
let time = newDate.getTime()
|
||||
let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||||
daysOfMonth.unshift({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,isLastDay:false,timestamp:time});
|
||||
}
|
||||
// 下一个月的第一天
|
||||
let nextMonthFirstDay = new Date(i, j+1, 1);
|
||||
// 然后减去一天就是当前月的最后一天
|
||||
let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
|
||||
let lastDayWeek = lastDayOfMonth.getDay() || 7; // 返回0（星期天）到6（星期六）之
|
||||
for (var k = 1; k < 8-lastDayWeek; k++) {
|
||||
let year = i
|
||||
let month = j
|
||||
if(month>11)
|
||||
{
|
||||
month = 0
|
||||
year ++
|
||||
}
|
||||
//获取下月日期
|
||||
let newDate = new Date(year,month + 1,k)
|
||||
let newMonth = newDate.getMonth()+1
|
||||
let newDay = newDate.getDate()
|
||||
let time = newDate.getTime()
|
||||
let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||||
daysOfMonth.push({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,isLastDay:false,timestamp:time});
|
||||
}
|
||||
monthDateList.push(daysOfMonth)
|
||||
}
|
||||
}
|
||||
this.monthDateList = monthDateList
|
||||
},
|
||||
/**
|
||||
* 点击上个月
|
||||
*/
|
||||
clickPreMonth()
|
||||
{
|
||||
if(this.selectMonthIndex>0)
|
||||
{
|
||||
this.selectMonthIndex --
|
||||
let monthList = this.monthDateList[this.selectMonthIndex]
|
||||
let year = ''
|
||||
let month = ''
|
||||
for (let item of monthList) {
|
||||
if(item.isCurrentMonth)
|
||||
{
|
||||
year = item.year
|
||||
month = item.month
|
||||
break
|
||||
}
|
||||
}
|
||||
let lastDay = ''
|
||||
for (let item of monthList) {
|
||||
if(item.isLastDay)
|
||||
{
|
||||
lastDay = item.day
|
||||
break
|
||||
}
|
||||
}
|
||||
this.selectMonth = year+'年'+month+'月'
|
||||
this.startDateStr = year+'-'+(month>9?month:('0'+month))+'-'+'01'
|
||||
this.endDateStr = year+'-'+(month>9?month:('0'+month))+'-'+lastDay
|
||||
this.getTimelineData()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 点击下个月
|
||||
*/
|
||||
clickNextMonth()
|
||||
{
|
||||
if(this.selectMonthIndex<this.monthDateList.length-1)
|
||||
{
|
||||
this.selectMonthIndex ++
|
||||
let monthList = this.monthDateList[this.selectMonthIndex]
|
||||
let year = ''
|
||||
let month = ''
|
||||
for (let item of monthList) {
|
||||
if(item.isCurrentMonth)
|
||||
{
|
||||
year = item.year
|
||||
month = item.month
|
||||
break
|
||||
}
|
||||
}
|
||||
let lastDay = ''
|
||||
for (let item of monthList) {
|
||||
if(item.isLastDay)
|
||||
{
|
||||
lastDay = item.day
|
||||
break
|
||||
}
|
||||
}
|
||||
this.selectMonth = year+'年'+month+'月'
|
||||
this.startDateStr = year+'-'+(month>9?month:('0'+month))+'-'+'01'
|
||||
this.endDateStr = year+'-'+(month>9?month:('0'+month))+'-'+lastDay
|
||||
this.getTimelineData()
|
||||
}
|
||||
},
|
||||
monthChange(e)
|
||||
{
|
||||
let currentDate = new Date();
|
||||
//当前年份
|
||||
let currentYear = currentDate.getFullYear()
|
||||
//选中年月
|
||||
let yearMonth = e.detail.value
|
||||
let selectYear = parseInt(yearMonth.split('-')[0])
|
||||
let selectMonth = parseInt(yearMonth.split('-')[1])
|
||||
this.selectMonthIndex = (selectYear - (currentYear - 20))*12+selectMonth-1
|
||||
this.selectMonth = selectYear+'年'+selectMonth+'月'
|
||||
this.startDateStr = selectYear+'-'+(selectMonth>9?selectMonth:('0'+selectMonth))+'-'+'01'
|
||||
let lastDayOfMonth = new Date(selectYear, selectMonth, 0);
|
||||
this.endDateStr = selectYear+'-'+(selectMonth>9?selectMonth:('0'+selectMonth))+'-'+lastDayOfMonth.getDate()
|
||||
this.getTimelineData()
|
||||
},
|
||||
/**
|
||||
* 点击选择开始日期和结束日期
|
||||
* @param {Object} item
|
||||
*/
|
||||
clickSelectDate(item)
|
||||
{
|
||||
if (this.selectDateStr!=item.date){
|
||||
this.selectDateStr = item.date
|
||||
this.chgStockData = item
|
||||
this.getNewsData()
|
||||
this.getReportData()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取时间序列数据
|
||||
*/
|
||||
getTimelineData()
|
||||
{
|
||||
let param = {start_date:this.startDateStr,end_date:this.endDateStr}
|
||||
priceTimeline(this.conceptId,param).then(res=>{
|
||||
if(res.timeseries)
|
||||
{
|
||||
this.conceptName = res.concept_name
|
||||
let timeseries = res.timeseries
|
||||
let monthList = this.monthDateList[this.selectMonthIndex]
|
||||
for (let item of monthList) {
|
||||
for (let item1 of timeseries) {
|
||||
if (item.date==item1.trade_date) {
|
||||
item.avg_change_pct = item1.avg_change_pct
|
||||
item.stock_count = item1.stock_count
|
||||
if(item.date==this.selectDateStr){
|
||||
this.chgStockData = item
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.getNewsData()
|
||||
this.getReportData()
|
||||
}
|
||||
}).catch(error=>{
|
||||
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取新闻数据
|
||||
*/
|
||||
getNewsData()
|
||||
{
|
||||
let param = {query:this.conceptName,end_date:this.selectDateStr,exact_match:1,top_k:100}
|
||||
conceptNews(param).then(res=>{
|
||||
this.newsList = res
|
||||
}).catch(error=>{
|
||||
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取时间序列数据
|
||||
*/
|
||||
getReportData()
|
||||
{
|
||||
let param = {query:this.conceptName,start_date:this.selectDateStr,mode:'text',exact_match:1}
|
||||
conceptReport(param).then(res=>{
|
||||
this.reportList = res.data.results
|
||||
}).catch(error=>{
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
page
|
||||
{
|
||||
background-color: #070707;
|
||||
}
|
||||
.topBg
|
||||
{
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.timelineTitle
|
||||
{
|
||||
background-color: #FFF9F5;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 25rpx;
|
||||
padding: 30rpx 27rpx 0;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #2B2B2B;
|
||||
}
|
||||
.dateStatisticsC
|
||||
{
|
||||
background-color: #FFF9F5;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 86rpx;
|
||||
margin: 0 25rpx;
|
||||
padding: 24rpx 25rpx 0;
|
||||
border-radius: 0 0 10rpx 10rpx;
|
||||
overflow-y: scroll;
|
||||
.dateC
|
||||
{
|
||||
background-color: white;
|
||||
box-shadow: 0 5rpx 10rpx 0 rgba(127,127,127,0.1);
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx 25rpx 0;
|
||||
.yearMonthC
|
||||
{
|
||||
background-color: #F7F7F7;
|
||||
height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
.btn
|
||||
{
|
||||
padding: 0 52rpx;
|
||||
.icon
|
||||
{
|
||||
width: 13rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
.yearMonth
|
||||
{
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #070707;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.weekList
|
||||
{
|
||||
.item
|
||||
{
|
||||
margin-right: 13rpx;
|
||||
line-height: 72rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #A7A7A7;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.monthDateList
|
||||
{
|
||||
.item
|
||||
{
|
||||
margin-bottom: 12rpx;
|
||||
width: calc(100%/7);
|
||||
.date
|
||||
{
|
||||
background-color: #f8f8f8;
|
||||
padding: 4rpx 0;
|
||||
width: calc(100% - 10rpx);
|
||||
height: 72rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #2A2A2A;
|
||||
text-align: center;
|
||||
.chg
|
||||
{
|
||||
font-size: 18rpx;
|
||||
}
|
||||
.chg.up
|
||||
{
|
||||
color: #EC3440;
|
||||
}
|
||||
.chg.down
|
||||
{
|
||||
color: #38A169;
|
||||
}
|
||||
}
|
||||
.date.up
|
||||
{
|
||||
background-color: #FFD6D9;
|
||||
}
|
||||
.date.down
|
||||
{
|
||||
background-color: #CEF1DE;
|
||||
}
|
||||
.date.select.up
|
||||
{
|
||||
background-color: #EC3440;
|
||||
color: white;
|
||||
.chg
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.date.select.down
|
||||
{
|
||||
background-color: #38A169;
|
||||
color: white;
|
||||
.chg
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.date.notCurrentMonth
|
||||
{
|
||||
background-color: #FCFCFC;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.statisticsC
|
||||
{
|
||||
background-color: white;
|
||||
margin-top: 20rpx;
|
||||
padding: 28rpx 20rpx 0;
|
||||
border-radius: 10rpx;
|
||||
.date
|
||||
{
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
.chgStockNumC
|
||||
{
|
||||
margin-top: 36rpx;
|
||||
padding: 0 13rpx 28rpx;
|
||||
border-bottom: solid 1rpx #EDEDED;
|
||||
font-size: 26rpx;
|
||||
.title
|
||||
{
|
||||
margin-right: 18rpx;
|
||||
font-weight: 500;
|
||||
color: #94979C;
|
||||
}
|
||||
.chgC
|
||||
{
|
||||
.icon
|
||||
{
|
||||
margin-right: 9rpx;
|
||||
width: 17rpx;
|
||||
height: auto;
|
||||
}
|
||||
.chg
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
.chg.up
|
||||
{
|
||||
color: #EC3440;
|
||||
}
|
||||
.chg.down
|
||||
{
|
||||
color: #38A169;
|
||||
}
|
||||
}
|
||||
.stockNum
|
||||
{
|
||||
font-weight: bold;
|
||||
color: #070707;
|
||||
}
|
||||
}
|
||||
.newsReportC
|
||||
{
|
||||
padding-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
.icon
|
||||
{
|
||||
margin-right: 20rpx;
|
||||
width: 24rpx;
|
||||
height: auto;
|
||||
}
|
||||
.news
|
||||
{
|
||||
color: #FF7723;
|
||||
}
|
||||
.report
|
||||
{
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.list
|
||||
{
|
||||
.item
|
||||
{
|
||||
padding: 30rpx 0;
|
||||
border-bottom: solid 1rpx #EDEDED;
|
||||
.type
|
||||
{
|
||||
margin-right: 18rpx;
|
||||
padding: 0 9rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 5rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.type.news
|
||||
{
|
||||
background-color: #F2C367;
|
||||
color: #070707;
|
||||
}
|
||||
.type.report
|
||||
{
|
||||
background-color: #3D3F3C;
|
||||
color: #F2C367;
|
||||
}
|
||||
.title
|
||||
{
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #070707;
|
||||
}
|
||||
.content
|
||||
{
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,614 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<navBar leftText="热门个股" :hideNavBg="true"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
||||
<view class="titleScreenC fixed flex" :style="'top:'+navH+'px;'">
|
||||
<view class="title flex1">{{conceptName}} - 相关个股</view>
|
||||
<view class="screenC flex" @click="clickDateScreen()">
|
||||
<view>时间筛选</view>
|
||||
<image class="arrow" src="/static/icon/home/conceptCenter/timeScreenArrow.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view direction="vertical" class="stockList fixed" :style="'top:'+listTop+'px;'">
|
||||
<view class="list">
|
||||
<view class="item" v-for="(item,index) in stockList" :key="index">
|
||||
<view class="stockInfoC flex" @click="clickExpandOrRetract(index)">
|
||||
<view class="titleCodeC">
|
||||
<view class="title">{{item.stock_name}}</view>
|
||||
<view class="code">{{item.stock_code}}</view>
|
||||
</view>
|
||||
<view class="chg flex1">+4.04%</view>
|
||||
<view class="industry flex1">食品行业</view>
|
||||
<view class="reasonProjectC flex">
|
||||
<view>REASON/项目</view>
|
||||
<image v-if="item.isExpand" class="arrow expand" src="/static/icon/home/conceptCenter/reasonExpand.png" mode="widthFix"></image>
|
||||
<image v-else class="arrow" src="/static/icon/home/conceptCenter/reasonRetract.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.isExpand" class="reasonProjectContentC">
|
||||
<view class="reasonC">
|
||||
<text class="title">REASON：</text>
|
||||
<text>{{item.reason}}</text>
|
||||
</view>
|
||||
<view class="projectC">
|
||||
<text class="title">项目：</text>
|
||||
<text>已进入芥末味夏威夷果仁/黑金蒜香茉莉翡翠豆两款产品</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<uni-popup ref="datePopup" type="bottom" :safeArea="false">
|
||||
<view class="datePopup">
|
||||
<view class="btnTitleC flex">
|
||||
<view class="btn cancel" @click="clickCancel()">取消</view>
|
||||
<view class="title flex1">交易日期</view>
|
||||
<view class="btn confirm" @click="clickConfirm()">确认</view>
|
||||
</view>
|
||||
<view class="yearMonthC flex">
|
||||
<view class="btn" @click="clickPreMonth()">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/pre.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="yearMonth flex1">
|
||||
<picker mode="date" fields="month" @change="monthChange">
|
||||
<view>{{selectMonth}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="btn" @click="clickNextMonth()">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/next.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="weekList flex">
|
||||
<view class="item flex1" v-for="(item,index) in weekList" :key="index">{{item}}</view>
|
||||
</view>
|
||||
<view class="monthDateList flexWrap">
|
||||
<view class="item flexColumnCenter" v-for="(item,index) in monthDateList[selectMonthIndex]" :key="index" @click="clickSelectDate(item)">
|
||||
<block v-if="item.date==selectDateStr">
|
||||
<view class="date select">{{item.day}}</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<block v-if="!item.isCurrentMonth">
|
||||
<view class="date notCurrentMonth">{{item.day}}</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="date">{{item.day}}</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="quickTimeC flexCenter">
|
||||
<view class="item" v-for="(item,index) in quickTimeList" :key="index" @click="clickQuickTimeItem(index)">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue';
|
||||
import { conceptDetails } from '@/request/api';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navH:inject('navHeight'),
|
||||
listTop:'',
|
||||
conceptId:'', //概念id
|
||||
conceptName:'', //概念名称
|
||||
weekList:['一','二','三','四','五','六','日'],
|
||||
monthDateList:[],
|
||||
selectMonthIndex:0, //选中月份下标
|
||||
selectMonth:'', //选中年月
|
||||
selectDateStr:'', //交易日期选中日期
|
||||
quickTimeList:['今天','昨天','一周前','一月前'],
|
||||
stockList:[], //个股列表
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.listTop = this.navH+(46+22)/750*inject('windowWidth')
|
||||
let currentDate = new Date();
|
||||
// 获取当前年份
|
||||
let currentYear = currentDate.getFullYear();
|
||||
let currentMonth = currentDate.getMonth()+1;
|
||||
let currentDay = currentDate.getDate();
|
||||
this.selectMonthIndex = 20*12+currentMonth-1
|
||||
this.selectMonth = currentYear+'年'+currentMonth+'月'
|
||||
this.selectDateStr = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
|
||||
this.generateMonthDateListData()
|
||||
if (e.id) {
|
||||
this.conceptId = e.id
|
||||
this.getConceptHotStockData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 生成日历数据
|
||||
*/
|
||||
generateMonthDateListData()
|
||||
{
|
||||
let currentDate = new Date();
|
||||
// 获取当前年份
|
||||
let currentYear = currentDate.getFullYear();
|
||||
let currentMonth = currentDate.getMonth()+1;
|
||||
let currentDay = currentDate.getDate();
|
||||
let monthDateList = []
|
||||
for (var i = currentYear-20; i < currentYear+20; i++) {
|
||||
for (var j = 0; j < 12; j++) {
|
||||
let date = new Date(i,j+1,0)
|
||||
let firstDayOfMonth = new Date(i,j+1,0);
|
||||
firstDayOfMonth.setDate(1);
|
||||
//获取当前月天数
|
||||
let currentMonthDay = date.getDate()
|
||||
let firstDayWeek = firstDayOfMonth.getDay() || 7
|
||||
let daysOfMonth = []
|
||||
for (var k = 1; k <= currentMonthDay; k++) {
|
||||
let newDate = new Date(i,j+1,0)
|
||||
newDate.setDate(k); // 设置日期为当前月的相应日期
|
||||
let newMonth = newDate.getMonth()+1
|
||||
let newDay = newDate.getDate()
|
||||
let time = newDate.getTime()
|
||||
let date = i+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||||
daysOfMonth.push({date:date,year:i,month:newMonth,day:newDay,isToday:(i==currentYear&&newMonth==currentMonth&&newDay==currentDay)?true:false,isCurrentMonth:true,timestamp:time});
|
||||
}
|
||||
for (var k = 0; k < firstDayWeek-1; k++) {
|
||||
//获取上月天数
|
||||
let year = i
|
||||
let month = j
|
||||
if(j<1)
|
||||
{
|
||||
year = i - 1
|
||||
month = 12
|
||||
}
|
||||
let lastMonthDay = new Date(year, month, 0).getDate()
|
||||
//获取上月日期
|
||||
let newDate = new Date(year,month-1,lastMonthDay-k)
|
||||
let newMonth = newDate.getMonth()+1
|
||||
let newDay = newDate.getDate()
|
||||
let time = newDate.getTime()
|
||||
let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||||
daysOfMonth.unshift({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,timestamp:time});
|
||||
}
|
||||
// 下一个月的第一天
|
||||
let nextMonthFirstDay = new Date(i, j+1, 1);
|
||||
// 然后减去一天就是当前月的最后一天
|
||||
let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
|
||||
let lastDayWeek = lastDayOfMonth.getDay() || 7; // 返回0（星期天）到6（星期六）之
|
||||
for (var k = 1; k < 8-lastDayWeek; k++) {
|
||||
let year = i
|
||||
let month = j
|
||||
if(month>11)
|
||||
{
|
||||
month = 0
|
||||
year ++
|
||||
}
|
||||
//获取下月日期
|
||||
let newDate = new Date(year,month + 1,k)
|
||||
let newMonth = newDate.getMonth()+1
|
||||
let newDay = newDate.getDate()
|
||||
let time = newDate.getTime()
|
||||
let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||||
daysOfMonth.push({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,timestamp:time});
|
||||
}
|
||||
monthDateList.push(daysOfMonth)
|
||||
}
|
||||
}
|
||||
this.monthDateList = monthDateList
|
||||
},
|
||||
/**
|
||||
* 点击时间筛选
|
||||
*/
|
||||
clickDateScreen()
|
||||
{
|
||||
this.$refs['datePopup'].open()
|
||||
},
|
||||
/**
|
||||
* 点击展开或收起
|
||||
* @param {Object} index
|
||||
*/
|
||||
clickExpandOrRetract(index)
|
||||
{
|
||||
this.stockList[index].isExpand = !this.stockList[index].isExpand
|
||||
},
|
||||
/**
|
||||
* 点击取消
|
||||
*/
|
||||
clickCancel()
|
||||
{
|
||||
this.$refs["datePopup"].close()
|
||||
},
|
||||
/**
|
||||
* 点击确认
|
||||
*/
|
||||
clickConfirm()
|
||||
{
|
||||
this.clickCancel()
|
||||
this.getConceptHotStockData()
|
||||
},
|
||||
/**
|
||||
* 点击上个月
|
||||
*/
|
||||
clickPreMonth()
|
||||
{
|
||||
if(this.selectMonthIndex>0)
|
||||
{
|
||||
this.selectMonthIndex --
|
||||
let monthList = this.monthDateList[this.selectMonthIndex]
|
||||
let year = ''
|
||||
let month = ''
|
||||
for (let item of monthList) {
|
||||
if(item.isCurrentMonth)
|
||||
{
|
||||
year = item.year
|
||||
month = item.month
|
||||
break
|
||||
}
|
||||
}
|
||||
this.selectMonth = year+'年'+month+'月'
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 点击下个月
|
||||
*/
|
||||
clickNextMonth()
|
||||
{
|
||||
if(this.selectMonthIndex<this.monthDateList.length-1)
|
||||
{
|
||||
this.selectMonthIndex ++
|
||||
let monthList = this.monthDateList[this.selectMonthIndex]
|
||||
let year = ''
|
||||
let month = ''
|
||||
for (let item of monthList) {
|
||||
if(item.isCurrentMonth)
|
||||
{
|
||||
year = item.year
|
||||
month = item.month
|
||||
break
|
||||
}
|
||||
}
|
||||
this.selectMonth = year+'年'+month+'月'
|
||||
}
|
||||
},
|
||||
monthChange(e)
|
||||
{
|
||||
let currentDate = new Date();
|
||||
//当前年份
|
||||
let currentYear = currentDate.getFullYear()
|
||||
//选中年月
|
||||
let yearMonth = e.detail.value
|
||||
let selectYear = parseInt(yearMonth.split('-')[0])
|
||||
let selectMonth = parseInt(yearMonth.split('-')[1])
|
||||
this.selectMonthIndex = (selectYear - (currentYear - 20))*12+selectMonth-1
|
||||
this.selectMonth = selectYear+'年'+selectMonth+'月'
|
||||
},
|
||||
/**
|
||||
* 点击选择开始日期和结束日期
|
||||
* @param {Object} item
|
||||
*/
|
||||
clickSelectDate(item)
|
||||
{
|
||||
if (this.selectDateStr!=item.date){
|
||||
this.selectDateStr = item.date
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 点击快捷时间选择
|
||||
*/
|
||||
clickQuickTimeItem(index)
|
||||
{
|
||||
let currentDate = new Date();
|
||||
let currentYear = currentDate.getFullYear();
|
||||
if (index==0) {
|
||||
//今天
|
||||
let currentMonth = currentDate.getMonth()+1;
|
||||
let currentDay = currentDate.getDate();
|
||||
this.selectMonthIndex = 20*12+currentMonth-1
|
||||
this.selectMonth = currentYear+'年'+currentMonth+'月'
|
||||
this.selectDateStr = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
|
||||
|
||||
}else if (index==1) {
|
||||
//昨天
|
||||
let yesterday = new Date(currentDate)
|
||||
yesterday.setDate(yesterday.getDate()-1)
|
||||
let yesterdayYear = yesterday.getFullYear();
|
||||
let yesterdayMonth = yesterday.getMonth()+1;
|
||||
let yesterdayDay = yesterday.getDate();
|
||||
this.selectMonthIndex = (20 - (currentYear-yesterdayYear))*12+yesterdayMonth-1
|
||||
this.selectMonth = yesterdayYear+'年'+yesterdayMonth+'月'
|
||||
this.selectDateStr = yesterdayYear+'-'+(yesterdayMonth>9?yesterdayMonth:('0'+yesterdayMonth))+'-'+(yesterdayDay>9?yesterdayDay:('0'+yesterdayDay))
|
||||
|
||||
}else if (index==2) {
|
||||
//一周前
|
||||
let weekAgo = new Date(currentDate)
|
||||
weekAgo.setDate(weekAgo.getDate()-7)
|
||||
let weekAgoYear = weekAgo.getFullYear();
|
||||
let weekAgoMonth = weekAgo.getMonth()+1;
|
||||
let weekAgoDay = weekAgo.getDate();
|
||||
this.selectMonthIndex = (20 - (currentYear-weekAgoYear))*12+weekAgoMonth-1
|
||||
this.selectMonth = weekAgoYear+'年'+weekAgoMonth+'月'
|
||||
this.selectDateStr = weekAgoYear+'-'+(weekAgoMonth>9?weekAgoMonth:('0'+weekAgoMonth))+'-'+(weekAgoDay>9?weekAgoDay:('0'+weekAgoDay))
|
||||
}else
|
||||
{
|
||||
//一月前
|
||||
let monthAgo = new Date(currentDate)
|
||||
monthAgo.setDate(monthAgo.getDate()-30)
|
||||
let monthAgoYear = monthAgo.getFullYear();
|
||||
let monthAgoMonth = monthAgo.getMonth()+1;
|
||||
let monthAgoDay = monthAgo.getDate();
|
||||
this.selectMonthIndex = (20 - (currentYear-monthAgoYear))*12+monthAgoMonth-1
|
||||
this.selectMonth = monthAgoYear+'年'+monthAgoMonth+'月'
|
||||
this.selectDateStr = monthAgoYear+'-'+(monthAgoMonth>9?monthAgoMonth:('0'+monthAgoMonth))+'-'+(monthAgoDay>9?monthAgoDay:('0'+monthAgoDay))
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取概念相关个股数据
|
||||
*/
|
||||
getConceptHotStockData()
|
||||
{
|
||||
let params = {trade_date:this.selectDateStr}
|
||||
conceptDetails(this.conceptId,params).then(res=>{
|
||||
this.conceptName = res.concept
|
||||
this.stockList = res.stocks
|
||||
}).catch(error=>{
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
page
|
||||
{
|
||||
background-color: #070707;
|
||||
}
|
||||
.topBg
|
||||
{
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.titleScreenC
|
||||
{
|
||||
background-color: #FFF9F5;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 25rpx;
|
||||
padding: 22rpx 25rpx 0;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
.title
|
||||
{
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #2B2B2B;
|
||||
}
|
||||
.screenC
|
||||
{
|
||||
padding: 0 20rpx;
|
||||
line-height: 42rpx;
|
||||
border-radius: 23rpx;
|
||||
border: solid 2rpx #F3C368;
|
||||
font-size: 22rpx;
|
||||
color: #E3AA3D;
|
||||
.arrow
|
||||
{
|
||||
margin-left: 7rpx;
|
||||
width: 12rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.stockList
|
||||
{
|
||||
background-color: #FFF9F5;
|
||||
left: 0;
|
||||
width: calc(100% - 50rpx);
|
||||
bottom: 62rpx;
|
||||
margin: 0 25rpx;
|
||||
border-radius: 0 0 10rpx 10rpx ;
|
||||
.list
|
||||
{
|
||||
padding: 16rpx 25rpx;
|
||||
.item
|
||||
{
|
||||
background-color: white;
|
||||
box-shadow: 0 5rpx 10rpx 0 rgba(127,127,127,0.08);
|
||||
margin-bottom: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
.stockInfoC
|
||||
{
|
||||
padding: 16rpx 0;
|
||||
.titleCodeC
|
||||
{
|
||||
.title
|
||||
{
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
.code
|
||||
{
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
.chg
|
||||
{
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.chg.up
|
||||
{
|
||||
color: #EC3440;
|
||||
}
|
||||
.chg.down
|
||||
{
|
||||
color: #38A169;
|
||||
}
|
||||
.industry
|
||||
{
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
.reasonProjectC
|
||||
{
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #DA9000;
|
||||
.arrow
|
||||
{
|
||||
margin-left: 10rpx;
|
||||
width: 10rpx;
|
||||
height: auto;
|
||||
}
|
||||
.arrow.expand
|
||||
{
|
||||
margin-left: 6rpx;
|
||||
width: 14rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reasonProjectContentC
|
||||
{
|
||||
margin: 0 5rpx;
|
||||
border-top: solid 1rpx #F0F0F0;
|
||||
padding: 12rpx 9rpx 22rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
.title
|
||||
{
|
||||
color: #DA9000;
|
||||
}
|
||||
.projectC
|
||||
{
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.datePopup
|
||||
{
|
||||
background-color: white;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
.btnTitleC
|
||||
{
|
||||
.btn
|
||||
{
|
||||
padding: 20rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn.cancel
|
||||
{
|
||||
color: #727A8E;
|
||||
}
|
||||
.btn.confirm
|
||||
{
|
||||
color: #D79412;
|
||||
}
|
||||
.title
|
||||
{
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.yearMonthC
|
||||
{
|
||||
background-color: #F7F7F7;
|
||||
margin: 0 25rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
.btn
|
||||
{
|
||||
padding: 0 52rpx;
|
||||
.icon
|
||||
{
|
||||
width: 13rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
.yearMonth
|
||||
{
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #070707;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.weekList
|
||||
{
|
||||
padding: 0 38rpx;
|
||||
.item
|
||||
{
|
||||
margin-right: 13rpx;
|
||||
line-height: 72rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #A7A7A7;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.monthDateList
|
||||
{
|
||||
padding: 0 38rpx;
|
||||
.item
|
||||
{
|
||||
margin-bottom: 12rpx;
|
||||
width: calc(100%/7);
|
||||
.date
|
||||
{
|
||||
background-color: #f8f8f8;
|
||||
width: calc(100% - 10rpx);
|
||||
line-height: 64rpx;
|
||||
border-radius: 15rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #2A2A2A;
|
||||
text-align: center;
|
||||
}
|
||||
.date.select
|
||||
{
|
||||
background-color: #F2C367;
|
||||
color: white;
|
||||
}
|
||||
.date.notCurrentMonth
|
||||
{
|
||||
background-color: #FCFCFC;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.quickTimeC
|
||||
{
|
||||
margin-top: 16rpx;
|
||||
.item
|
||||
{
|
||||
margin-right: 25rpx;
|
||||
width: 120rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 30rpx;
|
||||
border: solid 2rpx #4E4E4E;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #4E4E4E;
|
||||
text-align: center;
|
||||
}
|
||||
.item:last-child
|
||||
{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<view>
|
||||
<navBar :leftText="navTitle"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||
<view v-if="type==1" 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>
|
||||
<navBar :leftText="navTitle" :hideNavBg="true"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
||||
<view class="chartDesC relative" :style="'margin-top:'+contentTop+'px;'">
|
||||
<view v-if="type==1" class="tabC" >
|
||||
<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>
|
||||
<view :class="'contentC fixed '+(type==2?'radius':'')" :style="'top:'+contentTop+'px;'">
|
||||
<view v-if="type==1&&tradeData" class="volumeAmountC flex">
|
||||
<text class="volume">成交量：{{tradeData.volume}}</text>
|
||||
<text class="amount">成交金额：{{tradeData.amount}}</text>
|
||||
</view>
|
||||
<view v-if="type==1" style="width:750rpx; height:400rpx">
|
||||
<view v-if="type==1" style="width:700rpx; height:400rpx">
|
||||
<l-echart ref="chartRef"></l-echart>
|
||||
</view>
|
||||
<view class="section">关联描述</view>
|
||||
@@ -21,7 +21,10 @@
|
||||
<view class="riskTips">
|
||||
【风险提示：解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息，团队辛苦编写，未经许可严禁转载。本产品内容内容均不构成投资建议，请投资者注意风险，独立审慎决策。】
|
||||
</view>
|
||||
<view v-if="type==1&&sourceList.length>0" class="section">信息来源</view>
|
||||
</view>
|
||||
|
||||
<view v-if="type==1&&sourceList.length>0" class="infoSourceC">
|
||||
<view class="section">信息来源</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="(item,index) in sourceList" :key="index">
|
||||
<view class="content">{{item.sentences}}</view>
|
||||
@@ -200,7 +203,7 @@
|
||||
if(e.type==1)
|
||||
{
|
||||
//事件详情
|
||||
this.contentTop = this.navH+(60+8)/750*inject('windowWidth')
|
||||
this.contentTop = this.navH+20/750*inject('windowWidth')
|
||||
this.eventId = e.id
|
||||
this.stockCode = e.code
|
||||
this.getStockDetailsData()
|
||||
@@ -397,6 +400,10 @@
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
page
|
||||
{
|
||||
background-color: #070707;
|
||||
}
|
||||
.topBg
|
||||
{
|
||||
top: 0;
|
||||
@@ -404,54 +411,49 @@
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.tabC
|
||||
.chartDesC
|
||||
{
|
||||
background-color: white;
|
||||
margin-top: 10rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
.item
|
||||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||||
margin: 0 25rpx;
|
||||
padding-top: 10rpx;
|
||||
border-radius: 10rpx;
|
||||
.tabC
|
||||
{
|
||||
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
|
||||
.item
|
||||
{
|
||||
background-color: #F97316;
|
||||
left: calc((100% - 50rpx)/2);
|
||||
bottom: 0;
|
||||
width: 50rpx;
|
||||
height: 2rpx;
|
||||
display: inline-block;
|
||||
padding: 0 25rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #42485B;
|
||||
}
|
||||
.item.select
|
||||
{
|
||||
font-weight: bold;
|
||||
color: #F3C368;
|
||||
.line
|
||||
{
|
||||
background-color: #F3C368;
|
||||
left: calc((100% - 50rpx)/2);
|
||||
bottom: 0;
|
||||
width: 50rpx;
|
||||
height: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentC
|
||||
{
|
||||
background-color: white;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
.volumeAmountC {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
padding: 25rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
.volume {
|
||||
margin-right: 20rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
.section
|
||||
.section
|
||||
{
|
||||
padding: 0 28rpx;
|
||||
padding: 0 25rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
@@ -466,24 +468,35 @@
|
||||
color: #666;
|
||||
.ai
|
||||
{
|
||||
color: #C00000;
|
||||
color: #EC3440;
|
||||
}
|
||||
}
|
||||
.riskTips
|
||||
{
|
||||
margin: 20rpx 25rpx 0;
|
||||
padding-bottom: 30rpx;
|
||||
line-height: 1.4rem;
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
border-bottom: solid 1rpx #E4E4E4;
|
||||
line-height: 1.2rem;
|
||||
font-size: 22rpx;
|
||||
color: #A2A2A1;
|
||||
}
|
||||
.list
|
||||
}
|
||||
|
||||
.infoSourceC
|
||||
{
|
||||
.section
|
||||
{
|
||||
padding: 0 25rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 27rpx;
|
||||
font-weight: bold;
|
||||
color: #F3C368;
|
||||
}
|
||||
.list
|
||||
{
|
||||
padding: 0 25rpx;
|
||||
.item
|
||||
{
|
||||
background-color: #F8F8F8;
|
||||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||||
margin-bottom: 20rpx;
|
||||
padding: 30rpx 26rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
Reference in New Issue
Block a user