luban-mall/pages/tabbar/kit/kit.vue

<template>
	<view class="pad-b150">
		<status-nav :ifReturn="false" navBarTitle="套件" :marginBottom="20"></status-nav>
		<!-- 套件列表 -->
		<view class="kit-list">
			<view class="kit-item" @tap.stop="toDetail(item.id)" v-for="(item,index) in kitList" :key="index">
				<view class="kit-title">{{item.name}}</view>
				<view class="kit-compose">
					<text v-for="(item1,index1) in item.series" :key="index1">{{item1.name}}+</text>
					<text>组合</text>
				</view>
				<view class="kit-img">
					<image :src="item.cover" mode="widthFix"></image>
				</view>
				<view class="compose-list-bg">
					<view class="compose-list flex" v-if="item.series.length>0" :style="{width:item.series.length*270-22+'rpx'}">
						<view class="compose-item" v-for="(item2,index2) in item.series" :key="index2">
							<view class="compose-img">
								<image :src="item2.cover" mode="widthFix"></image>
							</view>
							<view class="compose-title clips1">{{item2.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 暂无更多内容 -->
		<view class="more-txt" v-if="totalAll == total">暂无更多内容</view>
		<!-- 购物车btn -->
		<enter-cart></enter-cart>
		<!-- 底部tab -->
		<foot-tab current="2"></foot-tab>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import enterCart from '@/components/enter-cart/enter-cart.vue';
	// 底部组件
	import footTab from '@/components/foot-tab/foot-tab.vue';
	import {getCartNum} from '@/jsFile/public-api.js';
	import { mapState } from 'vuex'//引入mapState
	export default {
		components:{
			statusNav,
			enterCart,
			footTab
		},
		data() {
			return {
				scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
				newWidth:uni.getSystemInfoSync().windowWidth,
				kitList:[], //套件列表
				page:1, //页数
				size:10, //数量
				total:0, //总数
				totalAll:-1, //计算总数
				category_id:0, //分类id
				sort:'new', //排序
			}
		},
		computed:{
			...mapState({
				footHeight: state => state.moduleA.footHeight,
			}),
		},
		onLoad(op) {
			if(op.business_id){
				this.$requst.post('/api/index/change-business',{business_id:op.business_id}).then(res=>{
					if(res.code == 0){
						this.getKitEv();
					}
				})
			}else{
				this.getKitEv();
			}
		},
		onReachBottom(e) {
			if(this.kitList.length<this.total){
				this.page++;
				//查询套件列表
				this.getKitEv();
			}
		},
		// 分享到微信
		onShareAppMessage() {
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		// 分享到朋友圈
		onShareTimeline(res){
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		methods: {
			// 查询套件列表
			getKitEv(){
				uni.showLoading();
				let params = {
					page:this.page,
					size:this.size,
					category_id:this.category_id,
					sort:this.sort
				}
				this.$requst.post('/api/spu/series',params).then(res=>{
					if(res.code==0) {
						this.total = res.data.total;
						let newArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id:item.id,
								cover:item.cover, 
								name:item.name,
								series:item.series
							}
							newArr.push(obj);
						})
						this.kitList = newArr;
						if(this.kitList.length == this.total){
							this.totalAll = this.total;
						}
					}
					uni.hideLoading();
				})
			},
			// 跳转详情页
			toDetail(id) {
				uni.navigateTo({
					url:'/pages/tabbar/kit/detail?id='+id
				})
			},
		}
	}
</script>

<style>
	
</style>