great_distribution/pages/distributor/index.vue

<template>
	<view class="consume-content" :style="{'--status-bar-': statusBarHeight}">
		<view class="consume-content-info">
			<!-- 头部主要内容 开始 -->
			<view class="consume-content-header">
				<customNavbar title="提现" bgColor="var(--gd-bgm-color)" :customNavbarInfo="{}" :contentStyle="{}"
					:leftStyle="{color: '#fff'}"></customNavbar>
				<!--  tab 开始 -->
				<u-tabs 
				:list="list1" 
				@click="clickTabs" 
				lineColor="var(--gd-bgm-color)"
				:activeStyle="{ color: 'rgba(127, 127, 127, 1)' }"
				:inactiveStyle="{ color: 'rgba(127, 127, 127, 1)' }"
				:scrollable="false"
				></u-tabs>
				<!--  tab 结束 -->
			</view>
			<!-- 头部主要内容 结束 -->
			
			<!--  收支列表 开始  -->
			<view class="consume-content-list">
				<customScrollList
				ref="customScrollList" 
				@load="load"
				@paging="paging"
				@refresh="refresh"
				 >
					<view v-if="dataList.length>0" style="width: 100%;padding: 10rpx 30rpx 0;box-sizing: border-box;" class="item-list">
						<u-checkbox-group placement="column" @change="checkboxChange">
							<view v-for="(item,index) in dataList" :key="item.id" class="item u-flex">
								<u-checkbox v-if="serialType==0" shape="circle" activeColor="#ED0000" :key="index"
									:name="item.name" :checked="item.checked" @change="toggleCheck(index)" class="checkbox" />
								<view class="item-box">
									<view class="text u-flex u-row-between text-order">
										<view class="name">订单号：{{item.orderId}}</view>
									</view>
									<view class="text u-flex u-row-between text-title">
										<view class="name">《{{item.performName}}》</view>
									</view>
									<view class="text u-flex u-row-between text-perform">
										<view class="name">{{item.performDate}} {{item.performTimeStart}}~{{item.performTimeEnd}}</view>
										<view class="name">{{ item.seatTypeName }}</view>
									</view>
									<view class="text u-flex u-row-between">
										<view class="name">核销数量：{{ item.wipeNum }}</view>
										<view class="withdrawTotal">获得佣金：<text class="num"> ￥ {{item.totalPrice}}</text></view>
									</view>
								</view>
							</view>
						</u-checkbox-group>
					</view>
				</customScrollList>
			</view>
			<!--  收支列表 结束  -->
		</view>
		<view class="cart-bottom" v-if="serialType==0">
			<view class="inner u-flex u-row-between">
				<view class="left u-flex">
					<view class="checkbox" @click="checkboxClick" style="padding: 10px;">
						<u-checkbox-group @change="allCheckboxChange">
							<u-checkbox shape="circle" :checked="allChecked" activeColor="#ED0000" :name="allCheckbox.name"
								label="全选"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="total-price-wrap u-flex">
						<view class="total">共{{selectGoods.length}}人</view>
						<view class="totalPrice  u-flex">
							合计: <text class="num"> {{totalPrice}}</text>
						</view>
					</view>
				</view>
				<view class="btn active" v-if="selectGoods.length>0&&cansubmit" @click="submitorder">确定</view>
				<view class="btn" v-else>确定</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		navigateTo
	} from "@/utils/util.js"
	export default {
		data() {
			return {
				title: '提现',
				statusBarHeight: 0, // 状态栏安全距离
				monry: 0,
				moneyValue: null,
				list1: [
					{
						name: '待提现',
						key: 0,
					}, 
					{
						name: '提现中',
						key: 3,
					},
					{
						name: '提现成功',
						key: 1,
					},
					{
						name: '提现失败',
						key: 2,
					},
				],
				serialType: '',
				orderId: '',
				cansubmit: true,
				staticUrl: this.$commonConfig.staticUrl,
				allCheckbox: {
					name: '全选'
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF3C3F',
						'padding-left': '10px'
					}
				}],
				// 购物车列表
				dataList: [],
			}
		},
		computed: {
			// 是否全选
			allChecked() {
				return this.dataList.every(item => item.checked)
			},
			selectGoods() {
				let selectGoods = [];
				this.dataList.forEach(item => {
					if (item.checked) {
						selectGoods.push(item)
					}
				})
				return selectGoods
			},
			// 合计价格
			totalPrice() {
				let that = this;
				return this.dataList.reduce((total, item) => {
					if (item.checked) {
						let price = null;
						total += item.totalPrice;
					}
					return total;
				}, 0).toFixed(2);
			}
		},
		onLoad(page) {
			this.orderId = page.id;
		},
		onShow() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
			this.$refs.customScrollList.refresh()
		},
		methods: {
			/**
			 * @author ygh
			 * @data 2023-12-20
			 */
			navigateToFun() {
				navigateTo('/pages/cash/index')
			},
			/**
			 * 选择tabs
			 */
			clickTabs(item) {
				console.log('item', item);
				if(this.serialType == item.key) return
				this.serialType = item.key
				this.dataList = []
				this.$refs.customScrollList.refresh()
			},
			/**
			 * 获取数据
			 */
			async load(paging) {
				try{
					this.$refs.customScrollList.showPullUp = true
					let res = await this.$u.api.distributorList({
						noSign: 1,
						userid: this.distribution_user_info.userId,
						pageNum: 1,
						pageSize: 10,
						status: this.serialType
					})
					
					if(res && res.code ===200) {
						if(res.data.rows){
							this.dataList = res.data.rows.map(item => {
								item.checked = false;
								return {
									...item,
									class: {
									  0: 'status-0',
									  1: 'status-1',
									  2: 'status-2',
									  3: 'status-3',
									  4: 'status-4',
									  5: 'status-5',
									  6: 'status-6',
									  7: 'status-7',
									  8: 'status-8'
									}[item.status] || ''
								} 
							})
						}else {
							this.dataList = []
						}
						this.$refs.customScrollList.loadSuccess({
							list: this.dataList,
							total: this.dataList.length
						})
					} else {
						this.$refs.customScrollList.loadSuccess({
							list: [],
							total: res.data.total || this.dataList.length
						})
					}
					
				}catch(e){
					//TODO handle the exception
					console.error("e===",e)
					this.$refs.customScrollList.loadSuccess({
						list: [],
						total: this.dataList.length
					})
				}
			},
			paging(paging){
				console.log("下拉  加载数据")
			},
			/**
			 * 下拉触底
			 */
			async refresh(paging){
				console.log("上拉  加载数据")
				//this.$refs.customScrollList.showEmpty = true
				try{
					//this.$refs.customScrollList.showPullUp = true
					let res = await this.$u.api.distributorList({
						pageNum: paging.page,
						pageSize: paging.size,
						userid: this.distribution_user_info.userId,
						status: this.serialType
					})
					if(res && res.code ===200) {
						if(res.data.rows){
							this.dataList = [].concat(res.data.rows.map(item => {
								item.checked = false;
								return {
									...item,
									class: {
									  0: 'status-0',
									  1: 'status-1',
									  2: 'status-2',
									  3: 'status-3',
									  4: 'status-4',
									  5: 'status-5',
									  6: 'status-6',
									  7: 'status-7',
									  8: 'status-8'
									}[item.status] || ''
								} 
							}))
						}else {
							this.dataList = []
						}
						// this.marketPersonsSerialList = null
						this.$refs.customScrollList.refreshSuccess({
							list: this.dataList,
							total: this.dataList.length
						})
					} else {
						this.$refs.customScrollList.refreshSuccess({
							list: [],
							total: res.data.total || this.dataList.length
						})
					}
				}catch(e){
					//TODO handle the exception
					console.error("e===",e)
					this.$refs.customScrollList.refreshSuccess({
						list: [],
						total: this.dataList.length
					})
				}
			},
			
			/**  选择了提现数据  */
			// 切换全选状态
			allCheckboxChange(n) {
				// console.log('allCheckboxChange',n[0]);
				console.log('allCheckboxChange', n);
				let selectAll = n[0] ? true : false;
				this.dataList.forEach(item => {
					item.checked = selectAll
				})
			},
			checkboxClick() {
				// console.log('checkboxClick',this.allChecked);
				this.dataList.forEach(item => {
					item.checked = !this.allChecked
				})
			},
			checkboxChange(n) {
				// console.log('checkboxChange',n);
			},
			// 切换商品选中状态
			toggleCheck(index) {
				// console.log('toggleCheck',index);
				// if(this.dataList[index].status !== 3){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'该状态不能退款',
				// 		duration:1000
				// 	})
				// 	return
				// }
				this.dataList[index].checked = !this.dataList[index].checked
			},
			submitorder() {
				let personList = this.selectGoods.map(item=>{
					return {personsId:item.id,withdrawTotal:item.withdrawTotal}
				});
				let params = {
					withdrawTotal:this.totalPrice,
					personList:JSON.stringify(personList)
				};
				// console.log('selectGoods', this.selectGoods);
				uni.$u.route('/pages/cash/index', params);
			},
			getViewers() {
				this.$u.api.distributorList({
					userid: this.distribution_user_info.userId
				}).then(res => {
					this.dataList = res.data.list.map(item => {
						item.checked = false;
						return {
							...item,
							class: {
							  0: 'status-0',
							  1: 'status-1',
							  2: 'status-2',
							  3: 'status-3',
							  4: 'status-4',
							  5: 'status-5',
							  6: 'status-6',
							  7: 'status-7',
							  8: 'status-8'
							}[item.status] || ''
						} 
					})
				}).catch(err => {
					console.log('getOrderDetails', err.data);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.consume-content {
		width: 100%;
		height: 100%;
		--header-h: 90rpx;

		.consume-content-info {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
		}
	}

	/** 头部主要内容 开始 */
	.consume-content-header {
		width: 100%;
		//height: var(--header-h);
		box-sizing: border-box;
		position: relative;

		::v-deep .u-search {
			padding: 0 30rpx !important;
		}

		::v-deep .u-search__action {
			color: #fff !important;
		}

		/**  余额 开始  */
		.consume-content-money {
			width: 100%;
			box-sizing: border-box;
			margin-top: 50rpx;
			padding-left: 66rpx;
			color: #fff;

			>text {
				font-size: 24rpx;
			}

			.consume-content-money-num {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				margin-top: 24rpx;

				>text:nth-child(1) {
					.balance-userinfo-util {
						font-size: 24rpx;
						margin-left: 5rpx;
					}

					::v-deep .u-count-num {
						font-weight: bold !important;
						font-size: 48rpx !important;
					}
				}

				>text:nth-child(2) {
					margin-top: 20rpx;
					font-size: 24rpx;
				}
			}
		}

		/**  余额 结束  */

		/**  提现 开始  */
		.consume-content-cash {
			width: 100%;
			box-sizing: border-box;
			position: absolute;
			top: 100%;
			transform: translateY(-50%);
			padding: 0 12rpx;

			.consume-content-consume-box {
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221, 221, 221, 0.5);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 34rpx 30rpx 38rpx;

				>text {
					font-size: 28rpx;
					color: #363636;
				}

				.consume-content-consume-money {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 40rpx 0 20rpx;
					border-bottom: 2rpx solid #EEEEEE;

					::v-deep .u-cell__body {
						padding: 20rpx 0 !important;
					}

					.consume-content-consume-input {
						width: 100%;
						padding: 0 10rpx;
					}

					>text {
						flex-shrink: 0;
						flex-wrap: nowrap;
						white-space: nowrap;
					}

					.consume-content-consume-money-icon {
						font-size: 32rpx;
					}

					.consume-content-consume-money-all {
						color: var(--gd-but-color);
						font-size: 24rpx;
						cursor: pointer;
					}
				}

				.consume-content-consume-card {
					width: 100%;

					::v-deep .u-cell__body {
						padding: 20rpx 0 !important;
					}
				}

				.consume-content-consume-submit {
					width: 100%;
					height: 92rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					padding: 0 80rpx 0;
					margin-top: 70rpx;

					>view {
						width: 100%;
						height: 100%;
						border-radius: 46rpx;
						color: #fff;
						background-color: var(--gd-but-color);
						font-size: 28rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

		/**  提现 结束  */
	}

	/** 头部主要内容 结束  **/
	
	/** 收支列表 开始  */
	.consume-content-list {
		width: 100%;
		height: 100%;
		background: #F7F7F9;
		// overflow: hidden;
	}
	/** 收支列表 结束  */
	
	
	.u-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.u-row-between {
		justify-content: space-between;
	}
	
	.u-row-around {
		justify-content: space-around;
	}
	.item-list{
		.item{
			width: 100%;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding-left: 18rpx;
			margin-bottom: 24rpx;
			.item-box {
				width: 100%;
				box-shadow: -6rpx 0rpx 20rpx -18rpx rgba(0,0,0,0.5);
				padding: 10rpx 10rpx 15rpx;
			}
			
			.text{
				flex: 1;
				color: #999;
				.name{
					font-size: 24rpx;
				}
				.withdrawTotal{
					font-size: 24rpx;
					color: var(--gd-but-color);
					.num{
						font-size: 32rpx;
					}
				}
			}
			.text-order {
				padding: 10rpx 0;
				border-bottom: 1px solid rgba(204, 204, 204, 0.5);
			}
			.text-title {
				color: #000;
				font-weight: 600;
				padding: 10rpx 0;
			}
			.text-perform {
				padding: 10rpx 0 20rpx;
			}
		}
	}
	.cart-bottom {
		position: fixed;
		z-index: 1001;
		height: 98rpx;
		left: 0;
		right: 0;
		bottom: 0;
		.inner {
			background-color: #fff;
			height: 100%;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0 20rpx;
			padding-left: 0;
	
			.total-price-wrap {
				margin-left: 30rpx;
				.totalPrice{
					font-size: 30rpx;
					color: #333;
					font-weight: 400;
					.num{
						font-size: 40rpx;
						font-weight: bold;
						color: #ED0000;
						margin-left: 5px;
					}
				}
				.total{
					font-size: 20rpx;
					font-weight: 400;
					color: #999999;
					margin-right: 16rpx;
				}
			}
	
			.btn {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				padding: 0 50rpx;
				background-color: #eee;
				color: #333;
				text-align: center;
	
				&.active {
					background-color: #FF3C3F;
					color: #fff;
				}
			}
		}
	}
</style>