403 lines
10 KiB
Vue
403 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view class="p-20 container">
|
|||
|
|
<view class="search-block flex flex-row items-center justify-between">
|
|||
|
|
<u-tabs :list="tabs" lineWidth="30" lineColor="#007aff" :activeStyle="{
|
|||
|
|
color: '#303133',
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
transform: 'scale(1.05)'
|
|||
|
|
}" :inactiveStyle="{
|
|||
|
|
color: '#606266',
|
|||
|
|
transform: 'scale(1)'
|
|||
|
|
}" itemStyle="padding-left: 8px; padding-right: 8px; height: 34px;" @change="changePlatformTab">
|
|||
|
|
</u-tabs>
|
|||
|
|
<view>
|
|||
|
|
<sl-filter :ref="'slFilter'" :topFixed="false" :isTransNav="true" :navHeight="0" :color="titleColor"
|
|||
|
|
:themeColor="themeColor" :tabHeight="30" :menuList="menuList" @result="result"></sl-filter>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tags flex flex-row">
|
|||
|
|
<view :class="['tag', tagCurrent === index && 'active' ]" v-for="(item, index) in tagList" :key="item.value"
|
|||
|
|
@click="changeTab(index)">{{item.name}}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="amount flex flex-col">
|
|||
|
|
<view class="flex flex-row">
|
|||
|
|
<view class="flex-1 flex flex-col">
|
|||
|
|
<text class="t1">预估收益</text>
|
|||
|
|
<text class="m1">¥ {{(topStatics.estimateEarnings/100).toFixed(2)}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-1 flex flex-col">
|
|||
|
|
<text class="t1">充值金额</text>
|
|||
|
|
<text class="m1">¥ {{(topStatics.rechargeMoney/100).toFixed(2)}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-1 flex flex-col">
|
|||
|
|
<text class="t1">退款金额</text>
|
|||
|
|
<text class="m1">¥ {{(topStatics.refundMoney/100).toFixed(2)}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="flex flex-row" style="margin-top: 20upx;">
|
|||
|
|
<view class="flex-1 flex flex-col">
|
|||
|
|
<text class="t1">预估收益</text>
|
|||
|
|
<text class="m1">¥ 0.00</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-1 flex flex-col">
|
|||
|
|
<text class="t1">点击人数</text>
|
|||
|
|
<text class="m1">0</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-1 flex flex-col">
|
|||
|
|
<text class="t1">点击次数</text>
|
|||
|
|
<text class="m1">0</text>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="income p-d-20">
|
|||
|
|
<view>收益明细</view>
|
|||
|
|
<view class="flex flex-row">
|
|||
|
|
<view :class="['type-tag', earningsType === 1 && 'active']" @click="changeEarnType(1)">充值收益</view>
|
|||
|
|
<view :class="['type-tag', earningsType === 2 && 'active']" @click="changeEarnType(2)">广告收益</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="p-d-20">
|
|||
|
|
<view class="information p-20 flex flex-row">
|
|||
|
|
<image class="img" src="" mode="widthFix"></image>
|
|||
|
|
<view class="flex-1 flex flex-col">
|
|||
|
|
<view class="flex flex-row justify-between items-center">
|
|||
|
|
<view><text>章章剧场</text></view>
|
|||
|
|
<text class="red">即将到账</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="title ellipsis">老公的金丝雀怀孕后老</view>
|
|||
|
|
<text>付款时间：20223-23-02 00：00：00</text>
|
|||
|
|
<view class="wage1 flex flex-row justify-between">
|
|||
|
|
<text>付款金额：200</text>
|
|||
|
|
<text>预计收入：16.8</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="information p-20 flex flex-row">
|
|||
|
|
<image class="img" src="" mode="widthFix"></image>
|
|||
|
|
<view class="flex-1 flex flex-col">
|
|||
|
|
<view class="flex flex-row justify-between items-center">
|
|||
|
|
<view><text>章章剧场</text></view>
|
|||
|
|
<text class="red">即将到账</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="title ellipsis">老公的金丝雀怀孕后老</view>
|
|||
|
|
<text>付款时间：20223-23-02 00：00：00</text>
|
|||
|
|
<view class="wage1 flex flex-row justify-between">
|
|||
|
|
<text>付款金额：200</text>
|
|||
|
|
<text>预计收入：16.8</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="information p-20 flex flex-row">
|
|||
|
|
<image class="img" src="" mode="widthFix"></image>
|
|||
|
|
<view class="flex-1 flex flex-col">
|
|||
|
|
<view class="flex flex-row justify-between items-center">
|
|||
|
|
<view><text>章章剧场</text></view>
|
|||
|
|
<text class="red">即将到账</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="title ellipsis">老公的金丝雀怀孕后老</view>
|
|||
|
|
<text>付款时间：20223-23-02 00：00：00</text>
|
|||
|
|
<view class="wage1 flex flex-row justify-between">
|
|||
|
|
<text>付款金额：200</text>
|
|||
|
|
<text>预计收入：16.8</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
record,
|
|||
|
|
getTypeList
|
|||
|
|
} from '@/api/index.js'
|
|||
|
|
import {
|
|||
|
|
currentDate
|
|||
|
|
} from '@/utils/common.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
themeColor: '#007aff',
|
|||
|
|
titleColor: '#666666',
|
|||
|
|
tabs: [{
|
|||
|
|
name: '全部'
|
|||
|
|
}, {
|
|||
|
|
name: '抖音'
|
|||
|
|
}, {
|
|||
|
|
name: '快手'
|
|||
|
|
}, {
|
|||
|
|
name: '视频号'
|
|||
|
|
}],
|
|||
|
|
menuList: [{
|
|||
|
|
'title': '全部剧场',
|
|||
|
|
'isMutiple': false,
|
|||
|
|
'key': 'playSource',
|
|||
|
|
'defaultSelectedIndex': 0,
|
|||
|
|
'detailList': []
|
|||
|
|
|
|||
|
|
}],
|
|||
|
|
tagList: [{
|
|||
|
|
name: '今天',
|
|||
|
|
value: 0
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '昨天',
|
|||
|
|
value: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '7天',
|
|||
|
|
value: 7
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '15天',
|
|||
|
|
value: 15
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '本月',
|
|||
|
|
value: 30
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '上月',
|
|||
|
|
value: 60
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
tagCurrent: 0,
|
|||
|
|
filter: {
|
|||
|
|
startTime: '',
|
|||
|
|
endTime: '',
|
|||
|
|
sourcePlatform: '',
|
|||
|
|
playletItemId: ''
|
|||
|
|
},
|
|||
|
|
topStatics: {
|
|||
|
|
estimateEarnings: 0,
|
|||
|
|
rechargeMoney: 0,
|
|||
|
|
refundMoney: 0
|
|||
|
|
},
|
|||
|
|
earningsType: 1,
|
|||
|
|
list: [],
|
|||
|
|
height: 200
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 在页面中使用 ， this是当前页面中的this， arr 是包含dom类名的数组
|
|||
|
|
async onReady() {
|
|||
|
|
// 顶部搜索栏 和 轮播图 的类名
|
|||
|
|
let arr = ['.search-block','.tags', '.amount', '.income']
|
|||
|
|
this.height = await this.getScrollViewHeight(this, arr)
|
|||
|
|
this.getList(1)
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.filter.startTime = currentDate() + ' 00:00:00'
|
|||
|
|
this.filter.endTime = currentDate() + ' 00:00:00'
|
|||
|
|
this.getPlayType()
|
|||
|
|
this.getTopStatics()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getSystemInfo(key) {
|
|||
|
|
return new Promise(function(resolve, reject) {
|
|||
|
|
uni.getSystemInfo({
|
|||
|
|
success(res) {
|
|||
|
|
key ? resolve(res[key]) : resolve(res)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getDomHeight(_this, selector) {
|
|||
|
|
return new Promise(function(resolve, reject) {
|
|||
|
|
const query = uni.createSelectorQuery().in(_this);
|
|||
|
|
query.select(selector).boundingClientRect(data => {
|
|||
|
|
resolve(data.height)
|
|||
|
|
}).exec();
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
async getScrollViewHeight(_this, arr) {
|
|||
|
|
let height = 0
|
|||
|
|
let windowHeight = await this.getSystemInfo('windowHeight')
|
|||
|
|
for (let i = 0; i < arr.length; i++) {
|
|||
|
|
let h = await this.getDomHeight(_this, arr[i])
|
|||
|
|
height += h
|
|||
|
|
}
|
|||
|
|
return windowHeight - height
|
|||
|
|
},
|
|||
|
|
async getPlayType() {
|
|||
|
|
const res = await getTypeList({})
|
|||
|
|
const getData = res.data.map(i => {
|
|||
|
|
return {
|
|||
|
|
title: i.name,
|
|||
|
|
value: i.id
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.menuList[0].detailList = [{
|
|||
|
|
'title': '全部剧场',
|
|||
|
|
'value': ''
|
|||
|
|
},
|
|||
|
|
...getData
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
async getTopStatics() {
|
|||
|
|
const res = await record.statisticsTimeType(this.filter)
|
|||
|
|
if (!res.success) return
|
|||
|
|
this.topStatics.estimateEarnings = res.data.estimateEarnings
|
|||
|
|
this.topStatics.rechargeMoney = res.data.rechargeMoney
|
|||
|
|
this.topStatics.refundMoney = res.data.refundMoney
|
|||
|
|
},
|
|||
|
|
result(val) {
|
|||
|
|
this.filter.playletItemId = val.playSource
|
|||
|
|
this.getTopStatics()
|
|||
|
|
},
|
|||
|
|
changePlatformTab(e) {
|
|||
|
|
this.filter.sourcePlatform = e.index ? e.index : ''
|
|||
|
|
this.getTopStatics()
|
|||
|
|
},
|
|||
|
|
changeTab(index) {
|
|||
|
|
if (this.tagCurrent === index) return;
|
|||
|
|
this.tagCurrent = index
|
|||
|
|
const range = this.tagList[this.tagCurrent].value
|
|||
|
|
this.filter.startTime = currentDate() + ' 00:00:00'
|
|||
|
|
this.filter.endTime = currentDate(false, -range) + ' 00:00:00'
|
|||
|
|
this.getTopStatics()
|
|||
|
|
},
|
|||
|
|
changeEarnType(index) {
|
|||
|
|
if(this.earningsType === index) return
|
|||
|
|
this.earningsType = index;
|
|||
|
|
this.search()
|
|||
|
|
},
|
|||
|
|
search(){
|
|||
|
|
this.list = [];
|
|||
|
|
this.mescroll.resetUpScroll();
|
|||
|
|
},
|
|||
|
|
async getList(pageNum) {
|
|||
|
|
const res = await record.getRecordList(pageNum, 10, {
|
|||
|
|
...this.filter,
|
|||
|
|
earningsType: this.earningsType
|
|||
|
|
})
|
|||
|
|
if(res.success) {
|
|||
|
|
this.mescroll.endBySize(res.data.list.length, parseInt(res.data.total));
|
|||
|
|
if (pageNum == 1) this.list = []; //如果是第一页需手动制空列表
|
|||
|
|
this.list = this.list.concat(res.data.list);
|
|||
|
|
} else {
|
|||
|
|
this.mescroll.endErr();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
upCallback(page) {
|
|||
|
|
this.getList(page.num)
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.container {
|
|||
|
|
background: linear-gradient(to bottom, #c6d9f7, #f0f5fc, #ffffff);
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tags {
|
|||
|
|
padding: 20upx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag {
|
|||
|
|
width: 93.33upx;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
padding: 10upx 0;
|
|||
|
|
color: #3a5184;
|
|||
|
|
background-color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
margin-right: 30upx;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
color: #2a6cc4;
|
|||
|
|
background-color: #d5e5ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amount {
|
|||
|
|
border-radius: 20upx;
|
|||
|
|
padding: 50upx 0;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
background: linear-gradient(to right, #5a7cfe, #055de9);
|
|||
|
|
|
|||
|
|
.flex-1 {
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t1 {
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #8eadfe;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.m1 {
|
|||
|
|
font-size: 30upx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
padding-top: 10upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.type-tag {
|
|||
|
|
padding: 10upx 20upx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
font-size: 25upx;
|
|||
|
|
margin-right: 10upx;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
color: $uni-theme;
|
|||
|
|
background-color: #ecf5ff;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.information {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20upx;
|
|||
|
|
margin-bottom: 20upx;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 150upx;
|
|||
|
|
height: auto;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-1 {
|
|||
|
|
padding-left: 20upx;
|
|||
|
|
width: 500upx;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
display: block;
|
|||
|
|
color: #323333;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
padding: 10upx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.red {
|
|||
|
|
color: $u-error;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
color: #aaa;
|
|||
|
|
font-size: 25upx;
|
|||
|
|
padding: 2upx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wage1 {
|
|||
|
|
padding-top: 10upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wage1 text {
|
|||
|
|
color: $u-main-color;
|
|||
|
|
font-size: 27upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|