hire-wx-houxuanren/components/hx-invite/hx-invite.vue

<template>
	<view>
		<u-checkbox-group v-model="arralylist" placement="column" @change="checkboxChange">
			<view class="yong" style="margin-top: 20rpx;" v-for="(item,index) in list" :key="index">
				<view class="u-flex">
					<view class="" style="flex: 1;">
						<view class="u-flex u-row-between">
							<view class="order">
								订单编号:{{item.order.order_no}}
							</view>
							<view class="deposit" v-if="item.withdraw_status == 'unapplied'">
								未提现
							</view>
							<view style="color: rgba(250, 143, 0, 1);background-color:rgba(250, 143, 0, .1) ;" class="deposit" v-if="item.withdraw_status == 'withdrawing'">
								提现中
							</view>						
							<view style="color: rgba(53, 170, 31, 1);background-color:rgba(53, 170, 31, .1) ;" class="deposit" v-if="item.withdraw_status == 'success'">
								已提现
							</view>
						</view>
						<view class="u-flex u-row-between dan" style="margin-top: 18rpx;">
							<view class="u-flex">
								<u-checkbox :name="index"
									:disabled="['unapplied','failed'].includes(item.withdraw_status)&&item.is_confirm==1?false : true">
								</u-checkbox>
								<view class="lietou">{{item.type_name}}</view>
							</view>
							<view class="red">
								<text style="24rpx">¥</text>
								<text style="32rpx">{{item.amount}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" style="margin-top:26rpx;">
					<text class="date">邀请日期 2023.03.12 12:4</text>
					<text class="date1"
						v-if="item.is_confirm==1">回款时间:{{item.confirm_time.slice(0,-3).replaceAll("-",".")}}</text>
					<text class="date1" v-if="item.is_confirm==0">回款时间:未回款</text>
				</view>
			</view>
		</u-checkbox-group>
		<view class="" style="height: 186rpx;background: #F3F3F3;"></view>
		<!-- <view class="safe-area-inset-bottom"></view> -->
		<view class="bottom-end">
			<u-checkbox-group @change="arraly" v-model="checkboxValue1">
				<view class="u-flex u-row-between" style="width: 100%;">
					<view class="u-flex">
						<u-checkbox :name="-2">
						</u-checkbox>
						<view class="">全选</view>
					</view>
					<view class="u-flex">
						<view class="">
							<text class="jine">金额</text>
							<text class="red" style="font-size: 24rpx;margin-left: 12rpx;">￥</text>
							<text class="red" style="font-size: 36rpx;">{{alla}}</text>
							<text class="red" style="font-size: 24rpx;">.00</text>
						</view>
						<view class="btn" @click="totixian" style="margin-left: 20rpx;">
							立即提现
						</view>
					</view>
				</view>
				<view class="safe-area-inset-bottom"></view>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>
	import {
		commission_list
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				arralylist: [],
				checkboxValue1: [],
				money: 200.00,
				show: false,
				showtime: false,
				current: 1,
				date: "",
				all: "",
				moneylist: [],
				list: [],
				allist: [],
				list2: [{
					label: '订单佣金',
					// 其他属性值
					source_type: "order"
				}, {
					label: '邀请佣金',
					source_type: "invite"
				}],
				alllll: 0,
				source_type: "order",
				label: "订单佣金",
				columns: [
					[{
						label: '订单佣金',
						// 其他属性值
						source_type: "order"
						// ...
					}, {
						label: '邀请佣金',
						source_type: "invite"
					}]
				],
				list4: [{
						name: "佣金明细"
					},
					{
						name: "提现记录"
					}
				],
				list5: [],
				list6: [],
				page: 1,
				total: 0,
			}
		},
		created() {
			this.commission_list()
		},
		onReachBottom() {
			if (this.total != this.list.length) {
				this.page++
				this.commission_list()
			}
		},
		computed: {
			alla() {
				var arr = 0
				if (this.arralylist.length == this.list5.length) {
					this.checkboxValue1 = [-2]
				} else {
					this.checkboxValue1 = []
				}
				this.arralylist.forEach(item => {
					arr += Number(this.list[item].amount)
				})
				return arr
			},
			bgImage() {
				return `url(${require('@/static/images/juxing.png')}) 100% 100%`
			}
		},
		methods: {
			totixian() {
				var id_list = []
				this.list.forEach((item, index) => {
					if (this.arralylist.indexOf(index) != -1) {
						id_list.push(item.id)
					}
				})
				var ids = id_list.join()
				if (this.alla > 0) {
					uni.navigateTo({
						url: "/pagesD/tixian?money=" + this.alla + "&current=" + this.current + "&ids=" + ids
					})
				} else {
					this.$u.toast("提现金额必须大于0")
				}
			},
			ally() {
				this.list.forEach((item, index) => {
					this.allist.push(index)
				})
			},
			arraly(n) {
				if (n.length > 0) {
					this.arralylist = []
					this.list.forEach((item, index) => {
						if (item.is_confirm == 1 && ['unapplied', 'failed'].includes(item.withdraw_status)) {
							this.arralylist.push(index)
						}
					})
					console.log(this.arralylist);
					// this.arralylist = this.checkboxValue1
				}
				if (n.length == 0) {
					this.arralylist = []
				}
			},
			checkboxChange(n) {
				this.arralylist = n
				// if (this.arralylist.length == this.list5.length) {
				// 	this.name1 = -2
				// }
				if (this.arralylist.length == this.list5.length) {
					this.checkboxValue1 = [-2]
				} else {
					this.checkboxValue1 = []
				}
			},
			return1() {
				uni.navigateBack()
			},
			enter(e) {
				this.label = e.value[0].label
				this.source_type = e.value[0].source_type
				this.show = false
			},
			async changetime(e) {
				const timeFormat = uni.$u.timeFormat;
				let timeValue = await timeFormat(e.value, 'yyyy-mm');
				this.date = timeValue;
				this.page = 1
				this.total = 0
				this.list = []
				this.commission_list()
				this.showtime = false
			},
			commission_list() {
				commission_list({
					page: 1,
					source_type: "invite",
					job_name: "",
					is_confirm: "",
					begin_time: "",
					end_time: "",
					time_type: "",
					// status: "unapplied"
				}).then(res => {
					if (this.page == 1) {
						this.list = res.data.data
					} else {
						this.list = this.list.concat(res.data.data)
						console.log(this.list);
					}
					res.data.data.forEach(item => {
						if (item.is_confirm == 1) {
							this.list5.push(item)
						}
					})
					// this.ally()
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.btn {
		width: 184rpx;
		height: 72rpx;
		background: #0C66C2;
		border-radius: 12rpx;
		font-size: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
		text-align: center;
	}

	.jine {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #444444;
	}

	.red {
		font-family: JDZhengHT, JDZhengHT;
		font-weight: 400;
		color: #F2413A;
	}

	.bottom-end {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		padding: 16rpx 32rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
	}

	.date {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #888888;
	}

	.date1 {
		font-size: 24rpx;
		font-family: SFPro-Regular, SFPro;
		font-weight: 400;
		color: #222222;
	}

	.red {
		font-family: JDZhengHT-Regular, JDZhengHT;
		font-weight: 400;
		color: #F2413A;
	}

	.lietou {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
	}

	.dan {
		margin-top: 20rpx;
		border-top: 2rpx solid #F6F6F6;
		padding-top: 18rpx;
	}

	.deposit {
		border-radius: 6rpx;
		background-color: rgba(12, 102, 194, 0.1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0C66C2;
		padding: 6rpx;
	}

	.order {
		font-size: 24rpx;
		font-family: SFPro-Regular, SFPro;
		font-weight: 400;
		color: #666666;
	}

	.yong {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx 20rpx 26rpx;
		box-sizing: border-box;

		.top {
			.left {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
			}

			.right {
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #F2413A;
			}
		}

		.leftf {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #555555;
			margin-top: 20rpx;
		}

		.leftff {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #555555;
		}
	}

	.list1 {
		background: #FFFFFF;
		border-radius: 16rpx;

		.data {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #888888;
		}

		.data1 {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
		}

		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
		}

		.font {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #fff;
			opacity: 1;
		}

		.back {
			background: #0C66C2;
			border-radius: 6rpx;
			padding: 4rpx 8rpx;
			opacity: 0.5;
		}

		.money {
			font-size: 24rpx;
			font-family: SFPro-Regular, SFPro;
			font-weight: 400;
			color: #F2413A;
			margin-left: 12rpx;
		}
	}

	.page {
		height: 100vh;

		.content {
			padding: 0 24rpx;
			background: #F3F3F3;
			min-height: 78vh;
			padding-top: 20rpx;
			min-height: 100vh;
			box-sizing: border-box;


			.list {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}
	}

	.bottom {
		border-top: 2rpx solid #F6F6F6;
		margin-top: 18rpx;
		padding-top: 18rpx;
		box-sizing: border-box;

		.left {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #555555;
		}

		.right {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.right {
		.concent {
			.left {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
			}

			.money {
				font-size: 24rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #F2413A;
				margin-left: 12rpx;
			}

			.right {
				margin-left: 12rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;

			}
		}

		.top {
			.left {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
			}

			.right {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
				display: inline-block;
				width: 170rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.left {

		// width: 300rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
		.concent {
			.left {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
			}

			.money {
				font-size: 24rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #F2413A;
				margin-left: 12rpx;
			}

			.right {
				margin-left: 12rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
			}
		}

		.top {

			.left {
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}

			.right {
				margin-left: 12rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #141414;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 220rpx;
				display: inline-block;
			}
		}
	}

	.search {
		height: 68rpx;
		background: #F3F3F3;
		border-radius: 38rpx;
		padding: 14rpx 28rpx;
		box-sizing: border-box;
	}

	.index-header {
		padding: 0 32rpx;
		height: 50rpx;

		.index-search {
			width: 200rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 28rpx;

			.text1 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-left: 16rpx;
			}
		}
	}

	::v-deep .u-navbar__content__left {
		padding: 0 !important;
	}

	// ::v-deep .u-subsection__item{
	// 	border-radius: 38rpx;
	// }
	// ::v-deep .u-subsection--subsection{
	// 	border-radius: 76rpx;
	// }
</style>