yicangzongtai_app_240321/pages/user/distribution/moneyList.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666666"></navbar>
    <div class="tabB" :style="{top:tabTop+'px'}">
      <view class="tabBox">
        <view :class="{active:selTabIndex==0}" @click="switchTab(0)">商城订单</view>
        <!--        <view :class="{active:selTabIndex==2}" @click="switchTab(2)">实体店订单</view> -->
        <view :class="{active:selTabIndex==3}" @click="switchTab(3)">线下订单</view>
        <!-- <view :class="{active:selTabIndex==1}" @click="switchTab(1)">加盟订单</view> -->
      </view>
      <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: #FA6138;">&#xe611;</text>
                  <text class="u-1A1A1A u-font30 u-ml15 ">{{item.shop_name}}</text>
                  <!-- <text style="margin-top: 4rpx;" class="u-CCC right-icon iconfont">&#xe6c7;</text> -->
                </view>
                <text class="u-FF0000 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-FF0000  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 class="contribution-txt">贡献值：{{item.consumption_value}} <text class="u-font26 u-ml15"
                      v-if="item.number">x {{item.number}}</text></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-FF0000 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-FF0000 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 class="iconfont3 item-icon">&#xe65e;</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>
  var app = getApp()
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '推广订单',
          color: '#1A1A1A',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A'
        },
        isChange: 0,
        // orderType: ["全部订单", "已付款", "已完成", "已结算"],
        orderType: [{
            label: "全部订单",
            value: ""
          },
          {
            label: "已付款",
            value: 1
          },
          {
            label: "已完成",
            value: 2
          },
          {
            label: "已结算",
            value: 3
          },
        ],
        listdata: [],
        status: 'more', //more|loading|noMore
        noData: false,
        parmas: {
          page: 1,
          limit: 10,
          status: '',
          // user_order_gains_type: 0
        },
        tabTop: 0,
        selTabIndex: 0
      }
    },
    onReachBottom(e) {
      this.status = 'loading'
      this.parmas.page++
      if (this.selTabIndex == 0) {
        this.listData()
      } else {
        this.getOfflineorderincome()
      }

    },
    onPullDownRefresh() {
      this.rest()
      if (this.selTabIndex == 0) {
        this.listData()
      } else {
        this.getOfflineorderincome()
      }

    },

    onLoad() {
      this.tabTop = app.globalData.barHeight + 44;
      this.listData()

    },
    methods: {
      switchTab(index) {
        this.selTabIndex = index;
        this.parmas.page = 1;
        this.listdata = []
        if (this.selTabIndex == 0) {
          this.parmas.user_order_gains_type = index;
          this.listData()
        } else {
          this.getOfflineorderincome()
        }
      },
      rest() {
        this.parmas.page = 1
        this.listdata = []
      },
      listData() {
        this.$http.get('/userordergains/pages', this.parmas).then(async res => {
          if (res && res.code == 200) {
            uni.stopPullDownRefresh()
            this.listdata = this.listdata.concat(res.page.list)
            if (this.listdata.length == 0) {
              this.noData = true
            } else {
              this.noData = false
            }
            if (res.page.totalPage <= res.page.currPage) {
              this.status = 'noMore'
            } else {
              this.status = 'more'
            }
          }
        })
      },
      getOfflineorderincome() {
        this.$http.get('/offlineorderincome/page', this.parmas).then(async res => {
          if (res && res.code == 200) {
            uni.stopPullDownRefresh()
            this.listdata = this.listdata.concat(res.page.list)
            if (this.listdata.length == 0) {
              this.noData = true
            } else {
              this.noData = false
            }
            if (res.page.totalPage <= res.page.currPage) {
              this.status = 'noMore'
            } else {
              this.status = 'more'
            }
          }
        })
      },
      clickBtn(index) {
        this.isChange = index
        if (index == 0) {
          this.parmas.status = ''
        } else {
          this.parmas.status = index
        }
        this.rest()
        this.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: #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: 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: #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>