web-store-retail-h5/pages/architecture/recommendArchite/recommend2.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_top">
				<view class="top_flex" v-for="item,index in avaerInfoList" :key="index">
					<img class="theimg" :src="item.value" alt="">
					<view class="fle2">{{item.name}}</view>
				</view>

			</view>

			<view class="main_bottom">
				<view class="scoll_main" ref="scrollMain" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
					@touchend="handleTouchEnd">
					<TreeChart2 :size="size" :json="data" :class="{ landscape: landscape.length }"
						@click-node="clickNode" @click-top='clickTop' />
				</view>
			</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(176, 196, 222, .45);border-color:rgba(176, 196, 222, .45)!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>
		
		<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess"
			ref="Eposter">
		</Eposter>
	</view>
</template>

<script>
	import html2canvas from 'html2canvas';
	import TreeChart2 from "@/components/architectures/recommendSO2.vue";
	import Eposter from '@/components/architectures/Poster.vue';

	import * as arc from '@/config/architecture.js'
	export default {
		components: {
			TreeChart2,
			Eposter
		},
		data() {
			return {
				avaerInfoList: [],
				treeData: [],
				queryParams: {
					memberSettlePeriodId: "", //期数
					memberCode: "", //会员编号
					level: 3, //代数
				},
				memberSettlePeriodList: [], //期数
				popShow: false,
				listShow: false,
				settleName: "",
				data: {},
				size: 0.8,
				landscape: [],
				popMould: {},
				isPop: false,
				touchStartPosition1: {
					x: 0,
					y: 0
				},
				touchStartPosition2: {
					x: 0,
					y: 0
				},
				initialDistance: 0,
				list: []

			};
		},
		onLoad() {
			this.getAvarerInfo();
			this.getDataList()
		},
		methods: {
			

			handleTouchStart(event) {
				const touch1 = event.touches[0];
				const touch2 = event.touches[1];
				if (touch2) {
					this.touchStartPosition1 = {
						x: touch1.pageX,
						y: touch1.pageY
					};
					this.touchStartPosition2 = {
						x: touch2.pageX,
						y: touch2.pageY
					};
					this.initialDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
				}
			},
			handleTouchMove(event) {
				const touch1 = event.touches[0];
				const touch2 = event.touches[1];
				if (touch2) {
					const currentDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
					const scale = currentDistance / this.initialDistance;
					this.size = this.size * scale;

				}
			},
			handleTouchEnd() {
				this.touchStartPosition1 = {
					x: 0,
					y: 0
				};
				this.touchStartPosition2 = {
					x: 0,
					y: 0
				};
				this.initialDistance = 0;
			},
			clickNode(e) {
				
			},
			clickTop(e) {
				let that = this;
				if (e) {
					that.queryParams.memberCode = e.memberCode
					that.getDataList()
				}
			},
			confirm(e) {
				this.queryParams.memberSettlePeriodId = e.value[0].pkId
				this.settleName = e.value[0].settleDate
				this.listShow = false
			},
			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.data = res.data[0];
				});
			},
			clearAll() {
				this.popShow = false
				this.settleName = ""
				this.queryParams = {
					memberSettlePeriodId: "", //期数
					memberCode: "", //会员编号
					level: 3, //代数
					type: 3
				}
				this.getDataList()
			},

		}
	}
</script>
<style lang="scss" scoped>
	.ispop_box {
		padding: 27rpx;
		padding-top: 60rpx;
		width: 670rpx;
		font-size: 24rpx;
		color: #333333;

		.pop_top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.poster1 {
				height: 88rpx;
				width: 88rpx;
			}

			.poster2 {
				width: 88rpx;
				height: 54rpx;
				border-radius: 10rpx;
				margin-left: 20rpx;
			}

			.top_right {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.pop_center {
			.center_flex {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.c1 {
					width: 20%;

				}

				.c2 {
					width: 80%;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #F3F3F3;
					border: 2rpx solid #EEEEEE;
					border-radius: 8rpx;
					padding: 10rpx 0;
				}
			}
		}

		.pop_bottom {
			margin: 20rpx 0;
			border-top: 2rpx solid #eeeeee;
			border-top: 2rpx solid #eeeeee;

			.b_flex {
				display: flex;

				.bt1 {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 22rpx;
					flex: 1;
				}

				.bt2 {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 22rpx;
					flex: 1;
					background: #F3F3F3;
					border: 2rpx solid #EEEEEE;
					border-radius: 8rpx;
					padding: 12rpx 0;
					margin: 11rpx 18rpx;
				}
			}
		}

		.btn_box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.small-btn {
				width: 312rpx;
				height: 72rpx;
				background: #005BAC;
				border-radius: 34rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.small-text-btn {
				width: 312rpx;
				height: 72rpx;
				border: 1px solid #005BAC;
				border-radius: 34rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #005BAC;

			}
		}

	}

	.operate-btnboxs {
		padding: 29rpx 26rpx;
		background-color: #ffffff;

		.d-c-c {
			display: flex;
			align-items: center;
			justify-content: center;

			.operate-btn {
				width: 64rpx;
				height: 64rpx;
				margin: 5rpx;
				// background: #F2F2F2;
				border-radius: 5rpx;
				padding: 0;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}







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

		.popup_top {
			padding: 25rpx;
			background-color: rgba(176, 196, 222, .45);
			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: #005BAC;
			}
		}

		.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(176, 196, 222, .45);
				color: #333333;
			}

			.thebtn2 {
				background-color: #005BAC;
				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(176, 196, 222, .45);
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.flex_btn {
					background-color: rgba(176, 196, 222, .45);
					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: #005BAC;
					color: #ffffff;
				}

			}
		}
	}

	.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: #005BAC;
			border-radius: 50%;
			padding: 8rpx;
		}


	}

	.mainbox {
		padding: 26rpx 22rpx;

		.main_top {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx 4rpx;
			display: flex;
			flex-wrap: wrap;

			.top_flex {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 15rpx 20rpx;
				// justify-content: center;
				width: 98rpx;

				.theimg {
					width: 92rpx;
					height: 92rpx;
					border-radius: 50%;
				}

				.flex2 {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
				}
			}
		}

		.main_bottom {
			width: 100%;
			height: calc(100vh - 600rpx);
			margin-top: 25rpx;
			background-color: #ffffff;
			padding: 38rpx 0;

			border-radius: 20rpx;

		}

		.scoll_main {
			width: 700rpx;
			height: calc(100vh - 600rpx);
			overflow: auto;

			// overflow: scroll;
			// overflow-x: auto;

		}
	}
</style>