web-africa-h5/pages/market/performance/placementDiagram/placementDiagram.vue

<template>
	<view>
		<view class="example-box" v-if="typeList && typeList != ''">
			<view class="example-item d-c d-c-c" v-for="(item, index) in typeList" :key="index">
				<image class="example-ava" :src="item.value" mode=""></image>
				<view class="example-name">{{ item.name }}</view>
				<!-- <view class="example-name tc">Municipal level agency</view> -->
			</view>
		</view>
		<view class="pt30">
			<view class="d-c-c d-c" style="margin-bottom: 100rpx;" @click="getMould('detail1', diagramDetail.memberCode)">
				<view><image class="user-img" :src="diagramDetail.imageUrl" mode=""></image></view>
				<view class="f28 gray3">{{ diagramDetail.memberCode }}</view>
				<view class="f24 gray6">{{ diagramDetail.memberName }}</view>
			</view>
			<view class="d-a-c">
				<view class="d-c-c d-c" @click="getMould('detail2', diagramDetail.leftMember.lastMemberCode)">
					<view><image class="user-img" :src="diagramDetail.leftMember.lastImageUrl" mode=""></image></view>
					<view class="f28 gray3">{{ diagramDetail.leftMember.lastMemberCode }}</view>
					<view class="f28 gray3">{{ $t('N_I_101') }}</view>
					<view class="f24 gray6">{{ $t('S_C_18') }}</view>
				</view>
				<view class="d-c-c d-c" @click="getMould('detail3', diagramDetail.rightMember.lastMemberCode)">
					<view><image class="user-img" :src="diagramDetail.rightMember.lastImageUrl" mode=""></image></view>
					<view class="f28 gray3">{{ diagramDetail.rightMember.lastMemberCode }}</view>
					<view class="f28 gray3">{{ $t('N_I_101') }}</view>
					<view class="f24 gray6">{{ $t('S_C_19') }}</view>
				</view>
			</view>
		</view>
		<template v-if="isOpen">
			<view class="pop-bg" @click.stop="isOpen = false"></view>
			<view class="pop-content">
				<view>{{ $t('N_I_124') }}</view>
				<view>{{ module[detailMould].memberCode }}</view>
				<view>{{ $t('CK_KS_14') }}:{{ module[detailMould].memberName }}</view>
				<view>{{ $t('PER_DA_9') }}:{{ module[detailMould].payTime }}</view>
				<view>{{ $t('w_0306') }}:{{ formatNum(module[detailMould].consumeAchieve) }}</view>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			typeList: [],
			diagramDetail: {
				imageUrl: '',
				leftMember: {
					lastImageUrl: '',
					lastMemberCode: '',
					lastMemberName: ''
				},
				memberCode: '',
				memberName: '',
				rightMember: {
					lastImageUrl: '',
					lastMemberCode: '',
					lastMemberName: ''
				}
			},
			memberCode: '',
			module: {
				detail1: null,
				detail2: null,
				detail3: null
			},

			isOpen: false,
			detailMould: ''
		};
	},
	onLoad() {
		this.getAvatarInfo();
		this.getData();
	},
	methods: {
		getAvatarInfo() {
			let self = this;
			self._get('member/api/member-structure/get-avatar-info', {}, res => {
				self.typeList = res.data;
			});
		},
		getData() {
			let self = this;
			self._get('member/api/achieve/query-place-tree', {}, res => {
				self.diagramDetail = res.data;
			});
		},
		getMould(e, code) {
			let self = this;
			self.detailMould = e;
			self.memberCode = code;
			if (!self[e]) {
				self.getDetail();
			} else {
				this.isOpen = true;
			}
		},
		getDetail() {
			let self = this;
			self._post(
				'member/api/achieve/query-place-tree-detail',
				{
					memberCode: self.memberCode
				},
				res => {
					self.module[self.detailMould] = res.data;
					this.isOpen = true;
				}
			);
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.user-img {
	width: 192rpx;
	height: 192rpx;
}

.pop-bg {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 98;
}

.pop-content {
	position: fixed;
	left: 0;
	right: 0;
	top: 30%;
	margin: auto;
	width: 60%;
	background: #ffffff;
	border: 1px solid #fb3024;
	box-shadow: 0rpx 5rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 15rpx;
	font-size: 24rpx;
	color: #666;
	padding: 33rpx 15rpx;
	z-index: 99;
	line-height: 1.5;
}
.example-box {
	background: #ffffff;
	border-radius: 20rpx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	padding: 22rpx 0 28rpx 0;
	height: 312rpx;
	overflow-y: auto;
	margin-bottom: 20rpx;

	.example-item {
		width: 20%;
		flex-shrink: 0;
		padding: 10rpx;
		box-sizing: border-box;

		.example-ava {
			width: 104rpx;
			height: 104rpx;
			display: block;
		}

		.example-name {
			font-size: 26rpx;
			color: #666;
			word-break: break-all;
		}
	}
}
</style>