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

<template>
	<view class="customService">
		<view class="serviceTab">
			<text class="tabListLeft" :class="curNow==0?'black':''" @click="sectionChange(0)">
				{{$i18n.locale ==='zh'? '定制服务' : 'Costomized'}}
			</text>
			<text :class="curNow!==0?'active2':'active'">

			</text>
			<text class="tabListRight" :class="curNow!==0?'black':''" @click="sectionChange(1)">
				{{ $i18n.locale ==='zh'? '资助洽商' : 'Donantion'}}
			</text>
		</view>
		<view class="service">
			<view class="custom" v-if="!curNow">
				<view class="custom-ser">
					<view class="custom-item" v-for="(item,index) in initData" :key="index">
						<view class="item-img">
							<image :src="getIconUrl(item.img)" mode=""></image>
						</view>
						<view class="item-content">
							<view class="item-cont-title">{{$t(item.lable)}}</view>
							<view class="item-cont" v-html="$t(item.value).replace(/[;；]/g,'$&\n')"></view>
						</view>
					</view>
				</view>
				<view class="custom-exam">
					<view class="exam-title">
						<text class="title">{{$t('common.CustomizedServicesUnit')}}</text>
						<view class="qiehuan" @tap="nextBatch">
							{{$t('common.NextBatch')}}
							<uni-icons class="loop" type="loop" color="#666666" size="16" />
						</view>
					</view>
					<view class="exam-unit">
						<u-row gutter="16">
							<u-col span="6" v-for="(info,index) in collaboratorList" :key="index">
								<view class="exam-item" @tap="unitDetail" :data-key="info.id">
									<view class="item-logo">
										<image class="logo" :src="websiteUrl + photoMap[info.unitId]" mode=""></image>
									</view>
									<view class="item-name u-line-2">
										{{$i18n.locale === 'zh'?info.unitZhName:info.unitEnName}}</view>
									<view class="item-cont u-line-2" v-if="$i18n.locale === 'zh'">
										{{info.unitIntroduction?info.unitIntroduction.replace(/<[^>]+>|&[^>]+;/g, ""):""}}
									</view>
									<view class="item-cont u-line-2" v-if="$i18n.locale === 'en'">
										{{unitIntroductionMap[info.unitId]?unitIntroductionMap[info.unitId].replace(/<[^>]+>|&[^>]+;/g, ""):""}}
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			<view class="support" v-if="curNow">
				<view class="support-img">
					<image class="img" src="../../../static/img/cooperationNetwork/zzqs.png" mode=""></image>
				</view>
				<view class="module-classify-border"></view>
				<view class="support-cont">
					{{$t('common.IntroductionToFundingNegotiations')}}
				</view>
			</view>
		</view>
		<view style="height: 150upx;width: 100%;"></view>
		<view class="memberBtn">
			<u-button type="primary" shape="circle" @click="toCustomApply" v-show="!curNow" style="height: 88upx;">
				<!-- {{$t('common.CustomServiceApplication')}} -->
				{{$i18n.locale ==='zh'? '定制服务' : 'Costomized'}}
			</u-button>
			<u-button type="primary" shape="circle" @click="toDonationApply" v-show="curNow" style="height: 88upx;">
				{{$t('common.Donation')}}
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curNow: 0,
				page: {
					pageNo: 1,
					pageSize: 8,
				},
				initData: [{
					lable: 'common.ExclusiveProjects',
					img: 'zsxm.png',
					value: 'common.IntroductionToExclusiveProjects'
				}, {
					lable: 'common.ThematicResearch',
					img: 'zxyj.png',
					value: 'common.IntroductionToExclusiveResearch'
				}, {
					lable: 'common.TailoredService',
					img: 'gxfw.png',
					value: 'common.IntroductionToPersonalizedService'
				}, {
					lable: 'common.CustomizedInformation',
					img: 'dzzx.png',
					value: 'common.CustomizedInformationIntroduction'
				}, {
					lable: 'common.JointConference',
					img: 'lhbh.png',
					value: 'common.IntroductionToTheJointMeeting'
				}],
				collaboratorList: [],
				unitIntroductionMap: {},
				photoMap: {},
			}
		},
		mounted() {
			this.setLang();
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			getIconUrl(url) {
				return require("../../../static/img/cooperationNetwork/" + url);
			},
			async setLang() {
				let param = {
					serviceTypeDict: '1',
					pageSize: 8,
					pageNo: this.page.pageNo,
					statusDict: '3'
				};
				const res = await this.$myRequest({
					url: '/project/coopCustomServices/',
					data: param
				});
				// console.log(res);
				const data = res.data;
				if (data) {
					this.collaboratorList = [];
					this.collaboratorList = data.coopCustomServices;
					this.photoMap = data.photoMap;
					this.collaboratorList.forEach(item => {
						if (this.photoMap[item.unitId] === '') {
							this.photoMap[item.unitId] = 'def/enterpriseDefault.png';
						}
					});
					this.unitIntroductionMap = data.unitIntroductionMap;
					this.page = data.page;
				}
			},
			nextBatch() {
				if (this.page.pageNo * 8 > (this.page.totalCount - 0)) {
					this.page.pageNo = 1;
					this.setLang();
					return;
				} else {
					this.page.pageNo++;
					this.setLang();
				}
			},
			unitDetail(e) {
				let key = e.currentTarget.dataset.key;
				uni.navigateTo({
					url: './components/customServiceDetails?key=' + key
				});
			},
			toCustomApply() {
				let user = uni.getStorageSync('user');
				let token = uni.getStorageSync('Auth-Token');
				if (user && token) {
					uni.navigateTo({
						url: '/pages/service/membership/customServiceApplication'
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
			},
			toDonationApply() {
				let user = uni.getStorageSync('user');
				let token = uni.getStorageSync('Auth-Token');
				if (user && token) {
					uni.navigateTo({
						url: '/pages/service/membership/donationApplication'
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.customService {
		padding-bottom: 140upx;

		.serviceTab {
			margin: 20upx 20upx 0 20upx;

			.tabListLeft,
			.tabListRight {
				width: 40%;
				height: 100upx;
				line-height: 100upx;
				display: inline-block;
				text-align: center;
				background-color: #fafafa;
				color: #C3C3C3;
			}

			.tabListLeft {
				border-radius: 20upx 0 0 0;
			}

			.tabListRight {
				border-radius: 0upx 20upx 0 0;
			}

			.active2 {
				display: inline-block;
				background-color: #fafafa;
				vertical-align: top;
				width: 20%;
				height: 100%;
				border-bottom: 100upx solid #fff;
				border-left: 120upx solid transparent;
			}

			.active {
				display: inline-block;
				background-color: #fafafa;
				vertical-align: top;
				width: 20%;
				height: 100%;
				border-bottom: 100upx solid #fff;
				border-right: 120upx solid transparent;
			}

			.black {
				background-color: #fff;
				font-weight: 600;
				color: #000;
			}
		}

		.service {
			margin: 0 20upx;
			padding-bottom: 20upx;

			.custom {
				.custom-ser {
					padding: 20upx 30upx;
					background-color: #FFFFFF;
					border-radius: 0 0 20upx 20upx;

					.custom-item {
						display: flex;
						justify-content: space-between;
						padding-top: 20upx;

						.item-img {
							width: 20%;
							height: 130upx;

							.image {
								width: 100%;
								height: 100%;
							}
						}

						.item-content {
							width: 75%;
							padding-bottom: 20upx;
							border-bottom: 1px solid #f1f1f1;

							.item-cont-title {
								font-size: 28upx;
								color: #0B0B11;
								font-weight: bold;
							}

							.item-cont {
								font-size: 26upx;
								color: #767676;
							}
						}

						&:last-child .item-content {
							border-bottom: none;
						}
					}
				}

				.custom-exam {
					margin-top: 20upx;
					background-color: #FFFFFF;
					padding: 20upx 30upx;
					border-radius: 20upx;

					.exam-title {
						display: flex;
						justify-content: space-between;

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

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

						.qiehuan {
							color: #666666;
							font-size: 28upx;

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

					.exam-unit {
						margin: 0 -8upx;

						.exam-item {
							width: 100%;
							height: 350upx;
							border: 1px solid #E1E1E1;
							padding: 20upx;
							box-sizing: border-box;
							margin-top: 20upx;
							background-color: #F9FCFF;
							border-radius: 20upx;

							.item-logo {
								height: 120upx;

								.logo {
									width: 100%;
									height: 100%;
								}
							}

							.item-name {
								font-size: 30upx;
								font-weight: bold;
								margin: 10upx 0;
								color: #333333;
								text-align: center;
							}

							.item-cont {
								font-size: 28upx;
								color: #333333;
							}
						}
					}
				}
			}

			.support {
				background-color: #FFFFFF;

				.support-img {
					width: 100%;
					height: 380upx;
					padding: 30upx;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.module-classify-border {
					background-color: #f2f2f2;
					height: 20upx;
					width: 100%;
				}

				.support-cont {
					text-indent: 2em;
					padding: 20upx 30upx;
					color: #333333;
					font-size: 30upx;
				}
			}
		}

		.memberBtn {
			// position: fixed;
			// bottom: 0;
			// left: 0;
			// width: 100%;
			// background-color: #FFFFFF;
			padding: 30upx;
			height: 150upx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.06);
			background-color: white;
		}

	}
</style>