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

pages/index/eventDetails/eventDetails.vue

@@ -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>