180 lines
3.7 KiB
Vue

<template>
<view class="whole">
<view class="list" v-if="detailList.length">
<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scrolltolower="scorllBottom">
<view class="row" v-for="item in detailList" :key="item.id">
<view class="one flex1">
<view class="ope red">奖金池</view>
<text>{{item.profit}}</text>
</view>
<view class="two flex1">
<view></view>
<text>{{item.created_at.slice(0, 10)}}</text>
</view>
</view>
<view class="bottom" v-if="page >= lastPage && detailList.length && !loading">- 到底啦 -</view>
<view class="bottom" v-if="loading"><up-loading-icon text="加载中..." textSize="14"></up-loading-icon></view>
</scroll-view>
</view>
<view v-if="!detailList.length && !loading" style="padding-bottom: 30px;">
<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/list.png" text="暂无明细喔"></up-empty>
</view>
</view>
</template>
<script>
import { reactive, toRefs } from 'vue'
import { get } from '@/api/request.js'
import { showToast, copyText } from '@/components/common.js'
import dayjs from 'dayjs'
export default {
setup() {
const data = reactive({
Color: uni.getStorageSync('theme_color'),
loading: false,
lastPage: 0,
page: 1,
filter: {},
detailList: [],
showTime: false,
currentDate: '',
itemList: ['全部', '佣金收入', '提现', '已结算订单退款', '会员分账收入'],
typeTxt: '',
showPopup: false,
start_time: '',
end_time: '',
data_type: 0,
SubType: ['', 3, 5, 14, 16],
})
function scorllBottom() {
if (data.page < data.lastPage) {
data.page++
getList(1)
}
}
function updateList() {
data.page = 1
getList(0)
}
function getList(val) {
data.loading = true
get(`/api/v1/sales/distributor/activityEarnings`, {
page: data.page,
pageSize: 20,
// ...data.filter
}).then((res) => {
data.detailList = val == 1 ? data.detailList.concat(res.data) : res.data
data.lastPage = res.meta.last_page
data.loading = false
}).catch(() => {
data.loading = false
})
}
return {
...toRefs(data),
copyText,
scorllBottom,
getList,
}
},
onLoad(options) {
this.getList(0)
}
}
</script>
<style lang="scss" scoped>
.flex{
display: flex;
align-items: center;
justify-content: center;
}
.flex1{
display: flex;
align-items: center;
justify-content: space-between;
}
.whole{
box-sizing: border-box;
height: 100vh;
.list{
height: 100%;
padding: 24rpx;
.row{
padding: 24rpx;
font-size: 28rpx;
background-color: #fff;
margin-bottom: 24rpx;
.one{
margin-bottom: 10rpx;
.ope{
color: #222;
font-size: 30rpx;
}
}
.two{
color: #888;
margin-top: 10rpx;
font-size: 26rpx;
}
}
.bottom {
text-align: center;
font-size: 24rpx;
color: #999999;
margin: auto;
line-height: 80rpx;
}
}
}
.tite {
margin: 0 20rpx;
padding: 30rpx 0;
font-size: 30rpx;
font-weight: bolder;
border-bottom: 1px solid #e1e1e1;
}
.timeBox{
display: flex;
align-items: center;
font-size: 28rpx;
padding: 30rpx 24rpx 200rpx;
.wenzi {
margin: 0 20rpx;
}
.input_box{
background: #f1f1f1;
padding: 10rpx;
text-align: center;
font-size: 28rpx;
width: 50%;
}
}
.box_btn {
margin: 0 20rpx 20rpx;
margin-top: 30rpx;
font-size: 30rpx;
color: #fff;
background: v-bind('Color');
border-radius: 10rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
}
.datetime-picker {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
z-index: 9999;
}
</style>