300 lines
6.8 KiB
Vue
300 lines
6.8 KiB
Vue
|
<template>
|
||
|
|
<view class="whole">
|
||
|
|
<!-- <view class="twoBox">
|
||
|
|
<view class="search">
|
||
|
|
<view class="row flex">收益明细</view>
|
||
|
|
<view class="row flex" @click="typeFilter">
|
||
|
|
<view class="tit">{{typeTxt || '全部'}}</view>
|
||
|
|
<up-icon name="arrow-down" color="#777" size="15" />
|
||
|
|
</view>
|
||
|
|
<view class="row flex" @click="openPopup()">
|
||
|
|
<view class="tit">时间</view>
|
||
|
|
<up-icon name="calendar-fill" color="#666" size="18" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view> -->
|
||
|
|
|
||
|
|
<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">{{item.title}}</view>
|
||
|
|
<text>{{item.profit}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="two flex1">
|
||
|
|
<view @click="copyText(item.order_sn)">订单编号:{{ item.order_sn}} <up-icon name="file-text" color="#777" /></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>
|
||
|
|
|
||
|
|
<up-popup :show="showPopup" :round="10" mode="bottom" closeable @close="showTime = false, showPopup = false">
|
||
|
|
<div class="tite">选择日期</div>
|
||
|
|
<view class="timeBox">
|
||
|
|
<view @click="openTime(1)" class="input_box">
|
||
|
|
<text>{{start_time || '开始时间'}}</text>
|
||
|
|
</view>
|
||
|
|
<text class="wenzi">至</text>
|
||
|
|
<view @click="openTime(2)" class="input_box">
|
||
|
|
<text>{{end_time || '结束时间'}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view @click="hanleTime" class="box_btn">确定</view>
|
||
|
|
</up-popup>
|
||
|
|
|
||
|
|
<up-datetime-picker
|
||
|
|
:show="showTime"
|
||
|
|
v-model="currentDate"
|
||
|
|
mode="date"
|
||
|
|
@confirm="chooseTimes"
|
||
|
|
@cancel="showTime = false"
|
||
|
|
@close="showTime = false"
|
||
|
|
:closeOnClickOverlay="true">
|
||
|
|
</up-datetime-picker>
|
||
|
|
|
||
|
|
|
||
|
|
</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],
|
||
|
|
Type: ''
|
||
|
|
})
|
||
|
|
|
||
|
|
function typeFilter() {
|
||
|
|
uni.showActionSheet({
|
||
|
|
itemList: data.itemList,
|
||
|
|
success: (res) => {
|
||
|
|
data.filter.subdivide_type = data.SubType[res.tapIndex]
|
||
|
|
data.typeTxt = data.itemList[res.tapIndex]
|
||
|
|
updateList()
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
console.log('取消', err)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function openPopup() {
|
||
|
|
data.start_time = data.filter.start_of_date
|
||
|
|
data.end_time = data.filter.end_of_date
|
||
|
|
data.showPopup = true
|
||
|
|
}
|
||
|
|
|
||
|
|
const openTime = (type) => {
|
||
|
|
data.data_type = type
|
||
|
|
if (type == 1) {
|
||
|
|
data.currentDate = data.start_time ? Date.parse(new Date(data.start_time)) : Date.parse(new Date())
|
||
|
|
} else {
|
||
|
|
data.currentDate = data.end_time ? Date.parse(new Date(data.end_time)) : Date.parse(new Date())
|
||
|
|
}
|
||
|
|
data.showTime = true
|
||
|
|
}
|
||
|
|
|
||
|
|
const chooseTimes = (e) => {
|
||
|
|
let time = dayjs(e.value).format('YYYY-MM-DD')
|
||
|
|
if (data.data_type == 1) {
|
||
|
|
data.start_time = time
|
||
|
|
} else if (data.data_type == 2) {
|
||
|
|
data.end_time = time
|
||
|
|
}
|
||
|
|
data.showTime = false
|
||
|
|
}
|
||
|
|
|
||
|
|
function hanleTime() {
|
||
|
|
data.filter.start_of_date = data.start_time
|
||
|
|
data.filter.end_of_date = data.end_time
|
||
|
|
data.showPopup = false
|
||
|
|
updateList()
|
||
|
|
}
|
||
|
|
|
||
|
|
function scorllBottom() {
|
||
|
|
console.log('0.0')
|
||
|
|
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/myEarnings`, {
|
||
|
|
page: data.page,
|
||
|
|
pageSize: 20,
|
||
|
|
type: data.Type
|
||
|
|
// ...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),
|
||
|
|
typeFilter,
|
||
|
|
openTime,
|
||
|
|
copyText,
|
||
|
|
scorllBottom,
|
||
|
|
chooseTimes,
|
||
|
|
hanleTime,
|
||
|
|
getList,
|
||
|
|
openPopup
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.Type = options.type
|
||
|
|
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;
|
||
|
|
.twoBox{
|
||
|
|
border-radius: 10rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
margin-top: 24rpx;
|
||
|
|
.search{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
height: 80rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-bottom: 1rpx solid #f1f1f1;
|
||
|
|
.row{
|
||
|
|
padding: 0 24rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #222;
|
||
|
|
.tit{
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list{
|
||
|
|
height: 100%;
|
||
|
|
padding: 24rpx;
|
||
|
|
.row{
|
||
|
|
padding: 24rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
margin-bottom: 24rpx;
|
||
|
|
.one{
|
||
|
|
margin-bottom: 10px;
|
||
|
|
.ope{
|
||
|
|
color: #222;
|
||
|
|
font-size: 30rpx;
|
||
|
|
&.red{
|
||
|
|
color: v-bind('Color');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.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>
|