mnsx/user/page/storeCommission.vue

<template>
	<view class="content">
		<view class="cms-top">
			<image src="../../static/img/wallertbg.png" mode="" class="top-bg"></image>
			<view class="top-num">
				<view style="font-size: 52rpx;padding-bottom: 10rpx;">{{all}}</view>
				<view class="">
					可提佣金
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-wrap" :style="{'height': height}">
			<view v-for="(item, index) in list" :key="index" class="order-item flex">
				<view class="title-box">
					<view class="title">
						<text>{{ item.mark }}</text>
					</view>
					<view class="time">
						<text>{{ item.add_time }}</text>
					</view>
				</view>
				<view class="money">
					<text>{{(item.pm == 0 ? '-' : '+') + item.number }}</text>
				</view>
				<view class="jg"></view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
		<view class="tx-btn" @click="navTo('/user/page/withdrawal')" v-if="all*1 > 0">
			立即提现
		</view>
	</view>
</template>

<script>
	import {
		getStoreCms
	} from '@/api/user.js'
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				loadingType: 'more',
				loaded: false,
				list: [],
				all: '',
				height: ''
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1
			this.loadingType =  'more'
			this.loaded = false
			this.list = []
			this.all = ''
			this.getStoreCms()
		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scroll-wrap').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						obj.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', obj.height);
					});
				},
				fail: res => {}
			});
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			getStoreCms() {
				let obj = this
				if(obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading'
				getStoreCms().then(({
					data
				}) => {
					obj.all = data.all
					obj.list = obj.list.concat(data.data.data)
					obj.page++
					if(data.data.data.length == obj.limit) {
						obj.loadingType = 'more'
					}else {
						obj.loadingType = 'noMore'
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cms-top {
		width: 750rpx;
		height: 400rpx;
		position: relative;

		.top-bg {
			width: 750rpx;
			height: 400rpx;
			position: absolute;
		}

		.top-num {
			padding-top: 120rpx;
			width: 750rpx;
			color: #fff;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			position: relative;

			text {
				font-size: 47rpx;
			}
		}
	}
	.order-item {
		padding: 20rpx 30rpx;
		line-height: 1.5;
		position: relative;
	
		// border-bottom: 1rpx black solid;
		.title-box {
			.title {
				font-size: $font-lg;
				color: $font-color-base;
			}
	
			.time {
				font-size: $font-base;
				color: $font-color-light;
			}
		}
	
		.money {
			// color: #fd5b23;
			color: #901B21;
			font-size: $font-lg;
		}
	
		.jg {
			width: 701rpx;
			height: 2rpx;
			background: #F0F4F8;
			margin: 0 auto;
			position: absolute;
			bottom: 0;
		}
	}
	.tx-btn {
		position: absolute;
		bottom: 50rpx;
		left: 0;
		right: 0;
		margin: auto;
		width: 674rpx;
		height: 88rpx;
		background: #901b21;
		border-radius: 44rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		z-index: 99;
	}
	.scroll-wrap {
		padding-bottom: 168rpx;
	}
</style>