yunshengtai-uniapp/pages/demandHall/index.vue

<template>
	<view class="dmandhall-page">
		<view class="top-box acea-row row-between-wrapper">
			<view class="top-l-box acea-row">
				<view :class="'tab-item ' + (active == 1 ? 'tab-item-a' : '')" data-i="1" @tap="topTabClick">资源供应</view>
				<view :class="'tab-item ' + (active == 2 ? 'tab-item-a' : '')" data-i="2" @tap="topTabClick">需求广场</view>
			</view>
			<view class="top-r-box acea-row">
				<!-- <image src="../../images/home/search2.png"></image> -->
				<!-- <image src="../../images/home/message2.png"></image> -->
			</view>
			<view class="resource-tabs acea-row row-around" v-if="active == 1">
				<view :class="'tab ' + (tabActive == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">资源列表</view>
				<view :class="'tab ' + (tabActive == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">企业列表</view>
			</view>
			<view class="screen-box acea-row row-between-wrapper" v-if="active == 1">
				<view class="screen-result">
					{{choseCagetory}}
					<text v-if="choseCagetory != '' && choseBusiness != ''">-</text>
					{{choseBusiness}}
				</view>
				<view class="screen acea-row row-middle" @tap="showDialog">
					<text>筛选</text>
					<image src="/static/images/home/screen.png"></image>
				</view>
			</view>
		</view>
		<!-- 资源供应 -->
		<view class="resource-box" v-if="active == 1">
			<view class="resource-list">
				<view v-for="(item, index) in list" :key="index" class="resource-item acea-row-nowrap"
					@tap="toResourceDetail" :data-id="item.id" v-if="tabActive == 1">
					<view class="logo-box">
						<image :src="item.resourceImgs[0]" mode="aspectFill"></image>
					</view>
					<view class="resource-info">
						<view class="title">{{item.title}}</view>
						<view class="tags-box">
							<view class="tag-item">{{item.cname}}</view>
						</view>
						<view class="desc line1">{{item.detailedDescription}}</view>
						<view class="price">¥{{item.capital}}</view>
						<view class="company-info">
							<!-- {{item.enterpriseName}} -->
							<text class="line1">{{item.enterpriseName}}</text>
							<!-- <text>武汉</text> -->
						</view>
						<view class="toMore-btn">了解详情</view>
					</view>
				</view>
				<view v-for="(item, index) in companyList" :key="index" class="resource-item acea-row-nowrap"
					v-if="tabActive == 2" @tap="toCompanyDetail" :data-id="item.id">
					<view class="logo-box">
						<view :class="'tips-item ' + (item.enterpriseType == 2 ? 'bg2' : '' )">
							{{item.enterpriseType == 1 ? '企业' : '个人'}}</view>
						<image :src="item.enterpriseLogo" mode="aspectFill"></image>
					</view>
					<view class="resource-info">
						<view class="title line1">{{item.enterpriseName}}</view>
						<view class="tags-box">
							<view class="tag-item">{{item.cname}}</view>
							<!-- <view class="tag-item bgG">IT软件</view>
            <view class="tag-item bgO">APP开发</view> -->
						</view>
						<view class="desc line2" v-if="item.enterpriseType == 1">{{item.enterpriseTitle}}</view>
						<view class="anli-list acea-row row-between">
							<view class="anli-item acea-row">
								<image v-for="(item, index2) in item.imgPaths" :key="index2" mode="aspectFill"
									:src="item" v-if="index2 < 2"></image>
								<!-- <text>购物商城优秀资源</text> -->
							</view>
							<!-- <view class="anli-item acea-row row-column">
              <image src="../../images/home/item-bg.png"></image>
              <text>购物商城优秀资源</text>
            </view> -->
						</view>
						<!-- <view class="comment">“非常有责任心” , “老板阅历和经验很丰富”,“很好”</view> -->
					</view>
				</view>
			</view>
			<view class="no-more">
				{{loading ? '加载更多...' : '没有更多啦...'}}
			</view>
		</view>
		<!-- 需求 -->
		<view class="company-list-box" v-if="active == 2">
			<!-- <view class="screen-box acea-row row-between-wrapper">
      <view class="screen-result">IT软件 · 企业网站</view>
      <view class="screen-result"> </view>
      <view class="screen acea-row row-middle" @tap="showDialog">
        <text>筛选</text>
        <image src="/static/images/home/screen.png"></image>
      </view>
    </view> -->
			<view class="company-list">
				<view v-for="(item, index) in list" :key="index" class="company-item" :data-id="item.id"
					@tap="toNeedsDetail">
					<view class="title-box acea-row row-between">
						<view class="title line1">{{item.title}}</view>
						<view class="price">{{item.capital}}</view>
					</view>
					<view class="tags-box">
						<view class="tag-item">{{item.cname}}</view>
					</view>
					<view class="desc line2">{{item.detailedDescription}}</view>
					<view class="btn-box acea-row row-between row-middle">
						<view class="end-time">{{item.resourceEndTime}}截止报名</view>
						<view class="toMore-btn">了解详情</view>
					</view>
				</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">主题</view>
          <view class="acea-row">
            <view class="item" wx:for="{{9}}" wx:key="index">网站开发</view>
          </view>
        </view> -->
					<!-- <view class="screen-item">
          <view class="screen-title">选择城市</view>
          <view class="acea-row">
            <view class="item" wx:for="{{5}}" wx:key="index">武汉</view>
          </view>
        </view> -->
					<!-- <view class="screen-item">
          <view class="screen-title">区间价格</view>
          <view class="price-box acea-row row-middle">
            <view class="low-price"><input type="text" placeholder="最低价" /></view>
            <view class="across-line"></view>
            <view class="low-price"><input type="text" placeholder="最高价" /></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>
		<!-- <tabbar :current="currentTabIndex" @click="tabBarClick"></tabbar> -->
	</view>
</template>

<script>
	// pages/demandHall/index.js
	const app = getApp();
	import tabbar from "../../tabbarComponent/tabbar";

	export default {
		data() {
			return {
				tabbar: {},
				active: '1',
				// 1资源供应，2需求广场
				tabActive: '1',
				// 1资源列表，2企业列表
				list: [],
				showScreenDialog: false,
				companyList: [],
				pageSize: 5,
				pageNumber: 0,
				loading: true,
				//是否加载更多
				cagetoryList: [],
				// 分类列表
				enterpriseType: '',
				//筛选企业/个人
				resourceCagetoryId: '',
				//筛选分类
				choseCagetory: '',
				choseBusiness: '',
				cagetoryActive: "",
				size: 0,
				cName: "",
				currentTabIndex: 1,

			};
		},

		components: {
			tabbar
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getCagetoryList();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.setData({
				pageNumber: this.pageNumber + 1
			});
			this.getPageData();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.getPageData();
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.setData({
				loading: true,
				pageNumber: 0,
			});
			this.getPageData();
		},
		methods: {
			tabBarClick(index) {
				console.log('返回tabBar索引：' + index)
				this.currentTabIndex = index
			},
			topTabClick(e) {
				this.setData({
					active: e.currentTarget.dataset.i,
					loading: true,
					pageNumber: 0,
					list: [],
					enterpriseType: '',
					cagetoryActive: null,
					resourceCagetoryId: ''
				});
				console.log(this.active)
				this.getPageData();
			},

			tabClick(e) {
				this.setData({
					tabActive: e.currentTarget.dataset.i,
					loading: true,
					pageNumber: 0,
					pageSize: 5,
					// enterpriseType: '',
					cagetoryActive: null // resourceCagetoryId:''

				});

				if (e.currentTarget.dataset.i == 2) {
					this.getCompanyList();
				}
			},

			showDialog() {
				this.setData({
					showScreenDialog: true
				});
			},

			toResourceDetail(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/demandHall/resourcesDetail/index?id=' + id
				});
			},

			toCompanyDetail(e) {
				let id = e.currentTarget.dataset.id;

				uni.navigateTo({
					url: '/pages/demandHall/companyDetail/index?id=' + id
				});

			},

			toNeedsDetail(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/demandHall/needsDetail/index?id=' + id
				});
			},

			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({
					loading: true,
					pageNumber: 0,
					pageSize: 5
				});
				this.tabActive == 1 ? this.getPageData() : this.getCompanyList();
				this.setData({
					showScreenDialog: false
				});
			},

			resetClick() {
				this.setData({
					cName: '',
					cagetoryActive: null,
					resourceCagetoryId: '',
					enterpriseType: '',
					choseBusiness: '',
					choseCagetory: ''
				});
			},

			getPageData() {
			  if (this.loading) {
			    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.setData({
			            loading: false
			          });
			        }

			        if (this.pageNumber > 0) {
			          this.setData({
			            list: this.list.concat(res.data.data.content)
			          });
			        } else {
			          this.setData({
			            list: res.data.data.content
			          });
			        }
			      }
			    });
			  } else {
			    uni.stopPullDownRefresh();
			  }
			},

			getCompanyList() {
				app.http('post', `Enterprise/listEnterprise?page=${this.pageNumber}&size=${this.pageSize}`, {
					industryId: this.resourceCagetoryId,
					enterpriseType: this.enterpriseType
				}).then(res => {
					if (res.data.success) {
						this.setData({
							companyList: res.data.data.content
						});
					}
				});
			}

		}
	};
</script>
<style>
	/* pages/demandHall/index.wxss */
	image {
		border-radius: 8rpx;
	}

	.dmandhall-page {
		padding-bottom: 210rpx;
		min-height: 100vh;
		font-size: 28rpx;
		background: #F5F5F5;
	}

	.top-box {
		width: 100%;
		padding: 16rpx 0;
		background: #fff;
		position: fixed;
		top: 0;
		z-index: 99;
	}

	.top-l-box {
		padding-left: 40rpx;
	}

	.tab-item {
		width: 162rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		margin-right: 12rpx;
		font-size: 28rpx;
		color: #BFBFBF;
		font-weight: 500;
	}

	.tab-item-a {
		font-size: 36rpx;
		color: #FF5100;
	}

	.top-r-box image {
		width: 36rpx;
		height: 36rpx;
		margin-left: 30rpx;
	}

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

	.tab {
		width: 162rpx;
		padding: 26rpx 0;
		font-size: 28rpx;
		color: #BFBFBF;
		position: relative;
		font-weight: 500;
	}

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

	.tab-a {
		color: #333;
	}

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

	.no-more {
		text-align: center;
		line-height: 38rpx;
		font-size: 28rpx;
		color: #9C9C9C;
	}

	.screen-box {
		width: 100%;
		height: 94rpx;
		padding: 0 38rpx;
		color: #666;
		background: #fff;
	}

	.screen-result {
		font-size: 28rpx;
		color: #FF5100;
	}

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

	.resource-list {
		width: 100%;
		padding: 290rpx 40rpx 24rpx;
	}

	.resource-item {
		width: 100%;
		min-height: 302rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.logo-box {
		width: 154rpx;
		height: 154rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.logo-box image {
		width: 100%;
		height: 100%;
	}

	.tips-item {
		padding: 2rpx 6rpx;
		line-height: 28rpx;
		font-size: 20rpx;
		color: #fff;
		background: rgba(255, 81, 0, 0.63);
		border-radius: 8rpx;
		margin-right: 14rpx;
		position: absolute;
		top: 4rpx;
		left: 4rpx;
	}

	.bg2 {
		background: rgba(255, 170, 0, 0.63);
	}

	.resource-info {
		width: calc(100% - 170rpx);
	}

	.resource-item .title {
		font-size: 32rpx;
		font-weight: 500;
		line-height: 44rpx;
		color: #1D1D1D;
	}

	.desc {
		font-size: 24rpx;
		color: #666666;
		line-height: 34rpx;
	}

	.price {
		color: #FF5100;
		line-height: 40rpx;
		font-weight: 600;
		margin: 10rpx 0 40rpx;
	}

	.company-info {
		width: 66%;
		color: #A7A7A7;
		font-size: 24rpx;
	}

	.company-info text {
		display: inline-block;
		margin-right: 18rpx;
	}

	.tags-box {
		margin: 6rpx 0 10rpx;
	}

	.tag-item {
		width: 112rpx;
		height: 36rpx;
		display: inline-block;
		line-height: 34rpx;
		text-align: center;
		font-size: 20rpx;
		border: 2rpx solid #FFAA00;
		color: #FFAA00;
		border-radius: 4rpx;
		margin-right: 8rpx;
	}

	.bgG {
		border: 1rpx solid #3A9EFA;
		color: #3A9EFA;
	}

	.bgO {
		border: 1rpx solid #FC9367;
		color: #FC9367;
	}

	.toMore-btn {
		width: 164rpx;
		height: 44rpx;
		background: linear-gradient(141deg, #FFA782 0%, #FF6D31 100%);
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 44rpx;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}

	.anli-list {
		font-size: 24rpx;
		color: #666;
		margin: 24rpx 0 20rpx;
	}

	.anli-item image {
		width: 220rpx;
		height: 136rpx;
		margin-right: 8rpx;
	}

	.comment {
		font-size: 20rpx;
		color: #FF6D31;
	}

	.company-list-box {
		width: 100%;
		background: #fff;
		padding: 90rpx 0 0;
	}

	.company-list {
		width: 100%;
		border-top: 2rpx solid #EEEEEE;
	}

	.company-item {
		width: 100%;
		padding: 40rpx;
		border-bottom: 2rpx solid #EEEEEE;
	}

	.title-box .title {
		width: 500rpx;
	}

	.title-box .price {
		margin: 0;
	}

	.company-item .tags-box {
		margin: 20rpx 0;
	}

	.btn-box {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #707070;
	}

	.btn-box .toMore-btn {
		position: static;
	}













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