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

6.30 版本提交

Browse Source
This commit is contained in:
尚政杰
2025-06-30 19:02:44 +08:00
commit c4267a0e27
338 changed files with 27942 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

737
pages/invest/invest.vue Normal file
View File

@@ -0,0 +1,737 @@
<template>
<view>
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
<view class="navTitle fixed" :style="'top:'+menuTop+'px;line-height:'+menuH+'px;'">投资</view>
<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
<image class="icon" src="/static/icon/home/search.png" mode="widthFix"></image>
<input class="flex1" type="text" placeholder="搜索话题/股票名称" placeholder-style="color:#94989A"/>
<view class="line"></view>
<view class="search">搜索</view>
</view>
<view class="contentC fixed" :style="'top:'+contentTop+'px;'">
<view class="">
<view class="todayC flex" @click="clickExpandOrRetract()">
<view class="todayDateC flex">
<view class="date">{{selectDate}}</view>
<image class="icon" src="/static/icon/invest/calendar.png" mode="widthFix"></image>
</view>
<view class="flex1"></view>
<view class="today">今</view>
</view>
<view class="weekList flex">
<view class="item flex1" v-for="(item,index) in weekList" :key="index">{{item}}</view>
</view>
<view v-if="isExpand" class="monthDateList flexWrap">
<view class="item flexColumnCenter" v-for="(item,index) in monthDateList" :key="index" @click="clickSelectDate(item)">
<view :class="'date '+(item.isToday?'today':(item.isCurrentMonth?'':' notCurrentMonth')) ">{{item.day}}</view>
<block v-if="item.className">
<view v-if="item.className=='bg-gradient-danger'" class="eventNum danger">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-warning'" class="eventNum warning">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-info'" class="eventNum info">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-success'" class="eventNum success">{{item.eventCount}}</view>
</block>
<block v-else>
<view class="eventNum"></view>
</block>
</view>
</view>
<view v-else class="weekDateList flex">
<view class="item flex1 flexColumnCenter" v-for="(item,index) in weekDateList" @click="clickSelectDate(item)" :key="index">
<view :class="'date '+(item.isToday?'today':'') ">{{item.day}}</view>
<block v-if="item.className">
<view v-if="item.className=='bg-gradient-danger'" class="eventNum danger">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-warning'" class="eventNum warning">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-info'" class="eventNum info">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-success'" class="eventNum success">{{item.eventCount}}</view>
</block>
<block v-else>
<view class="eventNum"></view>
</block>
</view>
</view>
<view class="expandBgC flexCenter">
<view class="expandC flex" @click="clickExpandOrRetract()">
<text>{{isExpand?'收起':'展开'}}</text>
<image class="arrow" src="/static/icon/invest/downArrow.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="tabC">
<view :class="'item '+(selectTab==index?'select':'')" v-for="(item,index) in tabList" :key="index" @click="clickTabItem(index)">{{item}}</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}}
<view v-if="selectTopCategory==index" class="line absolute"></view>
</view>
</scroll-view>
<view v-if="selectTab==0" class="eventList">
<view class="item" v-for="(item,index) in eventList" :key="index" @click="clickEventItem()">
<view class="flex">
<view class="time flex1">{{item.time}}</view>
<view class="starC relative">
<view class="starList flex" >
<image class="icon" :src="(sindex<(item.star)?'/static/icon/invest/star_s.png':'/static/icon/invest/star.png')" mode="widthFix" v-for="(sitem,sindex) in 5" :key="index"></image>
</view>
</view>
</view>
<view class="categoryTitleC flex">
<view class="category">宏观政策</view>
<view class="title flex1">{{item.title}}</view>
</view>
<view class="labelC">
<view class="label">
</view>
</view>
<view class="content">
<text>{{item.forecast}}</text>
</view>
<scroll-view scroll-x class="percentList">
<view class="percentItem" v-for="(citem,cindex) in JSON.parse(item.concepts)" :key="cindex">
{{citem[0]}}
<zui-progress-circle :position="citem[2]" :range="[270,630]" :size="26" :ring-width="2" :texture="['#F97316','#E3E3E3']">
<view class="num">{{citem[2]*100}}%</view>
</zui-progress-circle>
</view>
</scroll-view>
</view>
</view>
<view v-if="selectTab==1" class="dataList">
<view class="item">
<view class="flex">
<view class="time flex1">21:00</view>
<view class="starC relative">
<view class="starBgList flex">
<image class="icon" src="/static/icon/invest/star.png" mode="widthFix" v-for="(item,index) in 5" :key="index"></image>
</view>
<view class="starList absolute flex">
<image class="icon" src="/static/icon/invest/star_s.png" mode="widthFix" v-for="(item,index) in 5" :key="index"></image>
</view>
</view>
</view>
<view class="title">外交部长王毅将对俄罗斯进行正式访问。</view>
<view class="valueList flex between">
<view class="pre">前值 -7.1</view>
<view class="prediction">预测 93</view>
<view class="actual">实际 ————</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { inject } from 'vue'
import { calendarEventCount, calendarEventList } from '../../request/api'
export default {
data() {
return {
menuTop:inject('menuTop'),
menuH: inject('menuHeight'),
navH:inject('navHeight'),
windowWidth:inject('windowWidth'),
contentTop:'',
todayDate:'', //今日日期
weekList:['一','二','三','四','五','六','日'],
weekDateList:[], //当前周日期
monthDateList:[], //当前月日期
isExpand:false, //是否展开日期
tabList:['事件','数据'],
selectTab:0,
topCategoryList:['全部','大周期','大消费','大金融地产','TMT板块','公共产业板块'],
selectTopCategory:0,
listTop:'',
selectDate:'', //选择查看的日期
progress: 75,
eventList:[], //事件列表
}
},
onLoad() {
let date = new Date()
this.contentTop = this.navH + (75+20)/750*inject('windowWidth')
let year = date.getFullYear()
let month = date.getMonth()+1
let day = date.getDate()
this.selectDate = date.getFullYear()+'-'+(month>9?month:('0'+month))+'-'+(day>9?day:('0'+day))
let week = date.getDay() || 7
let diff = week - 1
let daysOfWeek = [];
for (var i = 0; i < 7; i++) {
let newDate = new Date()
newDate.setDate(day - diff + i); // 设置日期为当前周的相应日期
let newDay = newDate.getDate()
let date = year+'-'+(month>9?month:('0'+month))+'-'+(newDay>9?newDay:('0'+newDay))
daysOfWeek.push({date:date,day:newDay,isToday:newDay==day?true:false});
}
this.weekDateList = daysOfWeek
let firstDayOfMonth = new Date();
firstDayOfMonth.setDate(1);
//获取当前月天数
let currentMonthDay = new Date(year, month, 0).getDate()
let firstDayWeek = firstDayOfMonth.getDay() || 7
let daysOfMonth = []
for (var i = 1; i <= currentMonthDay; i++) {
let newDate = new Date()
newDate.setDate(i); // 设置日期为当前月的相应日期
let newDay = newDate.getDate()
let date = year+'-'+(month>9?month:('0'+month))+'-'+(newDay>9?newDay:('0'+newDay))
daysOfMonth.push({date:date,day:newDay,isToday:newDay==day?true:false,isCurrentMonth:true});
}
for (var i = 0; i < firstDayWeek-1; i++) {
//获取上月天数
let lastMonthDay = new Date(year, month-1, 0).getDate()
//获取上月日期
let newDate = new Date(year,month-2,lastMonthDay-i)
let newMonth = newDate.getMonth()+1
let newDay = newDate.getDate()
let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
daysOfMonth.unshift({date:date,day:newDay,isToday:false,isCurrentMonth:false});
}
// 下一个月的第一天
let nextMonthFirstDay = new Date(year, month, 1);
// 然后减去一天就是当前月的最后一天
let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
let lastDayWeek = lastDayOfMonth.getDay() || 7; // 返回0（星期天）到6（星期六）之
for (var i = 1; i < 8-lastDayWeek; i++) {
if(month>11)
{
month = -1
year ++
}
//获取下月日期
let newDate = new Date(year,month + 1,i)
let newMonth = newDate.getMonth()+1
let newDay = newDate.getDate()
let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
daysOfMonth.push({date:date,day:newDay,isToday:false,isCurrentMonth:false});
}
this.monthDateList = daysOfMonth
this.listTop = this.contentTop + (68+40+96+74+70+74+22)/750*inject('windowWidth')
this.getEventListData()
this.getCurrentMonthEventCountData()
},
computed: {
circumference() {
return Math.PI * 100; // 圆周长，半径为50的圆周长
}
},
methods: {
/**
* 点击展开或收起
*/
clickExpandOrRetract()
{
this.isExpand = !this.isExpand
if(this.isExpand)
{
this.listTop = this.contentTop + (68+40+96*6+74+70+74+22)/750*this.windowWidth
}else
this.listTop = this.contentTop + (68+40+96+74+70+74+22)/750*this.windowWidth
},
/**
* 选中日期
* @param {Object} item
*/
clickSelectDate(item)
{
if(this.selectDate!=item.date)
{
this.selectDate = item.date
this.getEventListData()
}
},
/**
* 点击切换事件或者数据
*/
clickTabItem(index)
{
if(this.selectTab!=index)
{
this.selectTab = index
}
},
/**
* 选择一级分类
*/
clickTopCategoryItem(index)
{
if(this.selectTopCategory!=index)
{
this.selectTopCategory = index
}
},
/**
* 点击查看事件详情
*/
clickEventItem()
{
uni.navigateTo({
url:'/pages/invest/investDetails/investDetails'
})
},
/**
* 获取事件列表数据
*/
getEventListData()
{
let param = {date:this.selectDate}
calendarEventList(param).then(res=>{
for (let item of res) {
let calendarTime = item.calendar_time
let time = calendarTime.split('T')[1]
item.time = time.substr(0,5)
}
this.eventList = res
}).catch(error=>{
})
},
/**
* 获取当前月份每一天的事件数量
*/
getCurrentMonthEventCountData()
{
calendarEventCount().then(res=>{
for (let item of res) {
let date = item.start
for (let s of this.weekDateList) {
if(s.date == date)
{
s.eventCount = item.title
s.className = item.className
}
}
for (let s of this.monthDateList) {
if(s.date == date)
{
s.eventCount = item.title
s.className = item.className
}
}
}
}).catch(error=>{
})
}
}
}
</script>
<style lang="less">
.topBg
{
top: 0;
left: 0;
width: 100%;
height: auto;
}
.navTitle
{
left: 0;
margin: 0 23rpx;
font-size: 36rpx;
font-weight: bold;
color: white;
}
.searchC
{
background-color: white;
left: 0;
right: 0;
margin: 20rpx 25rpx 0;
padding: 0 20rpx;
height: 75rpx;
border-radius: 20rpx;
font-size: 26rpx;
font-weight: 500;
.icon
{
margin-right: 16rpx;
width: 30rpx;
height: auto;
}
input
{
height: 100%;
}
.line
{
background-color: #E1E1E1;
width: 1rpx;
height: 40rpx;
}
.search
{
padding: 0 25rpx;
color: #F97316;
}
}
.contentC
{
background-color: white;
left: 0;
right: 0;
bottom: calc(55px + env(safe-area-inset-bottom));
margin-top: 22rpx;
border-radius: 20rpx 20rpx 0 0;
overflow-y: scroll;
.todayC
{
padding: 12rpx 26rpx;
.todayDateC
{
font-size: 32rpx;
font-weight: bold;
color: #222;
.icon
{
margin-left: 16rpx;
width: 30rpx;
height: auto;
}
}
.today
{
background-color: #F973161A;
width: 40rpx;
line-height: 40rpx;
border-radius: 50%;
font-size: 26rpx;
font-weight: 500;
color: #F97316;
text-align: center;
}
}
.weekList
{
.item
{
line-height: 40rpx;
font-size: 24rpx;
color: #292621;
text-align: center;
}
}
.weekDateList
{
.item
{
padding-top: 14rpx;
.date
{
width: 40rpx;
line-height: 40rpx;
font-size: 24rpx;
text-align: center;
}
.date.today
{
background-color: #F9731626;
border-radius: 5rpx;
color: #F97316;
}
.eventNum
{
// background-color: #EB4A46;
margin-top: 12rpx;
width: 80rpx;
height: 30rpx;
line-height: 30rpx;
border-radius: 5rpx;
font-size: 16rpx;
font-weight: 500;
color: white;
text-align: center;
}
.eventNum.danger
{
background-color: #EB4A46;
}
.eventNum.warning
{
background-color: #FD9C16;
}
.eventNum.info
{
background-color: #16BBCF;
}
.eventNum.success
{
background-color: #55AE59;
}
}
}
.monthDateList
{
.item
{
padding-top: 14rpx;
width: calc(100%/7);
.date
{
width: 40rpx;
line-height: 40rpx;
font-size: 24rpx;
font-weight: bold;
color: #292621;
text-align: center;
}
.date.today
{
background-color: #F9731626;
border-radius: 5rpx;
color: #F97316;
}
.date.notCurrentMonth
{
color: #999;
}
.eventNum
{
margin-top: 12rpx;
width: 80rpx;
height: 30rpx;
line-height: 30rpx;
border-radius: 5rpx;
font-size: 16rpx;
font-weight: 500;
color: white;
text-align: center;
}
.eventNum.danger
{
background-color: #EB4A46;
}
.eventNum.warning
{
background-color: #FD9C16;
}
.eventNum.info
{
background-color: #16BBCF;
}
.eventNum.success
{
background-color: #55AE59;
}
}
}
.expandBgC
{
margin: 0 25rpx;
border-bottom: solid 1rpx #E4E4E4;
.expandC
{
padding: 20rpx 0;
font-size: 22rpx;
font-weight: 500;
color: #8A857C;
.arrow
{
margin-left: 7rpx;
width: 15rpx;
height: auto;
}
}
}
.tabC
{
.item
{
display: inline-block;
padding: 0 24rpx;
line-height: 70rpx;
font-size: 32rpx;
color: #42485B;
}
.item.select
{
color: #F97316;
}
}
.topCategoryC
{
white-space: nowrap;
border-bottom: solid 1rpx #E4E4E4;
.item
{
display: inline-block;
line-height: 72rpx;
padding: 0 28rpx;
font-size: 27rpx;
font-weight: 500;
color: #42485B;
}
.item.select
{
font-weight: bold;
color: black;
.line
{
background-color: #F97316;
left: calc((100% - 50rpx)/2);
width: 50rpx;
height: 2rpx;
bottom: 0;
}
}
}
}
.eventList
{
padding: 0 25rpx;
.item
{
padding: 30rpx 0;
border-bottom: solid 1rpx #E4E4E4;
.time
{
font-size: 24rpx;
font-weight: bold;
color: #767676;
}
.starC
{
.starList
{
top: 0;
left: 0;
}
.icon
{
margin-right: 9rpx;
width: 27rpx;
height: auto;
}
}
.categoryTitleC
{
margin-top: 18rpx;
.category
{
background-color: #FD9A14;
margin-right: 10rpx;
padding: 0 12rpx;
line-height: 40rpx;
border-radius: 8rpx;
font-size: 22rpx;
font-weight: bold;
color: white;
}
.title
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 30rpx;
font-weight: bold;
color: #222;
}
}
.labelC
{
display: inline-block;
.label
{
border-radius: 5rpx;
}
}
.content
{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
font-size: 24rpx;
font-weight: 500;
color: #666;
}
.percentList
{
white-space: nowrap;
margin-top: 20rpx;
.percentItem
{
display: inline-flex;
align-items: center;
background-color: #F8F8F8;
margin-right: 20rpx;
padding: 0 20rpx;
height: 70rpx;
border-radius: 10rpx;
font-size: 26rpx;
font-weight: bold;
color: #222;
zui-progress-circle
{
margin-left: 20rpx;
}
.num
{
width: 23px;
line-height:23px;
font-size: 17rpx;
font-weight: bold;
color: #999;
text-align: center;
}
}
.percentItem:last-child
{
margin-right: 0;
}
}
}
}
.dataList
{
padding: 0 25rpx;
.item
{
padding: 30rpx 0;
border-bottom: solid 1rpx #E4E4E4;
.time
{
font-size: 24rpx;
font-weight: bold;
color: #767676;
}
.starC
{
.starList
{
top: 0;
left: 0;
}
.icon
{
margin-right: 9rpx;
width: 27rpx;
height: auto;
}
}
.title
{
margin-top: 16rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.valueList
{
margin-top: 20rpx;
font-size: 26rpx;
font-weight: 500;
color: #666;
}
}
}
</style>