video_mini/pagesA/myCenter/wallet/earning.vue

<template>
  <view class="pagesContent">
    <view class="pageHeader">
      <view class="navBack">
        <uni-icons class="backIcon" type="left" size="24" color="#333" @click="navBack"></uni-icons>
        我的收益
      </view>
      <view class="beans">余额</view>
      <view class="withDraw" @click="showWithDraw" v-if="balanceBtn"> 提现 </view>
      <view class="beansNum"> {{ userInfo.beans }}</view>
    </view>
    <view class="beansCont">
      <view class="beansListHeader"> 收益明细</view>
      <view class="beansList">
        <view class="beansItem" v-for="item in listData" :key="item.id">
          <view class="beansLeft">
            <view class="remark">{{ item.memo }} （{{ item.come_nickname }}
              {{ item.come_id ? '  ID:' + item.come_id : '' }}）
            </view>
            <view class="time">{{ item.createtime }}</view>
          </view>
          <view :class="item.jzt == '-'?'right black':'right yellow'">
            {{ item.jzt }}{{ item.money }}
          </view>
        </view>
      </view>

    </view>
    <uni-popup ref="popup_ti_xian" type="bottom">
      <tixianForm @success-close="hideWithDraw"></tixianForm>
    </uni-popup>
    <uni-load-more :status="status"/>
  </view>

</template>

<script>
import tixianForm from '@/pagesA/components/ti_xian.vue'
export default {
  components: {
    tixianForm
  },
  data() {
    return {
      listData: [],
      status: 'more',
      userInfo: {},
      balanceBtn:true,
      pages: {
        pageSize: 20,
        currentPage: 1,
        isNextPage: true
      }

    }
  },
  onReachBottom() {
    this.status = 'more';
    if (this.pages.isNextPage) {
      this.getList();
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userinfo')
    this.balanceBtn = uni.getStorageSync("config").mini_chek =="1"?true:false;
    this.getList();
  },
  methods: {
    navBack() {
      uni.navigateBack(1);
    },
    showWithDraw() {
      this.$refs.popup_ti_xian.open()
    },
    hideWithDraw(){
      console.log("close");
      this.$refs.popup_ti_xian.close();
    },
    getList() {
      let that = this;
      if (that.pages.isNextPage) {
        that.status = 'loading';
        that.$httpRequest({
          url: "/api/user/userBeansInfo",
          methods: "GET",
          data: {
            limit: that.pages.pageSize,
            page: that.pages.currentPage
          }
        }).then(res => {
          that.status = '';
          if (res.data.code == 1) {
            if (that.pages.pageSize == 1) {
              that.listData = res.data;
            } else if (res.data.rows.length > 0) {
              that.listData = that.listData.concat(res.data.rows);
            } else {
              that.status = 'noMore';
              that.pages.isNextPage = false;
            }
            that.pages.currentPage += 1;
          } else {
          }
        }).catch(err => {
          that.status = '';
          console.log(err)
        })
      }
    },
  }
}
</script>

<style scoped>
.pagesContent {
  background-color: #FFFFFF;
  min-height: 100vh;
}

.pageHeader {
  background: linear-gradient(to right, #F1FFE9, #FFFFF4);
  height: 408rpx;
  padding: 0 24rpx;
  padding-top: 42rpx;
  position: relative;
}

.navBack {
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
  text-align: center;
  height: 160rpx;
  line-height: 160rpx;
  position: relative;
}

.backIcon {
  position: absolute;
  left: 0;
  top: 0;
}

.beans {
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
  margin-top: 24rpx;
}

.withDraw {
  width: 172rpx;
  height: 68rpx;
  background-color: #85ED1C;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  text-align: center;
  line-height: 68rpx;
  position: absolute;
  top: 200rpx;
  right: 20rpx;
  margin-top: 22rpx;
}

.beansNum {
  margin-top: 24rpx;
  font-size: 80rpx;
  color: #333;
  font-weight: 600;
}

.beansCont {
  padding: 40rpx 24rpx;
}

.beansListHeader {
  color: #333333;
  font-size: 32rpx;
  font-weight: 600;
}

.beansItem {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #F8F8F8;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.remark {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.time {
  color: #999999;
  font-size: 24rpx;
  margin-top: 8rpx;
}

.right {
  font-size: 28rpx;
  font-weight: 600;
}

.black {
  color: #333;
}

.yellow {
  color: #F98B1E;
}
</style>