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">
				<image src="../../../static/images/business-img1.png" @tap="toSupplyHall"></image>
			</view>
			<view class="img2 acea-row row-column-between">
				<image src="../../../static/images/business-img2.png" @tap="toEnterpriseServer"></image>
				<image src="../../../static/images/business-img3.png" @tap="toDemoInvestment"></image>
			</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="4000" @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="4000" @toArticleDetail="toArticleDetail"></NewsSwiper>
					</view>
				</view>
			</view>
		</view>

		<!-- 优质企业 -->
		<view class="company-box">
			<view class="title-con acea-row">
				<image src="../../../static/images/business-title1.png" class="title-img"></image>
				<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="company-list" v-for="(item,index) in enterpriseList" :key="index">
					<view class="title">{{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 class="tag-item-y tag">财务规范</view>
						<view class="tag-item-p tag">零负债</view> -->
					</view>
					<view class="title-s line1">{{item.enterpriseTitle}}</view>
					<view class="acea-row">
						<image :src="item.enterpriseLogo" class="company-logo" mode="aspectFill"></image>
						<view class="todetails" @click="toCompanyDetail(item.id)">了解详情</view>
					</view>

				</view>
			</scroll-view>
		</view>

		<!-- 推荐服务 -->
		<view class="service-box">
			<view class="title-con acea-row row-middle">
				<image src="../../../static/images/business-title2.png" class="title-img"></image>
				<image src="../../../static/images/fabu-close.png" class="toadd" @tap="toAuthentication"></image>
			</view>
			<view class="service-top acea-row row-between">
				<view class="service-nub-left acea-row row-column-between">
					<view class="tips line1">{{supplyList[0].title}}</view>
					<view class="tips-item line1">{{supplyList[0].detailedDescription}}</view>
					<image :src="supplyList[0].resourceImgs[0]" mode="aspectFill"></image>
				</view>
				<view class="acea-row row-between service-nub-right">
					<view class="acea-row row-center-wrapper module-nub">
						<view class="tips line1">{{supplyList[1].title}}</view>
						<view class="tips-item line1">{{supplyList[1].detailedDescription}}</view>
					</view>
					<view class="acea-row row-center-wrapper module-nub">
						<view class="tips">{{supplyList[2].title || '广告位招租'}}</view>
						<view class="tips-item">{{supplyList[2].detailedDescription}}</view>
					</view>
				</view>
			</view>
			<view class="service-bottom acea-row row-between">
				<view v-for="(item,index) in cagetoryList" :key="index">
					<view class="module-box bg-red acea-row row-center-wrapper" v-if="index <= 2 ">
						<view class="tips">{{item.cagetoryName}}</view>
						<!-- <view class="tips-item">房屋装修</view> -->
					</view>
				</view>
				<view class="tolearn acea-row row-center-wrapper">查看更多</view>
			</view>
		</view>

		<!-- 优质项目 -->
		<view class="project-box">
			<image src="../../../static/images/business-title3.png" class="title-img"></image>
			<view class="project-list acea-row" v-for="(item,index) in 3" :key="index">
				<image src="../../../static/images/business-img1.png" mode="" class="project-img"></image>
				<view class="right-con acea-row row-column-between">
					<view class="acea-row row-middle title">
						<image src="../../../static/images/new-icon.png" mode="" class="new-icon">
						</image>
						<view class="title-h">富硒产品</view>
					</view>
					<view class="title-s line1">农业项目、国家扶贫、乡村振兴、国家红利</view>
					<view class="category-box acea-row">
						<view class="tag-item-y tag">持续盈利</view>
						<view class="tag-item-b tag">财务规范</view>
						<view class="tag-item-p tag">零负债</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import { getArticle } from "@/api/home";
	import { briefing, supply, listResourcesCagetory, listEnterprise } from  "@/api/business"
	import NewsSwiper from "./newsSwiper.vue"
	export default {
		components:{ NewsSwiper },
		data() {
			return {
				showCirc: false,
				isHotList: [],
				isRecommend: [],
				supplyList: [],
				cagetoryList: [],
				enterpriseList: []
			};
		},
		mounted(){
			this.getArticleList()
			this.getSupplyList()
			this.getCagetoryList()
			this.getEnterpriseList()
		},
		methods:{
			//获取资讯
			getArticleList(){
				briefing().then((res)=>{
					const articleList= res.data
					this.isHotList = articleList.filter(item=> item.isHot == 1)
					this.isRecommend = articleList.filter(item=> item.isRecommend == 1)
				})
			},
			toArticleDetail(id){
				uni.navigateTo({
					url:"/pages/life/articleDetail/index?id=" + id
				})
			},
			//获取供应
			getSupplyList(){
				supply().then((res)=>{
					this.supplyList = res.data
				})
			},
			//获取分类
			getCagetoryList(){
				listResourcesCagetory().then((res)=>{
					this.cagetoryList = res.data
				})
			},
			//获取企业
			getEnterpriseList(){
				listEnterprise().then((res)=>{
					this.enterpriseList = res.data
					this.showCirc = false
				})
			},
			toCompanyDetail(id){
				uni.navigateTo({
					url:"/pages/life/articleDetail/index?id=" + id
				})
			},
			//换一批
			replaceClick(){
				if(!this.showCirc){
					this.showCirc = true;
					this.getEnterpriseList()
				}
			},
			// 供需大厅
			toSupplyHall(e){
				uni.navigateTo({
					url:"/pages/demandHall/supplyHall/index"
				})
			},
			// 企业服务
			toEnterpriseServer(e){
				uni.navigateTo({
					url:"/pages/demandHall/enterpriseServer/index"
				})
			},
			// 项目投融
			toDemoInvestment(e){
				uni.showModal({
					title:'提示！',
					content: '模块开发中，请等待...',
					showCancel: false
				})
				// uni.navigateTo({
				// 	url:"/pages/demandHall/demoInvestment/index"
				// })
			},
			// 认证
			toAuthentication(e){
				uni.navigateTo({
					url:"/pages/release/index2"
				})
			}
		},
		
	}
</script>

<style lang="less">
	.business-page {
		width: 100%;
		height: auto;
		background: #fff;
		font-size: 24rpx;
		margin-bottom: 100rpx;
	}

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

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

		.search {
			margin-left: auto;
			width: 132rpx;
			height: 66rpx;
			background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%);
			border-radius: 8rpx;
			color: #fff;
		}
	}

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

		.img1 {
			width: 312rpx;
			height: 208rpx;
		}

		.img1 image {
			width: 312rpx;
			height: 208rpx;
		}

		.img2 {
			width: 342rpx;
			height: 208rpx;
		}

		.img2 image {
			width: 342rpx;
			height: 96rpx;
		}
	}

	// 商业简报
	.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;
		color: #6E6E6E;

		.news-img {
			width: 64rpx;
			height: 78rpx;
			margin-left: 18rpx;
		}
		.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 0 40rpx;
		}
	}

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

	.title-img {
		width: 134rpx;
		height: 46rpx;
	}
	
	@keyframes doCric{
		0% {
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}

	.company-box {
		height: 380rpx;

		.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;
			margin-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;
				}

				.category-box {
					.tag {
						width: 112rpx;
						height: 36rpx;
						border-radius: 4rpx;
						font-size: 20rpx;
						margin-right: 8rpx;
						text-align: center;
					}

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

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

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

				.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: linear-gradient(315deg, #FF6D31 0%, #FFC2AA 100%);
					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 {
				.title {
					font-weight: 800;
					height: 35rpx;
					line-height: 35rpx;

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

						.title-h {
							color: #1D1D1D;
						}
					}
				}

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

				.category-box {
					.tag {
						width: 112rpx;
						height: 36rpx;
						line-height: 33rpx;
						border-radius: 4rpx;
						font-size: 20rpx;
						margin-right: 16rpx;
						text-align: center;
					}

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

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

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

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