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> |