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.
 
 
 
 
 
hezhiying/pages/shouyi/shouyi.vue

251 lines
4.4 KiB

<template>
<view class="page">
<view class="totalContent">
<view class="totalitem">
<view class="price">
<text></text>
<text class="num">{{info.today_profit_amount}}</text>
</view>
<view class="descText">
今日收益
</view>
</view>
<view class="totalitem" style="border-left:1px solid #fff;">
<view class="price">
<text></text>
<text class="num">{{info.total_profit_amount}}</text>
</view>
<view class="descText">
累计收益
</view>
</view>
</view>
<view class="yongjinTitle">
收益明细
</view>
<!-- 收益明细 -->
<view class="record-list" v-show="tableData.length>0">
<view class="list" v-for="(item,index) in tableData" :key="index">
<view class="outer">
<view class="title-date">
<view class="date">
<text>{{item.jointime}}</text>
</view>
</view>
</view>
<view class="integral">
<text style="color: #22AA44;">+{{item.amount}}</text>
</view>
</view>
</view>
<view class="empty" v-show="tableData.length==0">
<image src="../../static/image/mescroll-empty.png" mode="widthFix"></image>
<view class="emptyText">
暂无数据
</view>
</view>
</view>
</template>
<script>
import {getUserProfitStatistic,getUserProfitList} from '@/common/api.js'
export default {
data() {
return {
info:{
today_profit_amount:0,
total_profit_amount:0
},
page:1,
limit:10,
tableData:[],
total:0,
};
},
methods:{
getInfo(){
getUserProfitStatistic().then(res=>{
this.info = Object.assign({},this.info,res.data)
})
},
getList(val){
let params={
page:this.page,
limit:this.limit,
}
getUserProfitList(params).then(res=>{
if(val){
this.tableData.push(...res.data.data)
}else{
this.tableData = res.data.data;
this.total = res.data.total
}
})
},
},
onReachBottom() {
if(this.tableData.length<this.total){
this.page++;
this.getList('over')
}
},
mounted(){
this.getInfo()
this.getList()
}
}
</script>
<style scoped lang="scss">
.page{
// position: absolute;
// left: 0;
// top: 0;
// width: 100%;
// height: 100%;
// background-color: #FFFFFF;
}
.tabs{
height: 80rpx;
background-color: rgb(35, 96, 48);
padding: 6rpx;
border-radius: 5px;
display: flex;
margin:0 24rpx;
.tabsItem{
flex:1;
text-align: center;
line-height: 70rpx;
font-size: 26rpx;
color: #ffffff;
}
.active{
background-color: #fff;
font-size: 30rpx;
font-weight: bold;
border-radius: 5px;
color: rgb(35, 96, 48);
}
}
.totalContent{
height: 160rpx;
background: url('../../static/image/total-bg.png');
background-size: cover;
background-repeat: no-repeat;
border-radius: 6px;
overflow: hidden;
position: relative;
// width:94%;
// margin:20rpx auto 0 auto;
display: flex;
padding:40rpx 0;
margin:20rpx 24rpx;
.totalitem{
flex:1;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
.price{
display: flex;
align-items: center;
justify-content: center;
text{
font-size: 30rpx;
color:#fff;
}
.num{
font-size: 48rpx;
}
}
.descText{
text-align: center;
font-size: 28rpx;
color:#fff;
}
}
}
.yongjinTitle{
padding: 13px 0 4px 0;
font-size: 30rpx;
color: #9f751f;
margin:0 24rpx;
}
.record-list{
// width: 100%;
background-color: #FFFFFF;
padding:0 24rpx;
margin:0 24rpx;
border-radius: 10rpx;
.list{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #f6f6f6;
.outer{
flex:1;
// margin-left:20rpx;
padding:20rpx 0;
}
.title-date{
height: 100%;
.title{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 50rpx;
text{
font-size: 28rpx;
font-weight: bold;
color: #236030;
}
}
.date{
display: flex;
align-items: center;
width: 100%;
height: 60rpx;
text{
font-size: 24rpx;
color: #959595;
}
}
}
.integral{
display: flex;
align-items: center;
height: 100%;
text{
font-size: 36rpx;
font-weight: bold;
color: $base;
}
}
}
}
.empty{
text-align: center;
image{
width:50%;
height:auto
}
.emptyText{
text-align: center;
margin-top:20rpx;
color:#aaa;
}
}
</style>