martial-arts/pages/tabbar/shop/shop.vue

<template>
	<view>
		<status-container :ifReturn="false" titlet="产品列表">
			<view slot="content">
				<view class="posi-sticky" :style="{top:newtop+'px'}" style="margin-top: -20rpx;">
					<swiper-tab id="tab" :ifBetween="false" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
				</view>
				<view class="pad-zy20">
					<list ref="refproduct" @goDetail="goDetail"></list>
					<view class="" v-if="loading">
						<pitera :textStr="`${noMore && total > $refs.refproduct.list.length?'上滑加载更多':'到底了'}~~`" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
					</view>
				</view>
			</view>
		</status-container>
		<!-- 购物车图标 -->
		<view class="posi cart-box">
			<image @tap="goCart" class="" src="/static/tabbar/icon-cart.png" mode="" lazy-load></image>
			<view class="colf fon24 disjcac">{{cartNum}}</view>
		</view>
		<!-- 底部tab -->
		<foot-tab current="1"></foot-tab>
	</view>
</template>

<script>
	// 底部组件
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
	import list from '@/components/list.vue';
	import pitera from '@/components/nothing/pitera.vue';
	import { mapState } from 'vuex';
	import { checkCartNum } from '@/jsFile/public-api.js';
	export default {
		components:{
			'foot-tab' :footTab,
			swiperTab,
			list,
			pitera
		},
		data() {
			return {
				newtop:uni.getSystemInfoSync().statusBarHeight + 42,
				current:0,//当前分类索引
				dataList:[],//分类列表
				classId:'',//分类id
				page:1,
				size:10,
				total:0,
				noMore:false,//是否没有更多
				loading:false
			}
		},
		computed:{
			...mapState({
				cartNum: state => state.moduleA.cartNum
			})
		},
		onLoad() {
			// 调用获取分类列表
			this.getHomeCate();
			this.cartNumEv();
		},
		onReachBottom() {
			if(this.total!=this.$refs.refproduct.list.length){
				this.page++;
				// 调用获取商品产品列表
				this.getProductList();
			}
		},
		onShow() {
			uni.removeStorageSync('orderInfo');
			uni.removeStorageSync('skuList');
		},
		methods: {
			// 查询购物车数量
			cartNumEv(){
				checkCartNum().then(res=>{
					if(res.code==0){
						this.$store.commit('setCartNum',res.data.count);
					}
				})
			},
			// tab点击事件
			clickTab(index){
				this.current = index;
				this.page = 1;
				this.noMore = false;
				// 设置分类id
				this.classId = this.dataList[index].id;
				// 调用获取商品产品列表
				this.getProductList();
			},
			// 获取分类列表
			getHomeCate(){
				this.$requst.get('/api/spu/category',{type:'normal',need_all:1}).then(res=>{
					// 设置分类列表
					this.dataList = res.data;
					// 如果分类列表不为空
					if(this.dataList.length){
						// 设置分类id
						this.classId = this.dataList[0].id;
						// 调用获取商品产品列表
						this.getProductList();
					}
				})
			},
			// 获取商品产品列表
			getProductList(){
				this.loading = false;
				let params = {
					category_id:this.classId,
					page:this.page,
					size:this.size
				}
				this.$requst.post('/api/spu/list',params).then(res=>{
					if(res.code==0){
						// 设置总数
						this.total = res.data.total;
						if(this.page==1){this.$refs.refproduct.list=[];}
						// 设置产品列表
						this.$refs.refproduct.list = [...this.$refs.refproduct.list,...res.data.list];
						if(this.total==this.$refs.refproduct.list.length && this.page!=1){
							this.noMore = true;
						}
						this.loading = true;
					}
				})
			},
			// 去商品详情
			goDetail(id){
				if(this.$toolAll.tools.judgeAuth()) {
					uni.navigateTo({
						url:`/pagesB/shop-detail/shop-detail?id=${id}`
					})
				}
			},
			// 前往购物车
			goCart(){
				if(this.$toolAll.tools.judgeAuth()) {
					this.$toolAll.tools.goPage('/pagesB/cart/cart')
				}
			}
		}
	}
</script>

<style>

</style>