hire-wx-houxuanren/pagesD/tixian1.vue

<template>
	<view class="page">
		<view class="content">
			<view class="">
				<u-subsection :list="list2" mode="button" activeColor="#fff" bgColor="#fff" :current="current"
					@change="change" keyName="label"></u-subsection>
				<view class="" v-if="current == 0">
					<hx-order></hx-order>
				</view>
				<view class="" v-if="current == 1">
					<hx-invite></hx-invite>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				date: "",
				all: "",
				list: [],
				allist: [],
				list2: [{
					label: '订单佣金',
					// 其他属性值
					source_type: "order"
				}, {
					label: '邀请佣金',
					source_type: "invite"
				}],
				source_type: "order",
				label: "订单佣金",
			}
		},
		onLoad(options) {
			this.current = options.current
			this.source_type = options.source_type
			if (this.source_type == "order") {
				this.label = "订单佣金"
			} else {
				this.label = "邀请佣金"
			}

		},
		computed: {},
		methods: {
			change(e) {
				this.current = e
				if (e == 0) {
					this.source_type = "order"
				} else {
					this.source_type = "invite"
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-subsection--button {
		height: 76rpx;
		border-radius: 76rpx !important;
		background-color: #fff !important;
	}

	::v-deep .u-subsection--button__bar {
		border-radius: 76rpx !important;
		background-color: #0C66C2 !important;
	}

	.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: 4rpx;
	}

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