mnsx/pages/index/index.vue

<template>
	<view class="container">
		<!-- 轮播图 start -->
		<swiper class="top-swiper" autoplay="true" duration="400" interval="10000" @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 indicator-dots indicator-color='rgba(255, 255, 255, .5)' indicator-active-color='#FFFFFF'
			class="content-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item v-for="(item, index) in activity" :key="index" class="nav" @click="navto(item.url)">
				<image class="contentImg" :src="item.pic" 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">{{item.name}}</view>
			</view>
		</view>
		<view class="activty padding-b-20">
			<view class="action-title flex">
				<image class="action-title-icon" src="../../static/img/indexTitleLeft.png" mode="heightFix"></image>
				<view class="margin-c-20">推荐商品</view>
				<image class="action-title-icon" src="../../static/img/indexTitleRight.png" mode="scaleToFill"></image>
			</view>
			<view class="action-title-tip">
				悦享套餐 格调生活
			</view>
		</view>
		<view class="productList" v-for="(item,ind) in hotgoods">
			<view class="tipLeft text-white font-size-base">
				立省￥{{item.ot_price-item.price}}
			</view>
			<image class="productImg" :src="item.image" mode="scaleToFill"></image>
			<view class="padding-c-20 padding-t-10 padding-b-20">
				<view class="product-name clamp">
					{{item.store_name}}
				</view>
				<view class="flex padding-t-10">
					<view class="mask">
						{{item.store_info}}
					</view>
					<view class="sales" v-if="item.sales>0">
						已售{{item.sales+item.unit_name}}
					</view>
				</view>
				<view class="flex padding-t-10">
					<view class="flex money">
						<view class="payMoney font-size-sm">
							￥
						</view>
						<view class="payMoney font-size-lg">
							{{item.price}}
						</view>
						<view class="oldMoney margin-l-10">
							{{item.ot_price}}
						</view>
					</view>
					<view class="buttomPlay text-white" @click.stop="navto('/pages/')">
						立即抢购
					</view>
				</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: [],
				// 中间轮播图
				activity: [],
				// 金刚区
				menus: [],
				// 首页推荐
				hotgoods: []
			};
		},
		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
					}) => {
						// banner轮播图
						this.bannerList = data.banner;
						// 中间轮播图
						this.activity = data.activity;
						// 金刚区
						this.menus = data.menus;
						// 商品推荐
						this.hotgoods = data.info.bastList;
					})
					.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;
		padding-bottom: 30rpx;
	}

	.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;
			font-weight: bold;

			.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;
						font-weight: bold;
						// 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;
		padding-bottom: 10rpx;
		margin: 20rpx 30rpx 0rpx 30rpx;
		flex-wrap: wrap;
		border-radius: 15rpx;

		.cate-item {
			flex-grow: 0;
			width: 25%;
			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: bold;
				color: #6B4216;
			}
		}
	}

	.activty {
		padding-top: 30rpx;

		.action-title {
			color: #EE2F72;
			font-weight: bold;
			justify-content: center;

			.action-title-icon {
				width: 20rpx;
				height: 12rpx;
			}
		}

		.action-title-tip {
			font-size: $font-sm;
			color: $font-color-light;
			text-align: center;
		}
	}

	.productList {
		margin: 0 30rpx 20rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
		position: relative;
		line-height: 1;
		.tipLeft{
			background-color:rgba(255, 51, 66, 1) ;
			border-radius: 100rpx;
			border-bottom-left-radius: 0rpx;
			padding: 15rpx 25rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 9;
		}
		.productImg {
			height: 330rpx;
			width: 690rpx;
		}
		.product-name{
			font-size: $font-base + 2rpx;
			font-weight: bold;
			color: $font-color-dark;
		}
		.mask,.sales{
			font-size: $font-sm;
			color: $font-color-light;
		}
		.money{
			align-items: flex-end;
			line-height: 0;
			.payMoney{
				color: #FF4C4C;
			}
			.oldMoney{
				text-decoration:line-through;
				color: $font-color-light;
				font-size: $font-base - 2rpx;
			}
		}
		.buttomPlay{
			font-size: $font-base - 2rpx;
			background-color:#EE2F72 ;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
		}
	}
</style>