You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
4.5 KiB
151 lines
4.5 KiB
<template>
|
|
<view>
|
|
<!-- 钱包余额信息 -->
|
|
<view class="wallet-top">
|
|
<view class="bg-white wallet-wraptop flex-direction flex justify-around align-center text-center">
|
|
<view class="text-black1 text-price1" style="font-size: 72rpx;">2000.48</view>
|
|
<view class="text-gray lf-font-24 lf-m-b-20">佣金（元）</view>
|
|
<view>
|
|
<button class="btn" @click="$url('/pages/center/widthdraw')">提取佣金</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- tabs -->
|
|
<view class="bg-white lf-p-t-40 lf-p-b-40 flex justify-around align-center text-center solid-bottom">
|
|
<view class="tab-item" :class="current==index?'text-orange':'text-black1'"
|
|
v-for="(item, index) in tab_list" :key="index"
|
|
@click="current = index">{{ item.name }}
|
|
</view>
|
|
</view>
|
|
<!-- scroll page -->
|
|
<block v-if="current == 0">
|
|
<scroll-view :style="{height: 'calc('+ windowHeight +'px - 524rpx)'}"
|
|
:scroll-y="true" :refresher-enabled="true"
|
|
:refresher-triggered="isRefresher"
|
|
@scrolltolower="onScrolltolower"
|
|
@refresherrefresh="onRefresherrefresh">
|
|
<view class="flex flex-direction justify-between lf-p-t-20 lf-p-b-20 lf-p-l-32 lf-p-r-32 solid-bottom" v-for="item in 12" :key="item">
|
|
<view class="flex align-center text-center justify-between">
|
|
<view class="lf-font-36 lf-color-price">-¥10.00</view>
|
|
<view class="lf-font-32 text-black1">结余 ¥34.43</view>
|
|
</view>
|
|
<view class="flex align-center text-center justify-between lf-m-t-10">
|
|
<view class="lf-font-24 lf-color-999">内部粉丝购买商品获得</view>
|
|
<view class="lf-font-24 lf-color-999">2021-7-6 22:32:43</view>
|
|
</view>
|
|
</view>
|
|
<!-- 空数据的情况 -->
|
|
<view class="loading-more">
|
|
<text v-if="tab_list[0].list.length" :class="{'loading-more-text': tab_list[0].loadingClass}">{{ tab_list[0].loadingText }}</text>
|
|
<my-nocontent v-else></my-nocontent>
|
|
</view>
|
|
</scroll-view>
|
|
</block>
|
|
|
|
<block v-else>
|
|
<scroll-view :style="{height: 'calc('+ windowHeight +'px - 524rpx)'}"
|
|
:scroll-y="true" :refresher-enabled="true"
|
|
:refresher-triggered="isRefresher"
|
|
@scrolltolower="onScrolltolower"
|
|
@refresherrefresh="onRefresherrefresh">
|
|
<view class="flex flex-direction justify-between lf-p-t-20 lf-p-b-20 lf-p-l-32 lf-p-r-32 solid-bottom">
|
|
<view class="flex align-center text-center justify-between">
|
|
<view class="lf-font-36 lf-color-price">-¥11.00</view>
|
|
<view class="lf-font-28 text-orange">申请中</view>
|
|
</view>
|
|
<view class="flex align-center text-center justify-between lf-m-t-10">
|
|
<view class="lf-font-24 lf-color-999">流水号 638763485895875</view>
|
|
<view class="lf-font-24 lf-color-999">2021-7-6 22:32:43</view>
|
|
</view>
|
|
</view>
|
|
<!-- 空数据的情况 -->
|
|
<view class="loading-more">
|
|
<text v-if="tab_list[1].list.length" :class="{'loading-more-text': tab_list[1].loadingClass}">{{ tab_list[1].loadingText }}</text>
|
|
<my-nocontent v-else></my-nocontent>
|
|
</view>
|
|
</scroll-view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
pageSize: 10,
|
|
isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发
|
|
tab_list: [{
|
|
name: '佣金记录',
|
|
list: [1,2,3,4,5,6,7,8,9],
|
|
page: 1,
|
|
isPage: false,
|
|
loadingClass: false,
|
|
loadingText: '已加载全部数据'
|
|
},{
|
|
name: '提取记录',
|
|
list: [1],
|
|
page: 1,
|
|
isPage: false,
|
|
loadingClass: true,
|
|
loadingText: '正在加载中'
|
|
}],
|
|
windowHeight: 0
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.windowHeight = uni.getSystemInfoSync().windowHeight;
|
|
},
|
|
methods: {
|
|
// 页面触底，加载下一页
|
|
onScrolltolower(){
|
|
console.log('加载下一页')
|
|
},
|
|
// scroll-view 下拉刷新
|
|
onRefresherrefresh(){
|
|
this.isRefresher = true;
|
|
console.log('下拉刷新')
|
|
setTimeout(() => {
|
|
this.isRefresher = false;
|
|
},1000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.tab-item{
|
|
font-size: 32rpx;
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
&:first-child{
|
|
border-right: 2rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.com {
|
|
height: 900rpx;
|
|
}
|
|
.wallet-top {
|
|
height: 404rpx;
|
|
width: 100%;
|
|
padding: 28rpx 32rpx;
|
|
background-color: #FE9903;
|
|
}
|
|
.wallet-wraptop {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
padding: 46rpx 0 44rpx 0;
|
|
}
|
|
.btn{
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 320rpx;
|
|
height: 84rpx;
|
|
background-color: #FE9903;
|
|
color: #FFFFFF;
|
|
line-height: 84rpx;
|
|
font-size: 32rpx;
|
|
border-radius: 42rpx;
|
|
}
|
|
</style>
|