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.
682 lines
20 KiB
682 lines
20 KiB
<template>
|
|
<view class="container">
|
|
<view class="top">
|
|
<uni-notice-bar
|
|
show-get-more
|
|
show-icon
|
|
more-text="查看更多"
|
|
:text="noticeList[0].content"
|
|
@getmore="getMore"
|
|
/>
|
|
<view class="back">
|
|
<view class="back-top"></view>
|
|
<view class="uni-radius back-con uni-shadow-sm">
|
|
<view class="">
|
|
<view class="back-con-top"> 昨日收益 </view>
|
|
<view class="back-con-mid">
|
|
<view class="back-con-mid-left">
|
|
广告收益
|
|
<view class="top-text">
|
|
¥ {{ profitInfo.yesterdayAdProfit }}
|
|
</view>
|
|
</view>
|
|
<view class="border"></view>
|
|
<view class="back-con-mid-right">
|
|
邀请收益
|
|
<view class="top-text">
|
|
¥ {{ profitInfo.yesterdayInviteProfit }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="back-con-bot uni-radius uni-shadow-sm">
|
|
<view class="back-con-bot-left">
|
|
累计
|
|
<view class="top-text size14">
|
|
¥ {{ profitInfo.totalProfit }}
|
|
</view>
|
|
</view>
|
|
<view class="border"></view>
|
|
<view class="back-con-bot-mid">
|
|
上月
|
|
<view class="top-text size14">
|
|
¥ {{ profitInfo.lastMonthProfit }}
|
|
</view>
|
|
</view>
|
|
<view class="border"></view>
|
|
<view class="back-con-bot-right">
|
|
当月
|
|
<view class="top-text size14">
|
|
¥ {{ profitInfo.thisMonthProfit }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <uni-section class="back-bot" title="昨日收益" type="line">
|
|
<uni-group mode="card">
|
|
<view>广告收益:{{profitInfo.yesterdayAdProfit}}</view>
|
|
<view>邀请收益:{{profitInfo.yesterdayInviteProfit}}</view>
|
|
<view>总收益:{{profitInfo.totalProfit}}</view>
|
|
<view>上月收益:{{profitInfo.lastMonthProfit}}</view>
|
|
<view>当月收益:{{profitInfo.thisMonthProfit}}</view>
|
|
</uni-group>
|
|
</uni-section> -->
|
|
</view>
|
|
<view class="back2">
|
|
<view class="uni-radius back-con2 uni-shadow-sm">
|
|
<view class="" style="width: 100%">
|
|
<view class="back-con-top"> 收益明细 </view>
|
|
<view class="segmented">
|
|
<view v-for="(item, index) in items" :key="index">
|
|
<view
|
|
@click="segActive(index)"
|
|
v-if="item != ''"
|
|
:class="[
|
|
'segmented-con',
|
|
index == active ? 'activecolor' : '',
|
|
]"
|
|
>
|
|
{{ item }}
|
|
<image
|
|
:class="['img1', index == active ? 'show' : '']"
|
|
src="/static/active.png"
|
|
></image>
|
|
</view>
|
|
<image v-else class="img" src="/static/right.png"></image>
|
|
</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>
|
|
<uni-list>
|
|
<uni-list-item title="曝光" link @click="linkTo(0,0)">
|
|
<template v-slot:footer>
|
|
<view class="blue"> {{downloadAndInviteCountInfo.creatorProfitDownloadCount[0].downloadNum || 0}}次 </view>
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item title="邀请" link @click="linkTo(1,0)">
|
|
<template v-slot:footer>
|
|
<view class="blue"> [{{downloadAndInviteCountInfo.creatorProfitInviteCount[0].createTime || ''}}] {{downloadAndInviteCountInfo.creatorProfitInviteCount[0].inviteDownloadNum || 0}}次 </view>
|
|
</template>
|
|
</uni-list-item>
|
|
</uni-list>
|
|
</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 class="adver-mid"> 2022.06.05 至 2022.07.20 </view> -->
|
|
</view>
|
|
<uni-list>
|
|
<uni-list-item title="曝光" link @click="linkTo(0,1)">
|
|
<template v-slot:footer>
|
|
<view class="blue"> ¥{{inProfitInfo.profit || 0}} </view>
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item title="邀请" link @click="linkTo(1,1)">
|
|
<template v-slot:footer>
|
|
<view class="blue"> ¥{{inProfitInfo.inviteProfit || 0}} </view>
|
|
</template>
|
|
</uni-list-item>
|
|
</uni-list>
|
|
<!-- <view class="adver">
|
|
<view class="adver-top">
|
|
<view class="circular"></view>
|
|
<view class="adver-top-text"> 订单: </view>
|
|
</view>
|
|
<view class="adver-mid"> 会员订单及时入账，T+7即可提现 </view>
|
|
</view>
|
|
<uni-list>
|
|
<uni-list-item title="会员" link>
|
|
<template v-slot:footer>
|
|
<view class="blue"> ¥ 0</view>
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item title="邀请" link>
|
|
<template v-slot:footer>
|
|
<view class="blue"> ¥ 0 </view>
|
|
</template>
|
|
</uni-list-item>
|
|
</uni-list> -->
|
|
</view>
|
|
<!-- 已转入钱包 -->
|
|
<view v-show="active == 4">
|
|
<view class="adver">
|
|
<view class="adver-top">
|
|
<view class="circular"></view>
|
|
<view class="adver-top-text"> 广告: </view>
|
|
</view>
|
|
</view>
|
|
<uni-list>
|
|
<uni-list-item title="曝光" link @click="linkTo(0,2)">
|
|
<template v-slot:footer>
|
|
<view class="blue"> ¥{{endProfitInfo.profit || 0}} </view>
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item title="邀请" link @click="linkTo(1,2)">
|
|
<template v-slot:footer>
|
|
<view class="blue"> ¥{{endProfitInfo.inviteProfit || 0}} </view>
|
|
</template>
|
|
</uni-list-item>
|
|
</uni-list>
|
|
<!-- <view class="adver">
|
|
<view class="adver-top">
|
|
<view class="circular"></view>
|
|
<view class="adver-top-text"> 订单: </view>
|
|
</view>
|
|
</view>
|
|
<uni-list>
|
|
<uni-list-item title="会员" link>
|
|
<template v-slot:footer>
|
|
<view class="blue"> ¥ 0 </view>
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item title="邀请" link>
|
|
<template v-slot:footer>
|
|
<view class="blue"> ¥ 0 </view>
|
|
</template>
|
|
</uni-list-item>
|
|
</uni-list> -->
|
|
</view>
|
|
<!-- <view class="back-con-mid">
|
|
<view class="back-con-mid-left">
|
|
广告收益
|
|
<view class="top-text">
|
|
¥ {{ profitInfo.yesterdayAdProfit }}
|
|
</view>
|
|
</view>
|
|
<view class="border"></view>
|
|
<view class="back-con-mid-right">
|
|
邀请收益
|
|
<view class="top-text">
|
|
¥ {{ profitInfo.yesterdayInviteProfit }}
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<!-- <uni-section class="back-bot" title="昨日收益" type="line">
|
|
<uni-group mode="card">
|
|
<view>广告收益:{{profitInfo.yesterdayAdProfit}}</view>
|
|
<view>邀请收益:{{profitInfo.yesterdayInviteProfit}}</view>
|
|
<view>总收益:{{profitInfo.totalProfit}}</view>
|
|
<view>上月收益:{{profitInfo.lastMonthProfit}}</view>
|
|
<view>当月收益:{{profitInfo.thisMonthProfit}}</view>
|
|
</uni-group>
|
|
</uni-section> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="middle">
|
|
<uni-section title="收益明细" type="line">
|
|
<uni-group mode="card">
|
|
<uni-segmented-control
|
|
:current="current"
|
|
:values="items"
|
|
:style-type="styleType"
|
|
:active-color="activeColor"
|
|
@clickItem="onClickItem"
|
|
/>
|
|
<view class="content">
|
|
<view v-if="current === 0">
|
|
<uni-collapse>
|
|
<uni-collapse-item title="广告" :show-animation="true">
|
|
<view
|
|
class="content"
|
|
v-for="(
|
|
item, index
|
|
) in downloadAndInviteCountInfo.creatorProfitDownloadCount"
|
|
:key="index"
|
|
>
|
|
<text class="text" @click="linkTo(0, 0)"
|
|
>日期:{{ item.createTime }}---</text
|
|
>
|
|
<text class="text">次数:{{ item.downloadNum }}</text>
|
|
</view>
|
|
</uni-collapse-item>
|
|
<uni-collapse-item title="邀请" :show-animation="true">
|
|
<view
|
|
class="content"
|
|
v-for="(
|
|
item, index
|
|
) in downloadAndInviteCountInfo.creatorProfitInviteCount"
|
|
:key="index"
|
|
>
|
|
<text class="text" @click="linkTo(1, 0)"
|
|
>日期:{{ item.createTime }}---</text
|
|
>
|
|
<text class="text">次数:{{ item.inviteDownloadNum }}</text>
|
|
</view>
|
|
</uni-collapse-item>
|
|
</uni-collapse>
|
|
</view>
|
|
<view v-if="current === 1">
|
|
<uni-collapse>
|
|
<uni-collapse-item title="广告" :show-animation="true">
|
|
<view class="content">
|
|
<text class="text" @click="linkTo(0, 1)"
|
|
>额度:{{ inProfitInfo.profit }}</text
|
|
>
|
|
</view>
|
|
</uni-collapse-item>
|
|
<uni-collapse-item title="邀请" :show-animation="true">
|
|
<view class="content">
|
|
<text class="text" @click="linkTo(1, 1)"
|
|
>额度:{{ inProfitInfo.inviteProfit }}</text
|
|
>
|
|
</view>
|
|
</uni-collapse-item>
|
|
</uni-collapse>
|
|
</view>
|
|
<view v-if="current === 2">
|
|
<uni-collapse>
|
|
<uni-collapse-item title="广告" :show-animation="true">
|
|
<view class="content">
|
|
<text class="text" @click="linkTo(0, 2)"
|
|
>额度:{{ endProfitInfo.profit }}</text
|
|
>
|
|
</view>
|
|
</uni-collapse-item>
|
|
<uni-collapse-item title="邀请" :show-animation="true">
|
|
<view class="content">
|
|
<text class="text" @click="linkTo(1, 2)"
|
|
>额度:{{ endProfitInfo.inviteProfit }}</text
|
|
>
|
|
</view>
|
|
</uni-collapse-item>
|
|
</uni-collapse>
|
|
</view>
|
|
</view>
|
|
</uni-group>
|
|
</uni-section>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryFrontProfitInfo, //查询指定艺术家收益统计
|
|
queryFrontPreDownloadAndInviteCount, //查询指定艺术家即将入账广告及邀请次数列表
|
|
queryFrontPreProfit, //查询指定艺术家即将入账收益列表
|
|
queryFrontInOrOutAmt, //查询指定艺术家已入账/转入钱包累计收益
|
|
} from "@/api/profit.js";
|
|
import { getNoticeList } from "@/api/userInfo.js";
|
|
export default {
|
|
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,
|
|
};
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
uni.stopPullDownRefresh();
|
|
},
|
|
created() {
|
|
const userInfoSync = uni.getStorageSync("userInfo");
|
|
this.userInfo = userInfoSync;
|
|
this.queryFrontProfitInfo();
|
|
this.queryFrontPreDownloadAndInviteCount();
|
|
this.queryFrontInAmt();
|
|
this.queryFrontEndAmt();
|
|
this.getNoticeList();
|
|
},
|
|
methods: {
|
|
// 获取艺术家收益统计
|
|
async queryFrontProfitInfo() {
|
|
const res = await queryFrontProfitInfo(this.userInfo.id);
|
|
//console.log('res', res)
|
|
if (res.data.code === 200) {
|
|
this.profitInfo = res.data.data;
|
|
//console.log('profitInfo', this.profitInfo)
|
|
} else {
|
|
uni.showModal({
|
|
content: "收益统计加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 查询指定艺术家即将入账广告及邀请次数列表
|
|
async queryFrontPreDownloadAndInviteCount() {
|
|
const res = await queryFrontPreDownloadAndInviteCount(this.userInfo.id);
|
|
//console.log('res', res)
|
|
if (res.data.code === 200) {
|
|
this.downloadAndInviteCountInfo = res.data.data;
|
|
//console.log('downloadAndInviteCountInfo', this.downloadAndInviteCountInfo)
|
|
} else {
|
|
uni.showModal({
|
|
content: "收益统计次数加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 查询指定艺术家已入账累计收益
|
|
async queryFrontInAmt() {
|
|
const res = await queryFrontInOrOutAmt({
|
|
creatorId: this.userInfo.id,
|
|
status: "1",
|
|
});
|
|
//console.log('InAmt', res)
|
|
if (res.data.code === 200) {
|
|
this.inProfitInfo = res.data.data;
|
|
} else {
|
|
uni.showModal({
|
|
content: "已入账收益加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 查询指定艺术家转入钱包累计收益
|
|
async queryFrontEndAmt() {
|
|
const res = await queryFrontInOrOutAmt({
|
|
creatorId: this.userInfo.id,
|
|
status: "2",
|
|
});
|
|
//console.log('endAmt', res)
|
|
if (res.data.code === 200) {
|
|
this.endProfitInfo = res.data.data;
|
|
} else {
|
|
uni.showModal({
|
|
content: "转入钱包收益加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 获取公告分页
|
|
async getNoticeList() {
|
|
const res = await getNoticeList({
|
|
pageSize: this.pageSize,
|
|
pageNum: this.pageNum,
|
|
});
|
|
//console.log('res', res)
|
|
if (res.data.code === 200) {
|
|
this.noticeList = res.data.rows;
|
|
//console.log('noticeList', this.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;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
|
|
}
|
|
.back {
|
|
width: 100%;
|
|
height: 320px;
|
|
position: relative;
|
|
}
|
|
.back2 {
|
|
width: 100%;
|
|
// height: 320px;
|
|
// position: relative;
|
|
// top: -60px;
|
|
}
|
|
.back-top {
|
|
width: 100%;
|
|
position: absolute;
|
|
height: 120px;
|
|
background: #416bdc;
|
|
}
|
|
.back-con {
|
|
width: 95%;
|
|
left: 50%;
|
|
top: 42%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: white;
|
|
position: absolute;
|
|
height: 220px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.back-con2 {
|
|
width: 95%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
left: 50%;
|
|
top: 460px;
|
|
transform: translate(-50%, -50%);
|
|
background-color: white;
|
|
position: absolute;
|
|
height: 290px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
.back-bot {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 80px;
|
|
}
|
|
.back-con-top {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin: 20px 0 15px 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.back-con-mid {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.border {
|
|
width: 1px;
|
|
height: 30px;
|
|
background-color: rgb(165, 165, 165);
|
|
}
|
|
.back-con-mid-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: rgb(165, 165, 165);
|
|
padding-right: 40px;
|
|
// border-right: 1px solid #ccc;
|
|
}
|
|
.back-con-mid-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: rgb(165, 165, 165);
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.back-con-bot {
|
|
width: 100%;
|
|
height: 80px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.back-con-bot-left {
|
|
width: 33.33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #a5a5a5;
|
|
}
|
|
.back-con-bot-mid {
|
|
width: 33.33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #a5a5a5;
|
|
}
|
|
.back-con-bot-right {
|
|
width: 33.33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #a5a5a5;
|
|
}
|
|
.uni-padding-wrap {
|
|
// width: 750rpx;
|
|
padding: 0px 30px;
|
|
}
|
|
|
|
.uni-common-mt {
|
|
margin-top: 30px;
|
|
}
|
|
.segmented {
|
|
display: flex;
|
|
justify-content: center;
|
|
// align-items: center;
|
|
}
|
|
.segmented-con {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #a5a5a5;
|
|
}
|
|
.img1 {
|
|
width: 15px;
|
|
height: 10px;
|
|
margin-top: 7px;
|
|
visibility: hidden;
|
|
}
|
|
.img {
|
|
width: 18px;
|
|
height: 15px;
|
|
margin: 0 20px;
|
|
}
|
|
.top-text {
|
|
font-size: 20px;
|
|
margin-top: 12px;
|
|
color: red;
|
|
}
|
|
.size14 {
|
|
font-size: 16px;
|
|
}
|
|
.show {
|
|
visibility: visible;
|
|
}
|
|
.activecolor {
|
|
color: #4d6cff;
|
|
}
|
|
.circular {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #4d6cff;
|
|
margin-right: 10px;
|
|
}
|
|
.adver {
|
|
margin-top: 6px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.adver-top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 12px;
|
|
}
|
|
.adver-top-text {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
.adver-mid {
|
|
font-size: 12px;
|
|
color: #ccc;
|
|
// margin-top: ;
|
|
margin-bottom: 8px;
|
|
}
|
|
.blue {
|
|
color: #4d6cff;
|
|
}
|
|
</style>
|
|
|