leave-unused/pages/idle/idle.vue

<template>
	<view class="pad-x120" v-if="isLoading">
		<!-- 头部 -->
		<status-nav :ifReturn="false" :navBarTitle="pageTitle" :estate="1" :ifCenter="false"></status-nav>
		<!-- 轮播 -->
		<view class="index-top">
			<swiper-pu newRadius="0" :bannerList="bannerList" newHeight="320rpx" :isplay='isplay'></swiper-pu>
		</view>
		<!-- 商品分类 -->
		<goods-cate @changeCateEv="changeCateEv"></goods-cate>
		<!-- 商品列表 -->
		<goods-list :goodsList="goodsList"></goods-list>
		<!-- 没有更多 -->
		<view class="no-more mar-s20 font24 color-99" v-if="goodsList.length==total">没有更多数据了</view>
		<!-- 发布按钮 -->
		<release-btn></release-btn>
		<!-- 尾部 -->
		<tabbar></tabbar>
	</view>
</template>
<script>
	import swiperPu from '@/components/swipers/swiper-pu';
	import goodsCate from '@/components/goods-cate/goods-cate.vue';
	import goodsList from '@/components/goods-list/goods-list.vue';
	import releaseBtn from '@/components/release-btn/release-btn.vue';
	import tabbar from '@/components/tabbar/tabbar';
	export default {
		components:{
			swiperPu,
			goodsCate,
			goodsList,
			releaseBtn,
			tabbar
		},
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				pageTitle:'', //页面标题
				bannerList:[],//轮播图
				goodsList:[], //商品列表
				category_id:0, //分类id
				keyword:'', //关键词
				page:1, //页数
				size:10, //条数
				total:0, //总数
				isLoading:false, //是否加载完成
				area_id:0, //小区id
			}
		},
		onLoad() {
			if(uni.getStorageSync('area_id')&&uni.getStorageSync('area_name')){
				this.area_id = uni.getStorageSync('area_id');
				this.pageTitle = uni.getStorageSync('area_name')+'-闲置商品';
				// 查询商品列表
				this.getGoodsList(this.category_id);
			}else{
				uni.navigateTo({
					url:'/pagesA/estate/estate?estate=1'
				})
			}
			// 获取banner列表
			this.getBannerList();
		},
		onShareAppMessage(res) {
			let shareObj = {
				title:'小区闲置',
				path: uni.getStorageSync('page-path-options'),
				imageUrl:'/static/share-logo.png',
			}
			// 返回shareObj
			return shareObj;
		},
		onShareTimeline(res){
			let shareObj = {
				title:'小区闲置',
				path: uni.getStorageSync('page-path-options'),
				imageUrl:'/static/share-logo.png',
			}
			// 返回shareObj
			return shareObj;
		},
		onReachBottom(e) {
			if(this.goodsList.length<this.total){
				this.page++;
				// 查询商品列表
				this.getGoodsList(this.category_id);
			}
		},
		onHide() {
			clearTimeout(this.playTimer);
			this.isplay =false;
		},
		onPullDownRefresh() {
			this.page = 1;
			// 查询商品列表
			this.getGoodsList(this.category_id);	
			// 关闭下拉刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			// 获取轮播图事件
			getBannerList(){
				this.$requst.get('/api/v1/common/slides',{position:'home-banner'}).then(res=>{
					if(res.code==0){
						console.log(res,'轮播图列表')
						res.data.forEach(item=>{
							let isVideo = false
							if(item.type!='img') isVideo = true;
							let banObj = {
								imgSrc:item.src,
								url:item.url,
								isVideo:isVideo,
								poster:item.src,
							}
							this.bannerList.push(banObj);
						})
					}
				})
			},
			// 查询商品列表
			getGoodsList(id){
				uni.showLoading({
					title:'加载中'
				})
				let params = {
					page:this.page,
					size:this.size,
					area_id:this.area_id,
					category_id:id
				}
				if(this.page==1) this.goodsList = [];
				this.$requst.get('/api/v1/goods/list',params).then(res=>{
					if(res.code == 0){
						console.log(res,'闲置商品列表')
						this.total = res.data.total;
						let goodsArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id:item.id,
								cover:item.cover,
								name:item.title,
								original_price:item.original_price,
								price:item.price
							}
							goodsArr.push(obj)
						})
						this.goodsList = this.goodsList.concat(goodsArr);
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			// 分类选择事件
			changeCateEv(category_id) {
				this.category_id = category_id;
				// 查询商品列表
				this.getGoodsList(this.category_id);
			}
		}
	}
</script>
<style scoped>
	.no-more{
		text-align: center;
		line-height: 2;
	}
	/* 发布按钮 */
	.release-btn{
		justify-content: center;
		align-items: center;
		width: 90rpx;
		height: 90rpx;
		font-size: 50rpx;
		line-height: 80rpx;
		animation: scale_name 1s linear alternate infinite;
		position: fixed;
		right: 20rpx;
		bottom: 120rpx;
		z-index: 99;
	}
	.release-btn .img{
		width: 48rpx;
		height: 48rpx;
	}
	@keyframes scale_name {
		from {
			transform: scale(.9);
		}
		to {
			transform: scale(1.1);
		}
	}
</style>