luban-mall/pagesA/shop/shop.vue

<template>
	<view>
		<status-nav :ifReturn="true" navBarTitle="商品列表" :marginBottom="0"></status-nav>
		<!-- 商品排序、分类 -->
		<view class="pull-all-bg" v-if="sortShow || cateShow" @tap="closePullBg"></view>
		<view class="shop-nav flex" :style="{'top':topHieght+'px'}">
			<view class="shop-sort flex" @tap.stop="openSort()">
				<text>{{sortList[sortIndex].name}}</text>
				<image src="/static/public/icon-shop.png" mode="widthFix"></image>
			</view>
			<view class="shop-cate flex" @tap.stop="openCate()">
				<text>{{cateList[cateIndex].title}}</text>
				<image src="/static/public/icon-shop.png" mode=""></image>
			</view>
			<view class="shop-sort-list flex" v-if="sortShow">
				<view class="shop-sort-item" :class="sortIndex == index?'cur':''" @tap.stop="checkSort(index)" v-for="(item,index) in sortList" :key="index">{{item.name}}</view>
			</view>
			<view class="shop-cate-list flex" v-if="cateShow">
				<view class="shop-cate-item" :class="cateIndex == index?'cur':''" @tap.stop="checkCate(index)" v-for="(item,index) in cateList" :key="index">{{item.title}}</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<scroll-view scroll-y class="shop-bg">
			<view class="shop-ul flex">
				<view class="shop-li" @tap="toDetail(item.id)" v-for="(item,index) in shopList" :key="index">
					<view class="img"><image :src="item.imgsrc" mode="widthFix"></image></view>
					<view class="txt clips2">{{item.title}}</view>
				</view>
			</view>
		</scroll-view>
		<!-- 暂无更多内容 -->
		<view class="more-txt" style="padding-bottom: 40rpx;" v-if="totalAll==total">暂无更多内容</view>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import {getCartNum,userInfoEv} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		components:{
			statusNav,
		},
		data() {
			return {
				scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
				newWidth:uni.getSystemInfoSync().windowWidth,
				topHieght: uni.getSystemInfoSync().statusBarHeight + 50,
				sortShow:false, //是否显示排序
				sortList:[], //排序列表
				sortIndex:0,
				cateShow:false, //是否显示分类
				cateList:[], //分类导航列表
				cateIndex:0,
				shopList:[], //商品列表
				total:0,
				flag:true,
				ifLoading:false,
				category_id:'', //分类id
				business_id:'', //商户id
				sort:'new' ,//排序
				page:1, //页数
				size:10, //数量
				total:0, //总数
				totalAll:-1, //计算总数
			}
		},
		computed:{
			...mapState({
				footHeight: state => state.moduleA.footHeight,
			}),
		},
		onLoad(op) {
			this.category_id = op.category_id;
			this.business_id = op.business_id;
			if(op.business_id){
				this.$requst.post('/api/index/change-business',{business_id:op.business_id}).then(res=>{
					if(res.code == 0){
						this.getShopScreen(); //查询商品分类
						userInfoEv();
					}
				})
			}else{
				this.getShopScreen(); //查询商品分类
				userInfoEv();
			}
		},
		onReachBottom(e) {
			if(this.shopList.length<this.total){
				this.page++;
				//查询商品列表
				this.getShopList();
			}
		},
		methods: {
			// 弹出排序选择
			openSort(){
				this.cateShow = false;
				if(!this.sortShow){
					this.sortShow = true;
				}else{
					this.sortShow = false;
				}
			},
			// 关闭排序选择
			closeSort(){
				this.sortShow = false;
			},
			// 选择排序
			checkSort(index){
				this.sortIndex = index;
				this.sort = this.sortList[this.sortIndex].value;
				// 关闭厂家选择
				this.closeSort();
				//查询商品列表
				this.getShopList();
			},
			// 弹出分类选择
			openCate(){
				this.sortShow = false;
				if(!this.cateShow){
					this.cateShow = true;
				}else{
					this.cateShow = false;
				}
			},
			// 关闭分类选择
			closeCate(){
				this.cateShow = false;
			},
			// 选择分类
			checkCate(index){
				this.cateIndex = index;
				this.category_id = this.cateList[this.cateIndex].value;
				// 关闭厂家选择
				this.closeCate();
				//查询商品列表
				this.getShopList();
			},
			// 关闭弹窗
			closePullBg(){
				this.closeSort();
				// 关闭厂家选择
				this.closeCate();
			},
			
			// 查询筛选条件
			getShopScreen(){
				let params = {
					category_id:this.category_id,
					business_id:this.business_id
				}
				this.$requst.post('/api/spu/condition',params).then(res=>{
					if(res.code==0) {
						this.sortList = res.data[0].children; //排序
						this.cateList = res.data[1].children; //分类
						for(let key in this.cateList){
							if(this.cateList[key].value == this.category_id){
								this.cateIndex = key;
							}
						}
						//查询商品列表
						this.getShopList();
					}
				})
			},
			
			// 查询商品列表
			getShopList(){
				uni.showLoading({
					title: '加载中'
				});
				this.ifLoading = true;
				let params = {
					page:this.page,
					size:this.size,
					category_id:this.category_id,
					sort:this.sort
				}
				this.$requst.post('/api/spu/list',params).then(res=>{
					if(res.code==0) {
						this.total = res.data.total;
						let newArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id:item.id,
								imgsrc:item.cover, 
								title:item.name
							}
							newArr.push(obj);
						})
						this.shopList = this.shopList.concat(newArr);
						if(this.shopList.length == this.total){
							this.totalAll = this.total;
						}
					}
					uni.hideLoading();
				})
			},
			
			// 跳转详情页
			toDetail(id) {
				uni.navigateTo({
					url:`/pagesA/shop/detail?id=${id}&source=shop`
				})
			},
		}
	}
</script>

<style>
	
</style>