newyqg/pages/hall/hall.vue

<template>
	<view class="center">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="top">
			<!-- #ifndef APP-PLUS -->
			<image class="top-bg" src="http://yiqugo.oss-cn-hangzhou.aliyuncs.com/f0827202304061457316753.png" mode="">
			</image>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<image class="top-bg" src="../../static/img/hall-bg.png" mode=""></image>

			<!-- #endif -->
			<view class="title">易趣会馆</view>
		</view>
		<view class="hall-main">
			<!-- #ifndef APP-PLUS -->
			<image src="http://yiqugo.oss-cn-hangzhou.aliyuncs.com/75885202304061434299264.png" mode=""></image>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<image src="../../static/img/hell-main1.png" mode=""></image>
			<!-- #endif -->
		</view>
		<view class="hall-center">
			<view class="shingle-main" v-for="(item, index) in list" :key="index" @click="nav(item)">
				<view class="shingle-bg">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="shinglem-title flex">
					<image class="tbg" src="../../static/img/tbg-left.png" mode=""></image>
					<view class="shinglemt-center">
						<image class="address" src="../../static/img/address.png" mode=""></image>
						<view class="shingle-font">{{ item.name }}</view>
					</view>
					<image class="tbg" src="../../static/img/tbg-right.png" mode=""></image>
				</view>
				<view class="shingle-mmain flex">
					<view class="smmain-item">
						<view class="smitem-top">开放中</view>
						<view class="smitem-bottom">状态</view>
					</view>
					<view class="shu"></view>
					<view class="smmain-item">
						<view class="smitem-top clamp">{{ item.nickname }}</view>
						<view class="smitem-bottom clamp">馆长</view>
					</view>
					<view class="shu"></view>
					<view class="smmain-item">
						<view class="people flex">
							<view class="peopleitem" v-for="item in 1">
								<image src="../../static/img/busy.png" mode=""></image>
							</view>
							<view class="peopleitem" v-for="item in 4">
								<image src="../../static/img/leisure.png" mode=""></image>
							</view>
						</view>
						<view class="smitem-bottom">流畅</view>
					</view>
				</view>
				<image class="right-bottom" src="../../static/img/right-bottom.png" mode=""></image>
			</view>
		</view>
		<u-tabbar activeColor="#f42b4e" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import {
		tabbar
	} from '@/utils/tabbar.js';
	import {
		auction_gu
	} from '@/api/hall.js';
	export default {
		data() {
			return {
				tabbar: tabbar,
				current: 2,
				list: [],
				page: 1,
				limit: 10,
				loadingType: 'more'
			};
		},
		onShow() {
			this.loadData();
		},
		methods: {
			loadData() {
				const obj = this;
				if (obj.loadingType == 'nomore' || obj.loadingType == 'loading') {
					return;
				}
				obj.loadingType = 'loading';
				auction_gu({
						pages: obj.page,
						limit: obj.limit
					})
					.then(({
						data
					}) => {
						console.log(data);
						this.list = data;
					})
					.catch(e => {
						console.log(e);
					});
			},
			nav(item) {
				uni.navigateTo({
					url: '/pages/hall/halllist?id=' + item.id + '&name=' + item.name + '&peoplename=' + item
						.nickname
				});
			}
		}
	};
</script>

<style lang="less">
	.center,
	page {
		height: auto;
		min-height: 100%;
		background: #ffffff;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top {
		position: relative;
		width: 750rpx;
		height: 346rpx;

		.top-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 750rpx;
			height: 346rpx;
		}

		.title {
			padding-top: 20rpx;
			text-align: center;
			position: relative;
			z-index: 2;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
	}

	.hall-main {
		margin: -252rpx auto 0;
		width: 700rpx;
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.hall-center {
		margin-top: 34rpx;
	}

	.shingle-main {
		margin: 20rpx auto;
		width: 690rpx;
		height: 218rpx;
		position: relative;

		.shingle-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 690rpx;
			height: 218rpx;

			image {
				width: 690rpx;
				height: 218rpx;
			}
		}

		.shinglem-title {
			position: relative;
			z-index: 2;
			justify-content: center;
			height: 70rpx;

			.tbg {
				height: 70rpx;
				width: 40rpx;
			}

			.shinglemt-center {
				display: flex;
				align-items: center;
				background: rgba(220, 38, 43, 0.66);
			}

			.address {
				width: 28rpx;
				height: 30rpx;
			}

			.shingle-font {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				line-height: 70rpx;
				margin-left: 14rpx;
			}
		}

		.shingle-mmain {
			position: relative;
			z-index: 2;
			margin-top: 30rpx;

			.smmain-item {
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.smitem-top {
					text-align: center;
					width: 90%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
				}

				.smitem-bottom {
					margin-top: 10rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}

				.people {
					justify-content: center;

					.peopleitem {
						width: 24rpx;
						height: 34rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.shu {
				width: 2rpx;
				height: 70rpx;
				background: #ffffff;
			}
		}

		.right-bottom {
			position: absolute;
			z-index: 2;
			right: 0;
			bottom: 0;
			width: 94rpx;
			height: 92rpx;
		}
	}
</style>