Client-Teapay/src/pagesC/settledMerchant/balanceLog.vue

<template>
  <view class="container">
    <view class="hander-top">
      <view class="icon-back-wrap" @click="onBack">
        <image
          class="icon-back"
          src="@/static/preview/icon-back.png"
          mode="widthFix"
        />
      </view>
      <!-- <view class="count">数智钱包</view> -->
      <view class="capsule"></view>
    </view>
    <div class="h_top">
      <div class="balance_box">
        <div class="b_teg">商户余额(元)</div>
        <div class="dinB balance">￥{{ localInfo.merchant_money }}</div>
        <div class="b_static flex_r flex_ac flex_jb">
          <div>
            <span>总收入</span>
            <span class="fw">￥{{ total_money || 0 }}</span>
          </div>
          <div>
            <span>今日收入</span>
            <span class="fw">￥{{ day_income || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn_bar flex_r flex_jb">
      <div
        class="btn_item"
        @click="getToCash"
      >
        <span class="ico iconfont">&#xe603;</span>
        <span class="btn_txt">去提现</span>
      </div>
      <div
        class="btn_item conv"
        @click="goto('/pagesC/convert/index')"
      >
        <!-- <span class="ico iconfont">&#xe68a;</span> -->
        <image class="ico" src="https://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/icon/convert.png" mode="widthFix" />
        <span class="btn_txt">去转化</span>
      </div>
    </div>

    <!-- 资金列表 -->
    <div class="detailList">
      <div class="tit"><span>流水明细</span></div>
      <!-- 顶部导航 -->
      <view class="Tab_con flex_r flex_ac flex_jb">
        <view
          class="tab_list flex_r flex_ac"
          :class="current == index ? 'active' : ''"
          v-for="(item, index) in TabList"
          :key="index"
          @tap="SetStatus(index)"
          >{{ item.title }}</view
        >
      </view>
      <!-- 顶部导航-end -->
      <div class="li" v-for="(i, s) in list" :key="s">
        <p class="flex_r flex_jb">
          <span class="s1">{{ statusList[i.type_id] }}</span>
          <span>
            {{ i.act }}
            <span class="s2">{{ parseFloat(i.num).toFixed(2) }}</span>
          </span>
        </p>
        <p class="flex_r flex_jb">
          <span class="s3">{{ i.create_time }}</span>
          <span class="s3">余额￥{{ i.after }}</span>
        </p>
      </div>
    </div>
    <!-- <view class="con">
      <view class="list" v-for="(item, index) in list" :key="index">
        <view class="list_head flex_r flex_ac flex_jb">
          <view class="head_name">{{ item.remark }}</view>
          <view :class="['head_price',item.act == '+' ? 'g_color' : '']">{{ item.act }}{{item.num }}</view>
        </view>
        <view class="list_con flex_r flex_ac flex_jb">
          <view class="list_time">{{ item.create_time }}</view>
          <view class="list_balance">余额{{ item.after }}</view>
        </view>
      </view>
      <not-goods v-if="haveGoods" textStr="暂无流水信息"></not-goods>
    </view> -->
    <!-- 资金列表 -->
  </view>
</template>
<script>
let page = 1;
import { post } from "@/request/api.js";
import notGoods from "@/components/not-goods/index.vue";
export default {
  components: {
    notGoods,
  },
  data() {
    return {
      haveGoods: false, // 是否有商品
      current: 0,
      TabList: [
        { title: "全部", sauts: 0 },
        { title: "收入", sauts: 1 },
        { title: "支出", sauts: 2 },
      ],
      list: [],
      page:1,
      localInfo: uni.getStorageSync("localInfo"),
      total_money: 0,
      day_income: 0,
      statusList: {}
    };
  },
  onLoad(da) {
    this.current = da.s || 0
  },
  onShow() {
    this.page = 1;
    this.list = [];
    this.loadData();
    this.getData()
  },
  methods: {
    loadData() {
      let data = {
        page: this.page,
        rows:20,
        type_id: this.current,
      };
      uni.showLoading({ mask: true });
      post("v1/merchant/commission", data).then((res) => {
        uni.hideLoading();
        if (res.code === 0) {
          this.statusList = JSON.parse(res.data.statusList)
          if (res.data.data.data.length > 0) {
            this.list = this.list.concat(res.data.data.data);
          } else {
            if (this.page == 1) {
              this.haveGoods = true;
              this.page = -1;
            } else {
              this.page = -1;
              this.$toast("暂无更多");
            }
          }
        } else {
          if (page == 1) {
            this.haveGoods = true;
            this.page = -1;
          } else {
            this.page = -1;
            this.$toast("暂无更多");
          }
        }
      });
    },
    getData(){
      post("v1/merchant/myShop").then((res) => {
        if (res.code == 0) {
          this.total_money = res.data.total_money,
          this.day_income = res.data.day_income
        }
      });
    },
    SetStatus(i) {
      this.current = i;
      this.page = 1;
      this.list = [];
      this.haveGoods = false;
      this.loadData();
    },
    onBack() {
      uni.navigateBack();
    },
    // 跳转到提现页面
    getToCash(type) {
      this.goto("/pages/cash/index", { type })
    },
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    let _this = this
    if (this.page != -1) {
      setTimeout(function () {
        ++_this.page;
        _this.loadData();
      }, 800);
    }
  },
};
</script>
<style lang="scss">
// 页面配置
// 页面配置-end

// 顶部列表
.tab_list {
  height: 100%;
  box-sizing: border-box;
  font-size: 30rpx;
  color: #808080;

}

.Tab_con {
  width: 100%;
  height: 92rpx;
  background: #fff;
  padding: 0 30rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid rgba($color: #d3aa79, $alpha: 0.3);
}

.active {
  color: #1bbd89;
  border-bottom: 6rpx solid #1bbd89;
}

// 顶部列表-end

// 资金列表
.con {
  border-top: 16rpx solid #f4f4f4;
}

.list_con {
  width: 100%;
  overflow: hidden;
}

.list_head {
  width: 100%;
  overflow: hidden;
  margin-bottom: 5rpx;
}

.list_time {
  font-size: 24rpx;
  color: #a1a1a1;
}

.list_balance {
  font-size: 24rpx;
  color: #a1a1a1;
}

.head_price {
  font-size: 32rpx;
  font-family: "SourceHanSansCN-Medium";
}

.head_name {
  font-size: 30rpx;
  color: #212121;
  font-family: "SourceHanSansCN-Medium";
}

.list {
  width: 100%;
  overflow: hidden;
  padding: 30rpx;
  box-sizing: border-box;
  border-bottom: 3rpx solid #f4f4f4;
}

// 资金列表-end

// 状态颜色
.g_color {
  color: #1bbd89;
}

.y_color {
  color: #f15b21;
}

// 状态颜色-end

.h_top {
  background: linear-gradient(#d3aa79, #f3d6b2);
  height: 420rpx;
  position: relative;
  .balance_box {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 32rpx 38rpx;
    width: 100%;
    text-align: center;
    .b_teg {
      font-size: 28rpx;
      margin-bottom: 3rpx;
      // color: rgba($color: #000, $alpha: 0.65);
    }
    .balance {
      font-size: 60rpx;
      color: #333;
    }
    .b_static {
      font-size: 28rpx;
      padding: 30rpx 30rpx 0;
      .fw{
        font-weight: 700;
      }
    }
  }
}
.hander-top {
  position: absolute;
  z-index: 1000;
  top: 108rpx;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 32rpx;
  box-sizing: border-box;

  .icon-back-wrap {
    width: 64rpx;
    height: 64rpx;

    .icon-back {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .count {
    color: #222;
    font-size: 35rpx;
    line-height: 64rpx;
  }
  .capsule {
    width: 120rpx;
  }
}

.btn_bar {
  padding: 30rpx 32rpx;
  .btn_item {
    width: 280rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    background: rgba($color: #000, $alpha: 0.15);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    &.corc {
      background-color: #d3aa79;
      color: #fff;
    }
    &.conv {
      color: #fff;
      background-color: #18bb88;
    }
    image {
      width: 50rpx;
      height: 50rpx;
      background: #fff;
      border-radius: 50%;
    }
  }
  .ico {
    color: #d3aa79;
    width: 50rpx;
    height: 50rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
  }
  .btn_txt {
    height: 50rpx;
    width: calc(76% - 50rpx);
    line-height: 50rpx;
  }
}
.detailList {
  width: calc(100% - 64rpx);
  padding: 0 10rpx;
  border-radius: 12rpx;
  margin-bottom: 36rpx;
  margin-left: 32rpx;
  background-color: #fff;

  .tit {
    padding: 28rpx 32rpx 10rpx;
    span {
      display: inline-block;
      padding-left: 16rpx;
      font-size: 32rpx;
      font-weight: 700;
      height: 32rpx;
      line-height: 32rpx;
      border-left: 8rpx solid #d3aa79;
    }
  }
  .li {
    padding: 22rpx 0;
    border-bottom: 1px solid rgba($color: #d3aa79, $alpha: 0.3);
    margin: 0 30rpx;
    p {
      margin-bottom: 8rpx;
      font-size: 30rpx;
      &:last-child {
        margin-bottom: 0;
        font-size: 25rpx;
        color: #999;
      }
    }
    .s2 {
      font-weight: bold;
      &::before {
        content: "￥";
        font-size: 25rpx;
      }
    }
    &:last-child {
      border: none;
    }
  }
}
</style>