zd/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.img" />
			</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/user/model/model?mtype=' + item.id)">
					<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 {
		loadIndexs
	} from '@/api/index.js';
	import {
		share
	} from '@/api/wx';
	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) {
			// 获取缓存的用户id
			const user = uni.getStorageSync('userInfo')
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let shareObj = {
				title:  this.shareData.title, // 默认是小程序的名称(可以写slogan等)
				path: '/pages/index/index?scene=' + user.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;
				// 轮播图
				loadIndexs().then(
					(res) => {
						console.log(res,'index');
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
			},
			// 获取模板列表
			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;
		.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: 20rpx;
					}
					.list-money {
						.money {
							font: $font-lg;
							color: #FF3342;
						}
					}
				}
			}
		}
	}
</style>