ddcWechat/pages/rent/store/money.vue

<template>
	<view :style="colorStyle">
		<view class='commission-details'>
			<view class='sign-record'>
				<view class='promoterHeader bg-color'>
					<view class='headerCon acea-row row-between-wrapper'>
						<view>
							<view class='name'>{{$t(name)}}</view>
							<view class='money'>{{$t(`￥`)}}<text class='num'>{{recordCount}}</text></view>
						</view>
						<view class='iconfont icon-jinbi1'></view>
					</view>
				</view>
				<block v-for="(item,index) in recordList" :key="index" v-if="recordList.length>0">
					<view class='list'>
						<view class='item'>
							<view class='listn'>
								<view class='itemn acea-row row-between-wrapper'>
									<view class="title">
										<view class='name line1'>{{$t(item.title)}}</view>
										<view>{{item.add_time}}</view>
										<view class="fail-msg" v-if="item.mark">
											{{$t(`原因`)}}：{{item.mark}}
										</view>
									</view>
									<view class='num font-color' v-if="item.pm == 1">+{{item.number}}</view>
									<view class='num' v-else>-{{item.number}}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view class='loadingicon acea-row row-center-wrapper' v-if="recordList.length">
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
				</view>
				<view v-if="recordList.length < 1 && page > 1">
					<emptyPage :title='$t(`暂无数据~`)'></emptyPage>
				</view>
			</view>
		</view>
		<navigator url="./draw">
			<view class="logOut cartcolor acea-row row-center-wrapper">{{$t(`提现`)}}</view>
		</navigator>
		<!-- #ifdef H5 -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		getStoreBill,
		postStoreMy
	} from '@/api/rent.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import emptyPage from '@/components/emptyPage.vue'
	import home from '@/components/home';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			emptyPage,
			home
		},
		mixins: [colors],
		data() {
			return {
				name: '',
				type: 0,
				page: 1,
				limit: 15,
				loading: false,
				loadend: false,
				loadTitle: this.$t(`加载更多`),
				recordList: [],
				recordCount: 0,
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			if (this.isLogin) {
				this.type = options.type;
			} else {
				toLogin();
			}
		},
		onShow: function() {
			this.getRecordList()
			this.getStore()
		},
		methods: {
			getRecordList: function() {
				let that = this;
				let page = that.page;
				let limit = that.limit;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				getStoreBill({
					page: page,
					limit: limit
				}).then(res => {
					that.recordList.push(...res.data.data)
					let loadend = res.data.data.length < that.limit;
					that.loadend = loadend;
					that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
					that.page += 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			// 获取门店信息
			getStore() {
				let that = this;
				postStoreMy({}).then(res => {
					this.name = res.data.name;
					this.recordCount = res.data.now_money
				}).catch(err => {
					uni.showToast({
						title: err,
						icon:'error'
					});
				})
			},
		},
		onReachBottom: function() {
			this.getRecordList();
		}
	}
</script>

<style scoped lang="scss">
	.list {
		margin-bottom: 30rpx;
	}

	.commission-details {
		padding-bottom: 120rpx;

		.promoterHeader {
			.headerCon {
				.money {
					font-size: 36rpx;

					.num {
						font-family: 'Guildford Pro';
					}
				}
			}
		}
	}

	.sign-record .list .item .listn .itemn .name {
		width: 100%;
		// max-width: 100%;
		white-space: break-spaces;
	}

	.sign-record .list .item .listn .itemn .title {
		padding-right: 30rpx;
		flex: 1;
	}

	.logOut {
		font-size: 32rpx;
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		border-radius: 45rpx;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
	}

	.cartcolor {
		color: var(--view-theme);
		border: 1px solid var(--view-theme);
	}
</style>