bnyer-cloud-hub/pages-profit/profit/profitEndDetails.vue

<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="$noMultipleClicks(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 endProfitAdList"
        :key="index"
      >
        <uni-list-item
          showArrow
          clickable
          :title="item.walletTime + '@' + item.scanCode"
          :note="item.appType + '&' + item.platform + '&' + item.appType"
          :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.walletTime + "@" + 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 endProfitInviteList"
        :key="index"
      >
        <uni-list-item
          showArrow
          clickable
          :title="item.walletTime + '@' + 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.walletTime + "@" + 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 { queryFrontEndProfitAmt } from "@/api/profit.js";
export default {
  data() {
    return {
      items: ["广告", "邀请"],
      typeId: 0,
      styleType: "text",
      endProfitAdList: [],
      endProfitInviteList: [],
      userInfo: {},
      pageSize: 10,
      pageNum: 1,
      flagAd: false,
      flagInvite: false,
      loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
      isLoadMore:false,  //是否加载中
	  noClick:true, //防止重复提交
    };
  },
  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.queryFrontEndProfitAmt();
    } else {
      this.queryFrontEndProfitAmt();
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    if (this.typeId === 0) {
      this.pageNum = 1;
      this.endProfitAdList = [];
      this.queryFrontEndProfitAmt();
      uni.stopPullDownRefresh();
    } else {
      this.pageNum = 1;
      this.endProfitInviteList = [];
      this.queryFrontEndProfitAmt();
      uni.stopPullDownRefresh();
    }
  },
  // 上划加载更多
  onReachBottom() {//上拉触底函数
    if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
      this.isLoadMore=true
      if (this.loadStatus === "more") {
        this.pageNum += 1  //每次上拉请求新的一页
        this.queryFrontEndProfitAmt();
      }
    }
  },
  methods: {
    // 查询指定艺术家转入钱包收益列表
    async queryFrontEndProfitAmt() {
	    let that = this;
      that.loadStatus = 'loading';
      const res = await queryFrontEndProfitAmt({
        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.endProfitAdList.push(...res.data.rows);
        } else {
          that.endProfitInviteList.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.endProfitAdList = [];
      that.endProfitInviteList = [];
      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.queryFrontEndProfitAmt()
          },
          complete() {
            uni.hideLoading();
          },
        });
      }
    },

    targetToOrder(id) {
      if (id) {
        uni.navigateTo({
          url: "/pages-profit/profit/profitEndOrder?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>