newyqg/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">{{ 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"><image src="../../static/img/djs.png" mode=""></image></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>