yunshengtai-uniapp/pages/demandHall/enterprisePage/index.vue

<template>
	<view class="enterprise-page">
		<image src="../../../static/images/business-img3.png" mode="aspectFill" class="top-img"></image>
		<view class="enterprise-info-box">
			<view class="company-info-box acea-row">
				<image :src="detail.enterpriseLogo" mode="aspectFill" class="logo-img"></image>
				<view class="info-right acea-row row-column-between">
					<view class="name line1">{{detail.enterpriseName}}</view>
					<view class="line1">{{detail.enterpriseTitle}}</view>
					<view class="category-box acea-row">
						<view class="tag-item-b tag line1">{{detail.cname}}</view>
					</view>
				</view>
			</view>
			<view class="contact-box acea-row row-column-between">
				<view class="acea-row row-middle">
					<image src="/static/images/home/c1.png" class="contact-icon"></image>
					<text class="line1">{{detail.enterpriseAddress}}</text>
				</view>
				<view class="acea-row row-middle" >
					<image src="/static/images/home/c2.png" class="contact-icon"></image>
					<text class="line1">{{detail.enterpriseNet}}</text>
				</view>
				<view class="acea-row row-middle">
					<image src="/static/images/home/c3.png                          " class="contact-icon"></image>
					<text class="line1">{{detail.enterprisePhone}}</text>
				</view>
			</view>
		</view>
		
		<view class="navigation-box acea-row row-between-wrapper">
			<view :class="'tab ' + (active == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">首页</view>
			<view :class="'tab ' + (active == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">资源({{detail.resourceList.length || 0}})</view>
			<view :class="'tab ' + (active == 3 ? 'tab-a' : '')" data-i="3" @tap="tabClick">需求({{detail.demandList.length || 0}})</view>
		</view>
		
		<view class="modular-box">
			<!-- 首页 -->
			<view class="home-box" v-if="active == 1">
				<view class="company-show-box">
				  <view class="title-box acea-row row-middle">
				  	<image src="../../../static/images/shu.png" mode=""></image>案例展示
				  </view>
				  <view>
				    <swiper class="swiper-block" autoplay="true" circular="true" previous-margin="0rpx" next-margin="180rpx" current="0" @change="swiperChange">
				      <block v-for="(item, index) in detail.imgPaths" :key="index">
				        <swiper-item class="swiper-item" @tap="previewImg">
				          <image mode="aspectFill" :src="item" :class="'slide-image ' + (swiperIndex == index ? 'active' : '')"></image>
				        </swiper-item>
				      </block>
				    </swiper>
				  </view>
				</view>
			 <view class="title-box acea-row row-middle">
			 	<image src="../../../static/images/shu.png" mode=""></image>基本信息
			 </view>
			  <view class="info-box">
			    <view class="info-item acea-row-nowrap">
			      <view class="f-weight">企业名称</view>
			      <view class="colG">{{detail.enterpriseName}}</view>
			    </view>
			    <view class="info-item acea-row-nowrap">
			      <view class="f-weight">所属类型</view>
			      <view class="colG">{{detail.enterpriseType == 1? '企业' : '个人团队' }}</view>
			    </view>
			    <view class="info-item acea-row-nowrap">
			      <view class="f-weight">法定代表</view>
			      <view class="colG">{{detail.legalPersonName}}</view>
			    </view>
			    <view class="info-item acea-row-nowrap">
			      <view class="f-weight">企业规模</view>
			      <view class="colG">{{detail.enterpriseScale}}人</view>
			    </view>
			    <view class="info-item acea-row-nowrap">
			      <view class="f-weight">经营范围</view>
			      <view class="colG">{{detail.businessNature}}</view>
			    </view>
			  </view>
				<view class="about-box">
			    <view class="title-box acea-row row-middle">
			    	<image src="../../../static/images/shu.png" mode=""></image>关于我们
			    </view>
			    <view class="about">
			      <text>{{detail.resourceIntroduction}}</text>
			    </view>
			  </view>
			</view>
			<!-- 资源 -->
			<view class="" v-if="active == 2">
				
			</view>
			<!-- 需求 -->
			<view class="" v-if="active == 3">
				
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
	  data() {
	    return {
				
	      active: '1',
				detail: {},
				swiperIndex: 0,
			}
		},
		onLoad: function (options) {
		  this.setData({
		    id: options.id
		  });
		  this.getDetail();
		},
		methods:{
			previewImg() {
			  uni.previewImage({
			    current: this.detail.imgPaths[0],
			    // 当前显示图片的http链接
			    urls: this.detail.imgPaths // 需要预览的图片http链接列表
			
			  });
			},
			tabClick(e) {
				this.setData({
					active: e.currentTarget.dataset.i,
				}) 
			},
			getDetail() {
			  app.http('get', 'Enterprise/enterpriseInfo', {
			    id: this.id
			  }).then(res => {
			    if (res.data.success) {
			      this.setData({
			        detail: res.data.data
			      });
			    }
			  });
			},
			swiperChange(e) {
			  const that = this;
			  that.setData({
			    swiperIndex: e.detail.current
			  });
			},
			
		},
	}
			
</script>

<style lang="less">
	.enterprise-page {
		width: 100%;
		height: auto;
		background: #fff;
		position: relative;
	}

	.top-img {
		width: 100%;
		height: 406rpx;
		display: block;
	}

	.enterprise-info-box {
		width: 100%;
		height: 406rpx;
		background: linear-gradient(to bottom, rgba(24, 24, 24, 1), rgba(0, 0, 0, 0.3));
		position: absolute;
		top: 0;
		padding: 92rpx 40rpx 28rpx 40rpx;
		.company-info-box {
			.logo-img {
				width: 134rpx;
				height: 134rpx;
				margin-right: 26rpx;
				border-radius: 8rpx;
			}
			.info-right {
				width: 510rpx;
				height: 134rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				.name {
					line-height: 35rpx;
					font-size: 32rpx;
				}
				.category-box {
					width: 100%;
					height: 36rpx;
					overflow: hidden;
					.tag {
						width: auto;
						padding: 0 15rpx;
						height: 36rpx;
						line-height: 36rpx;
						border-radius: 8rpx;
						font-size: 20rpx;
						margin-right: 16rpx;
						text-align: center;
					}
				
					.tag-item-b {
						background: #5D8AFD;
						color: #fff;
					}
				
					.tag-item-y {
						border: 1px solid #FFAA00;
						color: #fff;
						
					}
				
					.tag-item-p {
						color: #fff;
						background: #FD855B;
					}
				}
			}
		}
		.contact-box{
			width: 670rpx;
			height: 106rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 46rpx;
			.contact-icon{
				width: 20rpx;
				height: 20rpx;
				margin-right: 10rpx;
			}
			.line1{
				width: 620rpx;
				line-height: 30rpx;
			}
		}
	}

	
	.navigation-box {
		width: 100%;
		height: 74rpx;
		background: #FFFFFF;
		box-shadow: 0px -6rpx 20rpx rgba(0, 0, 0, 0.11);
		padding: 0 25rpx;
		.tab {
			width: 146rpx;
			height: 74rpx;
			line-height: 74rpx;
			font-size: 28rpx;
			color: #BFBFBF;
			position: relative;
			font-weight: 500;
			text-align: center;
		}
		.tab::after {
			display: block;
			content: '';
			width: 74rpx;
			height: 8rpx;
			border-radius: 8rpx;
			background: #FF5100;
			position: absolute;
			bottom: -5rpx;
			left: 50%;
			margin-left: -37rpx;
			opacity: 0;
			transform: scaleX(0);
			transition: all .2s ease, opacity .15s ease;
		}
		.tab-a {
			color: #FF5100;
		}
		.tab-a::after {
			opacity: 1;
			transform: scaleX(1);
		}
	}
	
	
	.modular-box{
		width: 100%;
		height: auto;
	}
	
	// 首页
	.home-box{
	  width: 100%;
	  padding-bottom: 140rpx;
		.title-box{
			font-size: 36rpx;
			font-weight: 600;
			color: #1D1D1D;
		  padding: 50rpx 0rpx 15rpx 40rpx;
		}
		.title-box image {
			width: 18rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
		.col-line{
		  width: 8rpx;
		  height: 36rpx;
		  background: #FF7942;
		  border-radius: 4rpx;
		  margin-right: 14rpx;
		}
		.info-item{
		  padding-left: 40rpx;
		  margin-bottom: 20rpx;
		  font-size: 28rpx;
		  line-height: 40rpx;
		  color: #1D1D1D;
		}
		.f-weight{
			font-weight: 600;
		}
		.colG{
		  width: 496rpx;
		  color: #707070;
		  margin-left: 30rpx;
		}
		.about{
		  padding: 0rpx 40rpx;
		}
		.about text{
		  font-size: 28rpx;
		  color: #707070;
		  line-height: 40rpx;
		}
		
		.swiper-block {
		  width: 100%;
		}
		  
		.swiper-item {
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: flex-start;
		  overflow: unset;
		}
		.slide-image {
		  height: 250rpx;
		  width: 520rpx;
		  border-radius: 9rpx;
		  margin: 0rpx 30rpx;
		  z-index: 1;
		}
		.active {
		  transform: scale(1.14);
		  transition: all 0.2s ease-in 0s;
		  z-index: 20;
			padding-left: 40rpx;
		}
	}
	
	
	
	
</style>