创作者微信小程序端
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.
 
 
 
 

361 lines
8.9 KiB

<template>
<view>
<view class="status-choice-comp">
<view class="status-item uni-secondary-color" v-for="(val, i) in items"
:index="i" :key="i"
:class="typeId === i ? 'status-active' : ''"
@click="onClickItem({currentIndex: i})"
>
<view class="status-text">{{val}}</view>
</view>
</view>
<view class="content">
<uni-list v-if="typeId === 0"
border-full
v-for="(item, index) in inProfitAdList"
:key="index"
>
<uni-list-item
showArrow
clickable
:title="item.createTime + '@' + item.scanCode"
:note="item.appType + '&' + item.platform + '&' + item.type"
:thumb="item.url"
thumb-size="lg"
:rightText="'¥' + item.profit"
@click="targetToOrder(item.id)"
>
<template v-slot:body>
<view class="box">
<view class="uni-list-item__content-title">{{
item.createTime + "@" + item.scanCode
}}</view>
<view class="box-bot">
<view>
{{ setAppType(item.appType) }}
</view>
<view>
{{ setPlatform(item.platform) }}
</view>
<view :class="item.confirmStatus != 0 ? 'primary-color' : ''">
{{ item.confirmStatus == 0 ? "待确认" : "已确认" }}
</view>
</view>
</view>
</template>
</uni-list-item>
</uni-list>
<uni-list v-if="typeId === 1"
border-full
v-for="(item, index) in inProfitInviteList"
:key="index"
>
<uni-list-item
showArrow
clickable
:title="item.createTime + '@' + item.scanCode"
:note="item.appType + '&' + item.platform + '&' + item.type"
:thumb="item.url"
thumb-size="lg"
:rightText="'¥' + item.profit"
@click="targetToOrder(item.id)"
>
<template v-slot:body>
<view class="box">
<view class="uni-list-item__content-title">{{
item.createTime + "@" + item.scanCode
}}</view>
<view class="box-bot">
<view>
{{ setAppType(item.appType) }}
</view>
<view>
{{ setPlatform(item.platform) }}
</view>
<view :class="item.confirmStatus != 0 ? 'primary-color' : ''">
{{ item.confirmStatus == 0 ? "待确认" : "已确认" }}
</view>
</view>
</view>
</template>
</uni-list-item>
</uni-list>
<!-- 显示加载中或者全部加载完成 -->
<view>
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</view>
</view>
</template>
<script>
import { queryFrontInProfitAmt } from "@/api/profit.js";
export default {
data() {
return {
items: ["广告", "邀请"],
typeId: 0,
activeColor: "#007aff",
styleType: "text",
inProfitAdList: [],
inProfitInviteList: [],
userInfo: {},
pageSize: 10,
pageNum: 1,
flagAd: false,
flagInvite: false,
loadStatus:'noMore', //加载样式:more - 加载前样式,loading - 加载中样式,noMore - 没有数据样式
isLoadMore:false, //是否加载中
};
},
created() {
const userInfo = uni.getStorageSync('userInfo')
if (!userInfo) {
console.log('havent userInfo')
uni.showModal({
content: '艺术家账户过期,请重新登录!',
showCancel: false,
success() {
//没有缓存则跳转登录页面
uni.reLaunch({
url: '/pages/login/login'
});
}
});
} else {
this.userInfo = userInfo;
console.log('have userInfo')
}
const typeProfitId = uni.getStorageSync("typeId");
this.typeId = typeProfitId;
if (typeProfitId) {
this.queryFrontInProfitAmt();
} else {
this.queryFrontInProfitAmt();
}
},
// 下拉刷新
onPullDownRefresh() {
if (this.typeId === 0) {
this.pageNum = 1;
this.inProfitAdList = [];
this.queryFrontInProfitAmt();
uni.stopPullDownRefresh();
} else {
this.pageNum = 1;
this.inProfitInviteList = [];
this.queryFrontInProfitAmt();
uni.stopPullDownRefresh();
}
},
// 上划加载更多
onReachBottom() {//上拉触底函数
if(!this.isLoadMore) { //此处判断,上锁,防止重复请求
this.isLoadMore=true
if (this.loadStatus === "more") {
this.pageNum += 1 //每次上拉请求新的一页
this.queryFrontInProfitAmt();
}
}
},
methods: {
// 查询指定艺术家已入账收益列表
async queryFrontInProfitAmt() {
let that = this;
that.loadStatus = 'loading';
const res = await queryFrontInProfitAmt({
creatorId: that.userInfo.id,
type: that.typeId,
pageSize: that.pageSize,
pageNum: that.pageNum,
});
if (res.data.code === 200) {
uni.hideLoading();
if (that.typeId === 0) {
that.inProfitAdList.push(...res.data.rows);
} else {
that.inProfitInviteList.push(...res.data.rows);
}
if(res.data.rows.length < that.pageSize){ //判断接口返回数据量小于请求数据量,则表示此为最后一页
that.isLoadMore = true
that.loadStatus = 'noMore'
}else{
this.loadStatus = 'more';
that.isLoadMore = false
}
} else {
uni.showModal({
content: "已入账列表数据加载失败!",
showCancel: false,
});
that.isLoadMore = false
if(that.page > 1){
that.page -= 1
}
}
},
onClickItem(e) {
let that = this;
that.inProfitAdList = [];
that.inProfitInviteList = [];
that.pageNum = 1;
that.loadStatus = 'loading';
that.isLoadMore = false;
if (that.typeId !== e.currentIndex) {
that.typeId = e.currentIndex;
uni.showLoading({
title: "加载中",
mask: true,
success() {
// 查询指定艺术家已入账收益列表
that.queryFrontInProfitAmt();
},
complete() {
uni.hideLoading();
},
});
}
},
targetToOrder(id) {
console.log("id", id);
if (id) {
uni.navigateTo({
url: "/pages-profit/profit/profitInOrder?id=" + id,
});
}
},
setPlatform(data) {
if (data == "0") {
return "抖音";
} else if (data == "1") {
return "快手";
} else if (data == "2") {
return "微信";
} else if (data == "3") {
return "uniapp";
}
},
setAppType(data) {
if (data == "0") {
return "次元意境";
}
},
setType(data) {
if (data == "0") {
return "广告浏览";
} else if (data == "1") {
return "邀请";
} else if (data == "2") {
return "会员";
}
},
},
};
</script>
<style lang="scss">
page {
height: 100vh;
background-color: $uni-bg-color;
}
</style>
<style lang="scss" scoped>
.status-choice-comp {
width: 450rpx;
position: fixed;
top: 0;
left: 0;
background: $uni-bg-base-color;
display: flex;
justify-content: space-between;
padding: 0 150rpx;
border-bottom: 10rpx solid $uni-bg-color;
z-index: 100;
.status-item {
font-size: 28rpx;
line-height: 68rpx;
height: 68rpx;
padding: 0 20rpx;
border-radius: 10rpx;
.status-text {
}
}
.status-active {
background: #0a6375;
color: #FFFFFF !important;
}
}
.content {
padding-top: 88rpx;
width: 670rpx;
margin: 0 auto;
::v-deep .uni-list {
background: $uni-bg-base-color !important;
margin-bottom: 20rpx;
border-radius: 24rpx;
overflow: hidden;
}
::v-deep .uni-list-item {
background: $uni-bg-base-color !important;
}
::v-deep .uni-list--border-top {
display: none !important;
}
::v-deep .uni-list--border-bottom {
display: none !important;
}
::v-deep .uni-list-item__container {
padding: 20rpx !important;
}
::v-deep .uni-list-item__content-title {
color: $uni-white !important;
}
::v-deep .uni-list-item__content-note {
color: $uni-secondary-color !important;
}
}
.box {
display: flex;
padding-right: 16rpx;
flex: 1;
color: $uni-secondary-color;
flex-direction: column;
justify-content: center;
overflow: hidden;
.primary-color {
color: $uni-primary;
}
}
.box-bot {
display: flex;
margin-top: 10rpx;
}
.box-bot view {
border-radius: 6rpx;
color: $uni-secondary-color;
border: 2rpx solid $uni-primary;
padding: 4rpx 10rpx;
margin-right: 10rpx;
font-size: 24rpx;
}
</style>