guosen-ldt-shop/pages/my-bills/comps/balance-bills.vue

<template>
	<mescroll :down="downOption" :up="upOption" @up="upCallback" :fixed="false" @down="downCallback"
		@init="mescrollInit">
		<view class="head_box u-flex u-row-center u-col-center">
			<view class="card-box">
				<view class="card-head u-flex u-col-center">
					<view class="card-title u-m-r-10">可提现金额（元）</view>
					<view class="u-iconfont uicon-eye" style="color: #fff;font-size: 50rpx;"></view>
				</view>
				<view class="money-num u-p-t-50">{{dataInfo.availableNum}}</view>

				<view class="padding-top-40 text-white text-df">
					<text class="price">总收益：{{dataInfo.totalNum}}</text>
					<text class="margin-left-30 price">今日收益：{{dataInfo.todayNum}}</text>
				</view>
				<button @click="jump" class="u-reset-button withdraw-btn">结算</button>
			</view>
		</view>

		<view @click.stop="showTime = true" class="flex justify-between"
			style="font-size: 24rpx;color: #666666;background-color: #f6f6f6;">

			<view class="flex">
				<view class="bg-white cu-btn round margin-30 sm">
					<text>{{defaultTime}}</text>
					<text class="cuIcon-triangledownfill text-gray" style="font-size: 50rpx;"></text>
				</view>
				<!-- <view  class="total-box">收入￥0.00 支出￥0.00</view> -->
			</view>

			<!-- <view class="center margin-right-30">
				统计
				<text class="cuIcon-right"></text>
			</view> -->
		</view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==stateCurrent?'text-base cur text-xl text-bold ':'text-lg'"
					v-for="(item,index) in statusList" :key="index" @tap="onTab(index)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<u-sticky v-if="stateCurrent==0" offset-top="0" :enable="true">
			<view class="flex bg-white u-border-top " style="padding: 30rpx">
				<view style="width: 51%;margin-left: 60rpx;">
					来源
				</view>
				<view class="text-center" style="width: 25%;">
					折扣
				</view>
				<view class="text-right" style="width: 24%;margin-right: 20rpx;">
					金额
				</view>
			</view>
		</u-sticky>

		<view v-show="stateCurrent==0" class="bg-white safe-area-inset-bottom tabsClass" style="height: 100%;">
			<navigator :url="'/pages/my-bills/bills-detail?id='+item.id+'&type=all'" class="u-border-bottom flex"
				v-for="(item,index) in list" :key="index">
				<view class="area1">
					<image v-if="$isNotEmpty(item.avatar)" :src="item.avatar"></image>
					<block v-else>
						<image v-if="item.payWay=='WECHAT'" src="@/static/icon/wx.png"></image>
						<image v-else-if="item.payWay=='ALIPAY'" src="@/static/icon/ALIPAY.png"></image>
						<image v-else-if="item.payWay=='UNIONPAY'" src="@/static/icon/UNIONPAY.png"></image>
						<image v-else-if="item.payWay=='APPLEPAY'" src="@/static/icon/apple.png"></image>
						<image v-else src="@/static/icon/avatar.png"></image>
					</block>

					<view>
						<text v-if="$isNotEmpty(item.nickName)">{{item.nickName}}</text>
						<block v-else>
							<text v-if="item.payWay=='WECHAT'">微信用户</text>
							<text v-else-if="item.payWay=='ALIPAY'">支付宝用户</text>
							<text v-else-if="item.payWay=='UNIONPAY'">银联用户</text>
							<text v-else-if="item.payWay=='APPLEPAY'">苹果用户</text>
							<text v-else>用户昵称</text>
						</block>
						<text>{{item.createTime}}</text>
					</view>
				</view>
				<view class="area2">
					<text>{{discount(item.discount)}}</text>
				</view>
				<view class="area3">
					<text class="text-base price plus">{{item.receiveNumYp || 0}}</text>
				</view>
			</navigator>
		</view>

		<view v-show="stateCurrent==1" class="bg-white safe-area-inset-bottom tabsClass" style="height: 100%;">
			<navigator :url="'/pages/withdraw/detail?id='+item.id" class="card u-border-bottom"
				v-for="(item,index) in list" :key="index">
				<view class="left">
					<view class="margin-bottom-20 flex">
						<text class="text-bold" style="font-size: 32rpx;">余额结算</text>
					</view>
					<text class="desc">{{item.createTime}}</text>
				</view>
				<view class="right center text-base">
					<view v-if="item.withdrawStatus == 'DONE'" class="value" style="margin-bottom: 10rpx;">
						<text>-</text>
						<text class="" style="margin: 0 4rpx;">{{item.price}}</text>
						<text class="text-sm">元</text>
					</view>
					<view v-else class="text-sm">
						<text v-if="item.withdrawStatus == 'WAITING'" class="text-warn"
							style="font-size: 26rpx;margin-left: 10rpx;">处理中</text>
						<text v-if="item.withdrawStatus == 'FAIL'" class="text-error"
							style="font-size: 26rpx;margin-left: 10rpx;">结算失败</text>
						<text v-if="item.withdrawStatus == 'FAIL'" @click.stop="toast(item.failReason)"
							class="cuIcon-question text-error u-m-l-4"></text>
					</view>
				</view>
			</navigator>
		</view>

		<toast ref="toast"></toast>
		<u-picker confirm-color="#EF9944" v-model="showTime" mode="time" :params="params" @confirm="confirmTime">
		</u-picker>
	</mescroll>
</template>

<script>
	import mescroll from '@/components/mescroll-body/mescroll-uni.vue'
	export default {
		components: {
			mescroll
		},
		props: {
			type: Number,
		},
		data() {
			return {
				dataInfo: {},
				stateCurrent: 0, //默认
				statusList: [{
						name: '收入',
						value: 0
					},
					{
						name: '支出',
						value: 1
					}
				],
				//时间
				showTime: false,
				params: {
					year: true,
					month: true,
				},
				defaultTime: '',
				//数据
				list: [],
				mescroll: null,
				upOption: {
					noMoreSize: 5,
					auto: false,
				},
				// 下拉配置参数
				downOption: {
					use: false,
					auto: false
				},
			};
		},
		watch: {
			type() {
				if (!this.isInit && this.type === 1) {
					this.mescroll.resetUpScroll()
				}
			}
		},
		mounted() {
			if (!this.isInit && this.type === 1) {
				this.mescroll.resetUpScroll()
			}
		},
		created() {
			this.defaultTime = this.$dateTime.format(new Date(), 'YYYY-mm')
			this.queryBalance()
		},
		methods: {
			toast(msg) {
				console.log(msg);
				this.$refs.toast.toast(msg)
			},
			jump() {
				let params = {
					type: 'BALANCE_WITHDRAW',
					canWithDraw: this.dataInfo.availableNum,
				}
				uni.navigateTo({
					url: "/pages/withdraw/withdraw" + this.$u.queryParams(params)
				})
			},
			queryBalance() {
				this.$api.shopTrade.balanceQuery({
					shopId: this.vuex_shopId
				}).then(res => {
					this.dataInfo = res.data
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			onTab(index) {
				this.stateCurrent = index
				this.mescroll.resetUpScroll();
			},
			confirmTime(e) {
				this.defaultTime = e.year + '-' + e.month
				this.mescroll.resetUpScroll();
			},
			fetchOutcome(mescroll) {
				let params = {
					current: mescroll.num,
					size: mescroll.size,
					ownerype: '商户',
					ownerId: this.vuex_shopId,
					type: 'BALANCE_WITHDRAW'
				}
				try {
					this.$api.withdraw.list(params).then(res => {
						let data = res.data.records
						let total = res.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(data); //追加新数据
					})
				} catch (e) {
					this.mescroll.endErr()
				}
			},
			fetchIncome(mescroll) {
				console.log("balance");
				let params = {
					receiveId: this.vuex_shopId,
					current: mescroll.num,
					size: mescroll.size,
					payStatus: this.$global.PAY_STATUS.SUCCESS,
					billType: 'price'
				}
				if (this.defaultTime) {
					params.createTime = this.$dateTime.format(new Date(this.defaultTime))
				} else {
					params.createTime = this.$dateTime.format(new Date())
				}
				try {
					this.$api.bills.list(params).then(res => {
						let data = res.data.records
						let total = res.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(data); //追加新数据
					})
				} catch (e) {
					this.mescroll.endErr()
				}
			},
			upCallback(mescroll) {
				if (this.stateCurrent == 0) {
					this.fetchIncome(mescroll)
				} else {
					this.fetchOutcome(mescroll)
				}
			},
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 500)
			},
		}
	};
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.area1 {
		$img-width: 70rpx;
		width: 54%;
		display: flex;
		height: 120rpx;
		padding-left: 30rpx;
		justify-content: center;
		align-items: center;

		image {
			display: flex;
			align-items: center;
			justify-content: center;
			width: $img-width;
			height: $img-width;
			border-radius: 50%;
		}

		view {
			width: 80%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 10rpx;
		}

		text:first-child {
			margin-bottom: 8rpx;
		}

		text:last-child {
			margin-top: 8rpx;
			color: #999;
		}
	}

	.area2 {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 22%;
		margin-top: 10rpx;
		font-weight: 300;
		color: #666;
	}

	.area3 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 24%;
		font-size: 32rpx;
		margin-top: 10rpx;
	}



	.head_box {
		font-weight: 300;
		background-color: #fff;
		padding: 30rpx 0;

		.card-box {
			width: 700rpx;
			min-height: 300rpx;
			padding: 40rpx 40rpx 0rpx;
			background-color: #ff9201;
			box-shadow: 1rpx 5rpx 16rpx 0 rgba(255, 148, 71, .6);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;

			.card-head {
				color: #fff;
				font-size: 30rpx;
			}

			.money-num {
				font-size: 70rpx;
				line-height: 70rpx;
				font-weight: 500;
				color: #ffffff;
			}

			.reduce-num {
				font-size: 26rpx;
				font-weight: 400;
				color: #ffffff;
			}

			.withdraw-btn {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #ffffff;
				border-radius: 30px;
				font-size: 24rpx;
				font-weight: 500;
				color: #ff9201;
				position: absolute;
				right: 30rpx;
				top: 40rpx;
			}
		}
	}

	.total-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 40rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}

	.card {
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx;

		.desc {
			color: #b2b2b2;
			font-size: 24rpx;
			font-weight: 400;
		}

		.left {
			display: flex;
			flex-direction: column;

			.title {
				font-size: 32rpx;
				color: #2a2a2a;
			}
		}

		.right {
			display: flex;
			flex-direction: column;

			.value {
				text-align: right;
				font-size: 36rpx;
				color: #FF9447;
			}

		}
	}
</style>