You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
568 lines
15 KiB
568 lines
15 KiB
<template>
|
|
<view class="container">
|
|
<view class="top">
|
|
<!-- <image class="left-background-img" :src="incomeBackground" />-->
|
|
<image class="top-background-img" :src="incomeBackground" />
|
|
<view class="accumulate-income">
|
|
<view>
|
|
<div class="accumulate-income-title">累计收益</div>
|
|
<div class="income-num">
|
|
<MoneyView :character="'￥'" :value="profitInfo.totalProfit" :size="60" :hidden="hidden"/>
|
|
<div class="income-hidden-but" @click="clickHidden">
|
|
<uni-icons v-if="hidden" type="eye" :size="24" :color="'#909399'" />
|
|
<uni-icons v-else type="eye-slash" :size="24" :color="'#909399'" />
|
|
</div>
|
|
</div>
|
|
<div class="income-history">
|
|
<view>上月收入：</view><MoneyView :value="profitInfo.lastMonthProfit" :hidden="hidden"/>
|
|
<view :style="{width: '2rpx', marginLeft: '10rpx', marginRight: '10rpx'}"></view>
|
|
<view>当月收入：</view><MoneyView :value="profitInfo.thisMonthProfit" :hidden="hidden"/>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-notice-bar
|
|
show-get-more
|
|
show-icon
|
|
background-color="#1d2734"
|
|
color="#909399"
|
|
moreColor="#909399"
|
|
:scrollable="true"
|
|
more-text="查看更多"
|
|
:text="noticeList[0].content"
|
|
@getmore="getMore"
|
|
/>
|
|
<view class="meddle">
|
|
<view class="income-categories">
|
|
<view class="yesterday-income-title">
|
|
昨日收益
|
|
</view>
|
|
<view class="yesterday-income">
|
|
<view class="income-category-item">
|
|
<view class="left-icon">
|
|
<image class="" :src="advertIcon" />
|
|
</view>
|
|
<view class="right-income-info">
|
|
<view>广告收益</view>
|
|
<view class="yesterday-income-num">
|
|
<MoneyView :character="'￥'" :value="profitInfo.yesterdayAdProfit" :size="32" :hidden="hidden"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="income-category-item">
|
|
<view class="left-icon">
|
|
<image class="" :src="inviteIcon" />
|
|
</view>
|
|
<view class="right-income-info">
|
|
<view>邀请收益</view>
|
|
<view class="yesterday-income-num">
|
|
<MoneyView :character="'￥'" :value="profitInfo.yesterdayInviteProfit" :size="32" :hidden="hidden"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="foot">
|
|
<view class="income-detail-selector">
|
|
<view class="details-select-item" v-for="(item, index) in items" :key="index">
|
|
<view
|
|
@click="segActive(index)"
|
|
v-if="item !== ''"
|
|
:class="[
|
|
'segmented-con',
|
|
index === active ? 'active-color' : '',
|
|
]"
|
|
>
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 即将入账 -->
|
|
<view v-show="active == 0">
|
|
<view class="adver">
|
|
<view class="adver-top">
|
|
<view class="circular"></view>
|
|
<view class="adver-top-text"> 广告: </view>
|
|
</view>
|
|
<view class="adver-mid">
|
|
抖音/快手/微信均为次日结算前日ECPM价格
|
|
</view>
|
|
</view>
|
|
<view class="detail-categories-item" @click="linkTo(0,0)">
|
|
<div class="title">曝光</div>
|
|
<div class="text uni-white">{{downloadAndInviteCountInfo.creatorProfitDownloadCount[0].downloadNum || 0}}次 </div>
|
|
<uni-icons type="right" size="12" color="#ffffff" />
|
|
</view>
|
|
<view class="detail-categories-item" @click="linkTo(1,0)">
|
|
<div class="title">邀请</div>
|
|
<div class="text uni-white">[{{downloadAndInviteCountInfo.creatorProfitInviteCount[0].createTime || ''}}] {{downloadAndInviteCountInfo.creatorProfitInviteCount[0].inviteDownloadNum || 0}}次 </div>
|
|
<uni-icons type="right" size="12" color="#ffffff" />
|
|
</view>
|
|
</view>
|
|
<!-- 已入账 -->
|
|
<view v-show="active == 1">
|
|
<view class="adver">
|
|
<view class="adver-top">
|
|
<view class="circular"></view>
|
|
<view class="adver-top-text"> 广告: </view>
|
|
</view>
|
|
<!-- <view class="adver-mid"> 2022.06.05 至 2022.07.20 </view> -->
|
|
</view>
|
|
<view class="detail-categories-item" @click="linkTo(0,1)">
|
|
<div class="title">曝光</div>
|
|
<div class="text uni-white"><MoneyView :character="'￥'" :value="inProfitInfo.profit || 0" :hidden="hidden"/></div>
|
|
<uni-icons type="right" size="12" color="#ffffff" />
|
|
</view>
|
|
<view class="detail-categories-item" @click="linkTo(1,1)">
|
|
<div class="title">邀请</div>
|
|
<div class="text uni-white"><MoneyView :character="'￥'" :value="inProfitInfo.inviteProfit || 0" :hidden="hidden"/></div>
|
|
<uni-icons type="right" size="12" color="#ffffff" />
|
|
</view>
|
|
</view>
|
|
<!-- 已转入钱包 -->
|
|
<view v-show="active == 2">
|
|
<view class="adver">
|
|
<view class="adver-top">
|
|
<view class="circular"></view>
|
|
<view class="adver-top-text"> 广告: </view>
|
|
</view>
|
|
</view>
|
|
<view class="detail-categories-item" @click="linkTo(0,2)">
|
|
<div class="title">曝光</div>
|
|
<div class="text uni-white"><MoneyView :character="'￥'" :value="endProfitInfo.profit || 0" :hidden="hidden"/></div>
|
|
<uni-icons type="right" size="12" color="#ffffff" />
|
|
</view>
|
|
<view class="detail-categories-item" @click="linkTo(1,2)">
|
|
<div class="title">邀请</div>
|
|
<div class="text uni-white"><MoneyView :character="'￥'" :value="endProfitInfo.inviteProfit || 0" :hidden="hidden"/></div>
|
|
<uni-icons type="right" size="12" color="#ffffff" />
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryFrontProfitInfo, //查询指定艺术家收益统计
|
|
queryFrontPreDownloadAndInviteCount, //查询指定艺术家即将入账广告及邀请次数列表
|
|
queryFrontPreProfit, //查询指定艺术家即将入账收益列表
|
|
queryFrontInOrOutAmt, //查询指定艺术家已入账/转入钱包累计收益
|
|
} from "@/api/profit.js";
|
|
import { getNoticeList } from "@/api/userInfo.js";
|
|
import MoneyView from "@/components/money-view/money-view.vue"
|
|
export default {
|
|
components: {
|
|
MoneyView
|
|
},
|
|
data() {
|
|
return {
|
|
nvueWidth: 730,
|
|
profitInfo: {
|
|
yesterdayAdProfit: 0,
|
|
yesterdayInviteProfit: 0,
|
|
totalProfit: 0,
|
|
lastMonthProfit: 0,
|
|
thisMonthProfit: 0,
|
|
},
|
|
downloadAndInviteCountInfo: {},
|
|
profitList: [],
|
|
items: ["即将入账", "已入账", "已转入钱包"],
|
|
current: 0,
|
|
activeColor: "#007aff",
|
|
styleType: "text",
|
|
inProfitInfo: {},
|
|
endProfitInfo: {},
|
|
userInfo: {},
|
|
noticeList: [],
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
active: 0,
|
|
hidden: false,
|
|
incomeBackground: '/static/income-background.png',
|
|
advertIcon: "/static/material.png",
|
|
inviteIcon: "/static/material.png",
|
|
};
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
uni.stopPullDownRefresh();
|
|
},
|
|
created() {
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (!userInfo) {
|
|
/*uni.showModal({
|
|
content: '艺术家账户过期,请重新登录！',
|
|
showCancel: false,
|
|
success() {
|
|
//没有缓存则跳转登录页面
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
});
|
|
}
|
|
});*/
|
|
} else {
|
|
this.userInfo = userInfo;
|
|
}
|
|
this.queryFrontProfitInfo();
|
|
this.queryFrontPreDownloadAndInviteCount();
|
|
this.queryFrontInAmt();
|
|
this.queryFrontEndAmt();
|
|
this.getNoticeList();
|
|
},
|
|
methods: {
|
|
// 获取艺术家收益统计
|
|
async queryFrontProfitInfo() {
|
|
let that = this;
|
|
const res = await queryFrontProfitInfo(that.userInfo.id);
|
|
//console.log('res', res)
|
|
if (res.data.code === 200) {
|
|
that.profitInfo = res.data.data;
|
|
//console.log('profitInfo', that.profitInfo)
|
|
} else {
|
|
uni.showModal({
|
|
content: "收益统计加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 查询指定艺术家即将入账广告及邀请次数列表
|
|
async queryFrontPreDownloadAndInviteCount() {
|
|
let that = this;
|
|
const res = await queryFrontPreDownloadAndInviteCount(that.userInfo.id);
|
|
//console.log('res', res)
|
|
if (res.data.code === 200) {
|
|
that.downloadAndInviteCountInfo = res.data.data;
|
|
//console.log('downloadAndInviteCountInfo', that.downloadAndInviteCountInfo)
|
|
} else {
|
|
uni.showModal({
|
|
content: "收益统计次数加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 查询指定艺术家已入账累计收益
|
|
async queryFrontInAmt() {
|
|
let that = this;
|
|
const res = await queryFrontInOrOutAmt({
|
|
creatorId: that.userInfo.id,
|
|
status: "1",
|
|
});
|
|
//console.log('InAmt', res)
|
|
if (res.data.code === 200) {
|
|
that.inProfitInfo = res.data.data;
|
|
} else {
|
|
uni.showModal({
|
|
content: "已入账收益加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 查询指定艺术家转入钱包累计收益
|
|
async queryFrontEndAmt() {
|
|
let that = this;
|
|
const res = await queryFrontInOrOutAmt({
|
|
creatorId: that.userInfo.id,
|
|
status: "2",
|
|
});
|
|
//console.log('endAmt', res)
|
|
if (res.data.code === 200) {
|
|
that.endProfitInfo = res.data.data;
|
|
} else {
|
|
uni.showModal({
|
|
content: "转入钱包收益加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 获取公告分页
|
|
async getNoticeList() {
|
|
let that = this;
|
|
const res = await getNoticeList({
|
|
pageSize: that.pageSize,
|
|
pageNum: that.pageNum,
|
|
});
|
|
//console.log('res', res)
|
|
if (res.data.code === 200) {
|
|
that.noticeList = res.data.rows;
|
|
//console.log('noticeList', that.noticeList)
|
|
} else {
|
|
uni.showModal({
|
|
content: "公告列表加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 跳转即将到账收益详情页(status:0->即将入账;1->已入账;2->转入钱包)
|
|
linkTo(typeId, status) {
|
|
if (status === 0) {
|
|
uni.setStorage({
|
|
key: "typeId",
|
|
data: typeId,
|
|
success() {
|
|
uni.navigateTo({
|
|
url: "../profit/profitPreDetails",
|
|
});
|
|
},
|
|
});
|
|
} else if (status === 1) {
|
|
uni.setStorage({
|
|
key: "typeId",
|
|
data: typeId,
|
|
success() {
|
|
uni.navigateTo({
|
|
url: "../profit/profitInDetails",
|
|
});
|
|
},
|
|
});
|
|
} else {
|
|
uni.setStorage({
|
|
key: "typeId",
|
|
data: typeId,
|
|
success() {
|
|
uni.navigateTo({
|
|
url: "../profit/profitEndDetails",
|
|
});
|
|
},
|
|
});
|
|
}
|
|
},
|
|
onClickItem(e) {
|
|
if (this.current !== e.currentIndex) {
|
|
this.current = e.currentIndex;
|
|
}
|
|
},
|
|
|
|
//查看更多公告
|
|
getMore() {
|
|
uni.navigateTo({
|
|
url: "../../pages-userInfo/notice/notice",
|
|
});
|
|
},
|
|
segActive(index) {
|
|
this.active = index;
|
|
},
|
|
clickHidden() {
|
|
this.hidden = !this.hidden;
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
|
|
min-height: 100vh;
|
|
background: #141b29;
|
|
color: #FFFFFF !important;
|
|
|
|
}
|
|
|
|
.top {
|
|
width: 750rpx;
|
|
height: 30vh;
|
|
background: #0b6375;
|
|
position: relative;
|
|
|
|
.left-background-img {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 200rpx;
|
|
height: 150rpx;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.top-background-img {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.accumulate-income {
|
|
width: calc(100% - 80rpx);
|
|
height: calc(100% - 80rpx);
|
|
padding: 40rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.accumulate-income-title {
|
|
font-size: 28rpx;
|
|
|
|
}
|
|
|
|
.income-num {
|
|
width: 100%;
|
|
line-height: 90rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.income-hidden-but {
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.income-history {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.meddle {
|
|
width: 670rpx;
|
|
margin: 40rpx auto;
|
|
background: #1d2734;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
.income-categories{
|
|
|
|
.yesterday-income-title {
|
|
height: 32rpx;
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
background: #0a6375;
|
|
padding: 20rpx 40rpx;
|
|
}
|
|
|
|
.yesterday-income {
|
|
display: flex;
|
|
padding: 40rpx;
|
|
|
|
.income-category-item {
|
|
width: 295rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.left-icon {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
|
|
::v-deep image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.right-income-info {
|
|
width: 170rpx;
|
|
font-size: 24rpx;
|
|
line-height: 60rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.foot {
|
|
width: 670rpx;
|
|
margin: 40rpx auto;
|
|
|
|
.income-detail-selector {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.details-select-item {
|
|
width: 200rpx;
|
|
|
|
.segmented-con {
|
|
width: 100%;
|
|
height: 72rpx;
|
|
font-size: 32rpx;
|
|
line-height: 72rpx;
|
|
text-align: center;
|
|
background: #1d2734;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.active-color {
|
|
background: #0a6375;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.adver {
|
|
width: 100%;
|
|
padding: 20rpx 0;
|
|
|
|
.adver-top {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.circular {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 100%;
|
|
background: #0a6375;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.adver-top-text {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.adver-mid {
|
|
font-size: 24rpx;
|
|
color: #909399;
|
|
}
|
|
|
|
}
|
|
|
|
.detail-categories-item {
|
|
width: calc(100% - 40rpx);
|
|
background: #1d2734;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 60rpx;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.text{
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
width: 500rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|