newyqg/pages/money/money.vue

<template>
	<view class="center">
		<view class="top">
			<image class="top-bg" src="../../static/img/order99.png" mode=""></image>
			<view class="top-font">现金余额（元）</view>
			<view class="num">{{ userInfo.now_money || '0.00' }}</view>
		</view>
		<view class="navbar">
			<view class="navbar-item" @click="navTo('/pages/money/qudou')">
				<view class="navbar-font">
					<image class="navbar-image" src="../../static/img/been.png" mode=""></image>
					<view class="font">趣豆</view>
				</view>
				<view class="navbar-num">{{ userInfo.integral || '0.00' }}</view>
			</view>
			<view class="vvv"></view>
			<view class="navbar-item">
				<view class="navbar-font" @click="navTo('/pages/user/award')">
					<image class="navbar-image" src="../../static/money/m03.png" mode=""></image>
					<view class="font">佣金</view>
				</view>
				<view class="navbar-num">{{ userInfo.brokerage_price }}</view>
			</view>
			<view class="vvv"></view>
			<view class="navbar-item">
				<view class="navbar-font" @click="navTo('/pages/user/myAppointment')">
					<image class="navbar-image" src="../../static/money/m04.png" mode=""></image>
					<view class="font">预约券</view>
				</view>
				<view class="navbar-num">{{ userInfo.anticipate }}</view>
			</view>
		</view>
		<view class="content-box">
			<view class="content-title">
				<view class="title-left">
					<image src="../../static/money/m02.png" mode=""></image>
					<text>现金余额明细</text>
				</view>
				<view class="title-right">
					<view @tap="handleTap('picker')">{{ title }}</view>
					<lb-picker ref="picker" v-model="value" mode="selector" :list="typeList" :dataset="{ name: 'type' }" @confirm="handleConfirm"></lb-picker>
					<image src="../../static/money/m01.png" mode=""></image>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll-list" :style="{'height' : height}" @scrolltolower="loadData()">
				<view class="list" v-for="(item, index) in list" :style="{ background: index % 2 == 0 ? '#F9F9F9' : '#fff' }">
					<view class="list-box">
						<view class="list-left">
							<view class="top1">{{ item.title }}</view>
							<view class="bottom">{{ item.add_time }}</view>
						</view>
						<view class="list-right" :style="{ color: index % 2 == 0 ? '#ff0000' : '#000000' }">{{ item.pm == 1 ? '+' : '-' }}{{ item.number }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-tabbar activeColor="#f42b4e" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
import { tabbar } from '@/utils/tabbar.js';
import { mapState, mapMutations } from 'vuex';
import LbPicker from '@/components/lb-picker';
import { spreadCommission, userBalance } from '@/api/wallet.js';
export default {
	components: {
		LbPicker
	},
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.scroll-list').boundingClientRect();
				query.exec(function(res) {
					console.log(res, 'ddddddddddddd');
					_this.height = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.height);
				});
			},
			fail: res => {}
		});
	},
	data() {
		return {
			height:'',
			current: 3,
			tabbar: tabbar,
			list: [],
			typeList: [{ title: '收入', type: 2 }, { title: '支出', type: 1 }],
			type: 2,
			title: '收入',
			value: '',
			page: 1,
			limit: 10,
			loadingType: 'more'
		};
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	onLoad() {
		this.loadData();
	},
	onReachBottom() {
		this.loadData();
	},
	methods: {
		loadData() {
			const obj = this;
			if (obj.loadingType == 'nomore' || obj.loadingType == 'loading') {
				return;
			}
			obj.loadingType = 'loading';
			spreadCommission({ page: obj.page, limit: obj.limit }, obj.type).then(({ data }) => {
				if (data == '') {
					return;
				} else {
					obj.list = obj.list.concat(data[0].list);
					if (data[0].list.length == obj.limit) {
						obj.page++;
					} else {
						obj.loadingType == 'nomore';
					}
				}
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		handleConfirm(e) {
			console.log(e);
			this.title = e.item.title;
			this.type = e.item.type;
			this.page = 1;
			(this.limit = 10), (this.loadingType = 'more'), (this.list = []);
			this.loadData();
		},
		handleTap(name) {
			this.$refs[name].show();
		}
	}
};
</script>

<style lang="less">
.center {
	height: 100%;
	width: 100%;
	height: auto;
	min-height: 100%;
	background: #ffffff;
}

.top {
	margin: 20rpx auto 0;
	position: relative;
	width: 700rpx;
	height: 200rpx;
	padding: 54rpx 40rpx;

	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 700rpx;
		height: 200rpx;
		border-radius: 25rpx;
	}

	.top-font {
		position: relative;
		z-index: 2;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 1;
	}

	.num {
		line-height: 1;
		position: relative;
		z-index: 2;
		margin-top: 24rpx;
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
}

.navbar {
	display: flex;
	justify-content: space-around;
	width: 700rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 40rpx auto 0;
	padding: 40rpx 0 50rpx;

	.vvv {
		width: 2rpx;
		height: 74rpx;
		background: #dcdcdc;
	}

	.navbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.navbar-font {
			margin-bottom: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				margin-right: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.font {
				font-size: 30rpx;
				font-weight: bold;
				color: #0c1732;
			}
		}

		.navbar-num {
			font-size: 34rpx;
			font-weight: bold;
			color: #0c1732;
		}
	}
}

.content-box {
	margin: 0 30rpx;

	.content-title {
		margin: 50rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title-left {
			image {
				width: 8rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 34rpx;
				font-weight: bold;
				color: #0c1732;
			}
		}

		.title-right {
			font-size: 30rpx;
			font-weight: 500;
			color: #0c1732;
			display: flex;
			align-items: center;
			image {
				margin-left: 10rpx;
				width: 17rpx;
				height: 12rpx;
			}
		}
	}
}

.list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.list-box {
		width: 700rpx;
		height: 143rpx;
		width: 100%;
		display: flex;

		border-radius: 10rpx;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx;

		.list-left {
			height: 143rpx;
			display: flex;
			flex-direction: column;

			justify-content: space-around;

			.top1 {
				font-size: 30rpx;
				font-weight: bold;
				color: #0c1732;
			}

			.bottom {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.list-right {
			font-size: 36rpx;
			font-weight: bold;
			color: #ea453c;
		}
	}
}
</style>