You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
453 lines
11 KiB
453 lines
11 KiB
<template>
|
|
<view class="all_trend_module">
|
|
<view class="center">
|
|
<view class="date">
|
|
<image
|
|
src="../../../static/home_left.png"
|
|
class="date_icon"
|
|
mode="scaleToFill"
|
|
@tap="beforeDay(date)"
|
|
/>
|
|
<input
|
|
type="text"
|
|
v-model="date"
|
|
disabled
|
|
class="ipt_date"
|
|
@tap="selectDate"
|
|
/>
|
|
<image
|
|
src="../../../static/home_right.png"
|
|
class="date_icon"
|
|
mode="scaleToFill"
|
|
@tap="afterDay(date)"
|
|
/>
|
|
</view>
|
|
<view class="nav">
|
|
<view
|
|
class="nav_select"
|
|
@tap="selectTrend(item.name)"
|
|
:class="{ nav_select1: item.is }"
|
|
v-for="(item, index) in navList"
|
|
:key="index"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
<view class="module_head">
|
|
<view>交易日期</view>
|
|
<view class="module_head_name">东财行业指数2级</view>
|
|
<view class="module_head_rank" @tap="marketRankSelect">
|
|
<view>板块排名</view>
|
|
<view class="module_head_icon" v-if="marketRank">
|
|
<image
|
|
src="../../../static/shengxu_true.png"
|
|
class="head_icon"
|
|
mode="scaleToFill"
|
|
/>
|
|
<image
|
|
src="../../../static/jiangxu_false.png"
|
|
class="head_icon"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
<view class="module_head_icon" v-else>
|
|
<image
|
|
src="../../../static/shengxu_false.png"
|
|
class="head_icon"
|
|
mode="scaleToFill"
|
|
/>
|
|
<image
|
|
src="../../../static/jiangxu_true.png"
|
|
class="head_icon"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="list.length > 0">
|
|
<view
|
|
class="module_list"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@tap="
|
|
toTrendDetail(
|
|
item.securityName,
|
|
item.securityCode,
|
|
item.securityType
|
|
)
|
|
"
|
|
>
|
|
<view class="module_list_date">{{ item.businessDate }}</view>
|
|
<view class="module_list_name">{{ item.securityName }}</view>
|
|
<view class="module_list_ranking">
|
|
<view>
|
|
{{ item.sort }}
|
|
</view>
|
|
<view class="list_ranking_right">
|
|
<image
|
|
v-if="item.sortChange > 0"
|
|
src="../../../static/home_paiming_shangsheng.png"
|
|
class="module_list_icon"
|
|
mode="scaleToFill"
|
|
/>
|
|
<image
|
|
v-if="item.sortChange < 0"
|
|
src="../../../static/home_paiming_xiajiang.png"
|
|
class="module_list_icon"
|
|
mode="scaleToFill"
|
|
/>
|
|
<u-icon
|
|
name="minus"
|
|
v-if="item.sortChange == 0"
|
|
size="12"
|
|
></u-icon>
|
|
<view
|
|
v-if="item.sortChange != 0"
|
|
class="rise_decline"
|
|
:style="{ color: item.color }"
|
|
>
|
|
{{ Math.abs(item.sortChange) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<u-empty
|
|
mode="data"
|
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
|
marginTop="50"
|
|
>
|
|
</u-empty>
|
|
</view>
|
|
</view>
|
|
<!-- 选择时间 -->
|
|
<u-datetime-picker
|
|
:show="dateShow"
|
|
v-model="date"
|
|
mode="date"
|
|
cancelColor="#EC7C00"
|
|
confirmColor="#EC7C00"
|
|
@cancel="cancelDate"
|
|
@confirm="confirmDate"
|
|
></u-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
navList: [
|
|
{
|
|
name: '当日趋势',
|
|
is: true,
|
|
current: 1,
|
|
},
|
|
{
|
|
name: '5日趋势',
|
|
is: false,
|
|
current: 5,
|
|
},
|
|
{
|
|
name: '10日趋势',
|
|
is: false,
|
|
current: 10,
|
|
},
|
|
{
|
|
name: '15日趋势',
|
|
is: false,
|
|
current: 15,
|
|
},
|
|
{
|
|
name: '20日趋势',
|
|
is: false,
|
|
current: 20,
|
|
},
|
|
{
|
|
name: '30日趋势',
|
|
is: false,
|
|
current: 30,
|
|
},
|
|
],
|
|
// 数据
|
|
list: [],
|
|
// 板块列表排名升序or降序
|
|
marketRank: true,
|
|
trendCurrent: 1,
|
|
date: '',
|
|
pagenum: 1,
|
|
last_page: null,
|
|
dateShow: false,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.date = options.date
|
|
this.rending()
|
|
},
|
|
onReachBottom() {
|
|
if (this.pagenum < this.last_page) {
|
|
this.getnewGoods()
|
|
}
|
|
},
|
|
methods: {
|
|
// 大盘信息板块列表排名选择
|
|
marketRankSelect() {
|
|
this.marketRank = !this.marketRank
|
|
this.rending()
|
|
},
|
|
// 选择趋势
|
|
selectTrend(name) {
|
|
this.navList.forEach(item => {
|
|
if (item.name === name) {
|
|
item.is = true
|
|
this.trendCurrent = item.current
|
|
this.rending()
|
|
} else {
|
|
item.is = false
|
|
}
|
|
})
|
|
},
|
|
rending() {
|
|
this.$api
|
|
.post('/stock/trendPlate', {
|
|
businessDate: this.date,
|
|
pageModel: {
|
|
pageNo: this.pagenum,
|
|
pageSize: 20,
|
|
sortField: 'sort',
|
|
sortWay: this.marketRank ? 'asc' : 'desc',
|
|
},
|
|
trendType: this.trendCurrent,
|
|
})
|
|
.then(r => {
|
|
if (r) {
|
|
console.log(r.list)
|
|
this.list = r.list
|
|
this.last_page = r.totalPage
|
|
// this.data = r
|
|
console.log(r)
|
|
}
|
|
})
|
|
.catch(fall => {
|
|
console.log(fall)
|
|
})
|
|
},
|
|
rending1() {
|
|
this.$api
|
|
.post('/stock/trendPlate', {
|
|
businessDate: this.date,
|
|
pageModel: {
|
|
pageNo: this.pagenum,
|
|
pageSize: 20,
|
|
sortField: 'sort',
|
|
sortWay: this.marketRank ? 'asc' : 'desc',
|
|
},
|
|
trendType: this.trendCurrent,
|
|
})
|
|
.then(r => {
|
|
if (r) {
|
|
console.log(r.list)
|
|
this.list = [...this.list, ...r.list]
|
|
this.last_page = r.totalPage
|
|
// this.data = r
|
|
console.log(r)
|
|
}
|
|
})
|
|
.catch(fall => {
|
|
console.log(fall)
|
|
})
|
|
},
|
|
getnewGoods() {
|
|
this.pagenum = this.pagenum + 1
|
|
// 1.展示loading效果
|
|
uni.showLoading({
|
|
title: '数据加载中...',
|
|
})
|
|
// 2.开启节流阀
|
|
this.isLoading = true
|
|
// 3.发起网络请求
|
|
this.rending1()
|
|
// 无论成功与否都会调用该方法
|
|
// 4.隐藏loading效果
|
|
uni.hideLoading()
|
|
// 5.关闭节流阀
|
|
this.isLoading = false
|
|
},
|
|
toTrendDetail(name, id, type) {
|
|
uni.navigateTo({
|
|
url: `/pages/home/market/trendDetail?name=${name}&id=${id}&type=${type}&date=${this.date}`,
|
|
})
|
|
},
|
|
// 前一日
|
|
beforeDay(date) {
|
|
this.pagenum = 1
|
|
this.date = this.getTime(new Date(date).getTime() - 24 * 60 * 60 * 1000)
|
|
this.rending()
|
|
},
|
|
// 后一日
|
|
afterDay(date) {
|
|
this.pagenum = 1
|
|
this.date = this.getTime(new Date(date).getTime() + 24 * 60 * 60 * 1000)
|
|
this.rending()
|
|
},
|
|
// 格式化时间戳
|
|
getTime(date) {
|
|
let time = new Date(date)
|
|
let y = time.getFullYear()
|
|
let m = time.getMonth() + 1
|
|
let d = time.getDate()
|
|
let h = time.getHours()
|
|
let mm = time.getMinutes()
|
|
let s = time.getSeconds()
|
|
if (s < 10) {
|
|
s = '0' + s
|
|
}
|
|
if (h < 10) {
|
|
h = '0' + h
|
|
}
|
|
if (mm < 10) {
|
|
mm = '0' + mm
|
|
}
|
|
if (m < 10) {
|
|
m = '0' + m
|
|
}
|
|
if (d < 10) {
|
|
d = '0' + d
|
|
}
|
|
return `${y}-${m}-${d}`
|
|
},
|
|
// 打开时间选择器
|
|
selectDate() {
|
|
this.dateShow = true
|
|
uni.hideTabBar({})
|
|
},
|
|
// 关闭时间选择器
|
|
cancelDate() {
|
|
this.dateShow = false
|
|
uni.showTabBar({})
|
|
},
|
|
// 确认当前选中时间
|
|
confirmDate(e) {
|
|
this.pagenum = 1
|
|
this.$nextTick(() => {
|
|
this.date = this.getTime(e.value)
|
|
this.rending()
|
|
})
|
|
this.dateShow = false
|
|
uni.showTabBar({})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.center {
|
|
padding: 24rpx;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
}
|
|
.nav_select {
|
|
flex-shrink: 0;
|
|
margin-top: 24rpx;
|
|
padding: 10rpx 20rpx;
|
|
border: 2rpx solid #999999;
|
|
border-radius: 8rpx;
|
|
margin-right: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
.nav_select1 {
|
|
border-color: #ec7c00;
|
|
color: #ec7c00;
|
|
background-color: #fffcf9;
|
|
}
|
|
.module_head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 24rpx;
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
padding: 20rpx 28rpx 20rpx 36rpx;
|
|
width: 686rpx;
|
|
margin-left: -24rpx;
|
|
background-color: #fff9f3;
|
|
.module_head_name {
|
|
margin-left: 64rpx;
|
|
}
|
|
.module_head_rank {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.module_head_icon {
|
|
margin-left: 8rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.head_icon {
|
|
width: 18rpx;
|
|
height: 10rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.module_list {
|
|
padding-top: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
.module_list_date {
|
|
// margin-right: 120rpx;
|
|
}
|
|
.module_list_name {
|
|
width: 400rpx;
|
|
text-align: center;
|
|
// margin-left: 120rpx;
|
|
}
|
|
|
|
.module_list_ranking {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 16rpx;
|
|
}
|
|
.list_ranking_right {
|
|
margin-left: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40rpx;
|
|
.rise_decline {
|
|
font-size: 24rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
.module_list_icon {
|
|
text-align: center;
|
|
width: 18rpx;
|
|
height: 10rpx;
|
|
line-height: 10rpx;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.date {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.ipt_date {
|
|
width: 180rpx;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
.date_icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
</style>
|