applet/pages/distribution/moneyList.vue

<template>
  <view class="container">
    <uv-sticky>
      <view class="tabB">
        <view class="order-type u-flex-center-sb" v-if="selTabIndex == 0">
          <view class="type-name u-font26 u-181818" :class="{ active: isChange == item.value }"
            v-for="(item, index) in orderType" :key="index" @click="clickBtn(item.value)">
            {{ item.label }}
          </view>
        </view>
      </view>
    </uv-sticky>

    <view class="bigbox" :class="selTabIndex == 0 ? 'bigbox0' : 'bigbox3'">
      <view v-if="RowsList.length > 0">
        <view class="u-bg-fff ppsPd umb20" v-for="(item, index) in RowsList" :key="item.id">
          <view class="pt15-pb24 u-border-one-one" style="padding-bottom: 30rpx">
            <view class="u-flex-center-sb" style="align-items: center">
              <view class="u-flex" style="align-items: center">
                <text class="iconfont2 u-font40" style="padding-top: 2rpx; color: #fa6138">&#xe611;</text>
                <text class="u-1A1A1A u-font30 u-ml15">{{
                  item.businessName
                }}</text>
              </view>
              <text class="u-00BF5A u-font28">{{ item.settlement ? '已结算' : '未结算' }}</text>
            </view>
          </view>
          <view>
            <view class="goodsItem u-border-one-one u-flex">
              <image :src="item.productCover" class="u-goods200 u-ml15" mode=""></image>
              <view class="u-flex1 u-flex-column-start rightText u-ml30">
                <view class="u-text2 u-1A1A1A u-font28">{{
                  item.productTitle
                }}</view>
                <view class="bottext u-flex-column-start u-flex1">
                  <text class="u-font22 u-999" style="width: 100%" v-if="item.skuSetName">规格：{{ item.skuSetName
                  }}</text>

                  <view class="u-flex-center botPrice u-mt25">
                    <view class="u-00BF5A u-font32 good-text">
                      <rich-text :nodes="$mUtil.priceBigSmall(item.realPrice)"></rich-text>
                    </view>
                    <text class="u-font26 u-999 u-ml15" v-if="item.number">x {{ item.number }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="botList">
            <view class="u-flex-center-sb u-mt20">
              <view class="u-font26 u-181818 opacity">购买人</view>
              <text style="text-align: right" class="u-font26 u-999 u-text-width-two">{{ item.userNickname }}</text>
            </view>
            <view class="u-flex-center-sb u-mt20">
              <view class="u-font26 u-181818 opacity">下单时间</view>
              <text class="u-font26 u-999">{{ item.createTime }}</text>
            </view>
            <view class="u-flex-center-sb u-mt20">
              <view class="u-font26 u-181818 opacity">所得佣金</view>
              <view class="u-font26 u-00BF5A u-bold">
                <rich-text :nodes="$mUtil.priceBigSmall(item.ableGains, false)"></rich-text>
              </view>
            </view>
            <view class="u-flex-center-sb u-mt20" v-if="item.gains > 0">
              <view class="u-font26 u-181818 opacity">所得金额</view>
              <view class="u-font26 u-00BF5A u-bold">
                <rich-text :nodes="$mUtil.priceBigSmall(item.gains, false)"></rich-text>
              </view>
            </view>
          </view>
        </view>
        <loadMore v-if="RowsList.length > 0" :status="LoadStatus"></loadMore>
      </view>
      <noData v-else :config="{ top: 20, content: '暂无数据~' }"></noData>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onReachBottom, onPullDownRefresh, onLoad } from "@dcloudio/uni-app";
import { distributionUserOrderGainsPage_Api } from "@/api/agencyCenter";

import { usePageData } from "@/hooks/usePageData";
const { RowsList, LoadStatus, initData } = usePageData(distributionUserOrderGainsPage_Api);

const isChange = ref(0);
const orderType = ref([
  {
    label: "全部订单",
    value: "",
  },
  {
    label: "未结算",
    value: 1,
  },
  {
    label: "已结算",
    value: 2,
  },
]);
const selTabIndex = ref(0);

// 生命周期
onLoad(() => {
  initData();
});

// 点击按钮
const clickBtn = (index) => {
  isChange.value = index;
  let settlement = undefined;
  if (index == 1) {
    settlement = false;
  } else if (index == 2) {
    settlement = true;
  }
  initData({ settlement });
};
</script>

<style lang="scss">
.tabBox {
  display: flex;
  justify-content: space-around;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #e6e6e6;
  background: #ffffff;

  >view {
    font-size: 30rpx;
    padding: 22rpx 0;
    color: #1a1a1a;
    position: relative;
    font-weight: 700;
  }

  >.active {
    color: #fa6138;

    &::after {
      display: block;
      width: 100%;
      height: 4rpx;
      content: "";
      background: #fa6138;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 2rpx;
    }
  }
}

.good-text {
  font-weight: 700;
}

.opacity {
  opacity: 0.9;
}

.rightText {
  margin-top: 4rpx;
}

.contribution-txt {
  margin-top: 6rpx;
  color: #ff6600;
  font-size: 26rpx;
}

// .bigbox {
//   margin-top: 200rpx;
// }

.bigbox0 {
  margin-top: 110rpx;
  // margin-top: 200rpx;
}

.bigbox3 {
  margin-top: 88rpx;
}

.ppsPd {
  padding: 30rpx;
  border-bottom: 0.5px solid #e6e6e6;
}

.goodsItem {
  padding: 30rpx 0;
  position: relative;
}

.umb20 {
  margin-bottom: 20rpx;
}

.wt112 {
  width: 140rpx;
}

.img30 {
  width: 30rpx;
  height: 30rpx;
}

.order-type {
  height: 110rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;

  .type-name {
    border-radius: 30px;
    padding: 12rpx 18rpx;
    display: inline-block;
    background: #f2f2f2;
    border-radius: 30rpx;
  }

  .active {
    background: #fa6138;
    color: #ffffff;
  }
}

.wd-bgImg {
  position: relative;
  padding: 25rpx 0rpx;

  image {
    width: 100%;
    height: 200rpx;
    vertical-align: bottom;
  }

  .moneyInfo {
    position: absolute;
    top: 25rpx;
    width: 92%;

    .mt40 {
      margin-top: 40rpx;
    }

    .detail-btn button {
      height: 56rpx;
      line-height: 30rpx;
      border-radius: 28px;
      opacity: 0.82;
      padding: 10rpx 30rpx;
      background-color: #eed9a9;
      color: #0b844a;
    }
  }
}

.wdInput {
  background-color: #ffffff;
  border-radius: 18rpx 18rpx 0px 0rpx;
  padding: 40rpx 22rpx 32rpx;

  .input {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 60rpx;
    border-bottom: 1rpx solid #d9d9d9;
    padding-bottom: 25rpx;

    input {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 36rpx;
    }
  }
}

.bg-fff {
  background-color: #ffffff;
  padding: 26rpx 22rpx 36rpx;
  border-radius: 0rpx 0rpx 18px 18rpx;
}

.ml46 {
  margin-left: 46rpx;
}

.apply-btn {
  margin-top: 114rpx;

  button {
    background: #0b844a;
    color: #ffffff;
  }
}

.zfb-wx {
  padding-bottom: 24rpx;

  .payIcon {
    color: #00aaef;
    font-size: 32rpx;
    margin-right: 18rpx;
  }

  .wxIcon {
    color: rgb(37, 171, 56);
    font-size: 32rpx;
    margin-right: 18rpx;
  }
}

.zhInput input {
  width: 62%;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0rpx 20rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 6rpx;
}

.popup {
  width: 100%;

  .bg-top {
    background-color: #f5f5f5;
    padding: 20rpx 30rpx;
    border-radius: 18rpx 18rpx 0px 0px;
  }

  .bankCardList {
    background-color: #ffffff;
    padding: 0rpx 30rpx;
    padding-bottom: 185rpx;

    .item {
      height: 84rpx;
      line-height: 84rpx;

      image {
        width: 48rpx;
        height: 42rpx;
        margin-top: 20rpx;
        vertical-align: bottom;
      }

      .rh-br {
        width: 100%;
        border-bottom: 1rpx solid #e6e6e6;
      }

      .pull-right {
        float: right !important;
      }
    }
  }
}

.ml56 {
  margin-left: 56rpx;
}

.ml200 {
  margin-left: 200rpx;
}

.offline {
  padding: 0 30rpx;

  .order-item {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f2f2f2;

    .order-item-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .item-info {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #808080;

      .order-num {
        margin-bottom: 10rpx;

        .num {
          color: #1a1a1a;
        }
      }

      .order-time-price {
        font-size: 24rpx;

        .time {
          margin-right: 89rpx;
        }
      }
    }

    .tip {
      display: flex;
      justify-content: flex-end;
      color: #808080;
      font-size: 28rpx;
      margin-bottom: 10rpx;

      .label {
        color: #1a1a1a;
      }
    }

    .tip:last-child {
      margin-bottom: 0;
    }

    .item-icon {
      width: 32rpx;
      height: 32rpx;
      transform: rotate(-90deg);
      flex-shrink: 0;
    }
  }
}
</style>