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

<template>
	<view class="supplyHall-page">
		<!-- 导航栏 -->
		<view class="navigation-box">
			<view class="search-box acea-row row-middle">
				<image src="../../../static/images/search-icon.png" mode=""></image>
				<input type="text" value="" placeholder="请输入相关关键词" />
				<view class="search acea-row row-center-wrapper">搜一下</view>
			</view>
			<view class="resource-tabs acea-row">
				<view :class="'tab ' + (active == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">需求广场</view>
				<view :class="'tab ' + (active == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">供应广场</view>
				<view class="screen-box acea-row row-between-wrapper">
					<view class="screen acea-row row-middle" @tap="showDialog">
						<text>筛选</text>
						<image src="/static/images/home/screen.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="supplyHall-box">
			<!-- 需求广场 -->
			<view class="resource-box" v-if="active == 2">
				<view class="enterprise-list" v-for="(item, index) in list" :key="index" @tap="toNeedsDetail"
					:data-id="item.id">
					<view :class="'tips-item' + (item.enterpriseType == 2 ? ' bg2' : '')">
						{{item.enterpriseType == 1 ? '企业' : '个人'}}
					</view>
					<view class="enterprise-box acea-row row-column-between">
						<view class="title-h">{{item.title}}</view>
						<view class="enterprise-price">{{item.capital}}</view>
						<view class="supply-screen acea-row">
							<!-- <view class="tag-item-y tag">网站建设</view>
							<view class="tag-item-p tag">APP开发</view> -->
							<view class="tag-item-p tag">{{item.cname}}</view>
							<view class="time-end-t">{{item.resourceEndTime}}截止报名</view>
						</view>
						<view class="enterprise-info acea-row row-middle">
							<image :src="item.enterpriseDto.enterpriseLogo" mode="aspectFill" class="head-logo"></image>
							<view class="user-name">{{item.enterpriseName}}</view>
						</view>
					</view>
					<view class="todetails">查看详情</view>
				</view>
				<LoadStatus :loadStatus="loadStatus"></LoadStatus>
			</view>
			<!-- 资源列表 -->
			<view class="company-box" v-if="active == 1">
					<view class="enterprise-list" v-for="(item, index) in list" :key="index" @tap="toResourDetail" :data-id="item.id">
						<view :class="'tips-item' + (item.enterpriseType == 2 ? ' bg2' : '' )">
							{{item.enterpriseType == 1 ? '企业' : '个人'}}
						</view>
						<view class="enterprise-con acea-row">
							<image :src="item.resourceImgs[0]" class="enterprise-img"></image>
							<view class="content-right acea-row row-column-between">
								<view class="line2">{{item.title}}</view>
								<view class="category-box acea-row">
									<view class="tag-item-b tag">{{item.cname}}</view>
									<!-- <view class="tag-item-y tag">场地租赁</view> -->
								</view>
								<view class="e-price">￥{{item.totalMoney}}</view>
							</view>
						</view>
						<view class="enterprise-info acea-row row-middle mt20">
							<image :src="item.enterpriseDto.enterpriseLogo" mode="" class="head-logo"></image>
							<view class="user-name">{{item.enterpriseName}}</view>
						</view>
						<view class="todetails">查看详情</view>
					</view>
					<LoadStatus :loadStatus="loadStatus"></LoadStatus>
				<!-- </view> -->
			</view>
		</view>
		<view class="mask-box" v-if="showScreenDialog">
			<view :class="'screen-dialog-box ' + (showScreenDialog ? 'move' : '')">
				<view class="screen-list">
					<view class="screen-item">
						<view class="screen-title">所有服务</view>
						<view class="acea-row">
							<view v-for="(item, index) in cagetoryList" :key="index"
								:class="'item ' + (cagetoryActive == index ? 'item-active' : '')" @tap="cagetoryClick"
								:data-i="index" :data-item="item">{{item.cagetoryName}}</view>
						</view>
					</view>
					<view class="screen-item">
						<view class="screen-title">商家身份<text class="fz20">(所有商家均实名认证)</text></view>
						<view class="acea-row">
							<view :class="'item ' + (enterpriseType == 2 ? 'item-active' : '')" @tap="businessChange"
								data-name="个人认证" data-type="2">个人认证</view>
							<view :class="'item ' + (enterpriseType == 1 ? 'item-active' : '')" @tap="businessChange"
								data-name="企业认证" data-type="1">企业认证</view>
						</view>
					</view>
					<view class="submit-box acea-row">
						<view class="btn reset" @tap="resetClick">重置</view>
						<view class="btn finish" @tap="finishClick">完成</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import LoadStatus from "@/components/LoadStatus.vue"
	export default {
		components:{ LoadStatus },
		data() {
			return {
				active: 2,
				showScreenDialog: false,
				cagetoryActive: "",
				//筛选企业/个人
				resourceCagetoryId: '',
				// 分类列表
				enterpriseType: '',
				//筛选分类
				choseCagetory: '',
				choseBusiness: '',
				cName: "",
				// 需求列表
				list: [],
				pageNumber: 0,
				pageSize: 10,
				loading: true,
				loadStatus: '加载更多...'
			}
		},
		onShow: function() {
			this.getPageData();
		},
		onLoad: function(options) {
			this.getCagetoryList();
		},
		onPullDownRefresh: function() {
			this.setData({
				loading: true,
				pageNumber: 0,
			});
			this.getPageData();
		},
		onReachBottom: function() {
			this.setData({
				pageNumber: this.pageNumber + 1
			});
			this.getPageData();
		},
		methods: {
			tabClick(e) {
				this.setData({
					active: e.currentTarget.dataset.i,
					loading: true,
					pageNumber: 0,
					list: [],
					enterpriseType: '',
					cagetoryActive: null,
					resourceCagetoryId: ''
				});
				this.getPageData();
			},

			showDialog() {
				this.setData({
					showScreenDialog: true,
				});
			},
			getCagetoryList() {
				app.http('get', 'ResourcesCagetory/listResourcesCagetory').then(res => {
					if (res.data.success) {
						this.setData({
							cagetoryList: res.data.data
						});
					}
				});
			},
			cagetoryClick(e) {
				let item = e.currentTarget.dataset.item;
				let i = e.currentTarget.dataset.i;
				console.log(item);
				this.setData({
					cagetoryActive: i,
					resourceCagetoryId: item.id,
					choseCagetory: item.cagetoryName
				});
			},
			businessChange(e) {
				let type = e.currentTarget.dataset.type;
				let name = e.currentTarget.dataset.name;
				this.setData({
					choseBusiness: name,
					enterpriseType: type
				});
			},
			finishClick() {
				this.setData({
					showScreenDialog: false
				});
			},
			resetClick() {
				this.setData({
					cName: '',
					cagetoryActive: null,
					resourceCagetoryId: '',
					enterpriseType: '',
					choseBusiness: '',
					choseCagetory: '',
				});
			},
			// 需求广场
			toNeedsDetail(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/demandHall/needsDetail/index?id=' + id
				});
			},

			getPageData() {
				if (this.loading) {
					this.loadStatus = '正在加载中...'
					app.http('post', `Resources/listResources?page=${this.pageNumber}&size=${this.pageSize}`, {
						resourceType: this.active,
						resourceCagetoryId: this.resourceCagetoryId,
						enterpriseType: this.enterpriseType,
					}).then(res => {
						if (res.data.success) {
							uni.stopPullDownRefresh();
							if (res.data.data.content.length < this.pageSize) {
								this.loading = false;
								this.loadStatus = '没有更多了...'
							} else{
								this.loadStatus = '上拉加载更多...'
							}
							this.list =  this.list.concat(res.data.data.content)
							
							// if (this.pageNumber > 0) {
							// 	this.list =  this.list.concat(res.data.data.content)
							// } else {
							// 	this.setData({
							// 		list: res.data.data.content
							// 	});
							// }
						}
					});
				} else {
					uni.stopPullDownRefresh();
				}
			},

		}
	}
</script>

<style lang="less">
	image{
		border-radius: 8rpx;
	}
	.supplyHall-page {
		width: 100%;
		min-height: 100vh;
		background: #F5F5F5;
		font-size: 28rpx;
	}

	/* 导航栏 */
	.navigation-box {
		width: 100%;
		height: auto;
		background: #fff;
		padding-top: 20rpx;
	}

	.search-box {
		width: 670rpx;
		height: 68rpx;
		border: 2rpx solid #FF5100;
		border-radius: 8rpx;
		margin: 0 auto;
	}

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

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

	.resource-tabs {
		width: 100%;
		padding-top: 10rpx;
		background: #fff;
		border-bottom: 2rpx solid #EEEEEE;
		padding-left: 20rpx;
	}

	.tab {
		width: 150rpx;
		padding: 26rpx 0;
		font-size: 32rpx;
		color: #BFBFBF;
		position: relative;
		font-weight: 500;
		text-align: center;
		margin-left: 115rpx;
	}

	.tab::after {
		display: block;
		content: '';
		width: 80rpx;
		height: 8rpx;
		border-radius: 8rpx;
		background: #FF5100;
		position: absolute;
		bottom: 0rpx;
		left: 50%;
		margin-left: -40rpx;
		opacity: 0;
		transform: scaleX(0);
		transition: all .2s ease, opacity .15s ease;
	}

	.tab-a {
		color: #FF5100;
	}

	.tab-a::after {
		opacity: 1;
		transform: scaleX(1);
	}

	.screen-box {
		height: 94rpx;
		padding: 0 38rpx;
		color: #666;
		background: #fff;
		margin-left: auto;
	}

	.screen-result {
		color: #FF5100;
	}

	.screen image {
		width: 27rpx;
		height: 27rpx;
		margin-left: 6rpx;
	}

	.supplyHall-box {
		width: 670rpx;
		margin: 0 auto;
	}

	.resource-box {
		width: 100%;
	}

	/* 个人 */
	.personal-list {
		width: 100%;
		border-radius: 12rpx;
		background: #FFF;
		position: relative;
		margin-top: 34rpx;
		padding-bottom: 32rpx;
	}

	.tips-item {
		width: 60rpx;
		height: 32rpx;
		font-size: 20rpx;
		color: #fff;
		border-radius: 12rpx 0;
		text-align: center;
		background: rgba(88, 144, 255, 0.91);
		margin-bottom: 5rpx;
	}

	.bg2 {
		background: linear-gradient(141deg, #FF6D31 0%, #FFA782 100%);
	}

	.info-box {
		height: 214rpx;
		padding-left: 20rpx;
	}

	.head-img {
		width: 64rpx;
		height: 64rpx;
	}

	.user-name {
		height: 40rpx;
		color: #1D1D1D;
		margin: 0 10rpx 0 16rpx;
	}

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

	.user-price {
		position: absolute;
		right: 58rpx;
		height: 40rpx;
		color: #FF5100;
		font-weight: 600;
	}

	.supply-con {
		height: 40rpx;
		color: #1D1D1D;
		font-weight: 600;
	}

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

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

	.time-end {
		height: 34rpx;
		font-size: 24rpx;
		color: #707070;
	}

	.todetails {
		width: 148rpx;
		height: 44rpx;
		line-height: 44rpx;
		background: linear-gradient(141deg, #FFA782 0%, #FF6D31 100%);
		border-radius: 8rpx;
		position: absolute;
		right: 18rpx;
		bottom: 38rpx;
		text-align: center;
		color: #fff;
	}

	/* 企业 */
	.enterprise-list {
		width: 670rpx;
		background: #FFFFFF;
		margin-top: 32rpx;
		border-radius: 12rpx;
		position: relative;
		padding-bottom: 15rpx;
	}

	.enterprise-box {
		height: 208rpx;
		padding-left: 20rpx;
	}

	.title-h {
		width: 456rpx;
		height: 35rpx;
		line-height: 35rpx;
		font-size: 32rpx;
		color: #1D1D1D;
		font-weight: 600;
	}

	.enterprise-price {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 28rpx;
		color: #FF5100;
	}

	.head-logo {
		width: 72rpx;
		height: 72rpx;
	}

	.time-end-t {
		position: absolute;
		right: 15rpx;
		height: 34rpx;
		font-size: 24rpx;
		color: #707070;
	}

	.enterprise-con {
		width: 100%;
		height: 192rpx;
		padding: 0 20rpx;
	}

	.enterprise-img {
		width: 150rpx;
		height: 192rpx;
		margin-right: 30rpx;
	}

	.content-right {
		width: 450rpx;
		height: 180rpx;
		position: relative;
	}

	.e-price {
		height: 40rpx;
		color: #FF5100;
		font-weight: 600;
	}

	.mt20 {
		padding-left: 20rpx;
	}



	.mask-box {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, .6);
		position: fixed;
		top: 0;
		/*  #ifdef  H5  */
		top: calc(88rpx + constant(safe-area-inset-top));
		top: calc(88rpx + env(safe-area-inset-top));
		/*  #endif  */
		left: 0;
		z-index: 9999;

	}

	.screen-dialog-box {
		width: 602rpx;
		height: 100%;
		/* padding-bottom: 160rpx; */
		overflow-y: scroll;
		background-color: #fff;
		position: absolute;
		top: 0;
		right: 0rpx;
		animation: move 200ms ease;
	}

	/* .move{
   right: 0rpx;
 } */
	@keyframes move {
		0% {
			transform: translateX(800rpx);
		}

		100% {
			transform: translateX(0rpx);
		}
	}

	.screen-item {
		width: 100%;
		padding: 0 38rpx;
		padding-bottom: 22rpx;
		border-bottom: 2rpx solid #EEEEEE;
	}

	.screen-title {
		font-size: 24rpx;
		color: #000;
		margin-bottom: 32rpx;
	}

	.screen-item {
		padding-top: 40rpx;
	}

	.screen-item .item {
		width: 162rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
		color: #666666;
		background: #F6F6F6;
		border-radius: 4rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
	}

	.screen-item .item:nth-child(3n) {
		margin-right: 0;
	}

	.screen-item .item-active {
		border: 2rpx solid #FF6E33;
		color: #FE7D26;
		background: #FDEFE6;
		
	}

	.across-line {
		width: 44rpx;
		height: 2rpx;
		background: #ACABAB;
		margin: 0 12rpx;
	}

	.low-price {
		width: 228rpx;
		height: 60rpx;
		background: #F6F5F5;
		border-radius: 4rpx;
	}

	.low-price input {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.fz20 {
		font-size: 20rpx;
		color: #393939;
	}

	.submit-box {
		width: 602rpx;
		height: 100rpx;
		box-shadow: 2rpx 0px 12rpx rgba(0, 0, 0, 0.16);
		position: fixed;
		bottom: 0;
		right: 0;
	}

	.submit-box .btn {
		width: 50%;
		height: 100%;
		line-height: 100rpx;
		text-align: center;
	}

	.submit-box .finish {
		background: #FF660C;
		color: #fff;
	}
</style>