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.

349 lines
9.0 KiB

<template>
<view class="all_breakeven">
<view class="center">
<view class="private_serch" @tap="toSerch">
<view class="private_serch_left">
<u-icon name="search" size="20"></u-icon>
<input
type="text"
placeholder="请输入请输入个股代码、板块或名称"
class="private_serch_ipt"
style="margin-left: 8rpx"
v-model="serchValue"
/>
</view>
<view @tap="submitSerch"></view>
</view>
<view class="private_screening">
<view class="private_screening_list" @tap="showPrivateMarket = true">
<view>{{ currentMarket }}</view>
<image
src="../../static/jiangxu_false.png"
class="private_screening_icon"
mode="scaleToFill"
/>
</view>
<!-- <view class="private_screening_list" @tap="showPrivatePlate = true">
<view>{{ currentPlate }}</view>
<image
src="../../static/jiangxu_false.png"
class="private_screening_icon"
mode="scaleToFill"
/>
</view> -->
<view class="private_screening_list" @tap="showPrivatePrice = true">
<view>{{ currentPrice }}</view>
<image
src="../../static/jiangxu_false.png"
class="private_screening_icon"
mode="scaleToFill"
/>
</view>
</view>
</view>
<view class="private_table_head">
<view class="private_table_head_left">
<view class="private_head_name">股票代码</view>
<view class="private_head_price">买入时间</view>
<view class="private_head_gains">卖出时间</view>
</view>
<view class="private_table_head_right" @tap="privateBelong">
<view>盈亏金额</view>
</view>
</view>
<view
class="private_table_list"
v-for="(item, index) in list"
:key="index"
@tap="toBreakevenDetail(item.securityCode, item.securityName)"
>
<view class="private_table_list_left">
<view class="table_list_name">
<view>{{ item.securityName }}</view>
<view class="table_list_code">{{ item.securityCode }}</view>
</view>
<view class="table_list_price">
{{ item.buyDate }}
</view>
<view class="table_list_gains">
{{ item.sellDate }}
</view>
</view>
<view
class="table_list_totalMoney"
:class="{ table_list_gains1: item.totalMoney < 0 }"
>{{ item.totalMoney }}</view
>
</view>
<!-- 个股筛选大盘 -->
<u-picker
:show="showPrivateMarket"
:columns="columnsMarket"
keyName="name"
cancelColor="#EC7C00"
confirmColor="#EC7C00"
@cancel="showPrivateMarket = false"
@confirm="confirmPrivateMarket"
></u-picker>
<!-- 个股筛选板块 -->
<u-picker
:show="showPrivatePlate"
:columns="columnsPlate"
cancelColor="#EC7C00"
confirmColor="#EC7C00"
@cancel="showPrivatePlate = false"
@confirm="confirmPrivatePlate"
></u-picker>
<!-- 个股筛选价格 -->
<u-picker
:show="showPrivatePrice"
:columns="columnsPrice"
cancelColor="#EC7C00"
confirmColor="#EC7C00"
@cancel="showPrivatePrice = false"
@confirm="confirmPrivatePrice"
></u-picker>
</view>
</template>
<script>
export default {
data() {
return {
// 个股筛选价格
showPrivatePrice: false,
currentPrice: '全部盈亏',
currentPriceIndex: '',
columnsPrice: [['全部盈亏', '盈利个股', '亏损个股']],
// 个股筛选板块
showPrivatePlate: false,
currentPlate: '全部板块',
columnsPlate: [
['全部板块', '上证指数', '深证指数', '创业板', '科创板'],
],
// 个股筛选大盘
showPrivateMarket: false,
currentMarket: '全部大盘',
columnsMarket: [
[
{ name: '全部大盘', current: '' },
{ name: '上证指数', current: 'SZ' },
{ name: '深证指数', current: 'SH' },
{ name: '创业板', current: '30' },
{ name: '科创版', current: '688' },
],
],
currentMarketId: '',
list: [],
pagenum: 1,
last_page: null,
serchValue: '',
}
},
onLoad(options) {
this.rending()
},
onReachBottom() {
if (this.pagenum < this.last_page) {
this.getnewGoods()
}
},
methods: {
rending() {
this.$api
.post('/transaction/profitOrLoss', {
endDate: '',
keyWord: this.serchValue,
pageModel: {
pageNo: this.pagenum,
pageSize: 20,
sortField: '',
sortWay: '',
},
securityType: this.currentMarketId,
sortAmount: 1,
startDate: '',
type: this.currentPriceIndex,
})
.then(r => {
if (r) {
// this.data = r
this.list = r.list
}
})
.catch(fall => {
console.log(fall)
})
},
// 确认个股筛选大盘
confirmPrivateMarket(e) {
this.pagenum = 1
this.currentMarket = e.value[0].name
this.currentMarketId = e.value[0].current
this.rending()
this.showPrivateMarket = false
},
// 确认个股筛选板块
confirmPrivatePlate(e) {
this.currentPlate = e.value[0]
this.showPrivatePlate = false
},
// 确认个股筛选价格
confirmPrivatePrice(e) {
this.pagenum = 1
this.currentPrice = e.value[0]
if (this.currentPrice == '全部盈亏') {
this.currentPriceIndex = ''
} else if (this.currentPrice == '盈利个股') {
this.currentPriceIndex = 1
} else {
this.currentPriceIndex = 2
}
this.rending()
this.showPrivatePrice = false
},
// 上拉加载
getnewGoods() {
this.pagenum = this.pagenum + 1
this.rending1()
// 1.展示loading效果
uni.showLoading({
title: '数据加载中...',
})
// 2.开启节流阀
this.isLoading = true
// 3.发起网络请求
// 无论成功与否都会调用该方法
// 4.隐藏loading效果
uni.hideLoading()
// 5.关闭节流阀
this.isLoading = false
},
// 前往个股详情
toBreakevenDetail(id, name) {
uni.navigateTo({
url: `/pages/user/breakevenDetail?id=${id}&name=${name}`,
})
},
submitSerch() {
this.rending()
},
},
}
</script>
<style lang="scss" scoped>
.center {
padding: 24rpx 24rpx;
}
.private_serch {
padding: 24rpx 32rpx;
border: 2rpx solid #dedede;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
border-radius: 12rpx;
color: #ec7c00;
.private_serch_ipt {
width: 400rpx;
font-size: 24rpx;
}
.private_serch_left {
display: flex;
align-items: center;
}
}
.private_screening {
padding: 32rpx 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
.private_screening_list {
display: flex;
align-items: center;
}
}
.private_screening_icon {
width: 18rpx;
height: 10rpx;
margin-left: 24rpx;
}
.private_table_head {
display: flex;
align-items: center;
font-size: 24rpx;
font-weight: bold;
background-color: #fff9f3;
padding: 20rpx 24rpx;
justify-content: space-between;
.private_table_head_right {
display: flex;
align-items: center;
}
.private_table_head_left {
display: flex;
align-items: center;
.private_head_name {
width: 150rpx;
}
.private_head_price {
width: 180rpx;
text-align: center;
}
.private_head_gains {
width: 180rpx;
text-align: center;
}
}
}
.private_table_list {
padding: 24rpx 24rpx;
border-bottom: 2rpx solid #f6f6f6;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
.private_table_list_left {
display: flex;
align-items: center;
.table_list_name {
width: 150rpx;
}
.table_list_code {
margin-top: 10rpx;
font-size: 24rpx;
color: #999999;
}
.table_list_price {
width: 180rpx;
text-align: center;
}
.table_list_totalMoney {
color: #d9001b;
}
.table_list_gains {
width: 180rpx;
text-align: center;
}
.table_list_gains1 {
color: #6fbb60;
}
}
}
.private_screening_icon {
width: 18rpx;
height: 10rpx;
margin-left: 24rpx;
}
.table_list_totalMoney {
color: #d9001b;
}
.table_list_gains1 {
color: #6fbb60;
}
</style>