mnsx/pages/index/index.vue

<template>
	<view class="container">
		<!-- 轮播图 start -->
		<swiper class="top-swiper" autoplay="true" duration="400" interval="10000">
			<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" @click="navto(item.url)">
				<image class="upViewTip" src="../../static/img/indexUpVipIcon.png" mode="scaleToFill"></image>
				<view class="flex-grow-true padding-c-10 flex" @click="navto('/pages/index/Vipgift')">
					<view>
						<view class="font-size-base text-default">购买会员礼包成为会员</view>
						<view class="font-size-sm text-gray">每月赠送积分,下单抵扣当钱花</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">
			<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/product/product?id=' + item.id)">立即抢购</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);
				})
				.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(url) {
			// #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: 20rpx;
		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>