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

<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control
        :current="typeId"
        :values="items"
        :style-type="styleType"
        :active-color="activeColor"
        @clickItem="onClickItem"
      />
    </view>
    <view class="content">
      <view v-if="typeId === 0">
        <uni-list
          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 style="color: #4d6aff">
                    {{ item.confirmStatus == 0 ? "待确认" : "已确认" }}
                  </view>
                </view>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
        <view class="ivOver" v-if="flagAd">-----已经到底啦-----</view>
      </view>
      <view v-if="typeId === 1">
        <uni-list
          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 style="color: #4d6aff">
                    {{ item.confirmStatus == 0 ? "待确认" : "已确认" }}
                  </view>
                </view>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
        <view class="ivOver" v-if="flagInvite">-----已经到底啦-----</view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryFrontEndProfitAmt } from "@/api/profit.js";
export default {
  data() {
    return {
      items: ["广告", "邀请"],
      typeId: 0,
      activeColor: "#007aff",
      styleType: "text",
      endProfitAdList: [],
      endProfitInviteList: [],
      userInfo: {},
      pageSize: 10,
      pageNum: 1,
      flagAd: false,
      flagInvite: false,
    };
  },
  created() {
    const userInfoSync = uni.getStorageSync("userInfo");
    this.userInfo = userInfoSync;
    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.typeId === 0) {
      if (this.endProfitAdList.length > this.pageNum * this.pageSize - 1) {
        this.flagAd = false;
        this.pageNum += 1;
        this.queryFrontEndProfitAmt();
      } else {
        this.flagAd = true;
      }
    } else {
      if (this.endProfitInviteList.length > this.pageNum * this.pageSize - 1) {
        this.flagInvite = false;
        this.pageNum += 1;
        this.queryFrontEndProfitAmt();
      } else {
        this.flagInvite = true;
      }
    }
  },
  methods: {
    // 查询指定艺术家转入钱包收益列表
    async queryFrontEndProfitAmt() {
      const res = await queryFrontEndProfitAmt({
        creatorId: this.userInfo.id,
        type: this.typeId,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      });
      if (res.data.code === 200) {
        if (this.typeId === 0) {
          this.endProfitAdList.push(...res.data.rows);
        } else {
          this.endProfitInviteList.push(...res.data.rows);
        }
      } else {
        uni.showModal({
          content: "转入钱包列表数据加载失败！",
          showCancel: false,
        });
      }
    },

    onClickItem(e) {
      let that = this;
      that.endProfitAdList = [];
      that.endProfitInviteList = [];
      if (that.typeId !== e.currentIndex) {
        that.typeId = e.currentIndex;
        uni.showLoading({
          title: "加载中",
          mask: true,
          success() {
            // 查询指定艺术家转入钱包收益列表
            const param = {
              creatorId: that.userInfo.id,
              type: that.typeId,
              pageSize: that.pageSize,
              pageNum: 1,
            };
            queryFrontEndProfitAmt(param).then((res) => {
              //console.log('res', res)
              if (res.data.code === 200) {
                if (that.typeId === 0) {
                  that.endProfitAdList.push(...res.data.rows);
                } else {
                  that.endProfitInviteList.push(...res.data.rows);
                }
                console.log("点击操作endProfitAdList", that.endProfitAdList);
                console.log(
                  "点击操作endProfitInviteList",
                  that.endProfitInviteList
                );
              } else {
                uni.showModal({
                  content: "转入钱包列表数据加载失败！",
                  showCancel: false,
                });
              }
            });
          },
          complete() {
            uni.hideLoading();
          },
        });
      }
    },

    targetToOrder(id) {
      console.log("id", id);
      if (id) {
        uni.navigateTo({
          url: "../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">
.uni-list-item__icon-img {
  border-radius: 8px;
}
.ivOver {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #fff;
  font-size: 20rpx;
}
.box {
  display: flex;
  padding-right: 8px;
  flex: 1;
  color: #3b4144;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.box-bot {
  display: flex;
  margin-top: 5px;
}
.box-bot view {
  border-radius: 3px;
  border: 1px solid #4d6aff;
  padding: 2px 5px;
  margin-right: 5px;
  font-size: 12px;
}
.uni-list-item__content-title {
  font-size: 14px;
  color: #3b4144;
  overflow: hidden;
}
</style>