web-base-h5/pages/architecture/recommendArchite/recommend1.vue

<!-- TreeList.vue -->
<template>
	<view>
		<view class="seach">
			<view class="neibox">
				会员编号
			</view>
			<view class="seach_i">
				<u--input class="these" v-model="queryParams.memberCode">
					<template slot='suffix'>
						<view class="seatch_r">
							<u-icon @click="getDataList" name="search" size="22" color="#fff"></u-icon>
						</view>
					</template>
				</u--input>
			</view>
			<view class="neibox" @click="popShow = true">
				筛选
			</view>

		</view>
		<view class="mainbox">

			<view class="main_bottom">
				<tree-item :data="treeData"></tree-item>
			</view>
		</view>
		<u-popup :show="popShow" mode="right" @close="popShow = false" :closeOnClickOverlay="false">
			<view class="rightPopup">
				<view class="popup_top">
					<view @click="()=>{getDataList(),popShow = false}">筛选</view>
					<view class="top_red" @click="popShow = false">{{'返回'}}</view>
				</view>
				<view class="typesBox">
					<view class="typeTitle" @click='listShow=true'>
						结算期数
					</view>
					<view class="choiceBox">
						<view class="inputbox" @click="listShow=true">
							<view class="">
								{{settleName?settleName:"请选择"}}
							</view>
							<u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
						</view>
					</view>
				</view>
				<view class="typesBox">
					<view class="typeTitle">
						代数
					</view>
					<view class="choiceBox">
						<u--input v-model="queryParams.level"
							style="background-color: rgba(255, 234, 233, 0.65);border-color:rgba(255, 234, 233, 0.65)!important;"
							placeholder="请输入" border="surround" shape='circle'></u--input>
					</view>
				</view>

				<view class="popup_bottom">
					<view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
					<view class="bottom_btn thebtn2" @click="()=>{getDataList(),popShow = false}">{{'确定'}}
					</view>
				</view>

			</view>
			<u-picker @cancel='listShow=false' :show="listShow" ref="uPicker" :columns="memberSettlePeriodList"
				@confirm="confirm" keyName='settleDate'></u-picker>

		</u-popup>


	</view>
</template>

<script>
	import TreeItem from '@/components/treeItem.vue';
	import * as arc from '@/config/architecture.js'
	export default {
		name: 'TreeList',
		components: {
			TreeItem
		},
		data() {
			return {
				avaerInfoList: [],
				queryParams: {
					memberSettlePeriodId: "", //期数
					memberCode: "", //会员编号
					level: "", //代数
				},
				memberSettlePeriodList: [], //期数
				treeData: [],
				popShow: false,
				listShow: false,
				settleName: ""
			};
		},
		onLoad() {
			this.getAvarerInfo();
			this.getDataList()
		},
		methods: {
			confirm(e) {
				this.queryParams.memberSettlePeriodId = e.value[0].pkId
				this.settleName = e.value[0].settleDate
				this.listShow = false
			},
			clearAll() {
				this.popShow = false
				this.settleName = ""
				this.queryParams = {
					memberSettlePeriodId: "", //期数
					memberCode: "", //会员编号
					level: "", //代数
				}
				this.getDataList()
			},
			getAvarerInfo() {
				arc.getAvarerInfo().then((res) => {
					this.avaerInfoList = res.data;
				});
				arc.getMemberSettlePeriod().then(res => {
					this.memberSettlePeriodList = [res.data]
				})
			},
			getDataList() {
				arc.getTjFramework(this.queryParams).then(res => {
					this.treeData = res.data
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.seach {
		background: #fff;
		overflow: hidden;
		padding: 20rpx 23rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		border-bottom: 2rpx solid #eee;

		.these {
			border: none;
			padding: 10rpx 0 !important;
		}

		.seach_i {
			padding: 0 20rpx;
			border-radius: 34rpx;
			background: #fff;
			flex: 1;
			background: #f5f6f8;
			margin: 0 20rpx;
		}

		.neibox {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.seatch_r {
			background: #fb3024;
			border-radius: 50%;
			padding: 8rpx;
		}


	}

	.mainbox {
		padding: 38rpx 20rpx;
		background: #FFFFFF;
		margin-top: 25rpx;
	}

	.rightPopup {
		width: 645rpx;
		height: 100%;
		overflow: auto;

		.popup_top {
			padding: 25rpx;
			background-color: rgba(255, 234, 233, 0.65);
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;

			.top_red {
				color: #FB3024;
			}
		}

		.popup_bottom {
			display: flex;
			align-items: center;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;

			.bottom_btn {
				flex: 1;
				padding: 20rpx 0;
				text-align: center;
				font-size: 28rpx;
			}

			.thebtn1 {
				background-color: rgba(255, 234, 233, 0.65);
				color: #333333;
			}

			.thebtn2 {
				background-color: #FB3024;
				color: #ffffff;
			}
		}

		.typesBox {
			margin-top: 40rpx;

			.typeTitle {
				padding: 0 24rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
			}

			.choiceBox {
				padding: 0 12rpx;
				display: flex;
				margin-top: 17rpx;
				align-items: center;
				flex-wrap: wrap;

				.inputbox {
					font-size: 26rpx;
					width: 100%;
					padding: 20rpx 32rpx;
					border-radius: 20rpx;
					background-color: rgba(255, 234, 233, 0.65);
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.flex_btn {
					background-color: rgba(255, 234, 233, 0.65);
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 14rpx 48rpx;
					border-radius: 26rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin: 17rpx 5rpx;
				}

				.timesbtn {
					flex: 1;
				}

				.selectbtn {
					background-color: #C8161D;
					color: #ffffff;
				}

			}
		}
	}
</style>