12.12 页面风格改版，增加事件详情相关概念网页跳转，增加绑定手机号功能

2025-12-12 19:35:08 +08:00
parent 44842120da
commit 13c783a0ad
256 changed files with 4046 additions and 2986 deletions
--- a/pages/concept/hotStock/hotStock.vue
+++ b/pages/concept/hotStock/hotStock.vue
@@ -0,0 +1,614 @@
+<template>
+	<view>
+		<navBar leftText="热门个股" :hideNavBg="true"></navBar>
+		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
+		<view class="titleScreenC fixed flex" :style="'top:'+navH+'px;'"> 
+			<view class="title flex1">{{conceptName}} - 相关个股</view>
+			<view class="screenC flex" @click="clickDateScreen()">
+				<view>时间筛选</view>
+				<image class="arrow" src="/static/icon/home/conceptCenter/timeScreenArrow.png" mode="widthFix"></image>
+			</view>
+		</view>
+		<scroll-view direction="vertical" class="stockList fixed" :style="'top:'+listTop+'px;'">
+			<view class="list">
+				<view class="item" v-for="(item,index) in stockList" :key="index">
+					<view class="stockInfoC flex" @click="clickExpandOrRetract(index)">
+						<view class="titleCodeC">
+							<view class="title">{{item.stock_name}}</view>
+							<view class="code">{{item.stock_code}}</view>
+						</view>
+						<view class="chg flex1">+4.04%</view>
+						<view class="industry flex1">食品行业</view>
+						<view class="reasonProjectC flex">
+							<view>REASON/项目</view>
+							<image v-if="item.isExpand" class="arrow expand" src="/static/icon/home/conceptCenter/reasonExpand.png" mode="widthFix"></image>
+							<image v-else class="arrow" src="/static/icon/home/conceptCenter/reasonRetract.png" mode="widthFix"></image>
+						</view>
+					</view>
+					<view v-if="item.isExpand" class="reasonProjectContentC">
+						<view class="reasonC">
+							<text class="title">REASON：</text>
+							<text>{{item.reason}}</text>
+						</view>
+						<view class="projectC">
+							<text class="title">项目：</text>
+							<text>已进入芥末味夏威夷果仁/黑金蒜香茉莉翡翠豆两款产品</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		<uni-popup ref="datePopup" type="bottom" :safeArea="false">
+			<view class="datePopup">
+				<view class="btnTitleC flex">
+					<view class="btn cancel" @click="clickCancel()">取消</view>
+					<view class="title flex1">交易日期</view>
+					<view class="btn confirm" @click="clickConfirm()">确认</view>
+				</view>
+				<view class="yearMonthC flex">
+					<view class="btn" @click="clickPreMonth()">
+						<image class="icon" src="/static/icon/home/conceptCenter/pre.png" mode="widthFix"></image>
+					</view>
+					<view class="yearMonth flex1">
+						<picker mode="date" fields="month" @change="monthChange">
+							<view>{{selectMonth}}</view>
+						</picker>
+					</view>
+					<view class="btn" @click="clickNextMonth()">
+						<image class="icon" src="/static/icon/home/conceptCenter/next.png" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="weekList flex">
+					<view class="item flex1" v-for="(item,index) in weekList" :key="index">{{item}}</view>
+				</view>
+				<view class="monthDateList flexWrap">
+					<view class="item flexColumnCenter" v-for="(item,index) in monthDateList[selectMonthIndex]" :key="index" @click="clickSelectDate(item)">
+						<block v-if="item.date==selectDateStr">
+							<view class="date select">{{item.day}}</view>
+						</block>
+						<block v-else>
+							<block v-if="!item.isCurrentMonth">
+								<view class="date notCurrentMonth">{{item.day}}</view>
+							</block>
+							<block v-else>
+								<view class="date">{{item.day}}</view>
+							</block>
+						</block>
+					</view>
+				</view>
+				<view class="quickTimeC flexCenter">
+					<view class="item" v-for="(item,index) in quickTimeList" :key="index" @click="clickQuickTimeItem(index)">{{item}}</view>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import { inject } from 'vue';
+	import { conceptDetails } from '@/request/api';
+
+	export default {
+		data() {
+			return {
+				navH:inject('navHeight'),
+				listTop:'',
+				conceptId:'',	//概念id
+				conceptName:'',	//概念名称
+				weekList:['一','二','三','四','五','六','日'],
+				monthDateList:[],
+				selectMonthIndex:0,		//选中月份下标
+				selectMonth:'',			//选中年月
+				selectDateStr:'',		//交易日期选中日期
+				quickTimeList:['今天','昨天','一周前','一月前'],
+				stockList:[],	//个股列表
+			}
+		},
+		onLoad(e) {
+			this.listTop = this.navH+(46+22)/750*inject('windowWidth')
+			let currentDate = new Date();
+			// 获取当前年份
+			let currentYear = currentDate.getFullYear();
+			let currentMonth = currentDate.getMonth()+1;
+			let currentDay = currentDate.getDate();
+			this.selectMonthIndex = 20*12+currentMonth-1
+			this.selectMonth = currentYear+'年'+currentMonth+'月'
+			this.selectDateStr = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
+			this.generateMonthDateListData()
+			if (e.id) {
+				this.conceptId = e.id
+				this.getConceptHotStockData()
+			}
+		},
+		methods: {
+			/**
+			 * 生成日历数据
+			 */
+			generateMonthDateListData()
+			{
+				let currentDate = new Date();
+				// 获取当前年份
+				let currentYear = currentDate.getFullYear();
+				let currentMonth = currentDate.getMonth()+1;
+				let currentDay = currentDate.getDate();
+				let monthDateList = []
+				for (var i = currentYear-20; i < currentYear+20; i++) {
+					for (var j = 0; j < 12; j++) {
+						let date = new Date(i,j+1,0)
+						let firstDayOfMonth = new Date(i,j+1,0);
+						firstDayOfMonth.setDate(1);
+						//获取当前月天数
+						let currentMonthDay = date.getDate()
+						let firstDayWeek = firstDayOfMonth.getDay() || 7
+						let daysOfMonth = []
+						for (var k = 1; k <= currentMonthDay; k++) {
+							let newDate = new Date(i,j+1,0)
+							newDate.setDate(k); // 设置日期为当前月的相应日期
+							let newMonth = newDate.getMonth()+1
+							let newDay = newDate.getDate()
+							let time = newDate.getTime()
+							let date = i+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
+							daysOfMonth.push({date:date,year:i,month:newMonth,day:newDay,isToday:(i==currentYear&&newMonth==currentMonth&&newDay==currentDay)?true:false,isCurrentMonth:true,timestamp:time});
+						}
+						for (var k = 0; k < firstDayWeek-1; k++) {
+							//获取上月天数 
+							let year = i
+							let month = j
+							if(j<1)
+							{
+								year = i - 1
+								month = 12
+							}
+							let lastMonthDay = new Date(year, month, 0).getDate()	
+							//获取上月日期
+							let newDate = new Date(year,month-1,lastMonthDay-k) 
+							let newMonth = newDate.getMonth()+1 
+							let newDay = newDate.getDate() 
+							let time = newDate.getTime()
+							let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
+							daysOfMonth.unshift({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,timestamp:time});
+						}
+						// 下一个月的第一天
+						let nextMonthFirstDay = new Date(i, j+1, 1);
+						// 然后减去一天就是当前月的最后一天
+						let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
+						let lastDayWeek = lastDayOfMonth.getDay() || 7; // 返回0（星期天）到6（星期六）之
+						for (var k = 1; k < 8-lastDayWeek; k++) {
+							let year = i
+							let month = j
+							if(month>11)
+							{
+								month = 0
+								year ++
+							}
+							//获取下月日期
+							let newDate = new Date(year,month + 1,k)
+							let newMonth = newDate.getMonth()+1 
+							let newDay = newDate.getDate() 
+							let time = newDate.getTime()
+							let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
+							daysOfMonth.push({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,timestamp:time});
+						}
+						monthDateList.push(daysOfMonth)
+					}
+				}
+				this.monthDateList = monthDateList
+			},
+			/**
+			 * 点击时间筛选
+			 */
+			clickDateScreen()
+			{
+				this.$refs['datePopup'].open()
+			},
+			/**
+			 * 点击展开或收起
+			 * @param {Object} index
+			 */
+			clickExpandOrRetract(index)
+			{
+				this.stockList[index].isExpand = !this.stockList[index].isExpand
+			},
+			/**
+			 * 点击取消
+			 */
+			clickCancel()
+			{
+				this.$refs["datePopup"].close()
+			},
+			/**
+			 * 点击确认
+			 */
+			clickConfirm()
+			{
+				this.clickCancel()
+				this.getConceptHotStockData()
+			},
+			/**
+			 * 点击上个月
+			 */
+			clickPreMonth()
+			{
+				if(this.selectMonthIndex>0)
+				{
+					this.selectMonthIndex --
+					let monthList = this.monthDateList[this.selectMonthIndex]
+					let year = ''
+					let month = ''
+					for (let item of monthList) {
+						if(item.isCurrentMonth)
+						{
+							year = item.year
+							month = item.month
+							break
+						}
+					}					
+					this.selectMonth = year+'年'+month+'月'
+				}
+			},
+			/**
+			 * 点击下个月
+			 */
+			clickNextMonth()
+			{
+				if(this.selectMonthIndex<this.monthDateList.length-1)
+				{
+					this.selectMonthIndex ++
+					let monthList = this.monthDateList[this.selectMonthIndex]
+					let year = ''
+					let month = ''
+					for (let item of monthList) {
+						if(item.isCurrentMonth)
+						{
+							year = item.year
+							month = item.month
+							break
+						}
+					}
+					this.selectMonth = year+'年'+month+'月'
+				}
+			},
+			monthChange(e)
+			{
+				let currentDate = new Date();
+				//当前年份
+				let currentYear = currentDate.getFullYear()
+				//选中年月
+				let yearMonth = e.detail.value
+				let selectYear = parseInt(yearMonth.split('-')[0])
+				let selectMonth = parseInt(yearMonth.split('-')[1])
+				this.selectMonthIndex = (selectYear - (currentYear - 20))*12+selectMonth-1
+				this.selectMonth = selectYear+'年'+selectMonth+'月'
+			},
+			/**
+			 * 点击选择开始日期和结束日期
+			 * @param {Object} item
+			 */
+			clickSelectDate(item)
+			{
+				if (this.selectDateStr!=item.date){
+					this.selectDateStr = item.date
+				}
+			},
+			/**
+			 * 点击快捷时间选择
+			 */
+			clickQuickTimeItem(index)
+			{
+				let currentDate = new Date();
+				let currentYear = currentDate.getFullYear();
+				if (index==0) {
+					//今天
+					let currentMonth = currentDate.getMonth()+1;
+					let currentDay = currentDate.getDate();
+					this.selectMonthIndex = 20*12+currentMonth-1
+					this.selectMonth = currentYear+'年'+currentMonth+'月'
+					this.selectDateStr = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
+					
+				}else if (index==1) {
+					//昨天
+					let yesterday = new Date(currentDate)
+					yesterday.setDate(yesterday.getDate()-1)
+					let yesterdayYear = yesterday.getFullYear();
+					let yesterdayMonth = yesterday.getMonth()+1;
+					let yesterdayDay = yesterday.getDate();
+					this.selectMonthIndex = (20 - (currentYear-yesterdayYear))*12+yesterdayMonth-1
+					this.selectMonth = yesterdayYear+'年'+yesterdayMonth+'月'
+					this.selectDateStr = yesterdayYear+'-'+(yesterdayMonth>9?yesterdayMonth:('0'+yesterdayMonth))+'-'+(yesterdayDay>9?yesterdayDay:('0'+yesterdayDay))
+					
+				}else if (index==2) {
+					//一周前
+					let weekAgo = new Date(currentDate)
+					weekAgo.setDate(weekAgo.getDate()-7)
+					let weekAgoYear = weekAgo.getFullYear();
+					let weekAgoMonth = weekAgo.getMonth()+1;
+					let weekAgoDay = weekAgo.getDate();
+					this.selectMonthIndex = (20 - (currentYear-weekAgoYear))*12+weekAgoMonth-1
+					this.selectMonth = weekAgoYear+'年'+weekAgoMonth+'月'
+					this.selectDateStr = weekAgoYear+'-'+(weekAgoMonth>9?weekAgoMonth:('0'+weekAgoMonth))+'-'+(weekAgoDay>9?weekAgoDay:('0'+weekAgoDay))
+				}else 
+				{
+					//一月前
+					let monthAgo = new Date(currentDate)
+					monthAgo.setDate(monthAgo.getDate()-30)
+					let monthAgoYear = monthAgo.getFullYear();
+					let monthAgoMonth = monthAgo.getMonth()+1;
+					let monthAgoDay = monthAgo.getDate();
+					this.selectMonthIndex = (20 - (currentYear-monthAgoYear))*12+monthAgoMonth-1
+					this.selectMonth = monthAgoYear+'年'+monthAgoMonth+'月'
+					this.selectDateStr = monthAgoYear+'-'+(monthAgoMonth>9?monthAgoMonth:('0'+monthAgoMonth))+'-'+(monthAgoDay>9?monthAgoDay:('0'+monthAgoDay))
+				}
+			},
+			/**
+			 * 获取概念相关个股数据
+			 */
+			getConceptHotStockData()
+			{
+				let params = {trade_date:this.selectDateStr}
+				conceptDetails(this.conceptId,params).then(res=>{
+					this.conceptName = res.concept
+					this.stockList = res.stocks
+				}).catch(error=>{
+					
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+page 
+{
+	background-color: #070707;
+}
+.topBg 
+{
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: auto;
+}
+.titleScreenC
+{
+	background-color: #FFF9F5;
+	left: 0;
+	right: 0;
+	margin: 0 25rpx;
+	padding: 22rpx 25rpx 0;
+	border-radius: 10rpx 10rpx 0 0;
+	.title 
+	{
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #2B2B2B;
+	}
+	.screenC
+	{
+		padding: 0 20rpx;
+		line-height: 42rpx;
+		border-radius: 23rpx;
+		border: solid 2rpx #F3C368;
+		font-size: 22rpx;
+		color: #E3AA3D;
+		 .arrow 
+		 {
+			 margin-left: 7rpx;
+			 width: 12rpx;
+			 height: auto;
+		 }
+	}
+}
+.stockList 
+{
+	background-color: #FFF9F5;
+	left: 0;
+	width: calc(100% - 50rpx);
+	bottom: 62rpx;
+	margin: 0 25rpx;
+	border-radius: 0 0 10rpx 10rpx ;
+	.list 
+	{
+		padding: 16rpx 25rpx;
+		.item 
+		{
+			background-color: white;
+			box-shadow: 0 5rpx 10rpx 0 rgba(127,127,127,0.08);
+			margin-bottom: 20rpx;
+			padding: 0 20rpx;
+			border-radius: 10rpx;
+			.stockInfoC 
+			{
+				padding: 16rpx 0;
+				.titleCodeC
+				{
+					.title 
+					{
+						font-size: 26rpx;
+						font-weight: bold;
+						color: #222;
+					}
+					.code 
+					{
+						font-size: 20rpx;
+						font-weight: 500;
+						color: #888;
+					}
+				}
+				.chg 
+				{
+					font-size: 24rpx;
+					font-weight: bold;
+					text-align: center;
+				}
+				.chg.up
+				{
+					color: #EC3440;
+				}
+				.chg.down
+				{
+					color: #38A169;
+				}
+				.industry 
+				{
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #333;
+					text-align: center;
+				}
+				.reasonProjectC 
+				{
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #DA9000;
+					.arrow 
+					{
+						margin-left: 10rpx;
+						width: 10rpx;
+						height: auto;
+					}
+					.arrow.expand 
+					{
+						margin-left: 6rpx;
+						width: 14rpx;
+						height: auto;
+					}
+				}
+			}
+			
+			.reasonProjectContentC 
+			{
+				margin: 0 5rpx;
+				border-top: solid 1rpx #F0F0F0;
+				padding: 12rpx 9rpx 22rpx;
+				font-size: 24rpx;
+				font-weight: 500;
+				color: #666;
+				.title 
+				{
+					color: #DA9000;
+				}
+				.projectC 
+				{
+					margin-top: 6rpx;
+				}
+			}
+		}
+	}
+}
+.datePopup 
+{
+	background-color: white;
+	padding-bottom: env(safe-area-inset-bottom);
+	border-radius: 20rpx 20rpx 0 0;
+	.btnTitleC 
+	{
+		.btn 
+		{
+			padding: 20rpx 26rpx;
+			font-size: 28rpx;
+			font-weight: 500;
+		}
+		.btn.cancel 
+		{
+			color: #727A8E;
+		}
+		.btn.confirm 
+		{
+			color: #D79412;
+		}
+		.title 
+		{
+			font-size: 36rpx;
+			font-weight: bold;
+			text-align: center;
+		}
+	}
+	.yearMonthC 
+	{
+		background-color: #F7F7F7;
+		margin: 0 25rpx;
+		height: 70rpx;
+		border-radius: 35rpx;
+		.btn 
+		{
+			padding: 0 52rpx;
+			.icon  
+			{
+				width: 13rpx;
+				height: auto;
+			}
+			
+		}
+		.yearMonth 
+		{
+			font-size: 32rpx;
+			font-weight: 500;
+			color: #070707;
+			text-align: center;
+		}
+	}
+	.weekList 
+	{
+		padding: 0 38rpx;
+		.item 
+		{
+			margin-right: 13rpx;
+			line-height: 72rpx;
+			font-size: 26rpx;
+			font-weight: 500;
+			color: #A7A7A7;
+			text-align: center;
+		}
+	}
+	.monthDateList
+	{
+		padding: 0 38rpx;
+		.item 
+		{
+			margin-bottom: 12rpx;
+			width: calc(100%/7);
+			.date 
+			{
+				background-color: #f8f8f8;
+				width: calc(100% - 10rpx);
+				line-height: 64rpx;
+				border-radius: 15rpx;
+				font-size: 24rpx;
+				font-weight: bold;
+				color: #2A2A2A;
+				text-align: center;
+			}
+			.date.select 
+			{
+				background-color: #F2C367;
+				color: white;
+			}
+			.date.notCurrentMonth
+			{
+				background-color: #FCFCFC;
+				color: #999;
+			}
+		}
+	}
+	.quickTimeC 
+	{
+		margin-top: 16rpx;
+		.item 
+		{
+			margin-right: 25rpx;
+			width: 120rpx;
+			line-height: 56rpx;
+			border-radius: 30rpx;
+			border: solid 2rpx #4E4E4E; 
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #4E4E4E;
+			text-align: center;
+		}
+		.item:last-child 
+		{
+			margin-right: 0;
+		}
+	}
+}
+</style>