medicine_app/pages/course/healthMarket.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="pageTitle"></z-nav-bar>
		<view class="learnBox box" >
			<view class="proBoxItem flexbox" v-if="proList.length > 0">
				<view class="item" v-for="(item, index) in proList" :key="index" @click="proClick(item)">
					<view class="img flexbox">
						<image :src="item.productImages" mode="widthFix"></image>
					</view>
					<text>{{item.productName}}</text>
				</view>
			</view>
					<u-divider v-show="status == 2" text="已加载全部"></u-divider>
					<u-divider v-show="status == 3" text="暂无数据"></u-divider>
					<u-divider v-show="status == 1" text="加载中..."></u-divider>
		</view>
		
		<public-module></public-module>
		<z-navigation></z-navigation>
		<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
		<!-- <music-play :playData="playData"></music-play> -->
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				tagId: null,
				pageTitle: '',
				proList: [],
				
				status:0, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
				page:1,
				flag:true, // 函数是否执行完
				bgiStyle: {
					background: '#fff'
				},
				scrollTop: 0,
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.tagId = e.id
			this.pageTitle = e.title
			console.log(e, '传入分类id')
			this.getData();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if(this.status != 2 && this.flag){
			this.page ++
			this.getData()	
			}		
			console.log('触底加载',this.page)
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			

		},
		components: {
			musicPlay
		},
		//方法
		methods: {
			proClick(v) {
				uni.navigateTo({
					url: `/pages/goods/index/index?navTitle=${v.title}&title=${v.title}&id=${v.productId}`,
					// url: `/pages/bookShop/commodityDetail?id=${item.productId}&title=${item.productName}`
				});
			},
			// 跳转
			onPageJump(url,thatId,title) {
				uni.navigateTo({
					url: `${url}?id=${thatId}&title=${title}`
				});
			},	
			getData() {
				// if(!this.flag){
				// 	console.log('正在执行，未完成')
				// 	return
				// }
				this.status = 1
				this.flag = false
				$http.request({
						url: "medical/labelAndMarket/getMarketShopProductList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"medicineMarketId": this.tagId,
							"limit": 12,
							"current": this.page,
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.result.records.length > 0) {
								var list = res.result.records
								this.proList = this.proList.concat(list)
								if(res.result.pages > this.page){
									this.status = 0
								}else{
									this.status = 2
								}
							} else if(this.page > 1){
								this.status = 2 // 加载完成
								
							}else{
							
								this.status = 3 // 暂无数据
							}
							console.log('status',this.status)
						}
						this.flag = true
					}).catch(e => {
						console.log(e,'数据报错')
					});
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	
	.proBoxItem {
		flex-wrap: wrap;
		padding: 20rpx;
		justify-content: space-between;
	
		.item {
			width: 48%;
			overflow: hidden;
	
			text {
				display: block;
				@include toe();
				font-size: 26rpx;
				padding: 20rpx 0;
			}
	
			.img {
				height: 400rpx;
				align-items: center;
				overflow: hidden;
				background-color: $imgBg ;
	
				image {
					width: 100%;
					height: 80rpx;
				}
			}
	
		}
	}
	
	.flexbox{display: flex; }
	.imgcontainer {
		background-color: $imgBg;
	}
	.box {
		background-color: #fff;
		@include pleft_right(10px);
		min-height: calc(100vh - 270rpx);
	}
	.newBox {
	
		.item {
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			@include ptop_bottm(10px);
			@include pleft_right(10px);
	
			@include mshadow(10px, 1) .imgcontainer {
				display: block;
				width: 110rpx;
				margin-right: 20rpx;
				// background-size: cover;
				// background-position: center;
				height: 200rpx;
				flex-grow: 1;
				// @include ptop_bottm(10px);
				overflow: hidden;
	
				// @include pleft_right(10px);
				image {
					width: 100%;
					height: 200rpx;
				}
			}
			.btn_box{ text-align: right;
				text{
					border-radius: 20rpx;
					padding: 3px 5px;  @include theme("btn_bg");
					font-size: 28rpx; color: #fff;
				}
			}
			.buyItems {
				width: 60%;
			}
	
			.jianjie {
				margin-top: 10rpx;
				font-size: 24rpx;
				@include bov();
				color: #9c9c9c;
			}
	
			.txt555 {
				font-size: 30rpx;
				color: #000;
				@include bov()
			}
		}
	}
	.learnBox {
		background-color: #fff;
		margin-top: 10px;
		@include ptop_bottm(10px);
		@include pleft_right(10px);
	
		.learn { flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 20rpx; 
	
			.item {
				width: 48%;margin-bottom: 16px;
	
				overflow: hidden;
	
				image {
					width: 100%;
					height: 200rpx;
				}
	
				.txt555 { display: block; text-align: center;
					height: 40rpx; width: 100%;
					line-height: 40rpx;
					@include bov(1);
					margin-top: 10rpx;
					font-size: 24rpx;
	
				}
	
			}
		}
	}
</style>