hire-wx-houxuanren/pagesD/mingxi.vue

<template>
	<view class="page">
		<!-- :style="{height:tab1==0?'356rpx':'175rpx'}" -->
		<view class="" style="background: #fff;padding: 0 32rpx 20rpx;border-bottom: 2rpx solid rgba(0, 0, 0, 0);">
			<u-navbar :fixed="false" bgColor='rgba(0,0,0,0)' placeholder :safeAreaInsetTop="true" @leftClick="return1">
				<view class="index-header  u-flex u-row-between" slot="center" style="position: relative;">
					<view class="" style="margin-left: -11rpx;">
						<u-tabs :current="tab1" :list="list4" lineWidth="42" lineHeight="5" :lineColor="bgImage"
							:activeStyle="{
							    color: '#303133',
							    fontWeight: 'bold',
							}" :inactiveStyle="{
							    color: '#606266',
							}" itemStyle=" padding-right: 15px; height: 34px;" @click="TabsTop">
						</u-tabs>
					</view>
				</view>
			</u-navbar>
			<view v-if="tab1 ==0" class="search u-flex" style="margin-top: 20rpx;">
				<u-icon name="search"></u-icon>
				<input style="width: 100%;" type="text" placeholder="请输入关键词搜索" v-model="keywords"
					@input="commission_list">
				<!-- <input v-model="keywords" type="text" class="text1" placeholder="请输入关键词搜索" @confirm="search"> -->
			</view>
			<view v-if="tab1 ==0" class="shaixuan u-flex u-row-between"
				style="margin-top: 20rpx;border-top:2rpx solid #f6f6f6 ;padding-top: 16rpx;">
				<view class="u-flex" @click="showtime = true">
					<text style="margin-right: 14rpx;">{{date || '选择时间'}}</text>
					<u-icon name="arrow-down-fill" size="8"></u-icon>
				</view>
				<view class="u-flex" @click="show = true">
					<text style="margin-right: 14rpx;">{{label}}</text>
					<u-icon name="arrow-down-fill" size="8"></u-icon>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="" style="margin-top: -20rpx;" v-if="tab1 == 0">
				<view class="" v-if="source_type == 'order'" style="border: 2rpx solid rgba(0,0,0,0);">
					<view style="margin-top: 20rpx;" class="list" v-for="(item,index) in list " :key="item.id">
						<view class="u-flex u-row-between">
							<view class="titlea">
								订单编号:{{item.order.order_no}}
							</view>
							<view class="fonts">
								<text v-if="item.withdraw_status=='unapplied'"></text>
								<text v-if="item.withdraw_status=='withdrawing'"
									style="color: rgba(250, 143, 0, 0.8);background-color:rgba(250, 143, 0, 0.1);padding: 3rpx;">提现中</text>
								<text v-if="item.withdraw_status=='success'"
									style="color: rgba(53, 170, 31, 0.8);background-color:rgba(53, 170, 31, 0.1);padding: 3rpx;">已提现</text>
								<text v-if="item.withdraw_status=='withdraw'"
									style="color: rgba(12, 102, 194, 0.8);background-color:rgba(12, 102, 194, 0.1);padding: 3rpx;">已申请</text>
								<text v-if="item.withdraw_status=='failed'"
									style="color: rgba(219, 15, 15, 0.8);background-color:rgba(219, 15, 15, 0.1);padding: 3rpx;">提现失败</text>
							</view>
						</view>
						<view class="u-flex u-row-between"
							style="margin-top: 20rpx; border-top:2rpx solid #F6F6F6;padding-top: -18rpx;box-sizing: border-box;">
							<view class="left">
								<view class="top">
									<text class="left">
										{{item.user.nickname}}
									</text>
									<text class="right">
										{{item.order.job.job_name}}
									</text>
								</view>
								<view class="concent">
									<text class="left">佣金内容</text>
									<text class="right">{{item.type_name}}</text>
								</view>
								<view class="concent u-flex">
									<text class="left">佣金金额</text>
									<view class="money">
										<text style="font: 24rpx;">¥</text>
										<text style="font-size: 32rpx;">{{item.amount}}</text>
									</view>
								</view>
							</view>
							<view class="right">
								<view class="top">
									<text class="left">
										职位负责人
									</text>
									<text class="right">
										{{item.order.recommend_info.username }}
									</text>
								</view>
								<view class="concent">
									<text class="left">offer时间</text>
									<text
										class="right">{{item.order.offered_time.slice(0,-3).replaceAll("-",".")}}</text>
								</view>
								<view class="concent">
									<text class="left">过保时间</text>
									<text
										class="right">{{item.order.over_protected_time.slice(0,-3).replaceAll("-",".")}}</text>
								</view>
							</view>
						</view>
						<view class="bottom u-flex u-row-between">
							<view class="left">
								<text>推荐时间:{{item.order.recommended_time||"暂无"}}</text>
							</view>
							<view class="right">
								<text
									v-if="item.is_confirm==1">回款时间:{{item.confirm_time.slice(0,-3).replaceAll("-",".")}}</text>
								<text v-if="item.is_confirm==0">佣金结算状况:未回款</text>
							</view>
						</view>
					</view>
					<view class="safe-area-inset-bottom"></view>
				</view>
				<view class="" v-if="source_type == 'invite'">
					<view class="list1" v-for="(item,index) in list" :key="item.id">
						<view class="u-flex u-row-between">
							<view class="tatlea">
								订单编号:{{item.order.order_no}}
							</view>
							<view class="fonts">
								<text v-if="item.withdraw_status=='unapplied'"></text>
								<text v-if="item.withdraw_status=='withdrawing'"
									style="color:  rgba(250, 143, 0, 0.8);">提现中</text>
								<text v-if="item.withdraw_status=='success'"
									style="color:  rgba(53, 170, 31, 0.8);">已提现</text>
								<text v-if="item.withdraw_status=='withdraw'"
									style="color:  rgba(12, 102, 194, 0.8);">已申请</text>
								<text v-if="item.withdraw_status=='failed'"
									style="color: rgba(219, 15, 15, 0.8);">提现失败</text>
							</view>
						</view>
						<view class="u-flex u-row-between">
							<view class="u-flex"
								style="border-top: 2rpx solid #F6F6F6;margin-top: 20rpx;padding-top: 20rpx;">
								<text style="margin-right: 16rpx;" class="title">{{item.type_name}}</text>
								<view class="back u-flex" @click="todingdan(item.id)">
									<image style="width: 26rpx;height: 26rpx;margin-top: 3rpx;"
										src="static/images/dikou-tips.png" mode="">
									</image>
									<text class="font" style="margin-left: 12rpx;">订单疑问</text>
								</view>
							</view>
							<view class="money">
								<text style="font-size: 24rpx;">¥</text>
								<text style="font-size: 32rpx;">{{item.amount}}</text>
							</view>
						</view>
						<view class="u-flex u-row-between" style="margin-top: 22rpx;">
							<text class="data tatlea">邀请日期 2023.03.12 12:4</text>
							<!-- <text class="data1">结算款时间:2023.03.12 12:</text> -->
							<text class="date1"
								v-if="item.is_confirm==1">结算款时间:{{item.confirm_time.slice(0,-3).replaceAll("-",".")}}</text>
							<text class="tatlea" v-if="item.is_confirm==0">佣金结算状态: 未回款</text>
						</view>
					</view>
				</view>
				<view class="safe-area-inset-bottom"></view>
			</view>
			<view class="" v-if="tab1 == 1">
				<u-subsection mode="subsection" :list="list2" :current="current" @change="change"
					keyName="label"></u-subsection>
				<view class="" v-if="current==0">
					<view class="yong" v-for="(item,index) in list" :key="item.id" style="margin-top: 20rpx;"
						v-if="item.withdraw_status=='unapplied'?false:true">
						<view class="top u-flex u-row-between">
							<text class="left tatlea">订单编号:{{item.order.order_no}}</text>
							<view class="right">
								<text style="font-size: 24rpx;">¥</text>
								<text style="font-size: 32rpx;">{{item.amount}}</text>
							</view>
						</view>
						<view class="u-flex u-row-between"
							style="margin-top: 20rpx; border-top:2rpx solid #F6F6F6;padding-top: -18rpx;box-sizing: border-box;">
							<view class="left">
								<view class="top"
									style="width: 284rpx;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">
									<text class="left">
										{{item.order.recommend_info.username}}
									</text>
									<text class="right">
										{{item.order.job.job_name}}
									</text>
								</view>
								<view class="concent">
									<text class="left">佣金内容</text>
									<text class="right">{{item.type_name}}</text>
								</view>
								<view class="concent u-flex">
									<text class="left">佣金金额</text>
									<view class="money">
										<text style="font: 24rpx;">¥</text>
										<text style="font-size: 32rpx;">{{item.amount}}</text>
									</view>
								</view>
							</view>
							<view class="right">
								<view class="top">
									<text class="left">
										职位负责人
									</text>
									<text class="right">
										{{item.order.hr.name }}
									</text>
								</view>
								<view class="concent">
									<text class="left">offer时间</text>
									<text
										class="right">{{item.order.offered_time.slice(0,-3).replaceAll("-",".")}}</text>
								</view>
								<view class="concent">
									<text class="left">过保时间</text>
									<text
										class="right">{{item.order.over_protected_time.slice(0,-3).replaceAll("-",".")}}</text>
								</view>
							</view>
						</view>
						<view class="" style="border-top:2rpx solid #F6F6F6 ;margin-top: 20rpx;">
							<view class="u-flex u-row-between leftf">
								<text class="leftff">提现账号</text>
								<text>中国农业银行(2392)</text>
							</view>
							<view class="u-flex u-row-between leftf">
								<text class="leftff">申请时间</text>
								<text>2023.08.23 12:16</text>
							</view>
							<view class="u-flex u-row-between leftf">
								<text class="leftff">到账时间</text>
								<text>2023.08.23 12:16</text>
							</view>
							<view class="u-flex u-row-between leftf">
								<text class="leftff">提现状态</text>
								<text v-if="item.withdraw_status=='withdrawing'"
									style="color:  rgba(250, 143, 0, 0.8);background-color:rgba(250, 143, 0, 0.1);padding: 3rpx;">提现中</text>
								<text v-if="item.withdraw_status=='success'"
									style="color:  rgba(53, 170, 31, 0.8);background-color:rgba(53, 170, 31, 0.1);padding: 3rpx;">已提现</text>
								<text v-if="item.withdraw_status=='withdraw'"
									style="color:  rgba(12, 102, 194, 0.8);background-color:rgba(12, 102, 194, 0.1);padding: 3rpx;">已申请</text>
								<text v-if="item.withdraw_status=='failed'"
									style="color: rgba(219, 15, 15, 0.8);background-color:rgba(219, 15, 15, 0.1);padding: 3rpx;">提现失败</text>
							</view>
						</view>
					</view>
					<view class="safe-area-inset-bottom"></view>
				</view>
				<view class="" v-if="current==1">
					<view class="yong" v-for="(item,index) in list" :key="item.id" style="margin-top: 20rpx;"
						v-if="item.withdraw_status=='unapplied'?false:true">
						<view class="top u-flex u-row-between">
							<text class="left tatlea">订单编号:{{item.order.order_no}}</text>
							<view class="right">
								<text style="font-size: 24rpx;">¥</text>
								<text style="font-size: 32rpx;">{{item.amount}}</text>
							</view>
						</view>
						<view class="" style="border-top:2rpx solid #F6F6F6 ;margin-top: 20rpx;">
							<view class="u-flex u-row-between leftf">
								<text class="leftff">邀请类型</text>
								<text>{{item.type_name}}</text>
							</view>
							<view class="u-flex u-row-between leftf">
								<text class="leftff">邀请时间</text>
								<text>2023.08.23 12:16</text>
							</view>
							<view class="u-flex u-row-between leftf">
								<text class="leftff">提现账号</text>
								<text>中国农业银行(2392)</text>
							</view>
							<view class="u-flex u-row-between leftf">
								<text class="leftff">申请时间</text>
								<text>2023.08.23 12:16</text>
							</view>
							<view class="u-flex u-row-between leftf">
								<text class="leftff">到账时间</text>
								<text>2023.08.23 12:16</text>
							</view>
							<view class="u-flex u-row-between leftf">
								<text class="leftff">提现状态</text>
								<text v-if="item.withdraw_status=='withdrawing'"
									style="color:  rgba(250, 143, 0, 0.8);padding: 3rpx;">提现中</text>
								<text v-if="item.withdraw_status=='success'"
									style="color: rgba(53, 170, 31, 0.8);padding: 3rpx;">已提现</text>
								<text v-if="item.withdraw_status=='withdraw'"
									style="color: rgba(12, 102, 194, 0.8);padding: 3rpx;">已申请</text>
								<text v-if="item.withdraw_status=='failed'"
									style="color: rgba(219, 15, 15, 0.8);padding: 3rpx;">提现失败</text>
							</view>
						</view>
					</view>
					<view class="safe-area-inset-bottom"></view>
				</view>
			</view>
			<view style="height: 70vh;justify-content: center;" class="u-flex" v-if="list.length == 0&&tab1 == 0">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
			<view style="height: 88vh;justify-content: center;" class="u-flex" v-if="list.length == 0 &&tab1 == 1">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
		</view>
		<u-datetime-picker :show="showtime" mode="year-month" @confirm="changetime"
			@cancel="showtime = false"></u-datetime-picker>
		<u-picker :show="show" :columns="columns" keyName="label" @cancel="show = false" @confirm="enter"></u-picker>
	</view>
</template>

<script>
	import {
		commission_list,
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				keywords: '',
				show: false,
				showtime: false,
				tab1: 0,
				current: 0,
				date: "",
				list: [],
				job_name: "",
				list2: [{
					label: '订单佣金',
					// 其他属性值
					source_type: "order"
				}, {
					label: '邀请佣金',
					source_type: "invite"
				}],
				source_type: "order",
				label: "订单佣金",
				columns: [
					[{
						label: '订单佣金',
						// 其他属性值
						source_type: "order"
						// ...
					}, {
						label: '邀请佣金',
						source_type: "invite"
					}]
				],
				list4: [{
						name: "佣金明细"
					},
					{
						name: "提现记录"
					}
				]
			}
		},
		onLoad(options) {
			if (options.source_type != null) {
				this.source_type = options.source_type
				if (this.source_type == "order") {
					this.label = "订单佣金"
				} else {
					this.label = "邀请佣金"
				}
			}
			this.commission_list()
		},
		computed: {
			bgImage() {
				return `url(${require('@/static/images/juxing.png')}) 100% 100%`
			}
		},
		methods: {
			todingdan(id) {
				uni.navigateTo({
					url: "/pagesD/dingdan/dingdan?id=" + id
				})
			},
			return1() {
				uni.navigateBack()
			},
			change(e) {
				console.log(e);
				this.current = e
				if (this.current == 0) {
					this.source_type = "order"
					this.commission_list()
				} else {
					this.source_type = "invite"
					this.commission_list()
				}
			},
			enter(e) {
				console.log(e);
				this.label = e.value[0].label
				this.source_type = e.value[0].source_type
				this.show = false
				this.commission_list()
			},
			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
			},
			TabsTop(item) {
				this.tab1 = item.index
				this.commission_list()
			},
			commission_list() {
				commission_list({
					// source_type: "order",
					source_type: this.source_type,
					keywords: this.keywords,
					is_confirm: "",
					date: this.date,
				}).then(res => {
					console.log(res);
					this.list = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date1 {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #222222;
	}

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

	.fonts {
		padding: 3rpx;
		height: 40rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
	}

	.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;
		padding: 20rpx;
		margin-top: 20rpx;

		.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: 20rpx 24rpx 0;
			background: #F3F3F3;
			min-height: 78vh;
			// margin-top: 20rpx;


			.list {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 20rpx;
				box-sizing: border-box;
				border: 2rpx solid rgba(0, 0, 0, 0);
			}
		}
	}

	.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;
			}
		}
	}

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

	.left {
		.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;
			}
		}
	}

	.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>