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

<template>
	<view class="business-page">
		<!-- 搜索 -->
		<view class="search-box acea-row row-middle">
			<image src="../../../static/images/search-icon.png" mode="" class="search-icon"></image>
			<input type="text" value="" placeholder="请输入相关关键词" />
			<view class="search acea-row row-center-wrapper">搜一下</view>
		</view>
		<!-- 供需大厅 企业服务 项目投融 -->
		<view class="acea-row row-around pa40">
			<view class="img1" @tap="toSupplyHall">
				<image src="../../../static/images/gongxu-bg.png"></image>
				<view>供需大厅</view>
				<view class="tit-s">海量资源等你来</view>
			</view>
			<view class="img1" @tap="toEnterpriseServer">
				<image src="../../../static/images/qiye-bg.png"></image>
				<view>企业服务</view>
				<view class="tit-s">提供优质服务</view>
			</view>
		</view>

		<!-- 商业简报 -->
		<view class="news-box acea-row row-middle">
			<image src="../../../static/images/business-news.png" class="news-img"></image>
			<view class="news-con-box">
				<view class="news-con acea-row row-middle">
					<image src="../../../static/images/hot-icon.png"></image>
					<view class="notice-swiper">
						<NewsSwiper :list="isHotList" :interval="4650" @toArticleDetail="toArticleDetail"></NewsSwiper>
					</view>
				</view>
				<view class="news-con acea-row row-middle">
					<image src="../../../static/images/rem-icon.png"></image>
					<view class="notice-swiper">
						<NewsSwiper :list="isRecommend" :interval="6320" @toArticleDetail="toArticleDetail">
						</NewsSwiper>
					</view>
				</view>
			</view>
		</view>
		<!-- 优质供需 -->
		<view class="rec-box">
			<view class="title-con acea-row">
				<view class="title">优质供需</view>
			</view>
			<view class="rec-switch">
				<view class="rec-title acea-row">
					<view class="rec-l " @click="tabClick(1)">
						<image src="../../../static/images/rec-bg.png" class="rec-bg" v-show="active == 1"></image>
						<view class="rec-t acea-row row-center-wrapper">
							<image src="../../../static/images/rec-icon1.png"></image>
							<view>需求</view>
						</view>
					</view>
					<view class="rec-r " @click="tabClick(2)">
						<image src="../../../static/images/rec-bg.png" class="rec-bg" v-show="active == 2"></image>
						<view class="rec-t acea-row row-center-wrapper">
							<image src="../../../static/images/rec-icon2.png"></image>
							<view>资源</view>
						</view>
					</view>
				</view>
				<view class="rec-switch-a">
					<view class="list-box" v-if="active == 1">
						<view class="nolist" v-if="demandList.length == 0">暂无数据...</view>
						<view class="rec-list" v-else v-for="(item,index) in demandList" :key="index" @click="toNeedDetail(item.id)">
							<view class="acea-row row-middle">
								<image src="../../../static/images/rec-icon1.png" mode="aspectFill"></image>
								<view class="rec-name line1">{{item.title}}</view>
								<!-- <view class="rec-address">武汉</view> -->
								<view class="rec-end acea-row row-right">{{item.resourceEndTime}}截止报名</view>
							</view>
							<view class="rec-message line1">{{item.detailedDescription}}</view>
						</view>
					</view>
					<view class="list-box" v-if="active == 2">
						<view class="nolist" v-if="resourcesList.length == 0">暂无数据...</view>
						<view class="rec-list" v-for="(item,index) in resourcesList" :key="index" @click="toResourcesDetail(item.id)">
							<view class="acea-row row-middle">
								<image src="../../../static/images/rec-icon2.png" mode=""></image>
								<view class="rec-name line1">{{item.title}}</view>
								<!-- <view class="rec-address">{{item.cname}}</view> -->
								<view class="rec-end acea-row row-right">{{item.resourceEndTime}}截止报名</view>
							</view>
							<view class="rec-message line1">{{item.detailedDescription}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 优质企业 -->
		<view class="company-box">
			<view class="title-con acea-row">
				<view class="title">优质企业</view>
				<view class="update-icon acea-row row-center-wrapper" @click="replaceClick">
					<image src="../../../static/images/update-icon.png" :class="showCirc ? 'circ' : ''"></image>换一批
				</view>
			</view>
			<scroll-view class="scroll-view_H acea-row" scroll-x="true">
				<view class="nolist" v-if="enterpriseList.length == 0">暂无数据...</view>
				<view class="company-list" v-else v-for="(item,index) in enterpriseList" :key="index" @click="toCompanyDetail(item.id)">
					<view class="title line1">{{item.enterpriseName}}</view>
					<view class="category-box acea-row">
						<view class="tag" :class="index%2 == 0 ? 'tag-item-b' : 'tag-item-y' ">{{item.cname}}</view>
					</view>
					<view class="title-s line1">{{item.resourceIntroduction}}</view>
					<view class="acea-row">
						<image :src="item.enterpriseLogo" class="company-logo" mode="aspectFill"></image>
						<view class="todetails">了解详情</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	import {
		getIndexData
	} from "@/api/home";
	import {
		briefing,
		supply,
		listResourcesCagetory,
		listEnterprise
	} from "@/api/business"
	import NewsSwiper from "@/components/newsSwiper.vue"
	export default {
		components: {
			NewsSwiper
		},
		data() {
			return {
				showCirc: false,
				isHotList: [],
				isRecommend: [],
				supplyList: [],
				cagetoryList: [],
				enterpriseList: [],
				active: 1,
				demandList: [],
				resourcesList: []
			};
		},
		mounted() {
			//获取新闻和供需
			this.getIndexData()
			//获取企业列表
			this.getEnterpriseList()
		},
		methods: {
			tabClick(i) {
				this.active = i
			},
			// 获取供需.新闻
			getIndexData() {
				uni.showLoading({
					title: '正在加载...'
				})
				uni.showNavigationBarLoading();
				getIndexData().then(res => {
					this.isHotList = res.data.articleList.filter(item => item.isHot == 1)
					this.isRecommend = res.data.articleList.filter(item => item.isRecommend == 1)
					this.demandList = res.data.demandList
					this.resourcesList = res.data.resourcesDtos
					this.showSkeleton = false
					uni.hideLoading()
					uni.hideNavigationBarLoading();
				})
			},
			toArticleDetail(id) {
				this.$yrouter.push({
					path: '/pages/life/articleDetail/index',
					query: {
						id: id
					}
				})
			},
			//获取企业
			getEnterpriseList() {
				listEnterprise().then((res) => {
					this.enterpriseList = res.data
					this.showCirc = false
				})
			},
			toCompanyDetail(id) {
				uni.navigateTo({
					url: "/pages/demandHall/companyDetail/index?id=" + id
				})
			},
			//换一批
			replaceClick() {
				if (!this.showCirc) {
					this.showCirc = true;
					this.getEnterpriseList()
				}
			},
			// 供需大厅
			toSupplyHall(id) {
				uni.navigateTo({
					url: "/pages/demandHall/supplyHall/index"
				})
			},
			// 企业服务
			toEnterpriseServer(id) {
				uni.navigateTo({
					url: "/pages/demandHall/enterpriseServer/index?typeId=" + id
				})
			},
			// 认证
			toAuthentication(e) {
				uni.navigateTo({
					url: "/pages/release/index"
				})
			}
		},

	}
</script>

<style lang="less">
	.business-page {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		font-size: 24rpx;
		padding-top: 24rpx;
	}

	.category-box {
		width: 100%;
		height: 36rpx;
		overflow: hidden;

		.tag {
			width: auto;
			padding: 0 10rpx;
			height: 36rpx;
			line-height: 34rpx;
			border-radius: 4rpx;
			font-size: 20rpx;
			margin-right: 16rpx;
			text-align: center;
		}

		.tag-item-b {
			border: 1rpx solid #292929;
			color: #292929;
		}

		.tag-item-y {
			border: 1px solid #FFAA00;
			color: #FFAA00;
		}

		.tag-item-p {
			color: #FC9367;
			border: 1px solid #FC9367;
		}
	}

	// 搜索
	.search-box {
		width: 670rpx;
		height: 68rpx;
		border: 2rpx solid #000;
		border-radius: 8rpx;
		margin: 0rpx auto 24rpx;
		position: relative;

		.search-icon {
			width: 35rpx;
			height: 35rpx;
			margin: 0 30rpx 0 52rpx;
		}

		.search {
			// margin-left: auto;
			position: absolute;
			right: -2rpx;
			width: 132rpx;
			height: 68rpx;
			background: #000;
			border-radius: 0 8rpx 8rpx 0;
			color: #fff;
		}
	}

	// 供需大厅 企业服务 项目投融
	.pa40 {
		padding: 0 35rpx;

		.img1 {
			width: 326rpx;
			height: 160rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			view {
				position: absolute;
				top: 32rpx;
				left: 24rpx;
				z-index: 2;
				font-size: 28rpx;
				font-weight: 500;
			}

			.tit-s {
				font-size: 22rpx;
				top: 80rpx;
			}
		}
	}

	// 推荐供需
	.rec-box {
		width: 100%;
		padding: 40rpx;
		position: relative;
	}
	.nolist{
		text-align: center;
		margin-top: 32rpx;
	}
	.rec-switch {
		width: 100%;
		height: 423rpx;
		margin-top: 18rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		overflow: hidden;
	}

	.rec-bg {
		width: 100%;
		height: 423rpx;
	}

	.rec-title {
		width: 100%;
		height: 80rpx;
		position: relative;

	}

	.rev-bg {
		width: 376rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
	}

	.rev-bg2 {
		width: 376rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
		background-image: url(../../../static/images/rec-bg.png);
	}

	.rec-l,
	.rec-r {
		width: 50%;
		z-index: 2;
		position: relative;
	}

	.rec-l .rec-bg,
	.rec-r .rec-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.rec-r .rec-bg {
		transform: rotate(180deg);
	}

	.rec-t {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 3;
	}

	.rec-l image {
		width: 37rpx;
		height: 37rpx;
		margin-right: 8rpx;
	}

	.rec-r image {
		width: 42rpx;
		height: 43rpx;
		margin-right: 8rpx;
	}

	.rec-switch-a {
		width: 100%;
		height: 330rpx;
	}

	.list-box {
		width: 100%;
		height: 330rpx;
	}

	.rec-list {
		position: relative;
		height: 165rpx;
		padding: 33rpx 40rpx 0 40rpx;
	}

	.rec-list image {
		width: 64rpx;
		height: 64rpx;
	}

	.rec-name {
		width: 340rpx;
		font-size: 28rpx;
		color: #1D1D1D;
		margin-left: 16rpx;
	}

	.rec-address {
		width: 80rpx;
		height: 34rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #FFFFFF;
		background: #FF5100;
		border-radius: 16px;
		text-align: center;
	}

	.rec-end {
		font-size: 24rpx;
		color: #707070;
		position: absolute;
		right: 22rpx;
	}

	.rec-message {
		width: 582rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #1D1D1D;
		margin-top: 15rpx;
	}

	// 商业简报
	.news-box {
		width: 670rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
		margin: 32rpx auto 0;
		color: #6E6E6E;

		.news-img {
			width: 64rpx;
			height: 78rpx;
			margin-left: 36rpx;
		}

		.news-con-box {
			width: calc(100% - 100rpx);
		}

		.news-con {
			margin-bottom: 6rpx;

			.notice-swiper {
				width: calc(100% - 116rpx);
				height: 34rpx;
			}

			.scroll-Y {
				height: 34rpx;

				.swiper-item {
					height: 34rpx;
				}
			}
		}

		.news-con image {
			width: 32rpx;
			height: 34rpx;
			margin: 0 26rpx 0rpx;
		}
	}

	// 优质企业
	.title-con {
		// padding: 0 40rpx;
	}

	.title {
		font-size: 36rpx;
		color: #232323;
		font-weight: bold;
	}

	@keyframes doCric {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.company-box {
		height: 380rpx;

		.title-con {
			padding: 0 40rpx;
		}

		.update-icon {
			width: 118rpx;
			height: 48rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
			border-radius: 24rpx;
			font-size: 20rpx;
			line-height: 26rpx;
			color: #666666;
			margin-left: auto;

		}

		.update-icon image {
			width: 26rpx;
			height: 26rpx;
			background: rgba(0, 0, 0, 0);
			margin-right: 10rpx;
		}

		.update-icon .circ {
			animation: doCric 1s ease;
		}

		.scroll-view_H {
			width: 100%;
			height: 330rpx;
			white-space: nowrap;
			padding-left: 30rpx;

			.company-list {
				width: 408rpx;
				height: 304rpx;
				background: #FFFFFF;
				box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
				border-radius: 12rpx;
				padding: 16rpx 24rpx;
				display: inline-block;
				margin: 15rpx 30rpx 0 10rpx;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #4A4A4A;
					margin: 5rpx 0 10rpx 0;
				}

				.title-s {
					height: 32rpx;
					font-weight: 400;
					color: #6E6E6E;
					margin: 16rpx 0 10rpx 0;
				}

				.company-logo {
					width: 176rpx;
					height: 128rpx;
					border-radius: 8rpx;
				}

				.todetails {
					width: 148rpx;
					height: 52rpx;
					line-height: 52rpx;
					background: #1D1D1D;
					// border-radius: 12rpx;
					text-align: center;
					color: #fff;
					margin-left: auto;
					margin-top: auto;
				}
			}
		}
	}

	// 推荐服务
	.service-box {
		width: 100%;
		height: 496rpx;

		.toadd {
			width: 88rpx;
			height: 88rpx;
			margin-left: auto;
			transform: rotate(45deg);
		}

		.service-top {
			padding: 0 40rpx;
			height: 272rpx;
			margin: 8rpx 0 16rpx 0;

			.service-nub-left {
				width: 344rpx;
				height: 272rpx;
				background: #FFF3DC;
				border-radius: 12rpx;
				padding: 14rpx 24rpx;
			}

			.service-nub-left image {
				width: 288rpx;
				height: 162rpx;
				border-radius: 8rpx;
			}

			.service-nub-right {
				width: 310rpx;
				height: 272rpx;

				.module-nub {
					width: 310rpx;
					height: 128rpx;
					background: #FFEFE8;
					border-radius: 12rpx;
					padding: 18rpx 12rpx 32rpx;
				}
			}
		}

		.service-bottom {
			padding: 0 40rpx;
			height: 112rpx;

			.tolearn {
				width: 70rpx;
				height: 112rpx;
				background: #FFE4D8;
				border-radius: 12rpx;
				color: #FF7636;
				font-size: 20rpx;
				writing-mode: tb-rl;
			}
		}
	}

	.module-box {
		width: 184rpx;
		height: 112rpx;
		border-radius: 12rpx;
		padding: 16rpx 0 14rpx 0;
	}

	.bg-red {
		background: #FDE9DE;
	}

	.bg-blue {
		background: #E5F1FF;
	}

	.bg-yellow {
		background: #FEFADF;
	}

	.tips {
		font-size: 28rpx;
		font-weight: 600;
		color: #4A4A4A;
	}

	.tips-item {
		font-weight: 400;
		color: #636363;
	}

	.service-nub-left .tips,
	.module-nub .tips {
		color: #FF7636;
	}

	.service-top .module-box {
		width: 144rpx;
		height: 128rpx;
		background: rgba(245, 249, 255, 0.82);
		border-radius: 12rpx;
	}


	// 优质项目
	.project-box {
		width: 100%;
		height: 610rpx;

		.project-list {
			width: 100%;
			height: 180rpx;
			padding: 26rpx 40rpx;
			border-bottom: 1rpx solid #DCDCDC;

			.project-img {
				width: 128rpx;
				height: 128rpx;
				margin-right: 32rpx;
			}

			.right-con {
				width: 510rpx;

				.title {
					font-weight: 800;
					height: 35rpx;
					line-height: 35rpx;

					.new-icon {
						width: 48rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}

					.title-h {
						width: 450rpx;
						height: 35rpx;
						color: #1D1D1D;
					}
				}

				.title-s {
					width: 100%;
					height: 34rpx;
					font-size: 24rpx;
					color: #707070;
				}
			}
		}
	}

	.project-box .title-img {
		margin: 35rpx 0 -15rpx 40rpx;
	}
</style>