longcai/JiaZhiQianYan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

7.10 增加登录页面，事件详情接口对接，我的点赞，关注收藏页面搭建，接口对接

Browse Source
This commit is contained in:
尚政杰
2025-07-10 18:08:16 +08:00
parent c4267a0e27
commit 58b3414bdd
356 changed files with 7710 additions and 978 deletions
Download Patch File Download Diff File Expand all files Collapse all files

595
pages/index/eventDetails/eventDetails.vue
View File

@@ -2,13 +2,13 @@
<view>
<navBar leftText="事件详情"></navBar>
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
<view class="eventDetailsC fixed" :style="'top:'+navH+'px;'">
<view v-if="eventDetails" class="eventDetailsC fixed" :style="'top:'+navH+'px;'">
<view class="categoryTitleC">
<view class="category">政策</view>
<text class="title">四部门联合启动人力资源服务业与制造业融合发展试点</text>
<view class="category">{{eventDetails.event_type}}</view>
<text class="title">{{eventDetails.event_title}}</text>
</view>
<view class="time">2025-05-08 08:43</view>
<view class="eventContent">人社部、工信部等四部门印发通知，明确在30个城市开展3年期试点，培育人力资源服务与制造业协同机构，打造融合平台和创新模式。政策</view>
<view class="eventTime">{{eventDetails.event_created_at.substr(0,16)}}</view>
<view class="eventContent">{{eventDetails.event_desc}}</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}}
@@ -21,54 +21,95 @@
</view>
</view>
<view v-if="selectCategory==0" class="targetList">
<view class="item">
<view class="item" v-for="(item,index) in targetList" :key="index" @click="clickStockItem(item.stock_code)">
<view class="nameCodePriceC flex">
<view class="flex1">
<view class="name">科锐国际</view>
<view class="code">300662.SZ</view>
<view class="name">{{item.stock_name}}</view>
<view class="code">{{item.stock_code}}</view>
</view>
<view class="flex1">
</view>
<view class="price flex1">30.04</view>
<view class="price flex1">30.15</view>
<view class="chg flex1">+0.37%</view>
</view>
<view class="content">
科锐国际作为灵活用工龙头企业，其业务高度契合政策推动的制造业高端人才引育方向。公司技术研发类岗位占比达70%，直接匹配政策要求
<view class="price flex1">{{item.trade_data.open_price}}</view>
<view class="price flex1">{{item.trade_data.latest_price}}</view>
<view :class="'chg flex1 '+(getRateUpOrDown(item.trade_data.change_pct)?'down':'up')">{{item.trade_data.change_pct}}%</view>
</view>
<view class="content">{{item.relation_desc}}</view>
</view>
</view>
<view v-if="selectCategory==1" class="conceptList">
<view class="item relative" @click="clickConceptItem()">
<image class="cover" src="" mode="aspectFill"></image>
<view class="item relative" v-for="(item,index) in conceptList" :key="index" @click="clickConceptItem()">
<image class="cover" :src="item.first_image" mode="aspectFill"></image>
<view class="infoC absolute">
<view class="title">布鲁可IP衍生品(250109)</view>
<view class="content">
四部门联合启动的人力资源服务业与制造业融合发展试点，主要目的是推动
人力资源服务...
<text class="lookDetails">查看详情</text>
<view class="title">{{item.concept}}</view>
<view class="content relative">{{item.reason}}
<text class="lookDetails absolute">查看详情</text>
</view>
</view>
</view>
</view>
<view v-if="selectCategory==2" class="historyEventList">
<view class="expectScoreC flex" @click="clickExpectScore($event)">
<image class="icon" src="/static/icon/home/expectScore.png" mode="widthFix"></image>
<view class="score flex1">超预期得分：{{expectScore}}</view>
<image class="tips" src="/static/icon/home/expectScoreTips.png" mode="widthFix"></image>
</view>
<view class="list">
<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>
</view>
<view class="eventInfoC flex1">
<view class="titleCorrelationC flex">
<view class="title flex1">{{item.title}}</view>
<view class="correlation">相关度: 98%</view>
</view>
<view class="content">{{item.content}}</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>
</scroll-view>
<view class="relatedStockTimeC flex flex1">
<view class="relatedStockC flex" @click.stop="clickLookHistoricalEventRelatedStock(item)">
<image class="icon" src="/static/icon/home/expectScore.png" mode="widthFix"></image>
查看相关股票
</view>
<view class="time flex1">{{getLocaleTime(item.event_date)}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="bottomC fixed flex">
<view v-if="eventDetails" class="bottomC fixed flex">
<view class="inputC flex1">
<input type="text" placeholder="我来说两句..." placeholder-style="color:#666"/>
<input type="text" v-model="eventComment" placeholder="我来说两句..." placeholder-style="color:#666" confirm-type="send" @confirm="sendEventComment()"/>
</view>
<view class="commentLikeNumC flex">
<view class="item">
<image class="icon" src="/static/icon/home/browser.png" mode="widthFix"></image>
<view>64</view>
<view>{{eventDetails.view_count}}</view>
</view>
<view class="item" @click="clickComment()">
<image class="icon" src="/static/icon/home/comment.png" mode="widthFix"></image>
<view>28</view>
<view>{{eventDetails.post_count}}</view>
</view>
<view class="item">
<view class="item" @click="clickFollow()">
<image class="icon" src="/static/icon/home/follow.png" mode="widthFix"></image>
<view>128</view>
<view>{{eventDetails.follower_count}}</view>
</view>
</view>
</view>
@@ -132,21 +173,70 @@
</view>
</view>
</uni-popup>
<uni-popup ref="expectScorePopup" type="top" mask-background-color="transparent">
<view class="expectScorePopup relative" :style="'margin-top:'+scoreTop+'px;'">
<image class="arrow absolute" src="/static/icon/home/sortArrow.png" mode="widthFix"></image>
<view class="tips">
超预期得分:基于历史事件判断当前事件的超预期情况，满分100分，得分越高，越超预期。
</view>
</view>
</uni-popup>
<uni-popup ref="stockPopup" type="bottom">
<view class="stockPopup">
<view class="titleCloseC flex">
<view class="title flex1">相关股票</view>
<view class="closeC" @click="closeRelatedStockPopup()">
<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
</view>
</view>
<view class="list">
<view class="item" v-for="(item,index) in historyEventRelatedStockList" :key="index" @click="clickStockItem(item.stock_code)">
<view class="titleCorrelationC flex">
<view class="title flex1">{{item.stock_name+'('+item.stock_code+')'}}</view>
<view class="correlation">相关度: {{item.correlation*100}}%</view>
</view>
<view class="sectorRateC">
<view class="sector">{{item.sector}}</view>
<view class="rateC">
当日涨幅:
<image v-if="getRateUpOrDown(item.daily_change)" 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.daily_change)}}%
</view>
</view>
<view class="content">{{item.relation_desc}}</view>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { inject } from 'vue';
import { eventDetails } from '../../../request/api';
import { eventRelatedConcept, eventHistoryEvent, eventRelatedStock, eventCommentList, commentEvent } from '@/request/api';
import { getLocaleTime, getRateStr, getRateUpOrDown } from '@/utils/util';
export default {
data() {
return {
navH:inject('navHeight'),
windowWidth:inject('windowWidth'),
eventId:'', //事件id
eventDetails:null, //事件详情
categoryList:['相关标的','相关概念','历史事件','时间传导链分析','关联数据'],
targetList:[], //相关标的
conceptList:[], //相关概念
historyEventList:[], //历史事件
historyEventRelatedStockList:[], //历史事件相关股票
selectCategory:0,
headingList:['名称代码','分时图','开盘价','最新价','涨跌幅']
headingList:['名称代码','分时图','开盘价','最新价','涨跌幅'],
getLocaleTime:getLocaleTime,
getRateUpOrDown:getRateUpOrDown,
getRateStr:getRateStr,
scoreTop:'',
eventComment:'', //事件评论
expectScore:0, //预期得分
}
},
onLoad(e)
@@ -154,7 +244,8 @@
if(e.id)
{
this.eventId = e.id
this.getEventDetailsData()
this.getEventRelatedStockData()
this.getEventCommentListData()
}
},
methods: {
@@ -166,15 +257,28 @@
if(this.selectCategory!=index)
{
this.selectCategory = index
if(index==0)
{
//相关标的
this.getEventRelatedStockData()
}else if(index==1)
{
//相关概念
this.getEventRelatedConceptData()
}else if(index==2)
{
//历史事件
this.getEventHistoryEventData()
}
}
},
/**
* 点击查看股票详情
*/
clickStockItem()
clickStockItem(code)
{
uni.navigateTo({
url:'/pages/index/stockDetails/stockDetails'
url:'/pages/index/stockDetails/stockDetails?code='+code
})
},
/**
@@ -186,6 +290,51 @@
url:'/pages/index/conceptDetails/conceptDetails'
})
},
/**
* 点击查看历史事件的相关股票
*/
clickLookHistoricalEventRelatedStock(item)
{
this.historyEventRelatedStockList = item.related_stocks
this.$refs['stockPopup'].open()
},
/**
* 点击关闭相关股票弹窗
*/
closeRelatedStockPopup()
{
this.$refs['stockPopup'].close()
},
/**
* 点击查看超预期得分
*/
clickExpectScore(e)
{
this.scoreTop = e.currentTarget.offsetTop+this.navH+(70+10+20)/750*this.windowWidth
this.$refs['expectScorePopup'].open()
},
/**
* 点击发送事件评论
*/
sendEventComment()
{
if(!this.eventComment)
{
uni.showToast({
title:'请输入评论内容',
icon:'none'
})
return
}
let eventId = this.eventId
let param = {content:this.eventComment}
commentEvent(eventId,param).then(res=>{
}).catch(error=>{
})
},
/**
* 点击评论
*/
@@ -193,18 +342,95 @@
{
this.$refs['popup'].open()
},
/**
* 点击关闭评论弹窗
*/
closeCommentPopup()
{
this.$refs['popup'].close()
},
/**
* 获取事件详情数据
* 点击关注
*/
getEventDetailsData()
clickFollow()
{
let eventId = this.eventId
eventDetails(eventId).then(res=>{
followEvent(eventId).then(res=>{
uni.showToast({
title:res.message,
icon:'none'
})
}).catch(error=>{
})
},
/**
* 获取事件相关标的数据
*/
getEventRelatedStockData()
{
let eventId = this.eventId
eventRelatedStock(eventId).then(res=>{
if(res.code==200)
{
this.eventDetails = res.data
this.targetList = res.data.related_stocks
}else
uni.showToast({
title:res.message,
icon:'none'
})
}).catch(error=>{
})
},
/**
* 获取事件相关概念数据
*/
getEventRelatedConceptData()
{
let eventId = this.eventId
eventRelatedConcept(eventId).then(res=>{
if(res.code==200)
{
this.conceptList = res.data.related_concepts
}else
uni.showToast({
title:res.message,
icon:'none'
})
}).catch(error=>{
})
},
/**
* 获取事件历史事件数据
*/
getEventHistoryEventData()
{
let eventId = this.eventId
eventHistoryEvent(eventId).then(res=>{
if(res.code==200)
{
this.expectScore = res.data.invest_score
this.historyEventList = res.data.historical_events
}else
uni.showToast({
title:res.message,
icon:'none'
})
}).catch(error=>{
})
},
/**
* 获取事件评论列表
*/
getEventCommentListData()
{
let eventId = this.eventId
eventCommentList(eventId).then(res=>{
this.commentList = res.data.comments
}).catch(error=>{
})
@@ -230,7 +456,7 @@
right: 0;
bottom: calc(20rpx + 70rpx + 20rpx + env(safe-area-inset-bottom));
border-radius: 20rpx 20rpx 0 0;
overflow-y: hidden;
overflow-y: scroll;
.categoryTitleC
{
padding: 0 25rpx;
@@ -253,7 +479,7 @@
color: #222;
}
}
.time
.eventTime
{
margin: 20rpx 25rpx 0;
font-size: 22rpx;
@@ -329,15 +555,20 @@
}
.price
{
font-size: 28rpx;
font-weight: bold;
color: #222;
text-align: center;
}
.chg
{
text-align: center;
}
.chg.up
{
color: #FF2929;
}
.chg.down
{
color: #22C55E;
}
}
.content
{
@@ -352,9 +583,9 @@
padding: 30rpx 25rpx;
.item
{
margin-bottom: 20rpx;
.cover
{
background-color: red;
display: block;
width: 100%;
height: 350rpx;
@@ -367,6 +598,7 @@
left:0;
width: 100%;
bottom: 0;
border-radius: ;
color: white;
.title
{
@@ -375,18 +607,177 @@
}
.content
{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 10rpx;
font-size: 20rpx;
font-weight: 500;
line-height: 1.2rem;
.lookDetails
{
right: 0;
color: #F97316;
}
}
}
}
}
.historyEventList
{
padding: 34rpx 25rpx;
.expectScoreC
{
background-color: #FBEFE7;
padding: 0 25rpx;
height: 70rpx;
.icon
{
margin-right: 14rpx;
width: 24rpx;
height: auto;
}
.score
{
font-size: 24rpx;
font-weight: 500;
color: #F97316;
}
.tips
{
margin-left: 14rpx;
width: 24rpx;
height: auto;
}
}
.list
{
padding: 23rpx 0;
.item
{
.eventLineC
{
padding: 0 43rpx 0 15rpx;
.line
{
background-color: #F0F0F0;
width: 1px;
height: 100%;
}
.pointC
{
background-color: #F9731680;
top: 0;
left: 5rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
.point
{
background-color: #F97316;
width: 10rpx;
height: 10rpx;
border-radius: 50%;
}
}
}
.eventInfoC
{
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.07);
margin-bottom: 20rpx;
padding-top: 27rpx;
min-width: 0;
border-radius: 10rpx;
.titleCorrelationC
{
padding: 0 24rpx 0 30rpx;
.title
{
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.correlation
{
background-color: #F973161A;
padding: 0 12rpx;
line-height: 40rpx;
border-radius: 5rpx;
font-size: 24rpx;
font-weight: 500;
color: #F97316;
}
}
.content
{
margin: 16rpx 30rpx 0;
font-size: 24rpx;
font-weight: 500;
color: #666;
}
.increaseRateList
{
white-space: nowrap;
padding: 0 30rpx;
margin-top: 24rpx;
.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: #C00000;
}
.rateItem.down
{
background-color: #355422;
}
}
.relatedStockTimeC
{
padding-right: 28rpx;
.relatedStockC
{
padding: 16rpx 30rpx;
font-size: 24rpx;
font-weight: bold;
color: #F97316;
.icon
{
margin-right: 13rpx;
width: 24rpx;
height: auto;
}
}
.time
{
font-size: 22rpx;
font-weight: 500;
color: #aaa;
text-align: right;
}
}
}
}
}
}
}
.bottomC
{
@@ -413,12 +804,13 @@
{
.item
{
padding: 0 20rpx;
font-size: 26rpx;
font-weight: bold;
color: #666;
text-align: center;
.icon
{
margin: 0 20rpx;
width: 35rpx;
height: auto;
}
@@ -458,7 +850,6 @@
display: flex;
.avatar
{
background-color: red;
margin-right: 23rpx;
width: 80rpx;
height: 80rpx;
@@ -543,7 +934,6 @@
border-bottom: solid 1rpx #E4E4E4;
.avatar
{
background-color: red;
margin-right: 23rpx;
width: 80rpx;
height: 80rpx;
@@ -622,6 +1012,121 @@
}
}
}
}
.expectScorePopup
{
background-color: white;
margin-left: calc(100% - 320rpx - 24rpx);
width: 320rpx;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10rpx;
.arrow
{
top: -13rpx;
right: 38rpx;
width: 26rpx;
height: auto;
}
.tips
{
padding: 30rpx 22rpx 20rpx;
font-size: 22rpx;
font-weight: 500;
color: #444;
}
}
.stockPopup
{
background-color: white;
border-radius: 20rpx 20rpx 0 0;
.titleCloseC
{
padding-left: 25rpx;
font-size: 32rpx;
font-weight: bold;
color: #222;
.closeC
{
padding: 28rpx;
.icon
{
width: 28rpx;
height: auto;
}
}
}
.list
{
border-top: solid 1rpx #E4E4E4;
margin: 0 25rpx;
max-height: 800rpx;
overflow-y: scroll;
.item
{
padding: 36rpx 0 28rpx;
border-bottom: solid 1rpx #E4E4E4;
.titleCorrelationC
{
.title
{
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.correlation
{
background-color: #F973161A;
padding: 0 12rpx;
line-height: 40rpx;
border-radius: 5rpx;
font-size: 24rpx;
font-weight: 500;
color: #F97316;
}
}
.sectorRateC
{
.sector
{
display: inline-block;
margin-right: 20rpx;
padding: 0 11rpx;
line-height: 30rpx;
border-radius: 5rpx;
border: solid 0.5px #F6604A;
font-size: 20rpx;
font-weight: 500;
color: #F6604A;
}
.rateC
{
background-color: #C00000;
display: inline-block;
padding: 0 10rpx;
height: 30rpx;
border-radius: 5rpx;
font-size: 20rpx;
font-weight: 500;
color: white;
.arrow
{
width: 15rpx;
height: auto;
}
}
}
.content
{
margin-top: 16rpx;
font-size: 24rpx;
font-weight: 500;
color: #666;
}
}
}
}
</style>

306
pages/index/index.vue
View File

@@ -14,7 +14,7 @@
<view :class="'item '+(selectTimeCategory==index?'select':'')" v-for="(item,index) in timeCategoryList" :key="index" @click="clickTimeCategoryItem(index)">{{item.name}}</view>
</view>
<view class="flex">
<view class="sortC flex" @click="clickSortItem()">
<view class="sortC flex" @click="clickSort()">
<image class="icon" src="/static/icon/home/sort.png" mode="widthFix"></image>
<text>排序</text>
</view>
@@ -25,14 +25,14 @@
</view>
</view>
</view>
<scroll-view scroll-x class="topCategoryC">
<view :class="'item relative '+(selectTopCategory==index?'select':'')" v-for="(item,index) in topCategoryList" :key="index" @click="clickTopCategoryItem(index)">
{{item}}
<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 scroll-x class="secondCategoryC">
<view :class="'item '+(selectSecondCategory==index?'select':'')" v-for="(item,index) in secondCategoryList" :key="index" @click="clickSecondCategoryItem(index)">
<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>
@@ -47,7 +47,7 @@
<view :class="'level '+item.importance">{{item.importance}}</view>
<view class="title">{{item.title}}</view>
</view>
<view class="content">{{item.description}}</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')">
平均涨幅:
@@ -69,7 +69,7 @@
</view>
</scroll-view>
<scroll-view scroll-x class="stockList">
<view class="stockItem">中远海控 +1.46%</view>
<view class="stockItem" v-for="(sitem,sindex) in item.related_stocks" :key="sindex" @click.stop="clickLookRelatedStockItem(sitem.stock_code)">{{sitem.stock_name}} <text class="change">{{(getRateUpOrDown(sitem.daily_change)?'':'+')+sitem.daily_change}}%</text></view>
</scroll-view>
<view class="timeToolBarC flex">
<view class="time flex1">{{getLocaleTime(item.created_at)}}</view>
@@ -82,7 +82,7 @@
<image class="icon" src="/static/icon/home/comment.png" mode="widthFix"></image>
<text>{{item.post_count}}</text>
</view>
<view class="toolItem flex">
<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>
@@ -95,7 +95,7 @@
<view class="sortPopup relative">
<image class="arrow absolute" src="/static/icon/home/sortArrow.png" mode="widthFix"></image>
<view class="list" :style="'margin-top:'+sortListTop+'px;'">
<view class="item flex" v-for="(item,index) in sortList" :key="index">
<view class="item flex" v-for="(item,index) in sortList" :key="index" @click="clickSortListItem(item)">
<image class="icon" :src="item.icon" mode="aspectFit"></image>
<text> {{item.name}}</text>
</view>
@@ -159,14 +159,31 @@
<block v-if="selectScreenCategory==1">
<view class="section">选择体系</view>
<view class="industryCategoryC flexWrap">
<view class="item" v-for="(item,index) in industryTopCategoryList" :key="index">
{{item}}
<view :class="'item '+(selectIndustryTopCategory==index?'select':'')" v-for="(item,index) in industryTopCategoryList" :key="index" @click="clickSelectIndustryTopCategoryItem(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" placeholder="搜索行业" placeholder-style="color:#94989A"/>
</view>
<view class="industryList">
<view class="selectCategoryList flexWrap">
</view>
<view class="list">
<view class="topCategory">{{industryTopCategoryList[selectIndustryTopCategory].classification_name}}</view>
<view class="secondList">
<view class="secondItem">
<view class="thirdList">
<view class="thirdItem">
</view>
</view>
</view>
</view>
</view>
</view>
</block>
<block v-if="selectScreenCategory==2">
<view class="section">重要性</view>
@@ -189,7 +206,7 @@
<script>
import { inject } from 'vue'
import { eventFilterList, eventList, login } from '@/request/api'
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');
@@ -199,17 +216,23 @@
menuTop:inject('menuTop'),
menuH: inject('menuHeight'),
navH:inject('navHeight'),
windowWidth:inject('windowWidth'),
contentTop:'',
listTop:'',
sortListTop:'',
keywords:'', //关键词
sortList:[],
selectSortKey:'', //选中排序key
timeCategoryList:[],
selectTimeCategory:0,
topCategoryList:['全部','大周期','大消费','大金融地产','TMT板块','公共产业板块'],
stockCategoryList:[],
topScrollWidth:0,
secondScrollWidth:0,
selectTopCategory:0,
secondCategoryList:['全部','石油石化','煤炭','有色金属','钢铁','基础化工','建筑材料'],
topScrollLeft:0,
selectSecondCategory:0,
secondScrollLeft:0,
screenCategoryList:['日期范围','行业分类','重要性'],
selectYearMonth:'', //选择的年月日
startDate:'', //选择开始日期
@@ -220,7 +243,8 @@
monthDateList:[],
selectMonthIndex:0, //选中月份下标
selectMonth:'', //选中年月
industryTopCategoryList:['巨潮行业分类','新财富行业分类','申银万国行业分类','证监会行业分类'],
industryTopCategoryList:[], //行业一级分类
selectIndustryTopCategory:0, //
selectScreenCategory:0,
importanceList:[], //重要性数组
selectImportanceIndex:0, //选择重要性下标
@@ -352,11 +376,13 @@
}
},
onLoad() {
this.contentTop = this.navH + (75+20)/750*inject('windowWidth')
this.listTop = this.contentTop + (22+80+72+44+44)/750*inject('windowWidth')
this.sortListTop = this.navH + (22+80+80)/750*inject('windowWidth')
this.contentTop = this.navH + (75+20)/750*this.windowWidth
this.listTop = this.contentTop + (22+80+72)/750*this.windowWidth
this.sortListTop = this.navH + (22+80+80)/750*this.windowWidth
this.getEventFilterListData()
this.getEventListData()
this.getIndustryCategoryListData()
this.getStockCategoryListData()
// this.init()
let currentDate = new Date();
// 获取当前年份
@@ -428,6 +454,17 @@
}
this.monthDateList = monthDateList
},
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()
},
onPullDownRefresh() {
this.page = 1
this.getEventListData()
@@ -463,15 +500,36 @@
if(this.selectTimeCategory!=index)
{
this.selectTimeCategory = index
if(index==0)
{
//最新
this.getEventListData()
}else
//热门
this.getHotEventListData()
}
},
/**
* 点击排序
*/
clickSortItem()
clickSort()
{
this.$refs['sortPopup'].open()
},
/**
* 点击排序选项
*/
clickSortListItem(item)
{
this.selectSortKey = item.key
this.$refs['sortPopup'].close()
if(this.selectTimeCategory==0)
{
//最新
this.getEventListData()
}else
this.getHotEventListData()
},
/**
* 点击筛选
*/
@@ -509,22 +567,31 @@
* 点击选择一级分类
* @param {Object} index
*/
clickTopCategoryItem(index)
clickTopCategoryItem(event,index)
{
if(this.selectTopCategory!=index)
{
this.selectTopCategory = index
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+44+44)/750*this.windowWidth
}
},
/**
* 点击选择二级分类
* @param {Object} index
*/
clickSecondCategoryItem(index)
clickSecondCategoryItem(event,index)
{
if(this.selectSecondCategory!=index)
{
this.selectSecondCategory = index
let offsetLeft = event.currentTarget.offsetLeft
this.secondScrollLeft = offsetLeft - this.secondScrollWidth/2
}
},
/**
@@ -594,6 +661,16 @@
this.startTimeStamp = item.timestamp
}
},
/**
* 选择行业分类一级分类
*/
clickSelectIndustryTopCategoryItem(index)
{
if(this.selectIndustryTopCategory!=index)
{
this.selectIndustryTopCategory = index
}
},
/**
* 点击选择重要性
*/
@@ -604,6 +681,39 @@
this.selectImportanceIndex = index
}
},
/**
* 点击展开收起内容
* @param {Object} index
*/
clickExpandOrRetract(index)
{
this.eventList[index].isExpand = !this.eventList[index].isExpand
},
/**
* 点击相关股票
* @param {Object} code
*/
clickLookRelatedStockItem(code)
{
uni.navigateTo({
url:'/pages/index/stockDetails/stockDetails?code='+code
})
},
/**
* 点击关注事件
* @param {Object} id
*/
clickFollowEvent(id)
{
followEvent(id).then(res=>{
uni.showToast({
title:res.message,
icon:'none'
})
}).catch(error=>{
})
},
/**
* 查看事件详情
*/
@@ -618,27 +728,68 @@
*/
getEventFilterListData()
{
eventFilterList().then(res=>{
let timeList = [...res.data.available_sorts]
this.timeCategoryList = timeList.splice(0,2)
let sortList = [...res.data.available_sorts]
for (let item of sortList) {
if(item.name=='最新')
{
item.icon = '/static/icon/home/new.png'
filterOptions().then(res=>{
if(res.code==200)
{
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'
}
}
if(item.name=='热门')
{
item.icon = '/static/icon/home/hot.png'
this.sortList = res.data.sort_options.splice(0,3)
this.importanceList = res.data.importance_options
this.importanceList.unshift({desc: "全部",key: "all",name: "全部"})
}else
uni.showToast({
title:res.message,
icon:'none'
})
}).catch(error=>{
})
},
/**
* 获取行业分类
*/
getIndustryCategoryListData()
{
industryCategoryList().then(res=>{
this.industryTopCategoryList = res.data
}).catch(error=>{
})
},
/**
* 获取股票分类
*/
getStockCategoryListData()
{
stockCategoryList().then(res=>{
if(res.code==200)
{
for (let item of res.data) {
item.sub_sectors.unshift('全部')
}
if(item.name=='收益率')
{
item.icon = '/static/icon/home/yield.png'
}
}
this.sortList = res.data.available_sorts.splice(0,3)
this.importanceList = res.data.available_importance_levels
this.importanceList.unshift({desc: "全部",key: "all",name: "全部"})
res.data.unshift({primary_sector:'全部',sub_sectors:[]})
this.stockCategoryList = res.data
}else
uni.showToast({
title:res.message,
icon:'none'
})
}).catch(error=>{
})
@@ -661,6 +812,10 @@
{
param.importance = this.importanceList[this.selectImportanceIndex].key
}
if(this.selectSortKey)
{
param.sort = this.selectSortKey
}
eventList(param).then(res=>{
if(res.success)
{
@@ -672,6 +827,45 @@
}
}).catch(error=>{
})
let token = uni.getStorageSync('token')
if(!token)
{
let param1 = {email:'1198731706@qq.com',password:'Aa123456',isJson:1}
loginByEmail(param1).then(res=>{
if (res.code==200) {
uni.setStorageSync('token',res.data.token)
} else
uni.showToast({
title:res.message,
icon:'none'
})
}).catch(error=>{
})
}
},
/**
* 获取热门事件数据
*/
getHotEventListData()
{
homeData().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=>{
})
}
}
@@ -882,14 +1076,18 @@
.content
{
margin-top: 20rpx;
font-size: 24rpx;
font-weight: 500;
color: #666;
word-break: break-all;
}
.content.retract
{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
font-size: 24rpx;
font-weight: 500;
color: #666;
}
.increaseRateList
{
@@ -927,6 +1125,7 @@
.stockItem
{
background-color: #F8F8F8;
margin-right: 21rpx;
display: inline-block;
padding: 0 20rpx;
line-height: 60rpx;
@@ -934,7 +1133,12 @@
font-size: 30rpx;
font-weight: bold;
color: #222;
.change
{
color: #F97316;
}
}
}
.timeToolBarC
{
@@ -1201,6 +1405,20 @@
height: auto;
}
}
.industryList
{
margin-top: 24rpx;
.list
{
.topCategory
{
padding: 0 30rpx;
font-size: 28rpx;
font-weight: bold;
color: #F97316;
}
}
}
.importanceList
{
margin-top: 16rpx;

295
pages/index/stockDetails/stockDetails.vue
View File

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