dev/dcp-app-gate/pages/cooperationNetwork/components/memberIntroduction.vue

<template>
	<view class="memberIntroduction">
		<view class="header-intro">
			<view class="bgcImg">
				<view class="title">{{$t('common.Provide')}}8{{$t('common.membershipservicesforyou')}}</view>
				<view class="wrap">
					<u-row gutter="0" style="margin: 0 10upx;">
						<u-col span="3" v-for="(item,index) in service" :key="index" style="text-align: center;">
							<text class="text" style="font-size: 24upx;">
								{{ $t(item.label) }}
							</text>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view class="number">
			<view class="num-tab">
				<view class="tab">
					<view class="tabItem" :class="tabFlag === true ? 'tabActive' : ''" @tap="tabFlag = true">
						<text>{{ $t('common.MemberTotal') }}</text>
						<text class="numColor">{{ initDataList.sumCount }}</text>
					</view>
				</view>
				<view class="tab">
					<view class="tabItem" :class="tabFlag === false ? 'tabActive' : ''" @tap="tabFlag = false">
						<text>{{ $t('common.Category') }}</text>
						<text class="numColor">11</text>
					</view>
				</view>
			</view>
			<view class="num-cont">
				<view class="mapBox" v-show="tabFlag">
					<view class="tips">
						{{ $t('common.GEIDCOmembersarewidelydistributedon6continents') }}，
						{{ countryNum }}{{ $t('common.Countries') }}
					</view>
					<view class="mapImgBox">
						<view class="mapImg">
							<view class="mapItem" v-for="(item,index) in continentsWorld" @tap="toView(item)"
								:key="index">
								<view class="quan">{{ item.num ? item.num : 0 }}</view>
								<text class="name">{{ item.label }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="type" v-show="!tabFlag">
					<u-row gutter="16">
						<u-col span="4" v-for="(item,index) in continents" @tap="toType(item)" :key="index">
							<view class="numItem">
								<view class="typeName" :style="{height: $i18n.locale=='zh'?'60upx':'100upx'}">
									{{ item.label }}
								</view>
								<view class="typeNum">
									<image class="typeImg" :src="getIconUrl2(item.img)" mode=""></image>
									<text class="num">{{ item.num }}</text>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view class="exhibition-box">
			<view class="exhibition">
				<text class="title">{{$t('common.MemberUnitDisplay')}}</text>
				<view class="more" @tap="toMore">
					<text class="vert">{{$t('common.More')}}</text>
					<uni-icons class="vert" type="arrowright" color="#1777FE" size="16" />
				</view>
			</view>
			<view class="logo-img">
				<u-row gutter="20">
					<u-col span="4" v-for="(k,i) in logoMap" :key="i">
						<view class="logoBox">
							<image class="logoImg" v-if="k" :src="websiteUrl + k" mode=""></image>
							<image class="logoImg" v-else :src="websiteUrl + '/def/def1.png'" mode=""></image>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="memberBtn">
			<u-button type="primary" shape="circle" @click="toMemberApply" style="height:88upx;">
				{{$t('common.MembershipApplication')}}
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabFlag: true,
				initDataList: {},
				countryNum: '',
				continentsWorld: [],
				continents: [],
				logoMap: {},
				continens: [{
					value: '01',
					img: 'tt.png'
				}, {
					value: '02',
					img: 'ky.png'
				}, {
					value: '03',
					img: 'gd.png'
				}, {
					value: '04',
					img: 'ny.png'
				}, {
					value: '05',
					img: 'zb.png'
				}, {
					value: '06',
					img: 'gc.png'
				}, {
					value: '07',
					img: 'jr.png'
				}, {
					value: '08',
					img: 'zx.png'
				}, {
					value: '09',
					img: 'xt.png'
				}, {
					value: '10',
					img: 'cm.png'
				}, {
					value: '11',
					img: 'wl.png'
				}],
				service: [{
					label: 'common.InformationService',
					value: ''
				}, {
					label: 'common.PublicityService',
					value: ''
				}, {
					label: 'common.ExchangeatConferences',
					value: ''
				}, {
					label: 'common.TrainingandSeminars',
					value: ''
				}, {
					label: 'common.ResourceSharingService',
					value: ''
				}, {
					label: 'common.BusinessDevelopment',
					value: ''
				}, {
					label: 'common.CustomizedService',
					value: ''
				}, {
					label: 'common.ProfessionalAlliancesactivities',
					value: ''
				}]
			}
		},
		mounted() {
			this.getInitData();
			this.getMemberLogo();
		},
		methods: {
			async getInitData() {
				const result = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: this.$i18n.locale == 'zh' ? 'INDUSTRY_DICTS' : 'INDUSTRY_DICTS_EN'
					}
				});
				// console.log(result);
				this.continens.forEach(element => {
					result.data[0].forEach(i => {
						if (element.value == i.value) {
							element.label = i.label;
							element.dictTypeId = i.dictTypeId;
							element.id = i.id;
						}
					})
				});
				this.continents = this.continens;
				this.continents.forEach(item => {
					item.num = 0;
				});
				// console.log(this.continents);
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: this.$i18n.locale == 'zh' ? 'CONTINENT_CODE_DICT' : 'CONTINENT_CODE_DICT_EN'
					}
				});
				// console.log(res);
				this.continentsWorld = res.data[0];
				this.continentsWorld.forEach((i, j) => {
					if (this.$i18n.locale != 'zh') {
						if (i.label == 'NorthAmerica') {
							this.continentsWorld[j].label = 'North America';
						} else if (i.label == 'SouthAmerica') {
							this.continentsWorld[j].label = 'South America';
						}
					}
				});
				this.getNteList();
			},
			async getNteList() {
				const res = await this.$myRequest({
					url: '/personnel/baseMemberInfos/showMemeberNumber',
				});
				// console.log(res);
				this.initDataList = res.data;
				this.countryNum = res.data.typeCountry.length;
				// 大洲数据
				res.data.typeContinent.forEach((element, index) => {
					this.continentsWorld.forEach((i, j) => {
						if (element.continent_dict == i.value) {
							i.num = element.count;
						}
					})
				});
				// 企业数据
				res.data.typeIndustry.forEach((element, index) => {
					this.continents.forEach((i, j) => {
						if (element.industry_dict == i.value) {
					 	i.num = element.count;
						}
					})
				});
				this.$forceUpdate();
			},
			async getMemberLogo() { //会员单位展示
				const res = await this.$myRequest({
					url: '/personnel/baseMemberInfos/searchByTypeAppForLogo',
					data: {
						language: this.$i18n.locale.toUpperCase()
					}
				});
				this.logoMap = res.data.logoMap;
			},
			getIconUrl2(url) {
				return require("@/static/img/cooperationNetwork/type/" + url);
			},
			toView(obj) {
				uni.navigateTo({
					url: './memberInformation?obj=' + encodeURIComponent(JSON.stringify(obj))
				});
			},
			toType(item) {
				uni.navigateTo({
					url: './memberInformation?item=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			toMore() {
				uni.navigateTo({
					url: './memberInformation'
				})
			},
			toMemberApply() {
				let user = uni.getStorageSync('user');
				let token = uni.getStorageSync('Auth-Token');
				if (user && token) {
					uni.navigateTo({
						url: '/pages/service/membership/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes scaleDraw {
		from {
			transform: translateX(-50%) scale(0.8);
		}

		to {
			transform: translateX(-50%) scale(1.2);
		}
	}

	.memberIntroduction {
		padding-bottom: 140upx;

		.header-intro {
			padding: 20upx 30upx;
			background-color: #FFFFFF;

			.bgcImg {
				width: 100%;
				background: url(../../../static/img/cooperationNetwork/earth.png) no-repeat;
				background-size: 100% 100%;
				color: #FFFFFF;
				padding: 110upx 40rpx;
				box-sizing: border-box;

				.title {
					font-size: 34upx;
					margin-bottom: 36upx;
					text-align: center;
				}

				.wrap {
					.text {
						font-size: 26upx;
						color: rgba(251, 251, 251, .6);
					}
				}
			}
		}

		.number {
			margin-top: 20upx;
			background-color: #FFFFFF;

			.num-tab {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #E1E1E1;
				background-color: #FFFFFF;

				.tab {
					width: 50%;
					font-size: 28upx;
					color: #333333;
					text-align: center;

					.tabItem {
						padding: 16upx 0;
						font-size: 28upx;
					}

					.numColor {
						margin-left: 5upx;
					}
				}

				.tabActive {
					width: 100%;
					display: inline-block;
					border-bottom: 2px solid #2979ff;
					color: #2979ff;
					font-weight: 700;
				}
			}

			.num-cont {
				.mapBox {
					.tips {
						font-size: 26upx;
						padding: 20upx 30upx;
					}

					.mapImgBox {
						padding-bottom: 20upx;
					}

					.mapImg {
						width: 100%;
						height: 416upx;
						background: url(../../../static/img/cooperationNetwork/map.png) no-repeat;
						background-size: 100% 100%;
						position: relative;

						.mapItem {
							text-align: center;
							position: absolute;

							&:nth-child(4) {
								left: 15%;
								top: 100upx;
							}

							&:nth-child(5) {
								left: 22%;
								bottom: 52upx;
							}

							&:nth-child(3) {
								left: 50%;
								top: 60upx;
							}

							&:nth-child(2) {
								left: 48%;
								bottom: 90upx;
							}

							&:first-child {
								right: 23%;
								top: 120upx;
							}

							&:nth-child(6) {
								right: 13%;
								bottom: 56upx;
							}

							.quan {
								width: 60upx;
								height: 60upx;
								line-height: 60upx;
								text-align: center;
								color: #0092CD;
								font-size: 28upx;
								background: url(../../../static/img/cooperationNetwork/quan.png) no-repeat;
								background-size: 100% 100%;
								margin-left: 50%;
								animation: scaleDraw linear infinite 2s;
							}

							.name {
								color: #000000;
								font-weight: 700;
								font-size: 18upx;
							}
						}


					}
				}

				.type {
					padding: 20upx 30upx 0;
					margin: 0 -8upx;

					.u-col:first-child .typeName {
						background-color: rgba(102, 175, 255, 0.1);
					}

					.u-col:nth-child(2) .typeName {
						background-color: rgba(250, 100, 0, 0.1);
					}

					.u-col:nth-child(3) .typeName {
						background-color: rgba(98, 54, 255, 0.1);
					}

					.u-col:nth-child(4) .typeName {
						background-color: rgba(247, 181, 0, 0.1);
					}

					.u-col:nth-child(5) .typeName {
						background-color: rgba(109, 212, 0, 0.1);
					}

					.u-col:nth-child(6) .typeName {
						background-color: rgba(247, 181, 0, 0.1);
					}

					.u-col:nth-child(7) .typeName {
						background-color: rgba(68, 215, 182, 0.1);
					}

					.u-col:nth-child(8) .typeName {
						background-color: rgba(250, 100, 0, 0.1);
					}

					.u-col:nth-child(9) .typeName {
						background-color: rgba(98, 54, 255, 0.1);
					}

					.u-col:nth-child(10) .typeName {
						background-color: rgba(109, 212, 0, 0.1);
					}

					.u-col:nth-child(11) .typeName {
						background-color: rgba(250, 113, 22, 0.1);
					}

					.numItem {
						font-size: 32upx;
						margin-bottom: 33upx;

						.typeName {
							padding: 10upx 0;
							color: #333333;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 6upx;
							text-align: center;
						}

						.typeNum {
							display: flex;
							align-items: center;
						}

						.typeImg {
							width: 72upx;
							height: 72upx;
						}

						.num {
							margin-left: 30upx;
							color: #333333;
							font-size: 40upx;
						}
					}

				}
			}

		}

		.exhibition-box {
			margin-top: 20upx;
			padding: 20upx 30upx;
			background-color: #FFFFFF;

			.exhibition {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 30upx;
					font-weight: 700;
					color: #333333;
					position: relative;
					padding-left: 20rpx;
				}

				.title:before {
					width: 10rpx;
					height: 32rpx;
					content: '';
					position: absolute;
					left: 0;
					top: 6rpx;
					background-color: #6DD400;
				}

				.more {
					font-size: 24upx;

					flex-direction: row;
				}

				.vert {
					font-size: 28upx;
					flex-direction: row;
					color: #1777FE;
				}
			}

			.logo-img {
				.logoBox {
					margin-top: 20rpx;
					border: 1px solid #E1E1E1;
				}

				.logoImg {
					width: 100%;
					height: 200upx;
				}
			}
		}

		.memberBtn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			padding: 30upx;
		}
	}
</style>