applet/pages/distribution/moneyList.vue

<template>
  <view class="container">
    <div class="tabB" :style="{ top: tabTop + 'px' }">
      <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>
    </div>
    <view class="bigbox" :class="selTabIndex == 0 ? 'bigbox0' : 'bigbox3'">
      <view v-if="listdata.length > 0">
        <template v-if="selTabIndex == 0">
          <view
            class="u-bg-fff ppsPd umb20"
            v-for="(item, index) in listdata"
            :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: #00bf5a"
                    >&#xe611;</text
                  >
                  <text class="u-1A1A1A u-font30 u-ml15">{{
                    item.shop_name
                  }}</text>
                </view>
                <text class="u-00BF5A u-font28">{{ item.order_status }}</text>
              </view>
            </view>
            <view>
              <view class="goodsItem u-border-one-one u-flex">
                <image
                  :src="item.goods_img"
                  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.goods_title
                  }}</view>
                  <view class="bottext u-flex-column-start u-flex1">
                    <text
                      class="u-font22 u-999"
                      style="width: 100%"
                      v-if="item.sku_set_name"
                      >规格：{{ item.sku_set_name }}</text
                    >

                    <view class="u-flex-center botPrice u-mt25">
                      <view class="u-00BF5A u-font32 good-text">
                        <rich-text
                          :nodes="$mUtil.priceBigSmall(item.sale_price)"
                        ></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.user_info.nickname }}</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.create_time }}</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.able_gains, false)"
                  ></rich-text>
                </view>
              </view>
              <view
                class="u-flex-center-sb u-mt20"
                v-if="item.balance_gains > 0"
              >
                <view class="u-font26 u-181818 opacity">所得金额</view>
                <view class="u-font26 u-00BF5A u-bold">
                  <rich-text
                    :nodes="$mUtil.priceBigSmall(item.balance_gains, false)"
                  ></rich-text>
                </view>
              </view>
            </view>
          </view>
        </template>
        <template v-if="selTabIndex == 3">
          <view class="offline">
            <view class="order-item" v-for="item in listdata" :key="item.id">
              <view class="order-item-head">
                <view class="item-info">
                  <view class="order-num">
                    <text class="num">订单号：</text>
                    <text class="">{{ item.offline_order.order_code }}</text>
                  </view>
                  <view class="order-time-price">
                    <text class="time">{{ item.create_time }}</text>
                    <text class=""
                      >消费金额：{{ item.offline_order.sales_money }}</text
                    >
                  </view>
                </view>
              </view>
              <view class="tip">
                <view class="label">打赏积分：</view
                >{{ item.offline_order.shop_consume_integral_able }}
              </view>
              <view class="tip">
                <view class="label">所得收益：</view>{{ item.income_point }}
              </view>
            </view>
          </view>
        </template>
        <loadMore v-if="listdata.length > 0" :status="status"></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";
const $http = uni.$http;
const $mUtil = uni.$mUtil;
const app = getApp();

const isChange = ref(0);
const orderType = ref([
  {
    label: "全部订单",
    value: "",
  },
  {
    label: "已付款",
    value: 1,
  },
  {
    label: "已完成",
    value: 2,
  },
  {
    label: "已结算",
    value: 3,
  },
]);
const listdata = ref([]);
const status = ref("more"); // more|loading|noMore
const noData = ref(false);
const parmas = ref({
  page: 1,
  limit: 10,
  status: "",
  // user_order_gains_type: 0
});
const tabTop = ref(0);
const selTabIndex = ref(0);

// 生命周期
onLoad(() => {
  tabTop.value = app.globalData.barHeight + 44;
  listData();
});

// 上拉加载
onReachBottom((e) => {
  status.value = "loading";
  parmas.value.page++;
  if (selTabIndex.value == 0) {
    listData();
  } else {
    getOfflineorderincome();
  }
});

// 下拉刷新
onPullDownRefresh(() => {
  rest();
  if (selTabIndex.value == 0) {
    listData();
  } else {
    getOfflineorderincome();
  }
});

// 重置
const rest = () => {
  parmas.value.page = 1;
  listdata.value = [];
};

// 获取列表数据
const listData = () => {
  $http.get("/userordergains/pages", parmas.value).then(async (res) => {
    if (res && res.code == 200) {
      uni.stopPullDownRefresh();
      listdata.value = listdata.value.concat(res.page.list);
      if (listdata.value.length == 0) {
        noData.value = true;
      } else {
        noData.value = false;
      }
      if (res.page.totalPage <= res.page.currPage) {
        status.value = "noMore";
      } else {
        status.value = "more";
      }
    }
  });
};

// 获取线下订单收益
const getOfflineorderincome = () => {
  $http.get("/offlineorderincome/page", parmas.value).then(async (res) => {
    if (res && res.code == 200) {
      uni.stopPullDownRefresh();
      listdata.value = listdata.value.concat(res.page.list);
      if (listdata.value.length == 0) {
        noData.value = true;
      } else {
        noData.value = false;
      }
      if (res.page.totalPage <= res.page.currPage) {
        status.value = "noMore";
      } else {
        status.value = "more";
      }
    }
  });
};

// 点击按钮
const clickBtn = (index) => {
  isChange.value = index;
  if (index == 0) {
    parmas.value.status = "";
  } else {
    parmas.value.status = index;
  }
  rest();
  listData();
};
</script>

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

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

  > .active {
    color: #00bf5a;

    &::after {
      display: block;
      width: 100%;
      height: 4rpx;
      content: "";
      background: #00bf5a;
      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;
}

.tabB {
  width: 100%;
  position: fixed;
  left: 0;
  z-index: 66;
  background: #ffffff;
}

.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: #00bf5a;
    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>