newmyj/pages/user/model/modelList.vue

<template>
	<view class="indexBox">
		<view class="hot-list-box">
			<view class="list-box">
				<view class="list" v-for="(item,index) in navList.orderList">
					<view class="list-image-box">
						<image class="list-image" :src="item.img" mode="widthFix"></image>
					</view>
					<view class="list-content">
						<view class="list-title clamp">
							{{item.title}}
						</view>
						<view class="list-money flex flex-start">
							<view class="money">
								￥{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="navList.loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		share
	} from '@/api/wx';
	import {
		getBannerList,
		getShowTemplateList
	} from '@/api/model.js';
	export default {
		data() {
			return {
				ishot:0,//判断是否热门
				isrecommend:0,//判断是否推荐
				// 商品列表
				navList: {
					state: 1,
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10, //每次信息条数
					count: 0, //总消息条数
				},
			};
		},
		onLoad: function(option) {
			if(option.isrecommend){
				uni.setNavigationBarTitle({
					title:'精品推荐'
				})
				this.isrecommend = option.isrecommend
			}else if(option.ishot){
				uni.setNavigationBarTitle({
					title:'热门装扮'
				})
				this.ishot = option.ishot
			}
			this.getShowTemplateList();
		},
		// 滚动到底部
		onReachBottom() {
			this.getShowTemplateList();
		},
		methods: {
			// 获取模板列表
			getShowTemplateList(source) {
				//这里是将订单挂载到tab列表下
				let navItem = this.navList;
				let state = navItem.state;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				getShowTemplateList({
						is_recommend: this.isrecommend,
						is_hot: this.ishot,
						page: navItem.page,
						pageSize: navItem.limit
					})
					.then(({
						data
					}) => {
						let arr = data.list.map(e => {
							return e;
						});
						navItem.orderList = navItem.orderList.concat(arr);
						navItem.page++;
						if (navItem.limit == arr.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
						}
						uni.hideLoading();
						this.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});

			},
			navTo(url) {
				if (url) {
					if (url.indexOf('http') > -1) {
						// #ifdef H5
						window.location.href = url
						// #endif
						// #ifdef APP
						plus.runtime.openURL(url)
						// #endif
					} else {
						uni.navigateTo({
							url: url
						})
					}
				}
			}
		},
	};
</script>

<style lang="scss">
	page,
	.indexBox {
		height: auto;
		min-height: 100%;
	}

	.hot-list-box {
		padding: $page-row-spacing;
		padding-bottom: 0;

		.list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			padding-bottom: 20rpx;

			.list {
				box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
				border-radius: 15rpx;

				.list-image-box {
					width: 330rpx;
					height: 420rpx;
					overflow: hidden;

					.list-image {
						width: 100%;
					}
				}

				.list-content {
					padding: 20rpx;
					line-height: 1;
					.list-title {
						color: $font-color-dark;
						font-size: $font-base;
						margin-bottom: 20rpx;
					}

					.list-money {
						.money {
							font: $font-lg;
							color: #FF3342;
						}
					}
				}
			}
		}
	}
</style>