hwnc/pagesA/pages/mypurse/index.vue

<template>
	<view :class="[AppTheme]" class="all_box">
		<view class="banner bg-linear-gradient">
			<view class="top">
				<view class="top-l">
					<view class="text">本月收益</view>
					<view class="num">{{ bysy }}</view>
				</view>
				<view class="top-2">
					<view class="top-2-a" @click="navTo('/pagesA/pages/mypurse/withdraw/withdraw')">提现</view>
					<view class="top-2-b" @click="navTo('/pagesA/pages/mypurse/recharge/recharge')">充值</view>
					<!-- <view v-if="deposit>0" class="top-2-c" @click="refund">退保证金</view> -->
				</view>
			</view>
			<view class="bottom">
				<view class="bottom-l">
					<view class="text">余额</view>
					<view class="num">{{ money }}</view>
				</view>
				<view class="bottom-r">
					<view class="text">已得收益</view>
					<view class="num">{{ ydsy }}</view>
				</view>
			</view>
		</view>
		<view class="f-n">
			<view @click="navTo('/pagesA/pages/mypurse/txinfo/txinfo')">
				<u-icon labelSize="13" label="提现明细" labelPos="bottom" name="red-packet" :color="primary" size="40">
				</u-icon>
			</view>

			<view @click="goCode()">
				<u-icon labelSize="13" label="推广分享" labelPos="bottom" name="share-square" :color="primary" size="40">
				</u-icon>
			</view>

			<view @click="navTo('/pagesA/pages/mypurse/czinfo/czinfo')">
				<u-icon labelSize="13" label="充值明细" labelPos="bottom" name="rmb-circle" :color="primary" size="40">
				</u-icon>
			</view>
		</view>
		<view class="content">
			<u-cell-group>
				<u-cell @click="navTo('/pagesC/pages/user/funds/funds?id=0')" isLink icon="order" title="资金流水"></u-cell>
				<u-cell @click="navTo('/pagesA/pages/mypurse/other/other')" isLink icon="red-packet" title="消费记录">
				</u-cell>
				<u-cell @click="navTo('/pagesA/pages/mypurse/evidence/evidence')" isLink icon="grid" title="汇款凭证">
				</u-cell>
			</u-cell-group>
		</view>
		<!-- 分享 -->
		<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
		<Footer></Footer>
	</view>
</template>
<script>
	import tabbar from '@/components/tabbar/tabbar.vue';
	import wallApi from '@/api/wall/index.js';
	import mineApi from '@/api/mine/index';
	export default {
		name: 'Purse',
		props: {},
		data() {
			return {
				primary: this.$theme.primary,
				more: 'more', //@value more loading前  	@value loading loading中  	@value noMore 没有更多了
				name: '上拉加载更多',
				bysy: 0, //本月收益
				money: 0, //余额
				dssy: 0, //待收
				dfyk: 0, //认领金额
				ydsy: 0, //已得收益
				// 认领+余额=资产F
				zican: 0,
				tabTitle: ['充值记录', '提现记录'],
				cur: 0, //默认选中第一个tab
				cZInfo: [], //充值记录
				txInfo: [], //充值记录
				p: 1,
				pagesize: 10,
				sharedata: null,
				settingFile: getApp().globalData.siteinfo
			}
		},
		onLoad(options) {
			let that = this
			that.$init_config(1, function(res) {
				that.sharedata = res.sharedata
			})
			if (options.isss) {
				that.cur = 1
				that.getTxList();
			} else {
				that.cur = 0
			}
			that.getWallInit();
			that.getCzList();
		},
		onShow() {
			let that = this
			that.p = 1
			that.getWallInit();
		},
		onReachBottom() {
			//如果不是最后一页 重新发送请求
			if (this.cur == 0) {
				this.p++;
				this.more = 'loading';
				setTimeout(() => {
					this.getCzList();
				}, 500);
			} else {
				this.p++;
				this.more = 'loading';
				setTimeout(() => {
					this.getTxList();
				}, 500);
			}
		},
		methods: {
			goCode: function() {
				this.$refs.sbox.opensharebox(this.sharedata);
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			getWallInit() {
				wallApi.income({}).then(res => {

					if (res.status == 200) {
						this.ydsy = res.data.ydsy; //已得收益
						this.bysy = res.data.bysy; //本月收益
						this.money = res.data.money; //余额
						this.dfyk = res.data.dfyk; //认领金额

						this.dssy = res.data.dssy; //待收
						if (res.data.money) {
							this.zican = (Number(this.dfyk) + Number(this.money)).toFixed(2);
						} else {
							this.zican = 0;
						}
					}
				});
			},
			getCzList() {
				wallApi.czRecord({
					p: this.p,
					pagesize: this.pagesize
				}).then(res => {
					if (res.status == 200) {
						this.cZInfo = this.cZInfo.concat(res.data);
						if (res.data.length == 0 || res.data.length < 10) {
							this.more = 'noMore';
						}
					} else {
						this.more = 'noMore';
					}
				});
			},
			getTxList() {
				wallApi.txRecord({
					p: this.p,
					pagesize: this.pagesize
				}).then(res => {

					if (res.status == 200) {
						this.txInfo = this.txInfo.concat(res.data);
						if (res.data.length === 0 || res.data.length < 10) {
							this.more = 'noMore';
						}
					} else {
						this.more = 'noMore';
					}
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.botomtab {
		text-align: center;
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100vw;
		background: #FFFFFF;
		box-shadow: 10rpx 10rpx 20rpx #000000;
		display: flex;
		justify-content: space-around;

		.botomtab_sun {
			margin-top: 10rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			view {
				font-size: 20rpx;
				color: #aaaaaa
			}
		}
	}

	.u-tabs {
		background: #FFFFFF !important;
	}

	.jiazai {
		text-align: center;
		margin-top: 20rpx;
		color: #999999;
	}

	.all_box {
		.banner {
			width: 100%;
			height: 360rpx;
			background-size: 100% 100%;
			padding: 0px 20rpx 26rpx 40rpx;
			box-sizing: border-box;

			.text {
				font-size: 24rpx;

				font-weight: 500;
				color: #ffffff;
				margin-bottom: 20rpx;
			}

			.num {
				font-size: 48rpx;

				font-weight: bold;
				color: #ffffff;
			}

			.top {
				width: 100%;
				height: 102rpx;
				margin-bottom: 70rpx;
				display: flex;
				justify-content: space-between;
				padding-top: 30rpx;

				.top-2 {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				.top-2-a {
					width: 120rpx;
					height: 40rpx;
					line-height: 40rpx;
					color: #fff;
					text-align: center;
					margin-right: 10px;
					border: 3rpx solid #fff;
					padding: 8rpx;
					border-radius: 30rpx;
					font-weight: 600;
					font-size: 30rpx;
				}

				.top-2-b {
					width: 120rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #fff;
					margin-right: 10px;
					border: 3rpx solid #fff;
					padding: 8rpx;
					border-radius: 30rpx;
					font-weight: 600;
					font-size: 30rpx;
				}

				.top-2-c {
					width: 160rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #fff;
					margin-right: 10px;
					border: 3rpx solid #fff;
					padding: 8rpx;
					border-radius: 30rpx;
					font-weight: 600;
					font-size: 30rpx;
				}

				.top-r {
					overflow: hidden;

					>view {
						float: left;
						padding: 12rpx 28rpx;
						border: 2rpx solid #fff;
						margin: 0 8rpx;
						border-radius: 30rpx;
						color: #fff;
						font-size: 26rpx;
					}
				}
			}

			.bottom {
				width: 100%;
				height: 102rpx;
				display: flex;

				.bottom-l {
					margin-right: 244rpx;
				}
			}
		}

		.nav {
			width: 100%;
			height: 106rpx;
			padding: 0 30rpx 0 22rpx;
			box-sizing: border-box;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 10rpx solid #f2f2f2;

			.nav-l {
				display: flex;

				view {
					font-size: 28rpx;

					font-weight: 500;
					color: #707070;
					margin-right: 20rpx;
				}

				text {
					font-size: 40rpx;

					color: red;
					margin-top: -10rpx;
				}
			}

			.nav-r {
				width: 320rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				>view {
					width: 172rpx;
					height: 65rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 3rpx solid #ff4841;
					border-radius: 30rpx;
					font-size: 28rpx;


					font-weight: 600;
					color: #FFFFFF;
					margin: 0 12rpx;
					background-color: #ff4841;
				}
			}
		}

		.f-n {
			width: 100%;
			height: 80px;
			display: flex;
			align-items: center;
			margin-bottom: 15px;
			padding-top: 15px;
			font-size: 12px;

			font-weight: normal;
			color: #1c1c1c;
			background-color: #fff;
		}

		.f-n view {
			width: 100%;
			text-align: center;
		}

		.f-zi {
			width: 100%;
			margin-top: 12px;
			font-size: 14px;
			text-align: center;
		}

		.icon {
			width: 24px !important;
			margin: 0 auto;
		}

		.img-withdraw,
		.img-spread {
			height: 25px !important;
		}

		.img-team {
			width: 30px !important;
			height: 25px !important;
		}

		.icon image {
			width: 100%;
			height: 100%;
		}

		.footer {
			height: 160rpx;
			background: #FFFFFF;
		}

		.content {
			.cont-wrap {
				background: #FFFFFF;
				width: 100%;
				min-height: 40vh;
				padding: 0 20rpx;
				box-sizing: border-box;
				position: relative;

				.no-order {
					width: 140rpx;
					height: 140rpx;
					position: absolute;
					left: 0;
					right: 0;
					top: 12rpx;
					bottom: 0;
					margin: auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.cont-inner {
					width: 100%;
					min-height: 160rpx;
					padding: 40rpx 0 34rpx 0;
					box-sizing: border-box;
					overflow: hidden;

					.cont-inner-left {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						float: left;
						margin-right: 24rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.cont-inner-t {
						margin-bottom: 24rpx;

						view {
							font-size: 30rpx;

							font-weight: 500;
							color: #333333;
						}

						text {
							font-size: 30rpx;

							font-weight: bold;
							color: #ff4841;
							float: right;
							font-style: normal;
						}
					}

					.cont-inner-b {
						text {
							font-size: 24rpx;

							font-weight: 500;
							color: #999999;
						}

						em {
							font-size: 24rpx;

							font-weight: 500;
							color: #ff4841;
							float: right;
							font-style: normal;
						}
					}
				}
			}
		}
	}
</style>