mnsx/pages/index/index.vue

<template>
	<view class="container">
		<!-- 轮播图 start -->
		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item v-for="(item, index) in bannerList" :key="index" class="carousel-item"
				@click="navto(item.url)">
				<image class="topImg" :src="item.pic" mode="scaleToFill" />
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		<view class="user-section">
			<view class="user-info-box">
				<view class="detail" @click="navTo('/pages/set/userinfo')">
					<view class="portrait-box">
						<image class="portrait" :src="userInfo.avatar || '/static/error/missing-face.png'"></image>
					</view>
					<view class="info-box">
						<view class="username">{{ userInfo.nickname || '游客' }}</view>
						<view class="font-size-sm">升级会员享收益</view>
					</view>
				</view>
				<view class="config text-white ">
					某娘粉丝
				</view>
			</view>
			<view class="upVipBox flex margin-t-20">
				<image class="upViewTip" src="../../static/img/indexUpVipIcon.png" mode="scaleToFill"></image>
				<view class="flex-grow-true padding-c-10 flex">
					<view>
						<view class="font-size-base text-default">购买会员礼包成为会员</view>
						<view class="font-size-sm text-gray">每月赠送33元积分,下单抵扣当钱花</view>
					</view>
					<view class="font-size-sm">
						<text>详情</text>
						<text class="font-size-base">＞</text>
					</view>
				</view>
			</view>
		</view>
		<swiper class="content-swiper" autoplay="true" duration="400" interval="10000" @change="swiperChange">
			<swiper-item v-for="(item, index) in bannerList" :key="index" class="nav"
				@click="navto(item.url)">
				<image class="contentImg" :src="item.lovely" mode="scaleToFill" />
			</swiper-item>
		</swiper>
		<view class="cate-section flex">
			<view class="cate-item flex" v-for="item in menus" @click="navto(item.url)">
				<view class="img-wrapper flex">
					<image :src="item.pic" mode=" scaleToFill"></image>
				</view>
				<view class="item-title">全部商品</view>
			</view>
			<!-- <view class="cate-item flex" @click="navto('/pages/index/artDetail?id=1')">
				<view class="img-wrapper flex">
					<image src="../../static/index/in2.png" mode=""></image>
				</view>
				<view class="item-title">公司介绍</view>
			</view>
			<view class="cate-item flex" @click="openKf">
				<view class="img-wrapper flex">
					<image src="../../static/index/in3.png" mode=""></image>
				</view>
				<view class="item-title">联系客服</view>
			</view>
			<view class="cate-item flex" @click="navto('/pages/index/storeList')">
				<view class="img-wrapper flex">
					<image src="../../static/index/in6.png" mode=""></image>
				</view>
				<view class="item-title">本地门店</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		loadIndexs,
	} from '@/api/index.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		interceptor
	} from '@/utils/loginUtils';
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				// 轮播图
				bannerList: [],
				// 中间轮播图
				lovely:[],
				menus:[],

			};
		},
		computed: {
			...mapState(['loginInterceptor']),
			...mapState('user', ['userInfo', 'checkedStore', 'des', 'latlng', 'hasLogin'])
		},
		async onLoad(option) {
			let obj = this;
			// #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
			//获取当前位置
			await this.loadData();

		},
		onShow() {
			// 判断是否强制登录
			if (this.loginInterceptor && !this.hasLogin) {
				// 登录拦截
				interceptor();
			}
			if (this.userInfo.uid) {
				console.log(this.userInfo);
				getUserInfo({})
					.then(({
						data
					}) => {
						this.setUserInfo(data);
						if (this.userInfo.store_info.length != 0) {
							this.isAdmin = true;
						}
					})
					.catch(e => {
						console.log(e);
					});
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		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: '子臣餐饮数字化服务平台', // 默认是小程序的名称(可以写slogan等)
				path: url + '?scene=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '',
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj;
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},
			// 请求载入数据
			async loadData() {
				loadIndexs({})
					.then(({
						data
					}) => {
						this.bannerList = data.banner;
						this.lovely = data.lovely;
						this.menus = data.menus;
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			// 轮播图跳转
			navto(item) {
				// #ifdef H5
				console.log(url.indexOf('http'), 'banner');
				if (url.indexOf('http') >= 0) {
					window.location.href = url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: url
				});
			},
		}
	};
</script>

<style lang="scss">
	.container {
		height: 100%;
		background-color: $page-color-base;
	}

	.content-box {
		height: 100%;
	}

	.user-section {
		position: relative;
		width: 690rpx;
		margin: 0 30rpx;
		margin-top: -100rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;

		.upVipBox {
			padding: 12rpx;
			background-color: #F5F5F5;
			border-radius: 10rpx;

			.upViewTip {
				height: 78rpx;
				width: 78rpx;
			}
		}

		.user-info-box {
			position: relative;
			height: 100%;
			width: 100%;
			color: white;
			display: flex;
			justify-content: space-between;
			z-index: 10;

			.detail {
				display: flex;
				// justify-content: space-between;
				width: 100%;

				.portrait-box {
					height: 80rpx;
					width: 80rpx;

					.portrait {
						width: 100%;
						height: 100%;
						border: 5rpx solid #fff;
						border-radius: 50%;
					}
				}

				.info-box {
					margin: auto 20rpx;
					color: $font-color-dark;

					.username {
						font-size: $font-lg;
						// height: 100%;
					}
				}
			}

			.config {
				flex-shrink: 0;
				line-height: 1;
				padding-top: 5rpx;
				margin: auto 0;
				padding: 16rpx 34rpx;
				border-radius: 26rpx;
				font-size: $font-sm;
				background-color: #E896B3;
				text-align: center;
			}
		}
	}

	.top-swiper {
		width: 750rpx;
		height: 580rpx;
		.topImg {
			width: 750rpx;
			height: 580rpx;
		}
	}
	.content-swiper{
		background-color: #FFFFFF;
		margin: 20rpx 30rpx;
		width: 690rpx;
		height: 238rpx;
		border-radius: 15rpx;
		.contentImg {
			width: 690rpx;
			height: 238rpx;
		}
	}
	.cate-section {
		justify-content: flex-start;
		background-color: #fff;
		padding: 30rpx 10rpx;
		margin: 20rpx 30rpx 0rpx 30rpx;
		flex-wrap: wrap;
		border-radius: 15rpx;
		.cate-item {
			flex-grow: 0;
			width: 33.3%;
			flex-direction: column;
			text-align: center;
			align-items: center;
			justify-content: center;
			padding-bottom: 20rpx;
			.img-wrapper {
				width: 90rpx;
				height: 90rpx;
				border-radius: 20rpx;
				position: relative;
	
				image {
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
	
			.item-title {
				margin-top: 15rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #6B4216;
			}
		}
	}
</style>