673 lines
18 KiB
Vue
673 lines
18 KiB
Vue
<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 scroll-y 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" @click.stop="clickStockName(item.code)">
|
||
<view class="title">{{item.name}}</view>
|
||
<view class="code">{{item.code}}</view>
|
||
</view>
|
||
<view v-if="item.change_percent" class="chg flex1">{{item.change_percent >= 0 ? '+' + item.change_percent : item.change_percent}}%</view>
|
||
<view v-else class="chg flex1">-</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,
|
||
conceptOtherDetails
|
||
} 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))
|
||
}
|
||
},
|
||
/**
|
||
* 点击股票名称查看个股详情
|
||
* @param {Object} code
|
||
*/
|
||
clickStockName(code)
|
||
{
|
||
// uni.navigateTo({
|
||
// url:'/pagesStock/stockCenterDetails/stockCenterDetails?code='+code
|
||
// })
|
||
},
|
||
/**
|
||
* 获取概念相关个股数据
|
||
*/
|
||
getConceptHotStockData() {
|
||
let params = {
|
||
trade_date: this.selectDateStr
|
||
}
|
||
conceptDetails(this.conceptId, params).then(res => {
|
||
this.conceptName = res.concept
|
||
this.stockList = res.stocks
|
||
|
||
let codes = this.stockList.map(item => {
|
||
if (item.code != null) return item.code
|
||
return ''
|
||
});
|
||
|
||
conceptOtherDetails(this.conceptId, {
|
||
days: 1,
|
||
codes: codes,
|
||
isJson: 1
|
||
}).then(data => {
|
||
|
||
this.stockList = this.stockList.map(item => {
|
||
if (item.code != null) {
|
||
item.change_percent = data.data[item.code].stats.change_percent
|
||
}
|
||
return item
|
||
})
|
||
console.log('===============');
|
||
console.log(this.stockList);
|
||
}).catch(error => {
|
||
console.log('=-=-=-=-=-=-=-=-=');
|
||
|
||
})
|
||
}).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: calc(20rpx + 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> |