zhishifufei_uniapp/pages/my/bill_detail.vue

<template>
  
  <BaseContainer class="bill">
    <NavBar title="账单明细" />
    <template v-if="userInfo.uid">
      <view class="header">
				<view class="header-top">
					<view class="cont">
					  账户余额（元）
					  <view class="num">￥<text>{{ userInfo.now_money }}</text></view>
					</view>
					<!-- <view class="gold-coin">金币 <text>0</text> </view> -->
				</view>
        <view class="header-bottom">
					<view class="withdrawal">提现</view>
					<text class="bottom-line"></text>
					<view class="recharge" @click="toRecharge">
						充值
					</view>
				</view>
      </view>
			<uni-datetime-picker ref="uniDatetimePicker" type="range-time" :showDateInput="false" @dateChange="dateChange"></uni-datetime-picker>
      <view class="main">
        <view class="nav-bar">
          <view
            v-for="(item, index) in navs"
            :key="index"
            :class="{ active: navActive === index }"
            class="item"
            @click="navActives(index)"
          >
            {{ item }}
          </view>
					<view class="date-select" @click="dateSelect">日期选择<text></text></view>
        </view>
        <view class="nav-cont">
          <view class="section">
            <view class="list">
              <view v-for="(item, index) in billList" :key="index" class="item">
                <view class="text">
                  <view class="name">{{ item.title }}</view>
                  <view class="time">{{ item.add_time }}</view>
                </view>
                <view class="nums" v-if="item.pm > 0">+{{ item.number }}</view>
                <view class="num" v-else>-{{ item.number }}</view>
              </view>
            </view>
            <view v-if="loadend && billList.length" class="loaded">{{ loadTitle }}</view>
            <image
              v-if="!billList.length && !loading"
              class="nothing"
              mode="aspectFit"
              :src="getImgPath('/wap/first/zsff/images/no_data_available.png')"
            />
          </view>
        </view>
      </view>
    </template>
  </BaseContainer>
</template>

<script>
import { getUserInfo } from "@/api/auth";
import { getBillList } from "@/api/user";
import UniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue';

export default {
	components: {
		UniDatetimePicker,
	},
  data() {
    return {
      navs: ["全部", "支出", "收入"],
      billList: [],
      navActive: 0,
      limit: 20,
      page: 1,
      loadend: false,
      userInfo: {},
      loading: false,
    };
  },
  watch: {
    navActive() {
      this.index = 1;
    },
  },
  onLoad() {
    this.getData();
    this.getBillList();
  },
  onReachBottom() {
    this.getBillList();
  },
  methods: {
    getData() {
      getUserInfo().then(({ data }) => {
        this.userInfo = data;
      });
    },
		dateSelect() {
			this.$refs.uniDatetimePicker.show();
			console.log(this.$refs.uniDatetimePicker);
		},
		dateChange() {
			console.log(this.$refs.uniDatetimePicker.displayRangeValue);
		},
    navActives(index) {
      this.navActive = index;
      this.page = 1;
      this.loading = false;
      this.loadend = false;
      this.billList = [];
      this.getBillList();
    },
    async getBillList() {
      if (this.loadend || this.loading) return;
      this.loading = true;

      uni.showLoading({ mask: true });

      try {
        const { data: list } = await getBillList(this.navActive, this.page, this.limit);
        uni.hideLoading();
        let billList = this.$util.SplitArray(list, this.billList);
        this.loading = false;
        this.loadend = list.length < this.limit;
        this.page++;
        this.loadTitle = this.loadend ? "已全部加载" : "上拉加载更多";
        this.$set(this, "billList", billList);
      } catch (err) {
        uni.hideLoading();
        this.loadTitle = "上拉加载更多";
        this.loading = false;
      }
    },
		toRecharge() {
			uni.navigateTo({
				url: '/pages/my/recharge',
			});
		},
  },
};
</script>

<style scoped lang="scss">
.bill {
	background: #f6f6f6;
}

.section {
  position: relative;
}

.loaded {
  font-size: 28rpx;
  line-height: 72rpx;
  text-align: center;
  color: #999999;
}

.nothing {
  width: 414rpx;
  margin: 30px auto 0;
  display: block;
}

.bill .header {
	width: 690rpx;
  height: 337rpx;
	margin: 18rpx auto 0;
	padding-top: 56rpx;
	background: linear-gradient(156deg, #4795FF 0%, #0F74BB 100%);
	border-radius: 30rpx;
	.header-top {
		display: flex;
		align-items: center;
		padding: 0 80rpx 0 40rpx;
		.gold-coin {
			margin-left: auto;
			font-size: 34rpx;
			color: #fff;
			text {
				font-size: 50rpx;
				margin-left: 15rpx;
			}
		}
	}
	.header-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 62rpx;
		margin-top: 30rpx;
		>view {
			width: 211rpx;
			height: 69rpx;
			border-radius: 35rpx;
			border: 2rpx solid #FFFFFF;
			background: transparent;
			font-size: 34rpx;
			color: #fff;
			line-height: 69rpx;
			text-align: center;
			&.recharge {
				background: #fff;
				color: #333;
			}
		}
		.bottom-line {
			width: 1rpx;
			height: 56rpx;
			background: #E5E5E5;
		}
	}
}

.bill .header .cont {
  display: inline-block;
  vertical-align: middle;
  font-size: 34rpx;
  line-height: 34rpx;
  color: #ffffff;
}

.bill .header .cont .num {
  margin-top: 3rpx;
  font-size: 50rpx;
  line-height: 64rpx;
	margin-top: 35rpx;
	text {
		font-size: 64rpx;
	}
}

.bill .main .nav-bar {
  display: flex;
  background-color: #ffffff;
	align-items: center;
	.date-select {
		width: 161rpx;
		height: 58rpx;
		background: #F3F5F5;
		border-radius: 29rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 24rpx;
		>text {
			width: 0;
			height: 0;
			border: 10rpx solid;
			border-color: #999 transparent transparent transparent;
			vertical-align: top;
			margin-left: 11rpx;
			margin-top: 5rpx;
		}
	}
}

.bill .main .nav-bar .item {
  width: 25%;
  height: 97rpx;
  font-size: 30rpx;
  line-height: 97rpx;
  text-align: center;
  color: #999;
	position: relative;
}

.bill .main .nav-bar .active {
  color: #333333;
	&:after {
		content: '';
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10rpx;
		width: 40rpx;
		height: 6rpx;
		background: linear-gradient(90deg, #24A9E1, #0F74BB);
		border-radius: 3rpx;
	}
}

.bill .main .nav-cont {
  border-top: 1px solid #f2f2f2;
}

.bill .main .nav-cont .list {
  padding-left: 30rpx;
  background-color: #ffffff;
}

.bill .main .nav-cont .list .item {
  display: flex;

  align-items: center;
  min-height: 120rpx;
  padding-right: 30rpx;
}

.bill .main .nav-cont .list .item .item {
  border-top: 1px solid #f2f2f2;
}

.bill .main .nav-cont .list .item .text {
  flex: 1;
}

.bill .main .nav-cont .list .item .name {
  font-size: 30rpx;
  color: #282828;
}

.bill .main .nav-cont .list .item .time {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #999999;
}

.bill .main .nav-cont .list .item .num {
  font-size: 32rpx;
  color: #e93323;
}

.bill .main .nav-cont .list .item .nums {
  font-size: 32rpx;
  color: #539dfd;
}

.bill .main .nav-cont .tips {
  height: 100rpx;
  font-size: 32rpx;
  line-height: 100rpx;
  text-align: center;
  color: #999999;
}
</style>