CBB3/pages/user/detail/detail.vue

<template>
	<view>
		<view class="app-bg">
			<image src="/static/img/detail_bg.png"></image>
			<view class="body fx-h fx-bc fx-ac">
				<view class="count">{{ user.good_integral || 0 }}</view>
				<view class="label">我的余额</view>
			</view>
		</view>
		<uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left"
			@clickLeft="utils.navigateBack()" fixed title="提货积分"></uni-nav-bar>
		<view class="htop" :style="'height:calc(61vw - ' + statusBarHeight + 'px - 44px);'"></view>
		<view class="app-body">
			<!--列表数据-->
			<view class="nav-list fx-r fx-bc">
				<view class="item fx-h fx-bc" @tap="tapNav(item.code)" :class="form.type == item.code  ? 'active' : ''"
					v-for="(item,index) in navList">
					<view class="label">{{ item.name }}</view>
					<image class="icon" v-if="form.type == item.code" src="/static/img/detail_d.png"></image>
				</view>
				<view class="fx-g1"></view>
				<view class="time fx-r fx-bc" @tap="opendetailDateTime()">
					<view class="count">{{ form.dateStr || "" }}</view>
					<image class="icon" src="/static/img/detail_next.png"></image>
				</view>
			</view>
			<scroll-view scroll-y class="scroll" :style="'height: calc(100vh - 61vw -  100rpx);'"
				@scrolltolower="loadMoreData">
				<view class="sc-body">
					<view class="detail-list" v-if="data.length > 0">
						<view class="top fx-r">
							<view class="label">{{ this.form.dateStr }}</view>
							<view class="fx-g1"></view>
							<view class="label">收入：{{ this.total.inMoney || '0.00' }}
								支出：{{ this.total.outMoney || '0.00' }}</view>
						</view>
						<view class="item fx-r fx-bc" v-for="(item,index) in data">
							<image class="icon" v-if="item.type == 0" src="/static/img/detail_in.png"></image>
							<image class="icon" v-if="item.type == 1" src="/static/img/detail_in.png"></image>
							<image class="icon" v-if="item.type == 2" src="/static/img/detail_out.png"></image>
							<view class="info">
								<view class="title">{{ item.title }}</view>
								<view class="tag">{{ item.content }}</view>
								<view class="time">{{ item.title }}</view>
							</view>
							<view class="fx-g1"></view>
							<view class="right fx-h">
								<view class="money" style="color:#e2a622;" v-if="item.type == 1">+{{item.v}}</view>
								<view class="money" v-if="item.type == 2">-{{item.v}}</view>
								<view class="fx-g1"></view>
								<view class="balance">余额：{{ item.money }}</view>
							</view>
						</view>
					</view>

					<view v-if="data.length > 0">
						<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
							<image src="/static/img/xloading.png"></image>
							<text>正在载入更多...</text>
						</view>
						<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
					</view>
					<uv-empty v-if="data.length == 0 && isFirst" mode="data" icon="/static/img/no-empty.png"></uv-empty>
				</view>
			</scroll-view>
		</view>
		<uv-datetime-picker ref='detailDateTime' v-model="datetime" @confirm="tapConfirm" @cancel="closedetailDateTime()"
			@close="closedetailDateTime()" mode="year-month"></uv-datetime-picker>
	</view>
	</view>
</template>

<style lang="scss">
	.app-bg {
		position: absolute;

		image {
			width: 100vw;
			height: 61vw;
		}

		.body {
			position: absolute;
			height: 61vw;
			width: 100vw;
			top: 0;

			.count {
				font-weight: 500;
				font-size: 64rpx;
				color: #fff;
			}

			.label {
				margin-top: 4px;
				color: #fff;
			}
		}
	}

	.app-body {
		padding: 0px 20rpx;
	}

	.nav-list {
		height: 100rpx;

		.item {
			margin-right: 50rpx;

			.label {
				font-weight: bold;
				font-size: 30rpx;
				color: #5C5C5C;
			}

			&.active {
				.label {
					font-weight: bold;
					font-size: 36rpx;
					color: #2C2C2C;
				}

				.icon {
					width: 36rpx;
					height: 14rpx;
					margin-top: 4rpx;
				}
			}

		}

		.time {

			.count {
				font-weight: bold;
				font-size: 28rpx;
				color: #2C2C2C;
			}

			.label {
				font-weight: bold;
				font-size: 30rpx;
				color: #2C2C2C;
				margin-left: 6rpx;
			}

			.icon {
				margin-left: 10rpx;
				width: 20rpx;
				height: 12rpx;
			}
		}
	}

	.detail-list {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;

		.top {
			margin-bottom: 40rpx;

			.label {
				font-weight: 500;
				font-size: 25rpx;
				color: #979797;
			}
		}

		.item {
			margin-bottom: 40rpx;

			.icon {
				width: 84rpx;
				height: 84rpx;
			}

			.info {
				width: calc(100% - 280rpx);
				margin-left: 16rpx;

				.title {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.tag {
					font-size: 24rpx;
					color: #979797;
					margin-top: 6rpx;
				}

				.time {
					font-size: 24rpx;
					color: #979797;
				}
			}

			.right {
				text-align: right;
				width: 160rpx;

				.money {
					font-weight: bold;
					font-size: 34rpx;
					color: #FF4C4C;
				}

				.balance {
					font-weight: 500;
					font-size: 24rpx;
					color: #979797;
				}
			}

		}
	}
</style>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
			return {
				statusBarHeight: 20,
				isFirst: false,
				datetime: "",
				total: {},
				data: [],
				page: {
					isFirst: false,
					isLoad: false,
					isFoot: false,
					page: 1
				},
				form: {
					dateStr: "",
					date: "",
					type: "all"
				},
				navList: [{
						"name": "全部",
						"code": "all"
					},
					{
						"name": "收入",
						"code": "income"
					},
					{
						"name": "支出",
						"code": "disburse"
					}
				]
			}
		},
		onLoad(options) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.form.dateStr = this.utils.date('Y年m月');
			this.form.date = this.utils.date('Y-m');
			this.datetime = this.utils.strtotime() * 1000;
			this.initView();
		},

		methods: {
			...mapMutations(['checkUserLogin']),
			/**
			 * 加载基础配置
			 */
			initView: function() {
				this.totalData();
				this.getData(true);
			},
			/**
			 * 获取数据
			 */
			getData: function(isPull = false) {
				if (this.page.isLoad) return;
				this.page.isLoad = true;
				if (isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({
					title: '获取数据中..'
				});
				var post = {};
				post.page = this.page.page;

				this
					.request
					.post("userDetail", {
						...this.form,
						page: this.page.page
					})
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						this.isFirst = true;
						if (isPull) {
							this.data = res.data.list;
						} else {
							this.data = this.data.concat(res.data.list);
						}
						//是否到底
						if (res.data.list.length != res.data.pageSize) {
							this.page.isFoot = true;
						}
					})
					.catch((res) => {
						console.log(res);
						uni.hideLoading();
						uni.showModal({
							title: '系统提示',
							content: '加载失败，返回在尝试',
							showCancel: false
						});
					});
			},

			totalData: function() {
				this
					.request
					.post("userDetailTotal", {
						...this.form
					})
					.then(res => {
						if (res.code == 200) {
							this.total = res.data;
						}
					})
			},



			loadMoreData: function() {
				if (this.page.isFoot || this.page.isLoad) {
					return;
				}
				this.page.page++;
				this.getData();
			},

			tapNav: function(ev) {
				this.form.type = ev;
				this.getData(true);

			},

			tapConfirm: function(ev) {
				this.form.dateStr = this.utils.date('Y年m月', ev.value / 1000);
				this.form.date = this.utils.date('Y-m', ev.value / 1000);
				this.closedetailDateTime();
				this.totalData();
				this.getData(true);
			},
			closedetailDateTime(){
				this.$refs.detailDateTime.close()
			},
			opendetailDateTime(){
				this.$refs.detailDateTime.open()
			}
		},
	}
</script>

<style>
</style>