XXxiangmu/pages/hall/hallinfo.vue

<template>
	<view class="center">
		<view class="content-money">
			<view class="money-box">
				<view class="status_bar"><!-- 这里是状态栏 --></view>
				<!-- #ifndef APP-PLUS -->
				<image class="money_bg" src="http://yiqugo.oss-cn-hangzhou.aliyuncs.com/87a32202304061420101468.png">
				</image>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<image class="money_bg" src="../../static/img/hinfo-bg1.png"></image>
				<!-- #endif -->
				<view class="goback-box" @click="toBack">
					<image class="goback" src="../../static/img/fanhui.png" mode=""></image>
				</view>
				<view class="header">{{ name }}</view>

				<view class="message flex">{{ name }}馆长：{{ peoplename }}</view>
			</view>
		</view>
		<view class="search">
			<view class="search-left" @click="nav('/pages/order/order')">订单</view>
			<view class="search-right">
				<view class="input-box flex">
					<view class="input"><input type="text" placeholder="搜索挂售商品" v-model="productname" /></view>
					<image @click="search()" class="search-inco" src="../../static/img/search.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="djs" v-if="!isbuy1">
			<view class="djs-bg">
				<!-- #ifndef APP-PLUS -->
				<image src="http://yiqugo.oss-cn-hangzhou.aliyuncs.com/b7365202304061422072002.png" mode=""></image>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<image src="../../static/img/djs1.png" mode=""></image>
				<!-- #endif -->
			</view>
			<view class="djs-font">客官请稍后，请{{ time }}入场</view>
			<view class="djs-main">入场倒计时：{{ countdown_time }}</view>
		</view>
		<view v-if="firstList.length != 0 && isbuy1">
			<view class="hotgoods">
				<view class="hotgoods-item" v-for="item in firstList" :key="item.id" @click="navToDetailPage(item)">
					<image class="sell-out" v-if="item.status == 2" src="../../static/img/sOut1.png" mode=""></image>
					<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.hanging_price }}
						</view>
						<view class="over" v-if="item.status == 2">已售罄</view>
					</view>
				</view>
			</view>
			<view class="nav flex" v-show="page != 1 || isLast">
				<view class="next" @click="last">上一页</view>

				<view class="next" @click="next">下一页</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		auction_product,
		count_down
	} from '@/api/hall.js';
	import {
		getTime
	} from '@/utils/rocessor.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				productname: '', //商品名称
				name: '', //馆名字
				peoplename: '', //馆长名字
				firstList: [],
				id: '', //场次id
				page: 1,
				limit: 20,
				loadingType: 'more',
				countdown_time: '',
				canbuy: 0, //结束时间
				time: '', //进场时间
				timers: '', //延时器id
				isLast: true
			};
		},
		onLoad(option) {
			this.name = option.name;
			this.peoplename = option.peoplename;
			this.id = option.id;
		},
		computed: {
			...mapState(['isbuy1'])
		},
		onShow() {
			if (!this.isbuy1) {
				this.isDjs();
			}
			this.loadData();
			this.loadDataNext();
		},
		onReachBottom() {
			console.log('123456');
			if (this.isbuy1) {
				this.loadData();
			}
		},
		onHide() {
			clearTimeout(this.timers);
		},
		// 监听页面卸载
		onUnload() {
			// 关闭倒计时
			clearTimeout(this.timers);
		},
		// 监听页面后退
		onBackPress() {
			// 关闭倒计时
			clearTimeout(this.timers);
		},
		methods: {
			...mapMutations(['setBuy1']),
			isDjs() {
				uni.showLoading({
					title: '加载中'
				});
				count_down({
					id: this.id
				}).then(({
					data
				}) => {
					uni.hideLoading();
					this.canbuy = data.time;
					let day = getTime(this.canbuy * 1000).split(' ');
					this.time = day[1];
					this.counTime();
				});
			},
			counTime() {
				//获取当前时间
				let data = new Date();
				let newTime = data.getTime();
				//结束时间
				let end = this.canbuy;
				//时间差
				let leftTime = end * 1000 - newTime;
				console.log(leftTime);
				console.log(this.la, '2222222');
				if (leftTime <= 0) {
					console.log('已结束');
					this.setBuy1(true);
					return;
				}
				//定义保存倒计时时间
				let m, s;
				if (leftTime >= 0) {
					m = Math.floor((leftTime / 1000 / 60) % 60);
					s = Math.floor((leftTime / 1000) % 60);
					this.second = s;
					this.la = m + s;
					console.log(this.la, '计算');
					console.log(this.second);
					console.log(m, s);
					//倒计时赋值view
					this.countdown_time = `${m}:${s}`;
					this.timers = setTimeout(this.counTime, 1000);
					//显示动态时间效果
					if (s < 10) {
						return (this.countdown_time = `${m}:0${s}`);
						this.timers = setTimeout(this.counTime, 1000);
					}
					if (m < 10) {
						return (this.countdown_time = `0${m}:${s}`);
						this.timers = setTimeout(this.counTime, 1000);
					}
				}
			},
			search() {
				this.firstList = [];
				this.page = 1;
				this.limit = 10;
				this.loadingType = 'more';
				this.loadData();
			},
			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,
						name: obj.productname
					})
					.then(({
						data
					}) => {
						// obj.firstList = obj.firstList.concat(data);
						obj.firstList = data;
						console.log(obj.firstList, '123456789');
						// if (data.length == obj.limit) {
						// 	obj.loadingType = 'more';
						// 	obj.page++;
						// } else {
						// 	obj.loadingType = 'nomore';
						// }
					})
					.catch(e => {
						console.log(e);
					});
			},
			loadDataNext() {
				const obj = this;
				// if (obj.loadingType == 'nomore' || obj.loadingType == 'loading') {
				// 	return;
				// }
				// obj.loadingType = 'loading';
				auction_product({
						page: obj.page + 1,
						limit: obj.limit,
						id: obj.id,
						name: obj.productname
					})
					.then(({
						data
					}) => {
						// obj.firstList = obj.firstList.concat(data);
						// obj.firstList = data;
						// if (data.length == obj.limit) {
						// 	obj.loadingType = 'more';
						// 	obj.page++;
						// } else {
						// 	obj.loadingType = 'nomore';
						// }
						if (data.length === 0) {
							obj.isLast = false;
						} else {
							obj.isLast = true;
						}
						console.log(obj.isLast);
					})
					.catch(e => {
						console.log(e);
					});
			},
			toBack() {
				uni.navigateBack({});
			},
			nav(url) {
				uni.navigateTo({
					url
				});
			},
			last() {
				let that = this;
				if (this.page != 1) {
					this.page = this.page - 1;
					this.loadData();
					this.loadDataNext();
				} else {
					that.$api.msg('已经是第一页了');
				}
			},
			next() {
				let that = this;
				this.page = this.page + 1;
				if (this.isLast) {
					this.loadData();
					this.loadDataNext();
				} else {
					this.page = this.page - 1;
					that.$api.msg('已经是最后一页了');
				}
			},
			navToDetailPage(item) {
				if (item.status == '2') {
					return this.$api.msg('已售罄');
				}
				uni.navigateTo({
					url: '/pages/hall/porducthall?id=' + item.id + '&uid=' + this.id + '&name=' + this.name +
						'&peoplename=' + this.peoplename
				});
			}
		}
	};
</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 20rpx;

		.hotgoods-item {
			position: relative;
			width: 48%;
			background-color: #ffffff;
			border-radius: 12rpx;
			margin-bottom: 24rpx;

			&:nth-child(2n + 1) {
				margin-right: 24rpx;
			}

			.sell-out {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 150rpx;
				height: 130rpx;
				z-index: 2;
			}

			.image-wrapper {
				width: 100%;
				height: 330rpx;
				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;
				align-items: center;

				.price {
					font-size: 40rpx;
					color: #ff0000;
					font-weight: 500;
				}

				.over {
					font-size: 24rpx;
					color: #a199a1;
					font-weight: 500;
				}
			}
		}
	}

	.djs {
		margin: 90rpx auto 0;
		width: 700rpx;

		.djs-bg {
			margin: auto;
			width: 400rpx;
			height: 400rpx;

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

		.djs-font {
			margin-top: 20rpx;
			font-size: 32rpx;
			text-align: center;
		}

		.djs-main {
			margin-top: 20rpx;
			font-size: 40rpx;
			text-align: center;
			color: #fd3b39;
		}
	}

	.nav {
		.next {
			margin: 40rpx;
			width: 50%;
			background-color: #fd3b39;
			color: #ffffff;
			text-align: center;
			padding: 10rpx 0rpx;
			border-radius: 50rpx;
		}
	}
</style>