Files
JiaZhiQianYan/pages/index/index.vue

1827 lines
47 KiB
Vue

<template>
<view>
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
<navBar leftText="事件中心" :hideNavBg="true" :hideBack="true"></navBar>
<view class="topC fixed" :style="'top:'+navH+'px;'">
<view class="searchC flex" >
<image class="icon" src="/static/icon/home/conceptCenter/search.png" mode="widthFix"></image>
<input class="flex1" type="text" v-model="keywords" placeholder="搜索股票/话题..." placeholder-style="color:#eeeeee"/>
</view>
<view class="screenC flex">
<block v-for="(item,index) in screenCategoryList" :key="index">
<view :class="'item flex '+(index==2?'level':'')" @click="clickScreenItem(index)">
<image class="icon" :src="item.icon" mode="widthFix"></image>
<view>{{item.title}}</view>
<image class="arrow" src="/static/icon/home/conceptCenter/conceptScreenArrow.png" mode="widthFix"></image>
</view>
<view v-if="index<screenCategoryList.length-1" class="flex1"></view>
</block>
</view>
<view class="timeCategoryC">
<view :class="'item '+(selectTimeCategory==index?'select':'')" v-for="(item,index) in timeCategoryList" :key="index" @click="clickTimeCategoryItem(index)">{{item.name}}</view>
</view>
<scroll-view scroll-x :scroll-left="topScrollLeft" class="topCategoryC" id="topCategory">
<view :class="'item relative '+(selectTopCategory==index?'select':'')" v-for="(item,index) in stockCategoryList" :key="index" @click="clickTopCategoryItem($event,index)">
{{item.primary_sector}}
<view class="line absolute"></view>
</view>
</scroll-view>
<!-- <scroll-view v-if="stockCategoryList.length>0&&stockCategoryList[selectTopCategory].sub_sectors.length>0" scroll-x :scroll-left="secondScrollLeft" class="secondCategoryC" id="secondCategory">
<view :class="'item '+(selectSecondCategory==index?'select':'')" v-for="(item,index) in stockCategoryList[selectTopCategory].sub_sectors" :key="index" @click="clickSecondCategoryItem($event,index)">
{{item}}
</view>
</scroll-view> -->
</view>
<scroll-view scroll-y class="eventListC fixed" :style="'top:'+listTop+'px'" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="pullDownRefresh()" @scrolltolower="loadMoreData()">
<!-- <view style="width:750rpx; height:400rpx">
<l-echart ref="chartRef"></l-echart>
</view> -->
<view class="list">
<view class="item" @click="clickEventItem(item.id)" v-for="(item,index) in eventList" :key="index">
<view class="levelTitleC flex">
<view :class="'level '+item.importance">{{item.importance}}</view>
<view class="title flex1">{{item.title}}</view>
</view>
<view :class="'content '+(item.isExpand?'':'retract')" @click.stop="clickExpandOrRetract(index)">{{item.description}}</view>
<scroll-view scroll-x class="increaseRateList">
<view :class="'rateItem '+(getRateUpOrDown(item.related_avg_chg)?'down':'up')">
平均涨幅:
<image v-if="getRateUpOrDown(item.related_avg_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
{{getRateStr(item.related_avg_chg)}}%
</view>
<view :class="'rateItem '+(getRateUpOrDown(item.related_max_chg)?'down':'up')">
最大涨幅:
<image v-if="getRateUpOrDown(item.related_max_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
{{getRateStr(item.related_max_chg)}}%
</view>
<view :class="'rateItem '+(getRateUpOrDown(item.related_week_chg)?'down':'up')">
周涨幅:
<image v-if="getRateUpOrDown(item.related_week_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
{{getRateStr(item.related_week_chg)}}%
</view>
</scroll-view>
<!-- <scroll-view scroll-x class="stockList">
<view class="stockItem" v-for="(sitem,sindex) in item.related_stocks" :key="sindex" @click.stop="clickLookRelatedStockItem(item.id,sitem.stock_code)">{{sitem.stock_name}} <text :class="'change '+(getRateUpOrDown(sitem.daily_change)?'down':'up')">{{(getRateUpOrDown(sitem.daily_change)?'':'+')+sitem.daily_change}}%</text></view>
</scroll-view> -->
<view class="timeToolBarC flex">
<view class="time flex1">{{getLocaleTime(item.created_at)}}</view>
<view class="toolBarC flex">
<view class="toolItem flex">
<image class="icon" src="/static/icon/home/browser.png" mode="widthFix"></image>
<text>{{item.view_count}}</text>
</view>
<view class="toolItem flex">
<image class="icon" src="/static/icon/home/comment.png" mode="widthFix"></image>
<text>{{item.post_count}}</text>
</view>
<view class="toolItem flex" @click.stop="clickFollowEvent(item.id)">
<image class="icon" src="/static/icon/home/follow.png" mode="widthFix"></image>
<text>{{item.follower_count}}</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<uni-popup ref="screenPopup" type="top">
<view class="screenPopup" :style="'padding-top:'+menuTop+'px;'">
<view class="navC flex" :style="'height:'+menuH+'px;'">
<image class="icon" src="/static/icon/backBlack.png" mode="widthFix"></image>
<view class="title">筛选</view>
</view>
<view class="screenC flex">
<block v-for="(item,index) in screenCategoryList" :key="index">
<view :class="'item flex '+(index==2?'level':'')" @click="clickScreenItem(index)">
<image class="icon" :src="item.icon" mode="widthFix"></image>
<view>{{item.title}}</view>
<image class="arrow" src="/static/icon/home/conceptCenter/conceptScreenArrow.png" mode="widthFix"></image>
</view>
<view v-if="index<screenCategoryList.length-1" class="flex1"></view>
</block>
</view>
<block v-if="selectScreenCategory==0">
<!-- <view class="quickTimeC flexWrap">
<view :class="'item '+(selectQuickTimeIndex==index?'select':'')" v-for="(item,index) in quickTimeList" :key="index" @click="clickQuickTimeItem(index)">
{{item}}
</view>
</view> -->
<view class="dateRangeC flex">
<view :class="'dateC start flexCenter flex1 '+(selectDateRangeIndex==0?'select':'')" @click="clickDateRangeItem(0)">
<image class="icon" src="/static/icon/home/dateRange.png" mode="widthFix"></image>
<view v-if="startDateStr">{{startDateStr}}</view>
<view v-else>请选择开始时间</view>
</view>
<view class="line"></view>
<view :class="'dateC end flexCenter flex1 '+(selectDateRangeIndex==1?'select':'')" @click="clickDateRangeItem(1)">
<image class="icon" src="/static/icon/home/dateRange.png" mode="widthFix"></image>
<view v-if="endDateStr">{{endDateStr}}</view>
<view v-else>请选择结束时间</view>
</view>
</view>
<picker-view class="dateList" indicator-style="height: 43px;" :value="selectDateRangeIndex==0?startDateValue:endDateValue" @change="dateChange">
<picker-view-column>
<view class="item" v-for="(item,index) in yearList" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in monthList" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in dayList" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in hourList" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in minuteList" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
</block>
<block v-if="selectScreenCategory==1">
<view class="industryCategoryC flexWrap">
<view :class="'item '+(selectIndustryTopCategory==index?'select':'')" v-for="(item,index) in industryCategoryList" :key="index" @click="clickIndustryTopCategoryItem(index)">
{{item.classification_name}}
</view>
</view>
<view class="industrySearchC flex">
<image class="icon" src="/static/icon/home/search.png" mode="widthFix"></image>
<input class="flex1" type="text" v-model="industryKeywords" placeholder="搜索行业" placeholder-style="color:#94989A" @input="industrySearch"/>
</view>
<view v-if="industryKeywords.length>0" class="searchResultList">
<block v-for="(item,index) in searchResultList" :key="index">
<block v-for="(sitem,sindex) in item.hierarchy" :key="sindex">
<block v-for="(titem,tindex) in sitem.level2_sectors" :key="tindex">
<block v-for="(fitem,findex) in titem.level3_sectors" :key="findex">
<view class="item" @click="clickIndustrySearchItem(fitem)">
<text :class="industryKeywords.indexOf(citem)>-1?'key':''" v-for="(citem,cindex) in (fitem.level3_sector+'/'+titem.level2_sector+'/'+sitem.level1_sector)" :key="cindex">{{citem}}</text>
</view>
</block>
</block>
</block>
</block>
</view>
<view v-else class="industryList">
<view v-if="selectIndustrySecondCategory>-1" class="selectCategoryList flexWrap">
<view v-if="selectIndustrySecondCategory>-1" class="item flex" @click="deleteIndustrySecondCategoryItem()">
{{industryCategoryList[selectIndustryTopCategory].hierarchy[selectIndustrySecondCategory].level1_sector}}
<view class="deleteC">
<image class="icon" src="/static/icon/home/delete.png"></image>
</view>
</view>
<view v-if="selectIndustryThirdCategory>-1" class="item flex" @click="deleteIndustryThirdCategoryItem()">
{{industryCategoryList[selectIndustryTopCategory].hierarchy[selectIndustrySecondCategory].level2_sectors[selectIndustryThirdCategory].level2_sector}}
<view class="deleteC">
<image class="icon" src="/static/icon/home/delete.png"></image>
</view>
</view>
<view v-if="selectIndustryForthCategory>-1" class="item flex" @click="deleteIndustryForthCategoryItem()">
{{industryCategoryList[selectIndustryTopCategory].hierarchy[selectIndustrySecondCategory].level2_sectors[selectIndustryThirdCategory].level3_sectors[selectIndustryForthCategory].level3_sector}}
<view class="deleteC">
<image class="icon" src="/static/icon/home/delete.png"></image>
</view>
</view>
</view>
<view class="list">
<view class="topCategory">{{industryCategoryList[selectIndustryTopCategory].classification_name}}</view>
<view class="secondList">
<view class="secondItem" v-for="(sitem,sindex) in industryCategoryList[selectIndustryTopCategory].hierarchy" :key="sindex">
<view :class="'categoryC flex '+(selectIndustrySecondCategory==sindex?'select':'')" @click.stop="clickIndustrySecondCategoryItem(sindex)">
<view class="spread">{{(selectIndustrySecondCategory==sindex&&sitem.isSpread)?'-':'+'}}</view>
<view class="category">{{sitem.level1_sector}}</view>
</view>
<block v-if="sitem.isSpread">
<view class="thirdList" v-for="(titem,tindex) in industryCategoryList[selectIndustryTopCategory].hierarchy[sindex].level2_sectors" :key="tindex">
<view class="thirdItem">
<view :class="'categoryC flex '+(selectIndustrySecondCategory==sindex&&selectIndustryThirdCategory==tindex?'select':'')" @click.stop="clickIndustryThirdCategoryItem(sindex,tindex)">
<view class="spread">{{(selectIndustrySecondCategory==sindex&&selectIndustryThirdCategory==tindex&&titem.isSpread)?'-':'+'}}</view>
<view class="category">{{titem.level2_sector}}</view>
</view>
<block v-if="titem.isSpread">
<view class="forthList" v-for="(fitem,findex) in industryCategoryList[selectIndustryTopCategory].hierarchy[sindex].level2_sectors[tindex].level3_sectors" :key="findex">
<view class="forthItem" @click.stop="clickIndustryForthCategoryItem(sindex,tindex,findex)">
<view :class="'categoryC flex '+(selectIndustrySecondCategory==sindex&&selectIndustryThirdCategory==tindex&&selectIndustryForthCategory==findex?'select':'')">
<view class="category flex1">{{fitem.level3_sector}}</view>
<view v-if="selectIndustrySecondCategory==sindex&&selectIndustryThirdCategory==tindex&&selectIndustryForthCategory==findex" class="selectC">
<image class="icon" src="/static/icon/home/industry_s.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
</block>
</view>
</view>
</view>
</view>
</block>
<view v-if="selectScreenCategory==2" class="importanceList">
<view :class="'item flex '+(selectImportanceIndex==index?'select':'')" v-for="(item,index) in importanceList" :key="index" @click="clickImportanceItem(index)">
<view class="flex1">{{item.name}}</view>
<image v-if="selectImportanceIndex==index" class="icon" src="/static/icon/home/level_s.png" mode="widthFix"></image>
</view>
</view>
<view v-if="selectScreenCategory==3" class="sortTypeList">
<view :class="'item flex '+(selectSortKey==item.key?'select':'')" v-for="(item,index) in sortTypeList" :key="index" @click="clickSortListItem(item)">
<image class="icon" :src="item.icon" mode="widthFix"></image>
<view>{{item.name}}</view>
</view>
</view>
<view v-if="selectScreenCategory!=3" class="btnC flex">
<view class="cancel btn flex1" @click="clickCancel()">取消</view>
<view class="certain btn flex1" @click="clickCertain()">确定</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { inject } from 'vue'
import { filterOptions, eventList, homeData, industryCategoryList, loginByEmail, followEvent, stockCategoryList } from '@/request/api'
import { getRateStr, getRateUpOrDown, getLocaleTime } from '@/utils/util.js'
const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
export default {
data() {
return {
menuTop:inject('menuTop'),
menuH: inject('menuHeight'),
navH:inject('navHeight'),
windowWidth:inject('windowWidth'),
contentTop:'',
listTop:'',
screenCategoryList:[{
icon:'/static/icon/home/timeScreen.png',
title:'时间筛选',
},
{
icon:'/static/icon/home/industryScreen.png',
title:'行业筛选',
},
{
icon:'/static/icon/home/eventLevel.png',
title:'事件等级',
},
{
icon:'/static/icon/home/sort.png',
title:'最新排序',
}],
isRefreshing:false,
keywords:'', //关键词
timeCategoryList:[],
selectTimeCategory:0,
stockCategoryList:[],
topScrollWidth:0,
secondScrollWidth:0,
selectTopCategory:0,
topScrollLeft:0,
selectSecondCategory:0,
secondScrollLeft:0,
selectScreenCategory:0, //0时间筛选1行业筛选2事件等级3最新排序
quickTimeList:['最新','盘中','午盘','早盘','今日全天','昨日','近一周','近一月'],
selectQuickTimeIndex:-1,
startDateStr:'', //选择开始日期
startTimeStamp:'', //开始日期时间戳
endDateStr:'', //选择结束日期
endTimeStamp:'', //结束日期时间戳
yearList:[], //年份列表
monthList:[], //月份列表
dayList:[], //日列表
hourList:[], //时列表
minuteList:[], //分列表
selectDateRangeIndex:-1, //0开始时间1结束时间
startDateValue:[0,0,0,0,0],
endDateValue:[0,0,0,0,0],
industryCategoryList:[], //行业分类数组
industryKeywords:'', //行业分类搜索关键词
searchResultList:[], //行业分类搜索结果数组
selectIndustryTopCategory:0, //选中行业一级分类
selectIndustrySecondCategory:-1, //选中行业二级分类
selectIndustryThirdCategory:-1, //选中行业三级分类
selectIndustryForthCategory:-1, //选中行业四级分类
importanceList:[], //重要性数组
selectImportanceIndex:0, //选择事件等级下标
sortTypeList:[],
selectSortKey:'', //选中排序key
option:{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
confine: true
},
grid:{
left: '0%',
right: '0%',
top: '10%',
bottom: '20%',
},
xAxis: [
{
type: 'category',
data: ['跌停','跌停~5%','5~1%','1~0%','平盘','0~1%','1~5%','5%~涨停','涨停'],
axisTick:{
show:false
},
axisLine:{
show:false
},
axisLabel: {
fontSize:10,
interval:'0',
textStyle:{
color: function (value, index) {
return (index==0)?'#355422':(index==8?'#C00000':'#515151');
}
}
}
}
],
yAxis: [
{
type: 'value',
show:false,
axisTick: { show: false },
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
show:true,
position:'top',
fontSize:12,
},
itemStyle:{
borderRadius:[5,5,0,0]
},
data: [],
}
]
},
eventList:[],
page:1,
loadAll:false,
getRateStr:getRateStr,
getRateUpOrDown:getRateUpOrDown,
getLocaleTime:getLocaleTime,
}
},
onLoad() {
this.contentTop = this.navH + (70+74)/750*this.windowWidth
this.listTop = this.contentTop + (22+80+72)/750*this.windowWidth
this.sortListTop = this.navH + (22+80+80)/750*this.windowWidth
this.generateDateListData()
Promise.all([this.getEventFilterListData(),this.getIndustryCategoryListData(),this.getStockCategoryListData()]).then(res=>{
this.getEventListData()
}).catch(error=>{
})
},
onReady() {
uni.createSelectorQuery().select('#topCategory').boundingClientRect(rect=>{
this.topScrollWidth = Math.round(rect.width)
}).exec()
uni.createSelectorQuery().select('#secondCategory').boundingClientRect(rect=>{
if(rect)
{
this.secondScrollWidth = Math.round(rect.width)
}
}).exec()
},
methods: {
/**
* 生成日期数据
*/
generateDateListData()
{
let currentDate = new Date()
let year = currentDate.getFullYear()
let month = currentDate.getMonth()
let day = currentDate.getDate()
let hour = currentDate.getHours()
let minute = currentDate.getMinutes()
let date = new Date(year,month+1,0)
let monthDays = date.getDate()
for (var i = 2000; i < 2060; i++) {
this.yearList.push(i)
}
for (var i = 0; i < 12*60; i++) {
this.monthList.push((i%12)+1)
}
for (var i = 0; i < monthDays*60; i++) {
this.dayList.push((i%monthDays)+1)
}
for (var i = 0; i < 24*60; i++) {
this.hourList.push(i%24)
}
for (var i = 0; i < 60*60; i++) {
this.minuteList.push(i%60)
}
let that = this
setTimeout(function() {
that.startDateValue = [year-2000,month+12*30,(day-1)+monthDays*30,hour+24*30,minute+60*30]
that.endDateValue = [year-2000,month+12*30,(day-1)+monthDays*30,hour+24*30,minute+60*30]
}, 100);
},
/**
* 下拉刷新
*/
pullDownRefresh(){
this.isRefreshing = true
this.clickSearch()
},
/**
* 上拉加载
*/
loadMoreData()
{
if(!this.loadAll)
{
this.page ++
if(this.selectScreenCategory==0)
{
this.getEventListData()
}else
this.getHotEventListData()
}
},
async init() {
// chart 图表实例不能存在data里
const chart = await this.$refs.chartRef.init(echarts);
chart.setOption(this.option)
},
/**
* 点击搜索
*/
clickSearch()
{
this.page = 1
if(this.selectTimeCategory==0)
{
this.getEventListData()
}else
this.getHotEventListData()
},
/**
* 点击事件筛选
* @param {Object} index
*/
clickTimeCategoryItem(index)
{
if(this.selectTimeCategory!=index)
{
this.selectTimeCategory = index
if(index==0)
{
//最新
this.getEventListData()
}else
//热门
this.getHotEventListData()
}
},
/**
* 点击排序选项
*/
clickSortListItem(item)
{
this.selectSortKey = item.key
this.$refs['screenPopup'].close()
if(this.selectTimeCategory==0)
{
//最新
this.getEventListData()
}else
this.getHotEventListData()
},
/**
* 点击筛选
*/
clickScreenItem(index)
{
this.selectScreenCategory = index
this.$refs['screenPopup'].open()
},
/**
* 点击筛选弹窗取消
*/
clickCancel()
{
this.$refs["screenPopup"].close()
},
/**
* 点击筛选弹窗确定
*/
clickCertain()
{
if (this.selectScreenCategory==0) {
//如果是时间筛选
if(!this.startDateStr) {
uni.showToast({
title:'请选择开始时间',
icon:'none'
})
return
}
if(!this.endDateStr) {
uni.showToast({
title:'请选择结束时间',
icon:'none'
})
return
}
if (this.endTimeStamp < this.startTimeStamp)
{
uni.showToast({
title:'开始时间不能晚于结束时间',
icon:'none'
})
return
}
}
this.clickCancel()
this.clickSearch()
},
/**
* 点击筛选分类
* @param {Object} index
*/
clickScreenCategoryItem(index)
{
if(this.selectScreenCategory!=index)
{
this.selectScreenCategory = index
}
},
/**
* 点击选择一级分类
* @param {Object} index
*/
clickTopCategoryItem(event,index)
{
if(this.selectTopCategory!=index)
{
this.selectTopCategory = index
this.selectSecondCategory = 0
let offsetLeft = event.currentTarget.offsetLeft
this.topScrollLeft = offsetLeft - this.topScrollWidth/2
if(index==0)
{
this.listTop = this.contentTop + (22+80+72)/750*this.windowWidth
}else
this.listTop = this.contentTop + (22+80+72+42+42)/750*this.windowWidth
if(this.selectTimeCategory==0)
{
//最新
this.getEventListData()
}else
this.getHotEventListData()
}
},
/**
* 点击选择二级分类
* @param {Object} index
*/
clickSecondCategoryItem(event,index)
{
if(this.selectSecondCategory!=index)
{
this.selectSecondCategory = index
let offsetLeft = event.currentTarget.offsetLeft
this.secondScrollLeft = offsetLeft - this.secondScrollWidth/2
if(this.selectTimeCategory==0)
{
//最新
this.getEventListData()
}else
this.getHotEventListData()
}
},
/**
* 点击选择快捷时间
*/
clickQuickTimeItem(index)
{
this.selectDateRangeIndex = -1
if(this.selectQuickTimeIndex!=index) {
this.selectQuickTimeIndex = index
}
},
/**
* 点击选择开始时间或者结束时间
* @param {Object} index
*/
clickDateRangeItem(index)
{
this.selectQuickTimeIndex = -1
if(this.selectDateRangeIndex!=index) {
this.selectDateRangeIndex = index
}
},
/**
* 监听日期选择
* @param {Object} e
*/
dateChange(e)
{
let value = e.detail.value
if (this.selectDateRangeIndex==0) {
//开始时间
if (value[1]!=this.startDateValue[1]) {
//如果改变了月份
let year = value[0]+2000
let month = value[1]%12
let date = new Date(year,month+1,0)
let monthDays = date.getDate()
this.dayList = []
for (var i = 0; i < monthDays*60; i++) {
this.dayList.push((i%monthDays)+1)
}
}
this.startDateValue = e.detail.value
let year = value[0]+2000
let month = value[1]%12 + 1
let date = new Date(year,month,0)
let monthDays = date.getDate()
let day = value[2]%monthDays + 1
let hour = value[3]%24
let minute = value[4]%60
this.startDateStr = year+'-'+(month>9?month:('0'+month))+'-'+(day>9?day:('0'+day))+' '+(hour>9?hour:('0'+hour))+':'+(minute>9?minute:('0'+minute))
var startDateStr = this.startDateStr.replace(/-/g,'/')+':00'
this.startTimeStamp = new Date(startDateStr).getTime()
} else if (this.selectDateRangeIndex==1) {
//结束时间
if (value[1]!=this.endDateValue[1]) {
//如果改变了月份
let year = value[0]+2000
let month = value[1]%12
let date = new Date(year,month+1,0)
let monthDays = date.getDate()
this.dayList = []
for (var i = 0; i < monthDays*60; i++) {
this.dayList.push((i%monthDays)+1)
}
}
this.endDateValue = e.detail.value
let year = value[0]+2000
let month = value[1]%12 + 1
let date = new Date(year,month,0)
let monthDays = date.getDate()
let day = value[2]%monthDays + 1
let hour = value[3]%24
let minute = value[4]%60
this.endDateStr = year+'-'+(month>9?month:('0'+month))+'-'+(day>9?day:('0'+day))+' '+(hour>9?hour:('0'+hour))+':'+(minute>9?minute:('0'+minute))
var endDateStr = this.endDateStr.replace(/-/g,'/')+':00'
this.endTimeStamp = new Date(endDateStr).getTime()
}
},
/**
* 选择行业分类一级分类
*/
clickIndustryTopCategoryItem(index)
{
if(this.selectIndustryTopCategory!=index)
{
this.selectIndustryTopCategory = index
}
},
/**
* 行业分类搜索
*/
industrySearch(e)
{
let keywords = e.detail.value
this.industryKeywords = keywords
let arr = []
for (let item of this.industryCategoryList) {
let index = this.industryCategoryList.indexOf(item)
for (let item1 of item.hierarchy) {
let index1 = item.hierarchy.indexOf(item1)
let arr1 = []
if(item1.level1_sector.indexOf(keywords)>-1)
{
arr1.push(item1)
arr.push({classification_name:item.classification_name,hierarchy: arr1})
}
for (let item2 of item1.level2_sectors) {
let index2 = item1.level2_sectors.indexOf(item2)
let arr2 = []
if(item2.level2_sector.indexOf(keywords)>-1)
{
arr2.push(item2)
arr1.push({level1_sector:item1.level1_sector,level2_sectors: arr2})
arr.push({classification_name:item.classification_name,hierarchy: arr1})
}
for (let item3 of item2.level3_sectors) {
let index3 = item2.level3_sectors.indexOf(item3)
let arr3 = []
if(item3.level3_sector.indexOf(keywords)>-1)
{
item3.index = index
item3.index1 = index1
item3.index2 = index2
item3.index3 = index3
arr3.push(item3)
arr2.push({level2_sector:item2.level2_sector,level3_sectors: arr3})
arr1.push({level1_sector:item1.level1_sector,level2_sectors: arr2})
arr.push({classification_name:item.classification_name,hierarchy: arr1})
}
}
}
}
}
this.searchResultList = arr
},
/**
* 点击选择搜索结果
* @param {Object} item
*/
clickIndustrySearchItem(item)
{
this.industryKeywords = ''
this.selectIndustryTopCategory = item.index
this.selectIndustrySecondCategory = item.index1
this.selectIndustryThirdCategory = item.index2
this.selectIndustryForthCategory = item.index3
},
/**
* 选择行业分类二级分类
*/
clickIndustrySecondCategoryItem(index)
{
if(this.selectIndustrySecondCategory!=index)
{
this.selectIndustrySecondCategory = index
}
this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[index].isSpread = !this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[index].isSpread
},
/**
* 选择行业分类三级分类
*/
clickIndustryThirdCategoryItem(sindex,index)
{
if(this.selectIndustrySecondCategory!=sindex)
{
this.selectIndustrySecondCategory = sindex
}
if(this.selectIndustryThirdCategory!=index)
{
this.selectIndustryThirdCategory = index
}
this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[sindex].level2_sectors[index].isSpread = !this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[sindex].level2_sectors[index].isSpread
},
/**
* 选择行业分类四级分类
*/
clickIndustryForthCategoryItem(sindex,tindex,index)
{
if(this.selectIndustrySecondCategory!=sindex)
{
this.selectIndustrySecondCategory = sindex
}
if(this.selectIndustryThirdCategory!=tindex)
{
this.selectIndustryThirdCategory = tindex
}
if(this.selectIndustryForthCategory!=index)
{
this.selectIndustryForthCategory = index
}
},
/**
* 删除选中的行业二级分类
*/
deleteIndustrySecondCategoryItem()
{
this.selectIndustrySecondCategory = -1
this.selectIndustryThirdCategory = -1
this.selectIndustryForthCategory = -1
},
/**
* 删除选中的行业三级分类
*/
deleteIndustryThirdCategoryItem()
{
this.selectIndustryThirdCategory = -1
this.selectIndustryForthCategory = -1
},
/**
* 删除选中的行业四级分类
*/
deleteIndustryForthCategoryItem()
{
this.selectIndustryForthCategory = -1
},
/**
* 点击选择重要性
*/
clickImportanceItem(index)
{
if(this.selectImportanceIndex!=index)
{
this.selectImportanceIndex = index
}
},
/**
* 点击展开收起内容
* @param {Object} index
*/
clickExpandOrRetract(index)
{
this.eventList[index].isExpand = !this.eventList[index].isExpand
},
/**
* 点击相关股票
* @param {Object} id 事件id
* @param {Object} code 股票代码
*/
clickLookRelatedStockItem(id,code)
{
uni.navigateTo({
url:'/pages/index/stockDetails/stockDetails?type=1&code='+code+'&id='+id
})
},
/**
* 点击关注事件
* @param {Object} id
*/
clickFollowEvent(id)
{
followEvent(id).then(res=>{
uni.showToast({
title:res.message,
icon:'none'
})
this.clickSearch()
}).catch(error=>{
})
},
/**
* 查看事件详情
*/
clickEventItem(id)
{
let that = this
uni.$on('editSuccess',res=>{
that.clickSearch()
uni.$off('editSuccess')
})
uni.navigateTo({
url:'/pages/index/eventDetails/eventDetails?id='+id
})
},
/**
* 获取事件筛选项
*/
getEventFilterListData()
{
return new Promise((resolve,reject)=>{
filterOptions().then(res=>{
if(res.code==200)
{
resolve(1)
let timeList = [...res.data.sort_options]
this.timeCategoryList = timeList.splice(0,2)
let sortList = [...res.data.sort_options]
for (let item of sortList) {
if(item.name=='最新')
{
item.icon = '/static/icon/home/new.png'
}
if(item.name=='热门')
{
item.icon = '/static/icon/home/hot.png'
}
if(item.name=='收益率')
{
item.icon = '/static/icon/home/yield.png'
}
}
this.sortTypeList = res.data.sort_options.slice(0,3)
this.importanceList = res.data.importance_options
this.importanceList.unshift({desc: "全部",key: "all",name: "全部"})
}else
{
resolve(1)
uni.showToast({
title:res.message,
icon:'none'
})
}
}).catch(error=>{
reject(1)
})
})
},
/**
* 获取行业分类
*/
getIndustryCategoryListData()
{
return new Promise((resolve,reject)=>{
industryCategoryList().then(res=>{
this.industryCategoryList = res.data
resolve(1)
}).catch(error=>{
reject(1)
})
})
},
/**
* 获取股票分类
*/
getStockCategoryListData()
{
return new Promise((resolve,reject)=>{
stockCategoryList().then(res=>{
if(res.code==200)
{
for (let item of res.data) {
item.sub_sectors.unshift('全部')
}
res.data.unshift({primary_sector:'全部',sub_sectors:[]})
this.stockCategoryList = res.data
resolve(1)
}else
{
uni.showToast({
title:res.message,
icon:'none'
})
reject(1)
}
}).catch(error=>{
reject(1)
})
})
},
/**
* 获取事件列表数据
*/
getEventListData()
{
let param = {page:this.page,q:this.keywords}
if(this.selectTopCategory>0)
{
param.stock_sector = this.stockCategoryList[this.selectTopCategory].primary_sector
}
if(this.selectSecondCategory>0)
{
param.secondary_sector = this.stockCategoryList[this.selectTopCategory].sub_sectors[this.selectSecondCategory]
}
if(this.startDateStr)
{
param.start_date = this.startDateStr
}
if(this.endDateStr)
{
param.end_date = this.endDateStr
}
if(this.selectImportanceIndex>0)
{
param.importance = this.importanceList[this.selectImportanceIndex].key
}
if(this.selectSortKey)
{
param.sort = this.selectSortKey
}
if(this.selectIndustryForthCategory>-1)
{
param.industry_level = 4
param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[this.selectIndustrySecondCategory].level2_sectors[this.selectIndustryThirdCategory].level3_sectors[this.selectIndustryForthCategory].level3_sector
}else
{
if(this.selectIndustryThirdCategory>-1)
{
param.industry_level = 3
param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[this.selectIndustrySecondCategory].level2_sectors[this.selectIndustryThirdCategory].level2_sector
}else
{
if(this.selectIndustrySecondCategory>-1)
{
param.industry_level = 2
param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[this.selectIndustrySecondCategory].level1_sector
}else
{
param.industry_level = 1
param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].classification_name
}
}
}
eventList(param).then(res=>{
this.isRefreshing = false
if(res.success)
{
// let valueData = []
// let data = res.data.overall_stats.change_distribution
// valueData.push({
// value:data.limit_down,
// itemStyle: {color:'#35542266'},
// label:{
// textStyle: {color:'#35542266'},
// },
// })
// valueData.push({
// value:data.down_over_5,
// itemStyle: {color:'#35542299'},
// label:{
// textStyle: {color:'#355422'},
// },
// },)
// valueData.push({
// value:data.down_5_to_1,
// itemStyle: {color:'#355422CC'},
// label:{
// textStyle: {color:'#355422'},
// },
// })
// valueData.push({
// value:data.down_within_1,
// itemStyle: {color:'#355422'},
// label:{
// textStyle: {color:'#355422'},
// },
// })
// valueData.push({
// value:data.flat,
// itemStyle: {color:'#ACB0C0'},
// label:{
// textStyle: {color:'#666'},
// },
// },)
// valueData.push({
// value:data.up_within_1,
// itemStyle: {color:'#C00000'},
// label:{
// textStyle: {color:'#C00000'},
// },
// })
// valueData.push({
// value:data.up_1_to_5,
// itemStyle: {color:'#C00000CC'},
// label:{
// textStyle: {color:'#C00000'},
// }
// })
// valueData.push({
// value:data.up_over_5,
// itemStyle: {color:'#C0000099'},
// label:{
// textStyle: {color:'#C00000'},
// }
// })
// valueData.push({
// value:data.limit_up,
// itemStyle: {color:'#C0000066'},
// label:{
// textStyle: {color:'#C0000066'},
// }
// })
// this.option.series[0].data = valueData
// this.init()
if(this.page==1)
{
this.eventList = res.data.events
}else
this.eventList = this.eventList.concat(res.data.events)
this.loadAll = !res.data.pagination.has_next
}
}).catch(error=>{
this.isRefreshing = false
})
},
/**
* 获取热门事件数据
*/
getHotEventListData()
{
let param = {page:this.page,q:this.keywords}
if(this.selectTopCategory>0)
{
param.stock_sector = this.stockCategoryList[this.selectTopCategory].primary_sector
}
if(this.selectSecondCategory>0)
{
param.secondary_sector = this.stockCategoryList[this.selectTopCategory].sub_sectors[this.selectSecondCategory]
}
if(this.startDateStr)
{
param.start_date = this.startDateStr
}
if(this.endDateStr)
{
param.end_date = this.endDateStr
}
if(this.selectImportanceIndex>0)
{
param.importance = this.importanceList[this.selectImportanceIndex].key
}
if(this.selectSortKey)
{
param.sort = this.selectSortKey
}
homeData(param).then(res=>{
if(res.code==200)
{
if(this.page==1)
{
this.eventList = res.data.events
}else
this.eventList = this.eventList.concat(res.data.events)
}else
uni.showToast({
title:res.message,
icon:'none'
})
}).catch(error=>{
})
}
}
}
</script>
<style lang="less">
page
{
background-color: #070707;
}
.topBg
{
top: 0;
left: 0;
width: 100%;
height: auto;
}
.topC
{
left: 0;
right: 0;
.searchC
{
background-color: #292929B3;
margin: 20rpx 25rpx 0;
padding: 0 25rpx;
height: 70rpx;
border-radius: 35rpx;
font-size: 22rpx;
font-weight: 500;
.icon
{
margin-right: 12rpx;
width: 25rpx;
height: auto;
}
input
{
height: 100%;
}
}
.screenC
{
margin: 0 25rpx;
border-bottom: solid 1rpx #373737;
.item
{
padding: 0 8rpx;
height: 64rpx;
font-size: 24rpx;
color: #CCCDD1;
.icon
{
margin-right: 13rpx;
width: 17rpx;
height: auto;
}
.arrow
{
margin-left: 9rpx;
width: 11rpx;
height: auto;
}
}
.item:first-child
{
.icon
{
margin-right: 12rpx;
width: 20rpx;
height: auto;
}
}
.item.level
{
.icon
{
margin-right: 13rpx;
width: 16rpx;
height: auto;
}
}
}
.timeCategoryC
{
margin-top: 10rpx;
.item
{
display: inline-block;
padding: 0 26rpx;
line-height: 60rpx;
font-size: 32rpx;
color: #CCCDD1;
}
.item.select
{
font-weight: bold;
color: #F3C368;
}
}
.topCategoryC
{
white-space: nowrap;
.item
{
display: inline-block;
line-height: 72rpx;
padding: 0 28rpx;
font-size: 27rpx;
font-weight: 500;
color: #939393;
}
.item.select
{
font-weight: bold;
color: #F3C368;
.line
{
background-color: #F3C368;
left: calc((100% - 50rpx)/2);
width: 50rpx;
height: 2rpx;
bottom: 0;
}
}
}
.secondCategoryC
{
white-space: nowrap;
padding: 21rpx 20rpx;
.item
{
display: inline-block;
line-height: 44rpx;
padding: 0 11rpx;
font-size: 24rpx;
font-weight: 500;
color: #42485B;
}
.item.select
{
background-color: #FFF6F0;
color: #F97316;
border-radius: 5rpx;
}
}
}
.eventListC
{
left: 0;
right: 0;
bottom: calc(55px + env(safe-area-inset-bottom));
overflow-y: scroll;
.list
{
padding: 0 25rpx;
.item
{
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
margin-bottom: 20rpx;
padding: 30rpx 0;
border-radius: 10rpx;
.levelTitleC
{
padding: 0 18rpx 0 20rpx;
.level
{
margin-right: 18rpx;
width: 50rpx;
line-height: 40rpx;
border-radius: 10rpx;
font-size: 30rpx;
font-weight: bold;
color: white;
text-align: center;
}
.level.S
{
background-color: #CC4C02;
}
.level.A
{
background-color: #EC7014;
}
.level.B
{
background-color: #FB9A29;
}
.level.C
{
background-color: #FEC44F;
}
.title
{
font-size: 30rpx;
font-weight: bold;
color: #3D3D3D;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.content
{
margin: 20rpx 22rpx 0;
font-size: 24rpx;
font-weight: 500;
color: #71675D;
word-break: break-all;
}
.content.retract
{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
}
.increaseRateList
{
white-space: nowrap;
margin: 20rpx 22rpx 0;
.rateItem
{
display: inline-block;
margin-right: 15rpx;
line-height: 44rpx;
padding: 0 14rpx;
border-radius: 10rpx;
font-size: 22rpx;
font-weight: bold;
color: white;
.arrow
{
width: 15rpx;
height: auto;
}
}
.rateItem.up
{
background-color: #EC3440;
}
.rateItem.down
{
background-color: #355422;
}
}
.stockList
{
white-space: nowrap;
margin-top: 20rpx;
.stockItem
{
background-color: #F8F8F8;
margin-right: 21rpx;
display: inline-block;
padding: 0 20rpx;
line-height: 60rpx;
border-radius: 10rpx;
font-size: 30rpx;
font-weight: bold;
color: #222;
.change.down
{
color: #355422;
}
.change.up
{
color: #F97316;
}
}
}
.timeToolBarC
{
margin-top: 20rpx;
.time
{
margin-left: 22rpx;
font-size: 22rpx;
font-weight: 500;
color: #666;
}
.toolBarC
{
.toolItem
{
padding: 0 20rpx;
font-size: 26rpx;
font-weight: bold;
color: #666;
.icon
{
margin-right: 13rpx;
width: 29rpx;
height: auto;
}
}
.toolItem:first-child
{
.icon
{
margin-right: 15rpx;
width: 33rpx;
height: auto;
}
}
}
}
}
}
}
.screenPopup
{
background-color: white;
border-radius: 0 0 20rpx 20rpx;
overflow: hidden;
.navC
{
padding: 0 25rpx;
font-size: 36rpx;
font-weight: bold;
.icon
{
margin-right: 12rpx;
width: 32rpx;
height: auto;
}
}
.screenC
{
margin: 20rpx 25rpx 0;
border-bottom: solid 1rpx #F0F0F0;
.item
{
padding: 0 8rpx;
height: 64rpx;
font-size: 24rpx;
color: #3E3E3E;
.icon
{
margin-right: 13rpx;
width: 17rpx;
height: auto;
}
.arrow
{
margin-left: 9rpx;
width: 11rpx;
height: auto;
}
}
.item:first-child
{
.icon
{
margin-right: 12rpx;
width: 20rpx;
height: auto;
}
}
.item.level
{
.icon
{
margin-right: 13rpx;
width: 16rpx;
height: auto;
}
}
}
.quickTimeC
{
padding: 30rpx 48rpx 20rpx;
.item
{
margin: 0 32rpx 30rpx 0;
width: calc((100% - 96rpx)/4);
line-height: 58rpx;
border-radius: 30rpx;
border: solid 1rpx #4E4E4E;
font-size: 24rpx;
font-weight: 500;
color: #4E4E4E;
text-align: center;
}
.item:nth-child(4n)
{
margin-right: 0;
}
.item.select
{
border: solid 1rpx #F3C368;
color: #F3C368;
}
}
.dateRangeC
{
padding: 0 25rpx;
border-radius: 5rpx;
.dateC
{
background-color: #F7F7F7;
height: 76rpx;
border-radius: 38rpx;
font-size: 24rpx;
font-weight: 500;
color: #999;
.icon
{
margin-right: 17rpx;
width: 28rpx;
height: auto;
}
}
.dateC.select
{
border: solid 1rpx #F3C368;
color: #F3C368;
}
.line
{
background-color: #999;
margin: 0 12rpx;
width: 36rpx;
height: 2rpx;
}
}
.dateList
{
height: 430rpx;
.item
{
line-height: 43px;
font-size: 32rpx;
font-weight: 500;
color: #778595;
text-align: center;
}
}
.industryCategoryC
{
margin: 14rpx 20rpx 0;
padding-bottom: 20rpx;
border-bottom: solid 1rpx #E4E4E4;
.item
{
background-color: #F6F6F6;
margin: 0 20rpx 20rpx 0;
padding: 0 30rpx;
line-height: 70rpx;
border-radius: 10rpx;
font-size: 26rpx;
font-weight: 500;
color: #666;
}
.item.select
{
background-color: #F97316;
color: white;
}
}
.industrySearchC
{
background-color: #F6F6F6;
margin: 28rpx 22rpx 0;
padding: 0 22rpx;
height: 75rpx;
border: solid 1rpx #DBDBDB;
border-radius: 10rpx;
font-size: 26rpx;
font-weight: 500;
.icon
{
margin-right: 16rpx;
width: 30rpx;
height: auto;
}
}
.searchResultList
{
max-height: 500rpx;
overflow-y: scroll;
.item
{
padding: 10rpx 44rpx;
font-size: 26rpx;
font-weight: 500;
color: #444;
.key
{
color: #F97316;
}
}
}
.industryList
{
margin-top: 24rpx;
max-height: 500rpx;
overflow-y: scroll;
.selectCategoryList
{
padding: 0 22rpx;
.item
{
background-color: #FFF1E7;
margin-right: 15rpx;
padding-left: 16rpx;
line-height: 38rpx;
border-radius: 10rpx;
border: solid .5px #F97316;
font-size: 22rpx;
font-weight: 500;
color: #F97316;
.deleteC
{
padding: 0 11rpx;
.icon
{
width: 15rpx;
height: 15rpx;
}
}
}
}
.list
{
margin-top: 20rpx;
.topCategory
{
padding: 0 22rpx;
font-size: 28rpx;
font-weight: bold;
color: #F97316;
}
.secondItem
{
padding: 0 22rpx;
}
.thirdItem
{
padding-left: 36rpx;
}
.forthItem
{
padding-left: 36rpx;
.categoryC.select
{
border-bottom: solid .5px #F97316;
}
}
.categoryC
{
height: 50rpx;
.spread
{
margin-right: 12rpx;
width: 24rpx;
line-height: 22rpx;
border: solid .5px #8C8C8C;
font-size: 22rpx;
color: #8C8C8C;
text-align: center;
}
.category
{
font-size: 24rpx;
font-weight: 500;
color: #444;
}
}
.categoryC.select
{
.spread
{
color: #F97316;
border: solid .5px #F97316;
}
.category
{
color: #F97316;
}
.selectC
{
width: 24rpx;
height: 24rpx;
border: solid .5px #F97316;
.icon
{
display: block;
width: 20rpx;
height: auto;
}
}
}
}
}
.importanceList
{
margin-top: 12rpx;
padding: 0 50rpx 25rpx;
.item
{
background-color: #F7F7F7;
margin-bottom: 20rpx;
padding: 0 50rpx;
height: 70rpx;
border-radius: 10rpx;
font-size: 24rpx;
font-weight: 500;
color: #4E4E4E;
}
.item.select
{
border: solid 2rpx #F3C368;
.icon
{
width: 26rpx;
height: auto;
}
}
}
.sortTypeList
{
padding: 0 25rpx 15rpx;
.item
{
height: 80rpx;
border-bottom: solid 1rpx #EAEAEA;
font-size: 24rpx;
font-weight: 500;
color: #778595;
.icon
{
margin-right: 12rpx;
width: 23rpx;
height: auto;
}
}
.item.select
{
color: #3D3D3D;
}
.item:last-child
{
border: none;
}
}
.btnC
{
overflow: hidden;
.btn
{
line-height: 100rpx;
font-size: 28rpx;
text-align: center;
}
.btn.cancel
{
background-color: #F8F7FD;
font-weight: 500;
color: #999;
}
.btn.certain
{
background-color: #F3C368;
font-weight: bold;
color: #101213;
}
}
}
</style>