OfficeApp/pages/oaHome/accountLog.vue
2024-01-30 18:10:55 +08:00

172 lines
3.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="">
<view class="head">
<view class="money">
收益明细
<view class="" style="margin-top: 35rpx;font-size: 35rpx;">
{{money ||0}}
</view>
</view>
</view>
<view class="cont">
<view class="tit">
收益明细
</view>
<view class="card" v-for="item,index in orderList" :key='index'>
<view class="card-top">
<view class="">
<!-- 2024-01-2 16:20:34 -->
{{item.create_time}}
</view>
<view class="" style="color: #6A92EB;">
<!-- 任务收益金额增加 -->
{{item.type_desc}}
</view>
</view>
<view class="card-top" style="margin-top: 30rpx;">
<view class="tit" style="font-size: 28rpx;">
<!-- 2024-01-2 16:20:34 -->
{{item.remark}}
</view>
<view class="">
<!-- 任务收益金额增加 -->
{{item.change_amount_desc}}
</view>
</view>
</view>
<u-loadmore :status="status" v-if='orderList.length>0' />
<view class="" v-if='orderList.length==0'>
<u-empty icon="/static/newWork/index/empty.png" iconSize='200' width='300' height="300" marginTop='50'
textColor='#BFD7FF' text="没有更多了~"></u-empty>
</view>
</view>
</view>
</template>
<script>
import {
account_log,
} from "@/api/newTask.js"
export default {
data() {
return {
orderList: [],
flag: false,
status: "loadmore",
page_no: 2,
page_size: 20,
money: ""
}
},
methods: {
async getFirstOrderLogList() {
let res = await account_log({
page_no: 1,
page_size: 20
})
this.orderList = res.data.lists
}
},
mounted() {
this.getFirstOrderLogList()
},
onLoad(option) {
this.money = option.money
},
onReachBottom() {
if (this.flag) return
let {
page_no,
page_size
} = this
let that = this
this.status = "loading"
this.page_no += 1
this.flag = true
account_log({
page_no,
page_size
}).then(res => {
that.orderList = that.orderList.concat(res.data.lists)
this.flag = false
if (!res.data.lists.length) {
this.status = "nomore"
this.flag = true
}
})
},
}
</script>
<style lang="scss" scoped>
.head {
width: 750rpx;
background-color: #2B63E3;
height: 200rpx;
position: relative;
.money {
width: 670rpx;
background-color: rgba(255, 255, 255, .2);
box-shadow: 0.5rpx 0.5rpx 200rpx 0.5rpx rgba(0, 0, 0, 0.1);
height: 220rpx;
margin: 0 auto;
border-radius: 20rpx;
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, -50%);
backdrop-filter: blur(50rpx);
color: white;
padding: 20rpx;
}
}
.cont {
// width: 690rpx;
margin: 120rpx auto;
padding: 20rpx;
.tit {
position: relative;
padding-left: 20rpx;
font-size: 30rpx;
color: #1A1A1A;
font-weight: bold;
}
.tit::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 6rpx;
/* 左边框的宽度 */
height: 25rpx;
border-radius: 20rpx;
background-color: #2B63E3;
}
.card {
background-color: #fff;
padding: 20rpx;
border-radius: 20rpx;
margin-top: 20rpx;
.card-top {
display: flex;
justify-content: space-between;
}
}
}
</style>