leave-unused/pages/goods/goods.vue

<template>
	<view class="pad-x20" v-if="isLoading">
		<!-- 头部 -->
		<status-nav :ifReturn="true" navBarTitle="我的发布"></status-nav>
		<!-- 商品分类 -->
		<view class="goods-cate">
			<scroll-view scroll-x="true" :scroll-left="tabsScrollLeft" @scroll="scroll">
				<view class="cate-list flex" id="tab_list">
					<view class="cate-item background-white radius10" :class="currentIndex==-1?'background-blue color-ff':''" id="tab_item" @tap="changeCateEv(-1)">
						<view class="txt font24">全部</view>
					</view>
					<view class="cate-item background-white radius10" :class="index==currentIndex?'background-blue color-ff':''" id="tab_item" v-for="(item,index) in cateList" :key="index" @tap="changeCateEv(index)">
						<view class="txt font24">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 商品列表 -->
		<goods-list :goodsList="goodsList" :isOperate="true" @changeStateEv="changeStateEv"></goods-list>
		<!-- 没有更多 -->
		<view class="no-more mar-s20 font24 color-99">没有更多数据了</view>
		<!-- 发布按钮 -->
		<release-btn></release-btn>
	</view>
</template>
<script>
	import releaseBtn from '@/components/release-btn/release-btn.vue';
	import goodsList from '@/components/goods-list/goods-list.vue';
	export default {
		components:{
			releaseBtn,
			goodsList
		},
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				goodsList:[], //商品列表
				page:1, //页数
				size:10, //条数
				total:0, //总数
				isLoading:false, //是否加载完成
				flag:true, //改变状态
				//分类导航
				cateList:[], //分类列表
				currentIndex:-1, 
				scrollLeft:0, 
				tabsScrollLeft:0,
			}
		},
		onShow() {
			// 查询分类
			this.getCateList();
			// 查询商品列表
			this.getGoodsList(0);
		},
		onReachBottom(e) {
			if(this.goodsList.length<this.total){
				this.page++;
				// 查询商品列表
				this.getGoodsList();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			// 查询商品列表
			this.getGoodsList();	
			// 关闭下拉刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			// 查询分类
			getCateList(){
				if(this.page==1) this.goodsList = [];
				this.$requst.get('/api/v1/goods/category').then(res=>{
					if(res.code == 0){
						console.log(res,'物品分类列表')
						let cateArr = [];
						res.data.forEach(item=>{
							let obj = {
								id:item.id,
								name:item.title
							}
							cateArr.push(obj)
						})
						this.cateList = cateArr;
					}
				})
			},
			
			// 分类选择事件
			changeCateEv(index) {
				if(index !== this.currentIndex){
					this.currentIndex = index;
					// 查询商品列表
					this.page = 1;
					this.goodsList = [];
					this.getGoodsList(index==-1?0:this.cateList[index].id);
					// 分类切换效果
					if(index!==-1){
						this.setTabList();
					}
				}
			},
			
			// 分类切换效果
			setTabList() {
				this.$nextTick(() => {
					if (this.cateList.length > 0) {
						//计算左滑距离
						this.setLeft()
					}
				})
			},
			
			//计算左滑距离
			setLeft() {
				let lineLeft = 0;
				this.getElementData('#tab_list', (data) => {
					let list = data[0];
					this.getElementData('#tab_item', (res) => {
						let el = res[this.currentIndex]
						lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
						this.tabsScrollLeft = this.scrollLeft + lineLeft
					})
				})
			},
			
			// 获取DOM距离
			getElementData(el, callback) {
				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
					callback(data[0]);
				});
			},
			
			// 滚动
			scroll(e) {
				this.scrollLeft = e.detail.scrollLeft;
			},
			
			// 查询商品列表
			getGoodsList(id){
				uni.showLoading({
					title:'加载中'
				})
				let params = {
					page:this.page,
					size:this.size,
					category_id:id
				}
				if(this.page==1) this.goodsList = [];
				this.$requst.get('/api/v1/user/goods',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,
								status:item.status
							}
							goodsArr.push(obj)
						})
						this.goodsList = this.goodsList.concat(goodsArr);
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 更改显示状态
			changeStateEv(id,index){
				if(this.flag){
					this.flag =false;
					this.$requst.post('/api/v1/goods/set-status',{id:id,status:this.goodsList[index].status==0?1:0}).then(res=>{
						if(res.code == 0){
							console.log(res,'改变状态');
							if(this.goodsList[index].status==0){
								this.goodsList[index].status = 1;
								this.$toolAll.tools.showToast('已下架');
							}else{
								this.goodsList[index].status = 0;
								this.$toolAll.tools.showToast('已上架');
							}
						}
					})
					setTimeout(()=>{
						this.flag = true;
					},500)
				}
			},
			
			// 去详情页
			goDetail(id){
				uni.navigateTo({
					url:`/pages/index/detail?id=${id}`
				})
			},
		}
	}
</script>
<style scoped>
	/* 分类列表 */
	.goods-cate{
		padding: 20rpx 20rpx 0;
		margin: 0 auto;
		overflow: hidden;
	}
	.cate-list .cate-item{
		margin: 0 6rpx;
		padding: 5rpx 15rpx;
		white-space: nowrap;
	}
	.cate-list .cate-item:first-child{
		margin-left: 0;
	}
	.cate-list .cate-item:last-child{
		margin-right: 0;
	}
	.cate-list .cate-item>.img{
		width: 100rpx;
		height: 100rpx;
	}
	.cate-list .cate-item>.img image{
		width: 100%;
		min-height: 100%;
	}
	.cate-list .cate-item>.txt{
		line-height: 1.5;
		text-align: center;
	}
	/* 没有更多 */
	.no-more{
		text-align: center;
		line-height: 2;
	}
</style>