zd2.0/pages/mall/mall.vue

<template>
	<view class="indexBox">
		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item v-for="item in imagelist" class="carousel-item" @click="navTo(item.url)">
				<image class="imageitem" :src="item.pic" />
			</swiper-item>
		</swiper>
		<view class="hot-list-box">
			<view class="list-box">
				<view class="list" v-for="(item,index) in navList.orderList" @click="navTo('/pages/product/product?id=' + item.id)">
					<view class="list-image-box">
						<image class="list-image" :src="item.image" mode="widthFix"></image>
					</view>
					<view class="list-content">
						
					<view class="list-title clamp2">
						{{item.store_name}}
					</view>
					<view class="list-money flex flex-start">
						<view class="money">
							￥{{item.price*1}}
						</view>
						<view class="money old">
							￥{{item.ot_price*1}}
						</view>
					</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="navList.loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		loadIndexs
	} from '@/api/index.js';
	
	import {
		groomList
	} from '@/api/product.js';
	
	import {
		share
	} from '@/api/wx';
	export default {
		data() {
			return {
				//轮播图
				imagelist: [],
				// 推荐商品
				navList: {
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10, //每次信息条数
				},
				// 热门商品
				rmList: []
			};
		},
		onLoad: function(option) {
			this.getPage();
		},
		onShow() {
			this.loadIndexs();
		},
		onReady() {},
		// 滚动到底部
		onReachBottom() {
			this.getPage();
		},
		methods: {
			share() {
				// console.log('加载分享');
				const that = this;
				// 请求获取默认数据
				share({}).then(({
					data
				}) => {
					// console.log('分享回调', data);
					that.shareData = data.data
				});
			},

			// 首页初始化
			loadIndexs() {
				const that = this;
				// 轮播图
				loadIndexs().then(
					(res) => {
					 that.imagelist=res.data.banner
						console.log(res,'index');
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
			},
			// 获取数据
			getPage(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';
				
					groomList({
							page: navItem.page,
							limit: navItem.limit
						},3)
						.then(({
							data
						}) => {
							let arr = data.list.map(e => {
								return e;
							});
							navItem.orderList = navItem.orderList.concat(arr);
							// console.log(navItem.orderList);
							navItem.page++;
							if (navItem.limit == data.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%;
	}

	.indexBox {
		padding-bottom: 50rpx;
	}

	.top-swiper {
		margin: auto;
		width: 750rpx;
		height: 273rpx;
		.carousel-item {
			.imageitem {
				width: 750rpx;
				height: 273rpx;
			}
		}
	}

	.hot-list-box {
		padding: $page-row-spacing;
		background-color: #FFFFFF;
		padding-bottom: 0;
		.list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			padding-top: 30rpx;
			padding-bottom: 20rpx;

			.list {
				box-shadow: 0px 0px 20rpx 0px rgba(50,50,52,0.06);
				border-radius: 15rpx;
				width: 330rpx;
				margin-bottom: 30rpx;
				.list-image-box {
					height:330rpx;
					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;
							&.old{
								font-size: $font-sm;
								color: $font-color-light;
								text-decoration:line-through ;
							}
						}
					}
				}
			}
		}
	}
</style>