distribution-uni/pages/rebate/rebate.vue

<template>
	<view>
		<uni-card>
			<view class="content-wrapper">
				<view style="display: flex;">
					<view class="content-balance">
						<text class="balance-text">累计返佣(元)</text>
						<view class="balance-number">
							<text style="font-size: 80rpx;">{{allrebateAmount == null?'0':allrebateAmount}}</text>
						</view>
					</view>
					<view class="content-balance">
						<text class="balance-text">返佣余额(元)</text>
						<view class="balance-number">
							<text style="font-size: 80rpx;">{{rebateAmount == 'null'?'0':rebateAmount}}</text>
						</view>
					</view>
				</view>
				<view class="content-actions">
					<u-button shape="circle" @click="goToDetail">提现记录</u-button>
					<u-button type="primary" shape="circle" @click="goToWithdrawal">提现</u-button>
				</view>
			</view>
		</uni-card>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
			activeColor="#5fd9ee"></uni-segmented-control>
		<view class="content">
			<uni-card v-show="current === 0">
				<ul class="inventoryList"> 
					<li v-for="(item ,index) in commissionList" :key="index" style="margin-bottom:20rpx;">
						<uni-card :title="'返佣日期：'+ item.createTime" :sub-title="'返佣后账户余额：'+ item.shopAfterDepoBal">
							<view class="uni-body" style="margin-bottom: 10rpx;padding-bottom: 10rpx;border-bottom:1px solid #eee;">
								<view class="cardText">物流返佣：{{item.companyName?item.companyName:'暂无'}}</view>
								<view class="cardText">返佣金额：{{item.companyRebateAmount?item.companyRebateAmount:'暂无'}}</view>
							</view>
							<view class="uni-body">
								<view class="cardText">拉包返佣：{{item.workerName?item.workerName:'暂无'}}</view>
								<view class="cardText">返佣金额：{{item.workerRebateAmount?item.workerRebateAmount:'暂无'}}</view>
							</view>
						</uni-card>
					</li>
				</ul>
			</uni-card>
			<uni-card v-show="current === 1">
				<ul class="inventoryList">
					<li v-for="(item ,index) in commissionList" :key="index" style="margin-bottom:20rpx;">
						<uni-card :title="'返佣日期：'+ item.registerShopTime" :sub-title="'返佣后账户余额：'+ item.shopAfterRebateAmount" @tap="">
							<view class="uni-body" style="margin-bottom: 10rpx;padding-bottom: 10rpx;border-bottom:1px solid #eee;">
								<view class="cardText">返佣状态：{{item.isOpen == 1?'已返佣':'未返佣'}}</view>
								<view class="cardText">返佣金额：{{item.shopRebateAmount?item.shopRebateAmount:'暂无'}}</view>
							</view>
							<view class="uni-body">
								<view class="cardText">邀请店铺名：{{item.registerShopName?item.registerShopName:'暂无'}}</view>
							</view>
						</uni-card>
					</li>
				</ul>
			</uni-card>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commissionList: [],
				pages: 1,
				pageNum: 1,
				status: 'loadmore',
				shopId: '',
				items: ['订单返佣', '邀请返佣'],
				current: 0,
				allrebateAmount:0,
				rebateAmount:0
			};
		},
		onLoad() {
			this.shopId = uni.getStorageSync('shopId')
			this.type = uni.getStorageSync('type')
		},
		onShow(){
			this.getList()
			this.getBalance()
		},
		onReachBottom() {
			if (this.inStorageStatus != 0) {
				if (this.pageNum >= this.pages) return;
				this.status = 'loading';
				this.pageNum += 1;
				this.getList();
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				this.getList();
			},
			getBalance() {
				this.tui.request('/app/shop/getShopRebateBalance', 'post', {}, false, false, true).then((res) => {
					if (res.code == 200){
						this.rebateAmount = res.result.rebateAmount
						this.allrebateAmount = res.result.allrebateAmount
					}
				})
			},
			getList() {
				var url,data
				this.commissionList = []
				if(this.current == 0){
					url = '/app/deductlog/getShopLogById'
					data = {
						shopId: this.shopId,
						pageNum: this.pageNum,
						pageSize: 10
					}
				}else{
					url = '/app/inviteLog/getInviteLogListByShop'
					data = {
						pageNumber: this.pageNum,
						pageSize: 10
					}
				}
				this.tui.request(url, 'post', data, false, false, true).then((res) => {
					this.status = 'nomore';
					if (res.code == 200) {
						this.commissionList = res.result.records
						for(let i=0;i<this.commissionList.length;i++){
							if(this.commissionList[i].shopAfterDepoBal == undefined){
								this.commissionList[i].shopAfterDepoBal = '暂无'
							}
							if(this.commissionList[i].createTime == null){
								this.commissionList[i].createTime = '暂无'
							}
						}
					}
				})
			},
			goToDetail() {
				uni.navigateTo({
					url: `/pages/rebate/detail`
				})
			},
			goToWithdrawal() {
				if(this.type != 0){
					this.tui.toast("您暂无提现权限！")
				}else{
					this.tui.request('/app/operatingArea/getByArea', "post", {
						province:'',
						city:'',
						area:'',
						shippingType:0,
						seachParams:"测试"
					}, false, true).then((res) => {
						this.status = 'nomore';
						if (res.code == 200) {
							this.isOnLine = res.result.operatingAreaList[0].isOnLine
							if(res.result.operatingAreaList[0].isOnLine == '0'){
								this.tui.toast("功能测试中，暂未开放")
							}else{
								uni.navigateTo({
									url: `/pages/rebate/withdrawal?balance=${this.rebateAmount}`
								})
							}
						}else{
							this.tui.toast(res.message)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content-balance {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		flex: 1;

		.balance-text {
			font-size: 32rpx;
			margin-bottom: 35rpx;
		}
	}
	.segmented-control{
		width: 93% !important;
		margin: 0 auto;
		border-bottom-color: #5fd9ee;
		background: #fff;
	}
	.segmented-control__item{
		background-color: #fff;
		border-color: #fff !important;
		border-bottom-color: #5fd9ee !important;
		border-radius: 0 !important;
	}
	.segmented-control__item:first-child{
		border-top-left-radius: 5px !important;
	}
	.segmented-control__item:last-child{
		border-top-right-radius: 5px !important;
	}
	.content-actions {
		display: flex;
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.u-button {
			flex-basis: 40%;
		}
	}

	.uni-card {
		margin: 0 30rpx 30rpx !important;
		padding: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		// border: none !important;
	}
</style>