newmyj/pages/index/index.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.img" />
			</swiper-item>
		</swiper>
		<view class="hot-list-box">
			<view class="title-box flex">
				<view class="flex">
					<image class="hot margin-r-10" src="../../static/icon/hot.png" mode="scaleToFill"></image>
					<view class="title">
						热门装扮
					</view>
				</view>
				<navigator url="/pages/user/model/modelList?ishot=1">
					<view class="right flex">
						<text class="margin-r-10">
							更多
						</text>
						<image src="../../static/icon/next1.png" mode="scaleToFill" class="tip"></image>
					</view>
				</navigator>
			</view>
			<view class="hot-list">
				<view class="item" v-for="item in rmList">
					<view class="hot-image-box">
						<image class="hot-image" :src="item.img" mode="widthFix"></image>
					</view>
					<view class="hot-title clamp">
						{{item.title}}
					</view>
					<view class="hot-money flex flex-start">
						<view class="money">
							￥{{item.price}}
						</view>
						<view class="oldmoney">
							{{item.old_price}}
						</view>
					</view>
				</view>
				<view class="item-none" v-if="rmList.length<3" v-for="item in (3-rmList.length)">

				</view>
			</view>
			<view class="title-box flex">
				<view class="flex">
					<image class="hot margin-r-10" src="../../static/icon/hot.png" mode="scaleToFill"></image>
					<view class="title">
						精选推荐
					</view>
				</view>
				<navigator url="/pages/user/model/modelList?isrecommend=1">
					<view class="right flex">
						<text class="margin-r-10">
							更多
						</text>
						<image src="../../static/icon/next1.png" mode="scaleToFill" class="tip"></image>
					</view>
				</navigator>
			</view>

			<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 {
				//轮播图
				imagelist: [],
				// 推荐商品
				navList: {
					state: 1,
					text: '通知',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10, //每次信息条数
					count: 0, //总消息条数
				},
				// 热门商品
				rmList: []
			};
		},
		computed: {
			...mapState('user', [ 'userInfo']),
		},
		onLoad: function(option) {
			// #ifndef MP
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
			// #endif
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
			// 加载分享信息
			this.share()
		},
		onShow() {
			this.loadIndexs();
		},
		onReady() {},
		// 滚动到底部
		onReachBottom() {
			this.getShowTemplateList();
		},
		// #ifdef MP
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
			let shareObj = {
				title: this.shareData.title, // 默认是小程序的名称(可以写slogan等)
				path: url, // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: this.shareData.img,
				desc: this.shareData.synopsis,
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			// 判断是否可以邀请
			if (this.userInfo.uid) {
				shareObj.path += '&spread=' + this.userInfo.uid;
			}
			return shareObj;
		},
		// #endif
		methods: {
			share() {
				// console.log('加载分享');
				const that = this;
				// 请求获取默认数据
				share({}).then(({
					data
				}) => {
					// console.log('分享回调', data);
					that.shareData = data.data
				});
			},

			// 首页初始化
			loadIndexs() {
				const that = this;
				// 轮播图
				getBannerList().then(
					(res) => {
						that.imagelist = res.data.list
						console.log(res);
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
				// 获取热门
				getShowTemplateList({
					is_hot: 1,
					pageSize: 3
				}).then(
					(res) => {
						that.rmList = res.data.list
						console.log(res);
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
				that.getShowTemplateList();
			},
			// 获取模板列表
			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: 1,
						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%;
	}

	.indexBox {
		padding-bottom: 50rpx;
	}

	.top-swiper {
		margin: auto;
		width: 750rpx;
		height: 273rpx;
		padding: 0 $page-row-spacing;
		background: linear-gradient(to bottom, #ff629f, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1));

		.carousel-item {
			border-radius: 20rpx;

			.imageitem {
				// margin: auto;
				width: 690rpx;
				height: 273rpx;
			}
		}
	}

	.hot-list-box {
		padding: $page-row-spacing;
		background-color: #FFFFFF;
		padding-bottom: 0;

		.title-box {
			line-height: 1;

			.hot {
				width: 36rpx;
				height: 36rpx;

			}

			.title {
				font-size: $font-lg;
				font-weight: bold;
			}

			.right {
				font-size: $font-sm;
				color: #999999;

				.tip {
					width: 15rpx;
					height: 25rpx;
				}
			}
		}

		.hot-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			padding-top: 30rpx;
			padding-bottom: 15rpx;

			.item-none {
				width: 220rpx;
			}

			.item {
				padding: 13rpx;
				width: 220rpx;
				border-radius: 10rpx;
				border: 2px solid #F65486;
				margin-bottom: 16rpx;
				line-height: 1;
				.hot-title {
					color: $font-color-dark;
					font-size: $font-base;
					padding: 10rpx 0;
				}

				.hot-image-box {
					width: 194rpx;
					height: 228rpx;
					overflow: hidden;

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

				.hot-money {
					.money {
						font: $font-lg;
						color: #FF3342;
					}

					.oldmoney {
						color: #969696;
						font-size: $font-sm;
						text-decoration: line-through;
					}
				}
			}
		}

		.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;
				.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: 10rpx;
					}
					.list-money {
						.money {
							font: $font-lg;
							color: #FF3342;
						}
					}
				}
			}
		}
	}
</style>