sxg/pages/hall/hallinfo.vue

<template>
	<view class="center">
		<view class="content-money">
			<view class="money-box">
				<view class="status_bar"><!-- 这里是状态栏 --></view>
				<image class="money_bg" src="../../static/img/hinfo-bg.png"></image>
				<view class="goback-box" @click="toBack"><image class="goback" src="../../static/img/fanhui.png" mode=""></image></view>
				<view class="header">浙江馆</view>

				<view class="message flex">潮奢馆馆长：李丹丹</view>
			</view>
		</view>
		<view class="search">
			<view class="search-left" @click="test()">订单</view>
			<view class="search-right">
				<view class="input-box flex">
					<view class="input"><input type="text" placeholder="输入关键字" /></view>
					<image class="search-inco" src="../../static/img/search.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="hotgoods" v-if="firstList.length != 0">
			<view class="hotgoods-item" v-for="item in firstList" :key="item.id" @click="navToDetailPage(item)">
				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
				<view class="title clamp margin-c-20">{{ item.name }}</view>
				<view class="hot-price">
					<view class="price">
						<text class="font-size-sm">￥</text>
						{{ item.price }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { auction_product } from '@/api/hall.js'
export default {
	data() {
		return {
			firstList: [],
			id:'',//场次id
			page: 1,
			limit: 10,
			loadingType: 'more',
		};
	},
	onLoad(option) {
		this.id = option.id
		this.loadData();
	},
	methods: {
		loadData(){
			const obj = this;
			if (obj.loadingType == 'nomore' || obj.loadingType == 'loading') {
				return;
			}
			obj.loadingType = 'loading';
			auction_product({
				page: obj.page,
				limit: obj.limit,
				id: obj.id
			}).then(({data}) => {
				obj.firstList = obj.firstList.concat(data);
				if (data.length != obj.limit) {
					obj.loadingType = 'more';
					obj.page++;
				} else {
					obj.loadingType = 'nomore';
				}
			}).catch(e =>{
				console.log(e);
			})
		},
		toBack() {
			uni.navigateBack({});
		},
		nav(url) {
			uni.navigateTo({
				url
			});
		},
		test() {
			uni.navigateTo({
				url:'/pages/hall/porducthall'
			})
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	height: auto;
	min-height: 100%;
	background-color: #ffffff;
}
.money-box {
	color: #ffffff;
	text-align: center;
	position: relative;
	padding-top: 250rpx;
	.money_bg {
		position: absolute;
		width: 750rpx;
		height: 412rpx;
		top: 0;
		left: 0;
		right: 0;
	}
	.header {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.goback-box {
		position: absolute;
		left: 18rpx;
		top: 0;
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.goback {
		z-index: 100;
		width: 34rpx;
		height: 34rpx;
	}
	.message {
		display: inline-block;
		position: relative;
		z-index: 2;
		margin: 0 auto;
		padding: 20rpx 40rpx;
		background: rgba(253, 59, 57, 0.4);
		border-radius: 25rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
}
.search {
	margin-top: 120rpx;
	padding: 0 30rpx 0 20rpx;
	display: flex;
	align-items: center;
	.search-left {
		width: 112rpx;
		height: 70rpx;
		background: #fd3b39;
		border-radius: 25rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 70rpx;
		text-align: center;
	}
	.search-right {
		width: 570rpx;
		background: #dcdcdc;
		border-radius: 35rpx;
		margin-left: 20rpx;
		padding: 18rpx 50rpx 18rpx 36rpx;
		.search-inco {
			width: 34rpx;
			height: 34rpx;
		}
	}
}
.hotgoods {
	margin-top: 38rpx;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0 32rpx 108rpx;

	.hotgoods-item {
		width: 48%;
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		&:nth-child(2n + 1) {
			margin-right: 24rpx;
		}
		.image-wrapper {
			width: 100%;
			height: 330rpx;
			background: red;
			border-radius: 3px;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
				opacity: 1;
				border-radius: 12rpx 12rpx 0 0;
			}
		}
		.title {
			font-size: $font-base;
			color: $font-color-dark;
			font-weight: bold;
			line-height: 80rpx;
		}
		.hot-price {
			display: flex;
			justify-content: space-between;
			padding: 0 16rpx 12rpx;

			.price {
				font-size: 40rpx;
				color: #ff0000;
				font-weight: 500;
			}
			.cart-icon {
				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}
}
</style>