8.28 修改事件详情相关概念模块样式，增加股票详情信息来源展示

pages/index/stockDetails/stockDetails.vue

@@ -2,18 +2,29 @@
 	<view>
 		<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 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>
 			</view>
 		</view>
-		<view class="contentC fixed" :style="'top:'+contentTop+'px;'">
-			<view style="width:750rpx; height:400rpx">
+		<view :class="'contentC fixed '+(type==2?'radius':'')" :style="'top:'+contentTop+'px;'">
+			<view v-if="type==1" style="width:750rpx; height:400rpx">
 				<l-echart ref="chartRef"></l-echart>
 			</view>
 			<view class="section">关联描述</view>
-			<view class="des">全球原油运输巨头，VLCC运力规模全球第一，直接受益于霍尔木兹海峡地缘风险带来的运价上涨及风险溢价。</view>
+			<view class="des">{{relatedDesc}}</view>
+			<view v-if="type==1&&sourceList.length>0" class="section">信息来源</view>
+			<view class="list">
+				<view class="item" v-for="(item,index) in sourceList" :key="index">
+					<view class="content">{{item.sentences}}</view>
+					<view class="article">——《{{item.report_title}}》</view>
+					<view class="authorDateC flex">
+						<view class="author flex1">{{item.author}}</view>
+						<view class="date">{{getLocalDate(item.declare_date)}}</view>
+					</view>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -21,6 +32,7 @@
 <script>
 	import { inject } from 'vue';
 	import { stockCandlestickChartData, stockDetails } from '@/request/api';
+	import { getLocalDate } from '@/utils/util.js';
 	const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');
 
 	export default {
@@ -29,18 +41,33 @@
 				navH:inject('navHeight'),
 				contentTop:'',	
 				navTitle:'',
+				type:'',		//1事件详情2投资详情
+				eventId:'',		//事件id
 				stockCode:'',	//股票code
-				categoryList:['分钟线','分时图','日K线'],
+				categoryList:['分时图','日K线'],
 				selectCategory:0,
 				option:{
 				  title: {
 				    show:false
 				  },
 				  tooltip: {
+					position:function (pos, params, dom, rect, size) {
+						// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
+						var obj = {top: '10%'};
+						obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
+						
+						return obj;
+					},
 				    trigger: 'axis',
 				    axisPointer: {
 				      type: 'cross'
-				    }
+				    },
+					formatter: function (params) {
+						console.log(params)
+						let res = '日期：'+params[0].name+'\n'+'开盘价：'+params[0].data[1]+'\n'+'收盘价：'+params[0].data[2]+'\n'+'最低价：'+params[0].data[3]+'\n'+'最高价：'+params[0].data[4]
+						console.log(res)
+						return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果
+					},
 				  },
 				  legend: { 
 					  show:false
@@ -81,117 +108,90 @@
 				  ],
 				  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'
-				          }
-				        ]
-				      }
+						name: '日K',
+						type: 'candlestick',
+						data: [],
+						itemStyle: {
+							color: '#ec0000',
+							color0: '#8A0000',
+							borderColor: '#00da3c',
+							borderColor0: '#008F28'
+						},
 				    }
 				  ]
 				},
+				option1:{
+					title: {
+						show:false
+					},
+					tooltip: {
+						trigger: 'axis'
+					},
+					grid: {
+						left: '10%',
+						right: '12%',
+						bottom: '10%'
+					},
+					xAxis: {
+						type:'category'
+					},
+					yAxis: {
+						scale:true
+					},
+					dataZoom: [
+						{
+						  type: 'inside'
+						}
+					],
+					series: {
+						name: '分时图',
+						type: 'line',
+						markLine: {
+						  silent: true,
+						  symbol:['none','none'],
+						  lineStyle: {
+							width: 2,
+							color: '#AAA'
+						  },
+						  data: []
+						},
+					}
+				},
+				relatedDesc:'',			//关联描述
+				sourceList:[],			//来源列表
+				getLocalDate:getLocalDate
 			}
 		},
 		onLoad(e) {
-			this.contentTop = this.navH+(60+10)/750*inject('windowWidth')
 			if(e.code)
 			{
-				this.stockCode = e.code 
-				this.getStockDetailsData()
-				this.getStockCandlestickChartData()
+				this.type = e.type
+				if(e.type==1)
+				{
+					//事件详情
+					this.contentTop = this.navH+(60+8)/750*inject('windowWidth')
+					this.eventId = e.id
+					this.stockCode = e.code 
+					this.getStockDetailsData()
+				}else 
+				{
+					//投资详情
+					this.contentTop = this.navH
+					this.navTitle = e.name+'('+e.code+')'
+					this.relatedDesc = e.des
+				}
 			}
 		},
 		methods: {
 			async init() {
 				// chart 图表实例不能存在data里
 				const chart = await this.$refs.chartRef.init(echarts);
-				chart.setOption(this.option)
+				if(this.selectCategory==0)
+				{
+					//分时图
+					chart.setOption(this.option1)
+				}else
+					chart.setOption(this.option)
 			},
 			/**
 			 * 点击切换分类
@@ -202,10 +202,12 @@
 				if(this.selectCategory!=index)
 				{
 					this.selectCategory = index
-					if(index==0||index==2)
+					if(index==1)
 					{
+						//日k
 						this.getStockCandlestickChartData()
-					}
+					}else 
+						this.init()
 				}
 			},
 			/**
@@ -214,10 +216,48 @@
 			getStockDetailsData()
 			{
 				let stockCode = this.stockCode 
-				stockDetails(stockCode).then(res=>{
+				let eventId = this.eventId
+				stockDetails(eventId,stockCode).then(res=>{
 					if(res.code==200)
 					{
 						this.navTitle = res.data.basic_info.stock_name+'('+res.data.basic_info.stock_code+')'
+						let data = res.data.minute_chart_data 
+						let categoryData = []
+						let valueData = []
+						for (let item of data) {
+							categoryData.push(item.time)
+							valueData.push(item.close)
+						}
+						this.option1.xAxis.data = categoryData
+						this.option1.series.data = valueData
+						this.option1.series.markLine.data = [{
+							yAxis:data[0].open,
+							label:{
+								show:true,
+								position:'start',
+								// formatter:'111',
+								color:'#333'
+							},
+						},
+						{
+							yAxis:data[0].open,
+							label:{
+								show:true,
+								position:'end',
+								formatter:'0.00%',
+								color:'#333'
+							},
+						}]
+						let relatedDesc = res.data.related_desc
+						if(relatedDesc)
+						{
+							this.relatedDesc = relatedDesc.relation_desc
+							if(relatedDesc.retrieved_sources)
+							{
+								this.sourceList = relatedDesc.retrieved_sources
+							}
+						}
+						this.init()
 					}else 
 						uni.showToast({
 							title:res.message,
@@ -234,17 +274,20 @@
 			{
 				let stockCode = this.stockCode
 				let param = {chart_type:'minute'}
-				if(this.selectCategory==2)
+				if(this.selectCategory==1)
 				{
 					param.chart_type = 'daily'
 				}
 				stockCandlestickChartData(stockCode,param).then(res=>{
 					let data = res.data 
 					let categoryData = []
+					let valueData = []
 					for (let item of data) {
 						categoryData.push(item.time)
+						valueData.push([item.open,item.close,item.low,item.high])
 					}
 					this.option.xAxis.data = categoryData
+					this.option.series[0].data = valueData
 					this.init()
 				}).catch(error=>{
 					
@@ -298,6 +341,7 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
+	overflow-y: scroll;
 	.section  
 	{
 		padding: 0 28rpx;
@@ -308,11 +352,54 @@
 	}
 	.des 
 	{
-		padding: 0 30rpx;
+		padding: 0 0 30rpx;
+		margin: 0 25rpx;
+		border-bottom: solid 1rpx #E4E4E4;
+		line-height: 1.4rem;
 		font-size: 24rpx;
 		font-weight: 500;
 		color: #666;
 	}
-	
+	.list 
+	{
+		padding: 0 25rpx;
+		.item 
+		{
+			background-color: #F8F8F8;
+			margin-bottom: 20rpx;
+			padding: 30rpx 26rpx;
+			border-radius: 10rpx;
+			.content 
+			{
+				font-size: 24rpx;
+				font-weight: 500;
+				color: #222;
+			}
+			.article
+			{
+				margin-top: 10rpx;
+				font-size: 22rpx;
+				font-weight: 500;
+				color: #666;
+				text-align: right;
+			}
+			.authorDateC
+			{
+				margin-top: 30rpx;
+				font-size: 22rpx;
+				font-weight: 500;
+				color: #AAA;
+				.author 
+				{
+					margin-right: 10rpx;
+				}
+			}
+		}
+	}
+}
+.contentC.radius 
+{
+	margin-top: 10rpx;
+	border-radius: 20rpx 20rpx 0 0;
 }
 </style>